ES6 の概要

ECMAScript 2015 は、ES6 (ECMAScript 6) とも呼ばれ、JavaScript の大幅なアップデートであり、コーディングをより効率的で管理しやすくする新しい構文と機能が導入されています。 JavaScript は Web 開発に使用される最も人気のあるプログラミング言語の 1 つであり、ES6 の改良によりその機能が大幅に強化されています。

このガイドでは、関数を記述する強力な新しい方法である アロー関数に特に焦点を当てて、ES6 で導入された重要な機能について説明します。

ES6 の主な機能

1. let と const

ES6 では、変数を宣言する 2 つの新しい方法、let と const が導入されました。

• let: ブロック スコープの変数を宣言します。つまり、変数は宣言されたブロック内でのみ使用可能です。
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const: 再代入できない定数変数を宣言します。ただし、これによって変数が不変になるわけではありません。const で宣言されたオブジェクトは引き続きプロパティを変更できます。
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. アロー関数

ES6 の最も話題になっている機能の 1 つは、アロー関数です。これは、関数を作成するためのより短くて簡潔な構文を提供します。

#### 構文比較:

従来の関数 (ES5):

   var add = function(x, y) {
     return x   y;
   };

アロー関数 (ES6):

   const add = (x, y) => x   y;

アロー関数の違いは次のとおりです:

• 短い構文: 関数キーワードを記述する必要はありません。関数にステートメントが 1 つある場合は中かっこ {} を省略できます。
• 暗黙的な戻り値: 関数に式が 1 つだけ含まれている場合、その式の結果が自動的に返されます。
• このバインディングはありません: アロー関数には独自の this がないため、オブジェクト メソッドには適していません。

単一行の矢印関数の例:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

矢印関数はパラメータなしでも使用できます:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

複数行の関数の場合、中括弧 {} が必要であり、return ステートメントは明示的である必要があります:

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

アロー関数とこれ
重要な違いの 1 つは、これがアロー関数でどのように動作するかです。従来の関数とは異なり、アロー関数は独自の this をバインドしません。周囲のコンテキストから this を継承します。

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

上記の例では、setTimeout 内のアロー関数は、sayName メソッドからこれを継承し、person オブジェクトを正しく参照します。

3. 代入の構造化

構造を分割すると、配列またはオブジェクトから値を抽出し、より簡潔な方法で変数に割り当てることができます。

オブジェクトの構造化:

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

配列の構造化:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. 拡散演算子と剰余演算子 (...)

... 演算子を使用すると、配列を個々の要素に展開したり、複数の要素を 1 つの配列に集めたりすることができます。

• Spread: 配列を個々の要素に展開します。
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Rest: 複数の引数を配列に集めます。
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. 約束

Promises は、JavaScript で非同期操作を処理するために使用されます。 Promise は、現在、将来、または決して利用できない可能性がある値を表します。

例：

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

この例では、Promise は 1 秒後に解決され、then() メソッドが解決された値を処理します。

6. デフォルトパラメータ

ES6 では、関数パラメータのデフォルト値を設定できます。これは、パラメータが指定されていないか未定義の場合に便利です。

例：

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. 文字列メソッド (includes()、startsWith()、endsWith())

一般的なタスクを簡単にするために、新しいメソッドが文字列に追加されました:

• includes(): 文字列に指定された値が含まれているかどうかを確認します。
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith(): 文字列が指定された値で始まるかどうかを確認します。
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith(): 文字列が指定された値で終わるかどうかを確認します。
  

   console.log(str.endsWith("!")); // true
  

8. 配列メソッド (find()、findIndex()、from())

ES6 では、配列を操作するための新しいメソッドが導入されました:

• find(): 条件を満たす最初の要素を返します。
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex(): 条件を満たす最初の要素のインデックスを返します。
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. クラス

ES6 では、JavaScript にクラスが導入されました。これは、JavaScript の既存のプロトタイプベースの継承を超える構文糖です。クラスを使用すると、よりクリーンで理解しやすいオブジェクト指向プログラミングが可能になります。

例：

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

結論

ES6 は JavaScript を変革し、より効率的で使いやすくなりました。 Arrow Functions の導入により関数の構文が簡素化され、destructuring、promises、classes、spread 演算子などの新機能が追加されました。 により、開発者はよりクリーンで表現力豊かなコードを作成できます。初心者でも上級開発者でも、最新の JavaScript を記述するにはこれらの ES6 機能を理解することが不可欠です。

これらの概念をマスターすることで、現実世界のコーディングの課題に対処し、効率的でスケーラブルな Web アプリケーションを構築するための準備が整います。

GitHub の Arrow Functions プロジェクトをフォロー

参考文献

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements