JavaScript標準仕様書（ES）とそのバージョンの解説

JavaScript標準仕様書(ES) / ES6

はじめに

JavaScriptの標準仕様書、ECMAScript（ES）について解説します。ESは、JavaScript言語の規格を定義する文書であり、言語の実装の一貫性を保証し、ブラウザやサーバーで同じように動作することを目的としています。

構成要素

• 言語仕様: JavaScriptの文法、データ型、演算子、制御構造などを定義
• API（標準ライブラリ）: JavaScriptの内蔵オブジェクトやメソッドの規格を定義。Array、String、Math、Dateなどの使用方法が含まれます。
• 互換性規定: 各種JavaScriptエンジンがES規格を実装する際に従うべき標準を提供

ES標準の主要バージョン

• ES3 (ECMAScript 3rd Edition): 1999年に発表されたES3は、JavaScriptの主要な基礎を整えたバージョンです。try/catch構文の追加、文字列と配列メソッドの拡張などが含まれます。
• ES5 (ECMAScript 5th Edition): 2009年に発表されたES5は、JavaScriptの安定性を大幅に向上させたバージョンです。strict mode、JSONオブジェクト、配列メソッド（forEach、map、filterなど）、Object関連メソッド（Object.create、Object.definePropertyなど）が導入されました。
• ES6 (ECMAScript 2015): 2015年に発表されたES6は、JavaScriptの重要な変化が起こったバージョンです。let、const、矢印関数、クラス、モジュール、テンプレートリテラル、Promiseなど多くの重要な機能が追加されました。ES6は、JavaScriptの発展に大きな転換点を提供したバージョンです。
• ES7 (ECMAScript 2016): ES6以降、2016年に発表されたES7では、Array.prototype.includesや指数演算子(*)などの新しい機能が導入されました。
• ES8 (ECMAScript 2017): ES8では、async/await、Object.entries()、Object.values()などが追加され、非同期コードの可読性と生産性を向上させました。
• ES9 (ECMAScript 2018): ES9では、非同期イテレーターとObjectのrest/spread演算子、Promise.finally()などが導入されました。
• ES10 (ECMAScript 2019): ES10では、Array.prototype.flat()、Object.fromEntries()、String.trimStart()、String.trimEnd()などの機能が追加されました。
• ES11 (ECMAScript 2020): ES11では、BigInt、null合体演算子(??)、オプショナルチェーン(?.)などの機能が導入されました。
• ES12 (ECMAScript 2021): ES12では、論理代入演算子(&&=、||=、??=)、WeakRef、Array.prototype.at()などが追加されました。
• ES13 (ECMAScript 2022): ES13では、トップレベルawait、Array.prototype.toSorted()、Object.hasOwn()、クラスフィールドとプライベートメソッドなどが含まれます。
• ES14 (ECMAScript 2023): ES14では、Array.findLast()、Array.findLastIndex()、Array.prototype.toSorted()、import assertionsなどが追加されました。

ES6

概要

ES6は、JavaScriptの重要なアップデートであり、多くの機能が追加されてコードの可読性と生産性が向上しました。

1. letとconst

   • ES6では、varの代わりにletとconstが導入されました。letはブロックスコープを持ち、constは定数を宣言する際に使用されます。これにより、変数を宣言する際に意図した範囲でのみ有効になるようにすることができ、コードの予測可能性と安全性が向上しました。

   let x = 10;
   const y = 20;
   

2. 矢印関数(Arrow Functions)

   • 矢印関数は、より簡潔な文法で関数を定義することができます。また、thisを親コンテキストからそのまま取得できるため、thisのバインディングが直感的です。

   const add = (a, b) => a + b;
   

3. テンプレートリテラル(Template Literals)

   • テンプレートリテラルは、文字列内に変数を挿入する際に${}構文を使用して、より可読性の高いコードを書くことができます。さらに、マルチライン文字列を簡単に書くことができます。

   const name = 'John';
   const greeting = `Hello, ${name}!`;
   

4. 分割代入(Destructuring)

   • 分割代入を使用して、配列やオブジェクトから値を簡単に抽出することができます。これにより、コードがより整理され、直感的になります。

   const person = { name: 'John', age: 30 };
   const { name, age } = person;
   

5. デフォルト引数(Default Parameters)

   • 関数の引数にデフォルト値を設定することができ、引数がなければデフォルト値が自動的に使用されます。

   function greet(name = 'Guest') {
       console.log(`Hello, ${name}!`);
   }
   

6. 配列メソッド(Spread, Rest)

   • スプレッド演算子を使用して、配列やオブジェクトを展開して新しい配列やオブジェクトを作成することができ、rest演算子を使用して、関数で残りの引数を配列として受け取ることができます。

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

7. クラス(Class)

   • ES6は、オブジェクト指向プログラミングをより簡単に実装できるようにclass構文を導入しました。クラスは、コンストラクタとメソッドを定義する方法でオブジェクトを扱うことができます。

   class Person {
       constructor(name, age) {
           this.name = name;
           this.age = age;
       }
       greet() {
           console.log(`Hello, my name is ${this.name}.`);
       }
   }
   

8. モジュール化(Modules)

   • ES6は、importとexport構文を導入して、JavaScriptファイル間でコードをモジュール化し、コードの再利用性を高めることができます。

   // math.js
   export function add(a, b) { return a + b; }
   
   // app.js
   import { add } from './math';
   

9. Promise

   • Promiseは、非同期作業を処理する新しい方法であり、コールバック地獄を避け、より整理された非同期コードを書くことができます。

   const fetchData = new Promise((resolve, reject) => {
       let success = true;
       if (success) resolve("Data fetched");
       else reject("Error fetching data");
   });
   

10. Symbol

    • Symbolは、ユニークな値を生成して、他の値との衝突を避ける一意の識別子を提供する新しいデータ型です。

    const unique = Symbol('description');