🦚
JavaScript - ES2015(ES6) 記法 - React で使いそうなもの
Reactを使い始めるにあたって ES2015 の書き方について復習した内容をまとめました。
まずはこれだけ理解しようという初級者向けの内容です。
以下のポイントに絞って書いていきます。
- 変数の宣言（let , const）
- テンプレート文字列
- アロー関数
- 分割代入
- デフォルト値
- スプレッド構文
- 配列の操作（map , filter）
変数の宣言（let , const）
var に加えて let, const が新しく使えるようになった。再代入や再宣言の制限ができる。
// var 再代入○ 再宣言○
var val = "aaa";
var val = "bbb";
val = "ccc";
console.log(val);
// let 再代入○ 再宣言×
let val = "aaa";
// let val = "bbb"; → SyntaxError
val = "ccc";
console.log(val);
// const 再代入× 再宣言×
const val = "aaa";
// const val = "bbb"; → SyntaxError
// val = "ccc"; → TypeError
console.log(val);
// const オフジェクト プロパティの変更は○
const obj = {
name: "taro",
age: 20
};
obj.name = "jiro";
// consot obj = {address: 'japan'}; → SyntaxError
console.log(obj);
// const 配列 値への変更や追加は○
const arr = ["dog", "cat"];
arr[0] = "bird";
arr.push("monkey");
console.log(arr);
テンプレート文字列
`` と ${} を使う事で文字列中で JS の変数を展開できる。
// テンプレート文字列
const name = "tom";
const age = 20;
console.log(`私の名前は、${name}です。年齢は、${age}です。`);
アロー関数
⇒ を使った関数を短く書く事ができる。
// 従来
function func1(str) {
return str + "です。";
}
// or
const func1 = function (str) {
return str + "てす。";
};
console.log(func1("a"));
// アロー関数
const func2 = (str) => {
return str + "ですね！";
};
// or １行なら return は不要
const func2 = (str) => str + "ですね！";
console.log(func2("a"));
分割代入
オブジェクトや配列で使いたいプロパティは抜き出して変数に入れることができる。
const obj = {
name: "Ichiro",
age: 50
};
// 分割代入（オブジェクト）
const { name, age } = obj;
const message2 = `私は ${name} です。歳は ${age}。`;
console.log(message2);
const arr = ["Jiro", 60];
// 分割代入（配列）
const [nameStr, ageNumber] = arr;
const message4 = `私は ${nameStr} です。歳は ${ageNumber}。`;
console.log(message4);
デフォルト値
関数のパラメータが無い場合でも値を設定できる。
const sayHello = (name = "ゲスト") => console.log(`こんにちは ${name} さん。`);
sayHello("Taro");
sayHello();
スプレッド構文
配列を展開したりまとめたりできる。
// 展開
const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr[0], arr[1]); // 3
sumFunc(...arr); // 3
// まとめる
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;
console.log(num1); // 1
console.log(num2); // 2
console.log(arr3); // [3, 4, 5]
// コピー
const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4];
console.log(arr6); // [10, 20]
const arr7 = [...arr4, ...arr5];
console.log(arr7); //[10, 20, 30, 40]
配列の操作（map , filter）
map や filter を使うと for を使わないで配列の値を操作できる。
// map や filter
const nameArr = ["田中", "山田", "佐藤"];
// 中身を表示
nameArr.map((name) => console.log(name));
// 順番も表示
nameArr.map((name, index) => console.log(`${index} 番目は ${name}です。`));
// 新しい関数作る
const nameArr2 = nameArr.map((name) => {
return name + "さん";
});
console.log(nameArr2); // ["田中さん", "山田さん", "佐藤さん"]
// 条件に合うものを取り出す
const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
return num % 2 === 1;
});
console.log(newNumArr); // [1, 3, 5]
まとめ
今回はReactでよく使うES2015の記法について書きました。
Reactのコードを読む上でこれらの内容は必須になるのでしっかり理解しておきたいですね。
Discussion