Wikibooks

JavaScript/ECMAScriptの変遷

< JavaScript

ECMAScriptは、JavaScriptの標準規格を定義する仕様です。以下は、ECMAScriptの主なバージョンにおける変遷の要点です。

ECMAScript 1（1997年）
最初のバージョンで、JavaScriptが初めて標準規格として定義されました。
ECMAScript 2（1998年）
軽微な修正が加えられ、仕様が一部改善されました。
ECMAScript 3（1999年）
大規模なアップデートで、try...catch文や正規表現、新しいエラーオブジェクトなどが導入されました。
ECMAScript 4が不採用となったため、このバージョンが長らく標準として使われ、ブラウザ上のJavaScriptエンジンや開発者の間で広くサポートされました。
ECMAScript 4（不採用）
制定されず、中断された仕様です。このバージョンの仕様策定が難航し、その後の進展がなかったため、採用されませんでした。
ECMAScript 5（2009年）
大規模なアップデートではなく、ECMAScript 3の改訂版としてリリースされました。
Strict Modeの導入
ECMAScript 5では、strict mode（厳格モード）が導入されました。Strict Modeでは、一部の不安全な操作や悪いプラクティスがエラーとして検出されるようになります。コードの先頭か関数の先頭に "use strict"; を追加することで有効にできます。
"use strict";
// strict modeでのコード
新機能
ECMAScript 5では、新機能として、Object.create()、Object.defineProperty()、Array.isArray()などが導入されました。これらの新機能を活用することで、より効率的なコーディングが可能です。
// ECMAScript 3
var obj = {};

// ECMAScript 5
var obj = Object.create(proto);
JSON オブジェクトの追加
ECMAScript 5では、JSON オブジェクトが標準でサポートされました。これにより、JSONのエンコードおよびデコードが簡単に行えるようになりました。
// ECMAScript 3
var data = eval('(' + jsonString + ')');

// ECMAScript 5
var data = JSON.parse(jsonString);
Function.prototype.bind の使用
Function.prototype.bind メソッドが導入され、関数の this の値を永続的にバインドできるようになりました。
// ECMAScript 3
var boundFunction = functionToBind.bind(context);

// ECMAScript 5
var boundFunction = functionToBind.bind(context);
get および set アクセサの使用
ECMAScript 5では、オブジェクトのプロパティに対して get および set アクセサを使用できるようになりました。これにより、プロパティへのアクセスや変更に特別な処理を追加できます。
// ECMAScript 5
var obj = {
    get myProperty() {
        return this._myProperty;
    },
    set myProperty(value) {
        this._myProperty = value;
    }
};
Object.freeze()、Object.seal()、Object.preventExtensions() の利用
ECMAScript 5では、Object.freeze()、Object.seal()、Object.preventExtensions() などのメソッドが追加され、オブジェクトの不変性や封印、拡張を制御できるようになりました。
// ECMAScript 5
var sealedObject = Object.seal(myObject);
ECMAScript 6（2015年） / ECMAScript 2015
大規模な変更が行われ、クラス、アロー関数、let/const、プロミス、ジェネレータなど多くの新機能が導入されました。
モジュールシステムも正式に採用され、JavaScriptの言語機能が大幅に強化されました。
新しい構文の導入
ECMAScript 6では、クラス、アロー関数、let/constなど、新しい構文が導入されました。これらの新構文を理解し、適切に使用する必要があります。
// ECMAScript 5
var x = function(x) {
    return x * 2;
};

// ECMAScript 6
const x = (x) => x * 2;
letおよびconstの使用
let と const は ECMAScript 6 で導入された変数宣言の新しいキーワードです。これらを使用することで、変数のスコープや再代入の挙動が従来の var とは異なります。
// ECMAScript 5
var counter = 0;

// ECMAScript 6
let counter = 0;
Arrow Functionの注意
アロー関数（Arrow Function）は、this の挙動が通常の関数と異なります。アロー関数内での this は、関数が定義されたコンテキストを捕捉します。
// ECMAScript 5
var self = this;
var func = function() {
    console.log(self);
};

// ECMAScript 6
const func = () => {
    console.log(this);
};
クラスの導入
ECMAScript 6では、クラスの導入により、オブジェクト指向プログラミングのサポートが向上しました。これまでのプロトタイプベースの継承よりもシンプルで分かりやすいコードを書くことができます。
// ECMAScript 5
function MyClass() {
    // constructor
}

// ECMAScript 6
class MyClass {
    // constructor
}
モジュールの使用
ECMAScript 6では、モジュールシステムが標準でサポートされ、モジュールを定義してエクスポート・インポートすることができます。
// ECMAScript 5
// モジュールが標準でサポートされていないため、グローバルスコープで変数を使っていた

// ECMAScript 6
// モジュールを使ってコードを構造化
import { myFunction } from './myModule';
IteratorとGeneratorの活用
ECMAScript 6では、イテレータとジェネレータが導入されました。これにより、簡潔で効率的な反復処理が可能になります。
// ECMAScript 5
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// ECMAScript 6
const arr = [1, 2, 3];
for (const item of arr) {
    console.log(item);
}
ECMAScript 2016（ES7）
毎年の小規模なアップデートの方針が始まり、ES6の拡張として導入された機能がいくつかありました。
ECMAScript 2017（ES8）
async/await、Object.entries() などが追加されました。
ECMAScript 2018（ES9）
Rest/Spread Properties、Promise.prototype.finally などの新機能が導入されました。
ECMAScript 2019（ES10）
Array.prototype.flat、Array.prototype.flatMap などが追加されました。
ECMAScript 2020（ES11）
BigInt型やPromise.allSettled()などが導入されました。
ECMAScript 2021（ES12）
String.prototype.replaceAll、WeakRef、FinalizationRegistryなどの新機能が導入されました。
ECMAScript 2022（ES13）
Array.prototype.at()、Object.hasOwn()、Top-level awaitなどの新機能が導入されました。
Top-level awaitの導入
モジュールのトップレベルで await キーワードを使用できるようになり、非同期処理の記述がより簡潔になりました。
// ECMAScript 2022
// モジュールのトップレベルで直接awaitが使える
const response = await fetch('https://api.example.com/data');
const data = await response.json();
Array.prototype.at()の使用
配列の要素にインデックスでアクセスする新しいメソッドが導入され、負のインデックスもサポートされるようになりました。
const array = [1, 2, 3, 4, 5];
// 最後の要素にアクセス
console.log(array.at(-1)); // 5
ただしこの機能には、仕様バグが有り、整数に変換できなかった場合をエラーとせず0番目の要素を返します。
ECMAScript 2023（ES14）
Array.prototype.findLast()、Array.prototype.findLastIndex()、Hashbang Grammar などが導入されました。
配列の逆順検索メソッド
配列を後ろから検索する findLast() と findLastIndex() メソッドが追加されました。
const array = [1, 2, 3, 4, 5];
const lastEven = array.findLast(num => num % 2 === 0); // 4
Hashbang Grammarのサポート
Unix系システムでスクリプトとして直接実行可能なJavaScriptファイルを作成できるようになりました。
#!/usr/bin/env node
// スクリプトのコード
ECMAScript 2024（ES15）
Promise.withResolvers()、配列の明示的なメソッドチェーン最適化、クラスブロックなどが導入される予定です。
Promise.withResolvers()の導入
プロミスの resolve と reject 関数を直接取得できる新しいメソッドが追加されます。
const { promise, resolve, reject } = Promise.withResolvers();
// promiseオブジェクトとresolve/reject関数を別々に扱える

ECMAScriptは現在も進化を続けており、毎年新しいバージョンがリリースされています。新しいバージョンでは、言語の機能やパフォーマンスが向上し、開発者がより効果的にコードを書けるようになります。

これらの進化により、JavaScriptはより強力で使いやすい言語となっています。各バージョンの新機能を適切に活用することで、より効率的な開発が可能になります。

ECMAScriptとJavaScriptの関係

編集

ECMAScript（European Computer Manufacturers Association Script）は、JavaScriptの標準規格を定義したもので、JavaScriptはこの規格に基づいて作られています。言い換えれば、JavaScriptはECMAScriptの実装の一つであり、ECMAScriptがJavaScriptの基盤となっています。

以下に、ECMAScriptとJavaScriptの関係について簡単に説明します。

ECMAScriptは標準規格
ECMAScriptは、欧州コンピュータ製造業者協会（ECMA）によって標準規格として策定された言語仕様です。ECMAScriptはバージョンごとに進化しており、新しい機能や構文が追加されます。
JavaScriptはECMAScriptの実装
JavaScriptは、ECMAScriptの実装の一つです。具体的には、WebブラウザやNode.jsなどで実行されるJavaScriptエンジンが、ECMAScriptの仕様に基づいて動作しています。JavaScriptはECMAScriptの標準仕様に従っていれば、さまざまな実行環境で動作することが期待されます。
ブラウザとECMAScript
Webブラウザでは、ECMAScriptに基づくJavaScriptエンジンが実装されています。各ブラウザ（Chrome、Firefox、Safariなど）は、独自のJavaScriptエンジンを使用していますが、これらは共通のECMAScriptの仕様に準拠しています。
ECMAScriptの進化とJavaScriptの実装
ECMAScriptは進化し続け、新しいバージョンが定期的にリリースされます。ブラウザやNode.jsはこれらの新しい機能や仕様の一部を実装し、JavaScript開発者はこれを利用してよりモダンで効果的なコードを書くことができます。

総じて、ECMAScriptはJavaScriptの基本的な仕様を定義する標準であり、JavaScriptはその標準に基づいた実装の一つです。JavaScript開発者はECMAScriptの仕様に注意しながらコードを書き、最新の言語仕様を利用して開発を進めることが一般的です。

"https://ja.wikibooks.org/w/index.php?title=JavaScript/ECMAScriptの変遷&oldid=265924" より作成