[JS] 基礎文法

#コンソールに出力する

console.log();

#コメントアウトする

// console.log("hoge"); 


#計算する（算術演算子）

console.log(1 + 1); // 足算
console.log(1 - 1); // 引算
console.log(1 * 1); // 掛算
console.log(1 / 1); // 割算
console.log(1 % 1); // 割算の余り

#文字列を連結する

console.log("hoge" + "hoge");

#変数
let 変数名 = "hoge";
const 定数名 = "hoge";
// 「=」は、代入するという意味。

#関数

``関数を定義``
function 関数名 (引数) {
　処理
}
// 関数を呼び出す
関数名(引数に渡す値);

``アロー関数を定義``
const 関数名 = (引数) => {
　処理
}
// 関数を呼び出す
関数名(引数に渡す値);

``オブジェクトの値に、関数を代入する``
const 定数名 = {
　プロパティ名: () => {
　// 値の部分が処理
　}
}
// 関数の呼び出し
定数名.プロパティ名();


const infos = {
　number: () => {
　　console.log(100);
　}
}
infos.number();


``コールバック関数を定義する``
const printNumber = () => {
　console.log(100);
}

const infos = (number) => {
　// console.log("コールバック関数の呼び出し");
　number();
}
infos(printNumber);

#クラス

class クラス名 {
　処理（情報や動作）が入る
}

#インスタンス
class クラス名 {
　処理（情報や動作）が入る
}
const インスタンス名 = new クラス名();

---
class Number {
　// クラスは空
}
const number = new Number();
console.log(number);
// インスタンスにクラスが代入されているか確認する

---
クラスを出力/入力する

// クラスを出力する
export default クラス名;

// クラスを入力する
import クラス名 from '/パス/ファイル名’;

---
定数を出力/入力する
定数はひとつしか出力/入力できないため、複数の定数を出力/入力する場合は、名前付きエクスポート/名前付きインポートを使用します。


// 定数を出力する
export default 定数名;

// クラスを入力する
import 定数名 from '/パス/ファイル名';

// 名前付きエクスポート/名前付きインポート
export {定数名, 定数名};
import {定数名, 定数名} from '/パス/ファイル名';



#メソッド
class クラス名 {
　メソッド名() {
　// 処理が入る
　}
}
const インスタンス名 = new クラス名();
インスタンス名.メソッド名();

---
class Number {
　num() {
　　console.log(10);
　}
}
const number = new Number();
number.num();

#テンプレートリテラル
テンプレートリテラルとは、文字列の中で、${変数名} と記述すると、文字列の中に変数や定数を書き込むことができます。
テンプレートリテラルを使用するためには、文字列をバッククォート（`）で囲います。


let name = "hoge";
console.log(`私の名前は${name}です。`);

#比較演算子（関係演算子/等価演算子）
値同士を比較する記号のこと。条件分岐に使用されます。


//関係演算子
a > b // aはbより大きい値
a >= b // aはb以上の値
a < b // bはaより大きい値
a <= b // bはa以上の値
//等価演算子
a === b // aはbと等しい
a !== b // aはbと異なる

#代入演算子
右辺の値を左辺に代入する記号のこと。


num = 1; //代入
num += 1; //足算
num -= 1; //引算
num *= 1; //掛算
num /= 1; //割算
num %= 1; //割算の余り

#論理演算子
値同士を比較する記号のこと。条件分岐に使用され、複雑な条件を実行することができます。

``&&``
ある二つ以上の条件をすべて満たす場合に、値にtrueを返す。aかつb。


a === true && b === true

``||``
ある二つ以上の条件のいずれかを満たす場合に、値にtrueを返す。aまたはb。


a === false || b === true


``switch文``
もしある値が〇〇だったら●●を実行する、というプログラムのこと。

if文が条件式に処理を行うのに対して、switch文は値に処理を行います。

switch (値) {
　case 値a:
　　処理a
　　break; // 処理を終了させる。
　case 値b:
　　処理b
　　break; // 処理を終了させる。
　case 値c:
　　処理c
　　break; // 処理を終了させる。
　default:
　　a、b、c以外の処理
　　break; // 処理を終了させる。
}

#繰り返し処理

``while文``

while (条件式) {
  ブロック文 // 繰り返す処理
}


``for文``

for (変数の定義; 条件式; 変数を更新) {
  ブロック文 // 繰り返す処理
}

#配列
``配列を出力する``

const numbers = [10, 20, 30];
console.log(numbers);

``配列の要素をインデックス番号を指定して出力する``

const numbers = [10, 20, 30];
console.log(numbers[0]);

``配列の要素を更新する``

const numbers = [10, 20, 30];
numbers[0] = 100;
console.log(numbers[0]);

``配列の要素を繰り返し処理を使って出力する``

const numbers = [10, 20, 30];

// lengthメソッドで、配列の要素数を取得する
console.log(numbers.length);

for (let i = 0; i < numbers.length; i ++ ) {
  console.log(numbers[i])
}

#オブジェクトを出力する

const infos = {name: "hoge", number: 10};
console.log(infos.name); // プロパティnameを出力する

//このような書き方もできる
console.log(infos["name"]); // プロパティnameを出力する

#オブジェクトの要素を更新する

const infos = {name: "hoge", number: 10};
info.number =  20;
console.log(infos.number); // プロパティnumberを出力する

#メソッド
``pushメソッド``
配列に新しい要素を追加する。


const season = ["spring", "summer", "autumn"];
// console.log(season);
season.push("winter");
console.log(season);


``shiftメソッド``
配列の要素を削除する。


const season = ["spring", "summer", "autumn", "winter"];
//console.log(season);
season.shift("spring");
console.log(season);


``forEachメソッド``
配列の要素を取り出し、すべての要素に同じ処理を実行する。


const seasons = ["spring", "summer", "autumn","winter"];
// console.log(seasons);
seasons.forEach((season) => {
　console.log(season);
});

``findメソッド``
コールバック関数の処理のうち、その処理の条件に合う配列の「はじめの」要素を取り出す。


const seasons = [
　{id: 1, en: "spring", ja: "春"},
　{id: 2, en: "summer", ja: "夏"},
　{id: 3, en: "autumn", ja: "秋"},
　{id: 4, en: "winter", ja: "冬"}
];
// console.log(seasons);
const findSeasons = seasons.find((season) => {
　return season.id === 4;
});
console.log(findSeasons);


``filterメソッド``
コールバック関数の処理のうち、その処理の条件に合う配列の「すべての」要素を取り出す。


const seasons = [
　{id: 1, en: "spring", ja: "春"},
　{id: 2, en: "summer", ja: "夏"},
　{id: 3, en: "autumn", ja: "秋"},
　{id: 4, en: "winter", ja: "冬"}
];
// console.log(seasons);
const findSeasons = seasons.filter((season) => {
　return season.id % 2 === 0;
});
console.log(findSeasons);


``mapメソッド``
配列の要素にすべてに、関数内の処理を実行し、新しい配列を出力する。


const seasons = [
　{id: 1, en: "spring", ja: "春"},
　{id: 2, en: "summer", ja: "夏"},
　{id: 3, en: "autumn", ja: "秋"},
　{id: 4, en: "winter", ja: "冬"}
];
// console.log(seasons);
const findSeasons = seasons.map((season) => {
　return season.en + " : " + season.ja;
});
console.log(findSeasons);


#予約語
break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with