始めに

ES6記法とはJavaScriptの2015年バージョン(ES2015が正式名称)で実装された記法です。
変数や関数の仕様変更に加えて、モジュール機能の搭載によって、従来のJavasScriptの様々な問題点を克服した点が画期的です。
ライブラリであるReactはこのES6記法を前提にしているため、モダンJavaScriptを理解することは今後につながることだと思うので備忘録としてまとめたいと思います。

// varの変数宣言
var val1 = "varの変数定義";

//　上書き可能
val1 = "上書き可能";
console.log(val1)　// 出力結果→"上書き可能"

// 再宣言可能
var val1 = "再宣言可能";
console.log(val1)　// 出力結果→"再宣言可能"
-------------------------------------

// letの変数宣言
let val2 = "letでの変数宣言";

// 上書き可能
val2 = "上書き可能"
console.log(val2)　// 出力結果→"上書き可能"

//　再宣言不可
let val2 = "再宣言不可"
console.log(val2)　// 出力結果→エラー
-------------------------------------

// constの変数宣言
const val3 = "constでの変数宣言";

//　上書きと再宣言不可


// ただし、ハッシュや配列の値の更新は可能
const val4 = {name: "アナゴ",age: 25}
val4.name = "カツオ";
console.log(val4)　// 出力結果→{name: "カツオ",age: 25}

const val5 = ["dog", "cat"];
val5[0] = "bird";
val5.push("monkey");
console.log(val5)　// 出力結果→["dog", "cat"], "monkey";

2. テンプレート文字列

テンプレート文字列はバッククォーテーション（``）を使い文字列を表す方法です。
これにより、式展開が容易になりました。

${変数}で文字列として組み込むことが可能です。

test.js

const name = "anago";
const age = 25;

// 私の名前は〇〇です。年齢は〇〇です。と出力したい場合
//　従来の方法
const message1 = "私の名前は" + name + "です。年齢は" + age + "です。"

//テンプレート文字列
const message2 = `私の名前は${name}です。年齢は${age}です。`

3. アロー関数

アロー関数はES2015で追加された新しい関数の書き方です。
従来と違いfunctionを記述しません。
代わりに引数と =>を記述します。この=と>が矢印のように見えるためアロー関数と呼ばれています。

test.js

//従来の関数
function func1(str) {
    return str;
};
console.log(func1("func1です"));

// 上の関数の書き換え
const func1 = function(str) {
    return str;
};
console.log(func1("func1です"));
--------------------------------------

//アロー関数(functionは書かず、引数を書く)
const func2 = (str) => {
    return str;
};
console.log(func2("func2です。"));

// 上の例のように引数が一つのときは()を省略できる
const func2 = str => {
    return str;
};
console.log(func2("func2です。"));

// 関数の中の処理が一行で終わる単一式の場合はreturnを省略できる
const func2 = (str) => str;
console.log(func2("func2です。"));

// 実用例
const func3 = (num1, num2) => {
    return num1 + num2;
}
console.log(func3(10, 20));

4. 分割代入

分割代入とは、配列とオブジェクトを分解して、要素とプロパティ値をひとつひとつの変数に分解するための構文です。

例えば、次のようなコードがあったとします。

test.js

const myProfile = {
    name; "アナゴ",
    age: 25
};
const message1 = `名前は${myProfile.name}です。年齢は${myProfile.age}です。`;
console.log(message1);

上のコードの場合、名前と年齢を表示させるためにmyProfileを毎回打たなければならず、コードが冗長になってしまいます。そこで分割代入を用いてコードを簡潔化していきます。

test.js

// オブジェクトの分割代入
// プロパティを設定
const {name, age} = myProfile;
const message2 = `名前は${name}です。年齢は${age}です。`;
console.log(message2);

配列も同様に分割代入を使用できます。

test.js

// 従来の配列の取り出し
const myProfile = ['アナゴ', 25];
const message3 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}です。`;
console.log(message3);
-----------------------------------------------------------------------

// 分割代入
const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}です`;
console.log(message4);

5. デフォルト値

名前の通り関数の引数に予め、値を設定する機能です。
引数に何も与えられていない場合にデフォルトで値を出力させることができます。

test.js

const sayhello = (name) => console.log(`こんにちは${name}さん！`);
sayhello("アナゴ");
// "こんにちはアナゴさん!"と表示される

const sayhello = (name) => console.log(`こんにちは${name}さん！`);
sayhello();
// "こんにちはundifinedさん！"と表示される
--------------------------------------------------------------

//デフォルトの値を設定したいとき
const sayhello = (name = "ゲスト") => console.log(`こんにちは${name}さん！`);
sayhello();

// "こんにちはゲストさん！"と表示される

6. スプレッド構文

スプレッド構文は...を用いて配列やオブジェクトの要素を文字通り展開する構文です。
例えば、次のようなコードがあったとします。まずは配列の展開です。

配列の展開

test.js

//配列の展開
const arr1 = [1,2];
console.log(arr1);　// 出力結果→[1,2]
console.log(...arr1);　//出力結果→1 2

// このように...配列とすることで配列内の要素を展開することができます。

次に、２つの引数を受け取って値の合計値を出力する関数を用いて比較します。

test.js

const arr1 = [1,2];
const sumFunc = (num1, num2) => console.log(num1 + num2);

// 従来の方法
sumFunc(arr1[0], arr1[1]);

// スプレッド構文を用いた場合
sumFunc(...arr1);

配列をまとめる

test.js

//　配列をまとめる

// 配列arr2を宣言
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]

配列のコピー

test.js

//配列のコピー
const arr4 = [10, 20];
const arr5 = [30, 40];

const arr6 = [...arr4];
console.log(arr6) // 出力結果　→　[10, 20]

配列の結合

test.js

//配列の結合
const arr4 = [10, 20];
const arr5 = [30, 40];
const arr7 = [...arr4, ...arr5];
console.log(arr7);　// 出力結果　→　[10, 20, 30, 40]

7. mapメソッドとfilterメソッド

これらは配列の処理に関する機能です。
これらの機能により、従来の繰り返し処理のforなどを用いずに配列を処理することができます。

map構文

test.js

//従来の繰り返し処理
const nameArr = ["カツオ", "サザエ", "ワカメ"];

for (let index = 0; index < nameArr.length; index++) {
  console.log(nameArr[index]);
};
// 出力結果　→　カツオ　サザエ　ワカメ
------------------------------------------------------

//map構文（配列に対して使えるメソッド）
const nameArr = ["カツオ", "サザエ", "ワカメ"];
nameArr.map((name) => console.log(name));
// 出力結果　→　カツオ　サザエ　ワカメ

filter構文

filter構文はある条件に一致したものだけreturnして新しい配列を生成する関数です。
例えば、ある配列から奇数の数字だけ取り出して出力する関数を作りたい場合は
以下のように記述します。

test.js

//filter構文(returnで条件式を書き、条件に一致した要素を配列で返す)
const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);　// 出力結果　→　[1, 3, 5]

終わりに

ES6記法には他にも、class構文やPromissなど追加機能があるので、これからもモダンjavaScriptにどんどん触れて理解を深めたいと思います！

ES6記法に触れてみる

始めに

目次

1. letとconstによる変数定義

2. テンプレート文字列

3. アロー関数

4. 分割代入

5. デフォルト値

6. スプレッド構文

配列の展開

配列をまとめる

配列のコピー

配列の結合

7. mapメソッドとfilterメソッド

map構文

filter構文

終わりに