一覧に戻る

モダンJavaScript (ES6+) で知っておくべき便利な機能 5選

モダンJavaScript (ES6+) で知っておくべき便利な機能 5選のブログへのリンク

JavaScriptは年々進化を続けており、現在では「ES6」以降の構文を使うのが当たり前となっています。これらを活用することで、コードの可読性が上がり、バグを減らすことができます。

今回は、日々の開発で役立つES6+の機能を5つ厳選して紹介します。

1. 分割代入 (Destructuring Assignment)

オブジェクトや配列からデータを簡単に取り出せる機能です。

const user = { name: 'Yamada', age: 30 };
// 従来
const name = user.name;
// ES6
const { name, age } = user;

2. アロー関数 (Arrow Functions)

関数を短く記述できるだけでなく、this の挙動が直感的になるというメリットがあります。

3. スプレッド構文 (Spread Syntax)

配列やオブジェクトのコピー、結合が非常に簡単になります。

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

4. テンプレートリテラル

文字列の中に変数を埋め込んだり、改行をそのまま記述したりできます。バッククォート(`)を使用します。

5. オプショナルチェーン (?.)

深い階層にあるプロパティにアクセスする際、途中のプロパティが存在しなくてもエラーにならずに undefined を返してくれる機能です。

まとめ

これらの機能は、ReactやVue.jsなどのモダンフレームワークでも頻繁に使用されます。基礎をしっかりと固めておくことで、スムーズな学習につながります。