JavaScript基礎(ES2015以降)
JavaScript&TypeScriptを勉強する機会があったので、JavaScript ES2015以降の文法などを自分用にまとめました。
1.1 let, constでの変数宣言
let, constの変数宣言の基本
let: 再宣言不可、再代入(上書き)可能。
const: 再宣言不可、再代入(上書き)不可。
// letで変数定義 let var1 = "var1変数"; console.log(var1); // letは上書き可能 var1 = "var1を上書き"; console.log(var1); // letは再宣言不可 let var1 = "let変数"// (ブロック スコープの変数 'var1' を再宣言することはできません。ts(2451)) // constで変数定義 const var2 = "var2変数"; console.log(var2); // constは上書き不可 var2 = "var2を上書き"//定数であるため、'var2' に代入することはできません。ts(2588)
Constで定義した変数を変更できる例
オブジェクト型と呼ばれるデータ型に関してはconstで定義された変数でも、再代入(上書き)が可能になる。
プリミティブ型
- Boolean
- Number(数値)
- BigInt(巨大数値)
- 文字列
- undefined
- null
- Symbol(一意で不変な値)
オブジェクト型
- オブジェクト({}でくくられるもの)
- 配列([]でくくられるもの)
- 関数(function)
- プリミティブ型以外の変数
1.2 テンプレート文字列
- 従来の文字列記法
文字列と変数(JavaScript)は”+”でつないでいく。
const name = "山田"; const age = 24; console.log("私の名前は" + name + "です。年齢は" + age + "歳です。");
- テンプレート文字列
`(バッククォート)で囲む。${}で囲んだ中はJavaScriptのコードが書ける。
const name = "山田"; const age = 24; console.log(`私の名前は${name}です。年齢は${age}歳です。`);
1.3 アロー関数
アロー関数は以下のfuncのように定義する。
const func = (name) => { return `こんばんは。${name}さん`; }; const App = () => { const name = "山田"; console.log(func(name)); };
アロー関数の特徴的な省略記法
- 引数が1つの場合は括弧を省略できる。
const func = name => { return `こんばんは。${name}さん`; };
- 処理を単一行で返却する場合は、中括弧とreturnを省略できる。
const func = (name) => `こんばんは。${name}さん`;
複数行の返却でも、括弧でくくってまとめて省略することもできる。
const func = (name, age) => ( { name: name, age: age, } ); const App = () => { const name = "山田"; const age = 24; console.log(func(name, age)); };
1.4 分割代入
- オブジェクトの分割代入
const myProfile = { name: "山田", age: 24, }; // オブジェクトの分割代入 const { name, age } = myProfile; console.log(`こんにちは${name}さん。年齢は${age}歳ですね。`); // 別名でのオブジェクトの分割代入 const { name: newName, age: newAge } = myProfile; console.log(`こんにちは${newName}さん。年齢は${newAge}歳ですね。`); // 順序はなんでもよい const { age: age1, name: name1 } = myProfile; console.log(`こんにちは${name1}さん。年齢は${age1}歳ですね。`);
- 配列の分割代入
const myProfile = ["山田", 24]; // 配列の分割代入 const [name, age] = myProfile; console.log(`こんにちは${name}さん。年齢は${age}歳ですね。`); // 別名での配列の分割代入 const [newName, newAge] = myProfile; console.log(`こんにちは${newName}さん。年齢は${newAge}歳ですね。`); // 順序は固定(下記の結果は"こんにちは24さん。年齢は山田歳ですね。") const [age1, name1] = myProfile; console.log(`こんにちは${name1}さん。年齢は${age1}歳ですね。`);
1.5 デフォルト値
- 引数のデフォルト値
const sayHello = (name = "ゲスト") => console.log(`こんにちは${name}さん`); // こんにちは鈴木さん sayHello("鈴木"); // こんにちはゲストさん sayHello();
オブジェクト分割代入のデフォルト値
オブジェクトにnameというプロパティがなければ、”ゲスト”がnameに代入される。
const myProfile = { name: "鈴木", age: 40, }; const { name = "ゲスト", age } = myProfile; // こんにちは鈴木さん sayHello(name);
1.6 スプレッド構文
- 要素の展開
「…」というようにでドットを3つつなげて使う。配列に対して使用することで、要素を順番に展開できる。
const sumFunc = (num1, num2) => console.log(num1 + num2); const arr1 = [10, 20]; console.log(arr1); //[10,20] console.log(...arr1); //10 20 // 普通に配列の値を渡す sumFunc(arr1[0], arr1[1]); // 30 // スプレッド構文を使って要素を展開して渡す sumFunc(...arr1); //30
- 要素をまとめる
スプレッド構文は要素をまとめるという観点でも使用できる。
const arr2 = [10, 20, 30, 40, 50]; console.log(arr2); //[10,20,30,40,50] console.log(...arr2); //10 20 30 40 50 // 分割代入で残りをまとめる const [num1, num2, ...arr3] = arr2; console.log(num1); // 10 console.log(num2); // 20
- 要素のコピー、結合
スプレッド構文がよく使われる使用例。
const arr4 = [10, 20]; const arr5 = [30, 40]; // スプレッド構文を用いて配列のコピー const arr6 = [...arr4]; console.log(arr4); // [10,20] console.log(arr6); // [10,20] // スプレッド構文を用いて配列を結合 const arr7 = [...arr4, ...arr5]; console.log(arr7); // [10,20,30,40] const obj1 = { name: "yamada", age: 24 }; const obj2 = { name: "tanaka", age: 29 }; // スプレッド構文を用いてオブジェクトのコピー const obj3 = { ...obj1 }; console.log(obj1); // {name: "yamada", age:24} console.log(obj3); // {name: "yamada", age:24}
1.7 オブジェクトの省略記法
オブジェクトのプロパティ名と設定する変数名が同一の場合は省略できる。
const name = "山田"; const age = 24; // ユーザーオブジェクト const user = { name: name, age: age, }; console.log(user);
const name = "山田"; const age = 24; // ユーザーオブジェクト(省略記法) const user = { name, age, }; console.log(user);
1.8 map, filter
map関数: 配列を順番に処理して処理した結果を配列として受け取る
const nameArr = ["山田", "鈴木", "藤井"]; // 配列の全要素に"さん"を加えた配列を作成する const nameArr2 = nameArr.map((name) => { return name + "さん"; }); console.log(nameArr2);
filter関数: returnの後に条件式を記述し、一致するもののみ返す関数
const numArr = [1, 2, 3, 4, 5]; // 数字が格納された配列から奇数のみの配列を作成する const oddArr = numArr.filter((num) => { return num % 2 === 1; }); console.log(oddArr);
- indexを扱う場合
const nameArr = ["山田", "鈴木", "藤井"]; // mapで、indexを扱う const nameArr2 = nameArr.map((name, idx) => { console.log(`${idx + 1}番目は${name}さんです。`); });