KnowHub

ECMAScript 6 の概要

ECMAScript 6.0 (以下、ES6) は JavaScript 言語の次世代標準であり、2015 年 6 月に正式リリースされました。その目標は、JavaScript 言語を使用して複雑な大規模アプリケーションを作成できるようにし、エンタープライズ レベルの開発言語になることです。

ECMAScript と JavaScript の関係

よくある質問は、ECMAScript と JavaScript の間にはどのような関係があるのか​​、というものです。

この問題を明らかにするには、歴史を振り返る必要があります。 1996 年 11 月、JavaScript の作成者である Netscape は、JavaScript が国際標準になることを期待して、標準化団体 ECMA に JavaScript を提出することを決定しました。翌年、ECMA はブラウザ スクリプト言語の標準を規定した標準ドキュメント 262 (ECMA-262) の最初のバージョンをリリースし、この言語を ECMAScript と呼びました。このバージョンはバージョン 1.0 です。

この標準は当初から JavaScript 言語用に開発されましたが、2 つの理由から JavaScript とは呼ばれません。 1 つは Java は Sun の商標です。ライセンス契約によれば、JavaScript という名前を合法的に使用できるのは Netscape だけであり、JavaScript 自体は Netscape によって商標登録されています。次に、この言語の開発者が Netscape ではなく ECMA であることを示したいと思います。これは、この言語のオープン性と中立性を確保するのに役立ちます。

したがって、ECMAScript と JavaScript の関係は、前者が後者の仕様であり、後者が前者の実装であるということです (他の ECMAScript 方言には JScript と ActionScript が含まれます)。日常的な状況では、これら 2 つの単語は置き換え可能です。

ES6 と ECMAScript 2015 の関係

ECMAScript 2015 (略して ES2015) という用語もよく見られます。 ES6とどのような関係があるのでしょうか？

ECMAScript バージョン 5.1 が 2011 年にリリースされた後、バージョン 6.0 の作業が始まりました。したがって、ES6 という言葉の本来の意味は、JavaScript 言語の次のバージョンを指します。

ただし、このバージョンではあまりにも多くの文法機能が導入されているため、策定プロセス中に多くの組織や個人が新しい機能を提出し続けています。 1 つのリリースに導入されるすべての機能を含めることは不可能であることがすぐに明らかになりました。従来のアプローチでは、最初にバージョン 6.0 をリリースし、しばらくしてからバージョン 6.1、次にバージョン 6.2、バージョン 6.3 というようにリリースします。

しかし、標準設定者はこれを望んでいませんでした。彼らは、標準のアップグレードを定期的なプロセスにしたいと考えています。誰でも、いつでも新しい構文の提案を標準委員会に提出できます。標準委員会は毎月会合を開き、提案が受け入れられるかどうか、どのような改善が必要かを評価します。多くの会議を経て、提案が十分に成熟した場合、その提案は正式に規格に組み込まれることができます。これは、標準バージョンのアップグレードがローリング プロセスとなり、毎月変更されることを意味します。

標準委員会は最終的に、この標準を毎年 6 月にその年の正式バージョンとして正式にリリースすることを決定しました。次回以降はこのバージョンをベースに修正が加えられ、翌年6月までは当然新年版となります。この方法では、前のバージョン番号は必要なく、年のスタンプだけが必要になります。

ES6の最初のバージョンは2015年6月にリリースされ、正式名称は「ECMAScript 2015 Standard」（略称ES2015）です。 2016 年 6 月に、若干改訂された「ECMAScript 2016 Standard」(ES2016 と呼ばれる) が予定通りリリースされました。これは、2 つの違いが非常に小さいため (「含まれる」部分のみ)、このバージョンは ES6.1 バージョンとみなすことができます。配列インスタンスのメソッドとべき乗演算子が追加されており、基本的には同じ規格です。計画によれば、ES2017 規格は 2017 年 6 月にリリースされる予定です。

したがって、ES6 は歴史的な用語であると同時に一般的な用語でもあり、ES2015、ES2016、ES2017 などを含むバージョン 5.1 以降の JavaScript の次世代標準を意味します。一方、ES2015 は正式名称であり、特にリリースされた正式バージョンを指します。年の言語標準。本書で ES6 について言及する場合、通常は ES2015 標準を指しますが、「次世代 JavaScript 言語」一般を指す場合もあります。

文法提案の承認プロセス

誰でも言語標準の変更を標準委員会 (TC39 委員会とも呼ばれる) に提案できます。

新しい文法は、提案されてから正式な標準になるまで 5 つの段階を経る必要があります。各段階での変更には TC39 委員会の承認が必要です。

  • ステージ 0 - ストローマン (デモンストレーション ステージ)
  • ステージ 1 - 提案（コメント募集段階）
  • ステージ 2 - ドラフト (ドラフト段階)
  • ステージ 3 - 候補 (候補段階)
  • ステージ 4 - 完了 (最終段階)

提案がステージ 2 に入ることができる限り、その提案はほぼ確実に将来の正式な標準に含まれることになります。現在のすべての ECMAScript 提案は、TC39 公式 Web サイト GitHub.com/tc39/ecma262 で参照できます。

この本を書く目的の 1 つは、ECMAScript 言語の最新の進歩を追跡し、バージョン 5.1 以降のすべての新しい構文を導入することです。標準に組み込まれることが明らかまたは確実な新しい構文が導入されます。

ECMAScript の歴史

ES6 は最初から最終リリースまで 15 年かかりました。

前述したように、ECMAScript 1.0 は 1997 年にリリースされ、その後 2 年間で ECMAScript 2.0 (1998 年 6 月)、ECMAScript 3.0 (1999 年 12 月) が連続してリリースされました。バージョン 3.0 は業界で広くサポートされ、JavaScript 言語の基本的な構文を確立し、後続のバージョンに完全に継承されました。今日に至るまで、初心者が JavaScript を学習し始めるとき、実際には構文のバージョン 3.0 を学習していることになります。

2000 年に、ECMAScript 4.0 の作成が開始されました。このバージョンは最終的に失敗しましたが、その内容のほとんどは ES6 に継承されました。したがって、ES6 の開発の開始点は実際には 2000 年です。

なぜ ES4 が通過しなかったのでしょうか?このバージョンは過激すぎて ES3 への完全なアップグレードだったため、標準委員会の一部のメンバーはこれを受け入れたがりませんでした。 ECMA の Technical Committee 39 (TC39) は ECMAScript 標準の策定を担当しており、そのメンバーには Microsoft、Mozilla、Google などの大手企業が含まれています。

2007 年 10 月に ECMAScript のドラフト バージョン 4.0 がリリースされ、当初正式版は翌年 8 月にリリースされる予定でした。ただし、この基準を採用するかどうかについては、当事者間に重大な意見の相違があります。 Yahoo、Microsoft、Google を筆頭とする大企業は JavaScript の大幅なアップグレードに反対し、小規模な変更を主張していますが、JavaScript の作成者である Brendan Aich 氏が率いる Mozilla は現在の草案を主張しています。

2008 年 7 月、あまりにも多くの違いと次のバージョンにどの機能を含めるべきかについての激しい議論のため、ECMA は ECMAScript 4.0 の開発を中止し、既存の機能の改良を含む ECMAScript 3.1 としてその一部を公開することを決定しました。会議の雰囲気により、このバージョンのプロジェクト コード名は Harmony になりました。会議の直後、ECMAScript 3.1 は ECMAScript 5 に名前変更されました。

2009 年 12 月に、ECMAScript バージョン 5.0 が正式にリリースされました。 Harmony プロジェクトは 2 つに分割され、より実現可能なアイデアは JavaScript.next と名付けられ、開発が続けられました。その後、成熟度の低いアイデアは JavaScript.next.next として扱われ、今後開発される予定です。再度起動することを検討してください。 TC39 委員会の全体的な考慮事項は、ES5 は基本的に ES3 との互換性を維持し、主要な構文修正と新機能は JavaScript.next までに完了するというものです。当時、JavaScript.next は ES6 を指し、第 6 バージョンがリリースされた後は ES7 を指しました。 TC39 の判断では、ES5 は 2013 年半ばに JavaScript 開発の主流の標準となり、今後 5 年間はこの地位を維持するでしょう。

2011 年 6 月に、ECMAScript バージョン 5.1 がリリースされ、ISO 国際標準 (ISO/IEC 16262:2011) になりました。

2013 年 3 月に、ECMAScript 6 ドラフトは凍結され、新しい機能は追加されませんでした。新しい機能は ECMAScript 7 に組み込まれることが想定されています。

2013 年 12 月に、ECMAScript 6 ドラフトがリリースされました。その後、すべての関係者からのフィードバックを聞くための 12 か月の議論期間が続きます。

2015 年 6 月に ECMAScript 6 が正式に採用され、国際標準となりました。 2000年から15年が経ちました。

現在、主要なブラウザの ES6 サポートは https://compat-table.github.io/compat-table/es6/ で確認できます。 /)。

Node.js は JavaScript サーバー ランタイムです。 ES6 のサポートが強化されています。デフォルトでオンになっている機能に加えて、実装されているもののデフォルトではオンになっていない構文機能もいくつかあります。 Node.js でデフォルトで有効になっていない実験的な構文を表示するには、次のコマンドを使用します。

// Linux と Mac
$ ノード --v8-オプション grep ハーモニー |

// Windows
$ ノード --v8-オプション findstr ハーモニー |

Babel トランスコーダ

Babel は、ES6 コードを古いブラウザで実行できるように ES5 コードに変換できる、広く使用されている ES6 トランスコーダです。これは、既存の環境が ES6 をサポートしているかどうかを気にすることなく、ES6 でプログラムを作成できることを意味します。以下に例を示します。

// トランスコード前
input.map(アイテム => アイテム + 1);

//トランスコード後
input.map(関数 (項目) {
  アイテム + 1 を返します。
});

上記の元のコードはアロー関数を使用していますが、Babel はそれを通常の関数に変換して、アロー関数をサポートしていない JavaScript 環境でも実行できるようにします。

次のコマンドは、Babel をプロジェクト ディレクトリにインストールします。

$ npm install --save-dev @babel/core

設定ファイル .babelrc

Babel の設定ファイルは .babelrc で、プロジェクトのルート ディレクトリに保存されます。 Babel を使用する最初のステップは、このファイルを構成することです。

このファイルは、トランスコーディング ルールとプラグインを設定するために使用されます。基本的な形式は次のとおりです。

{
  「プリセット」: [],
  「プラグイン」: []
}

「presets」フィールドでは、次の公式ルール セットが提供されており、必要に応じてインストールできます。

# 最新のトランスコーディング ルール
$ npm install --save-dev @babel/preset-env

# トランスコーディングルールに反応する
$ npm install --save-dev @babel/preset-react

次に、これらのルールを .babelrc に追加します。

  {
    「プリセット」: [
      "@babel/env",
      「@babel/プリセット反応」
    ]、
    「プラグイン」: []
  }

以下のすべての Babel ツールとモジュールを使用する前に、最初に .babelrc を記述する必要があることに注意してください。

コマンドラインのトランスコーディング

Babel は、コマンド ライン トランスコーディング用のコマンド ライン ツール @babel/cli を提供します。

インストールコマンドは以下の通りです。

$ npm install --save-dev @babel/cli

基本的な使い方は以下の通りです。

# トランスコード結果を標準出力に出力
$ npx バベル example.js

#トランスコーディング結果をファイルに書き込む
# --out-file または -o パラメータで出力ファイルを指定します
$ npx babel example.js --out-file COMPLETE.js
# または
$ npx babel example.js -o コンパイル済み.js

# ディレクトリ全体をトランスコードする
# --out-dir または -d パラメーターは出力ディレクトリを指定します
$ npx babel src --out-dir lib
# または
$ npx babel src -d lib

# -s パラメータはソースマップファイルを生成します
$ npx babel src -d lib -s

バベルノード

@babel/node モジュールの babel-node コマンドは、ES6 をサポートする REPL 環境を提供します。 Node の REPL 環境のすべての機能をサポートし、ES6 コードを直接実行できます。

まず、このモジュールをインストールします。

$ npm install --save-dev @babel/node

次に、babel-node を実行して REPL 環境に入ります。

$ npx バベルノード
> (x => x * 2)(1)
2

babel-node コマンドは ES6 スクリプトを直接実行できます。上記のコードをスクリプト ファイル es6.js に記述し、直接実行します。

# es6.js コード
# console.log((x => x * 2)(1));
$ npx バベルノード es6.js
2

@babel/レジスタモジュール

@babel/register モジュールは require コマンドを書き換えてフックを追加します。それ以降、「require」を使用して「.js」、「.jsx」、「.es」、および「.es6」サフィックスを持つファイルをロードするたびに、それらは最初に Babel でトランスコードされます。

$ npm install --save-dev @babel/register

使用する場合は、最初に @babel/register をロードする必要があります。

// インデックス.js
require('@babel/register');
require('./es6.js');

これにより、「index.js」を手動でトランスコードする必要がなくなります。

$ノードインデックス.js
2

@babel/register は、現在のファイルではなく、require コマンドによってロードされたファイルのみをトランスコードすることに注意してください。さらに、リアルタイムトランスコーディングであるため、開発環境での使用にのみ適しています。

###ポリフィル

デフォルトでは、Babel は新しい JavaScript 構文のみを変換し、Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise、その他のグローバル API などの新しい API は変換しません。オブジェクト、およびグローバル オブジェクトで定義された一部のメソッド (「Object.assign」など) はトランスコードされません。

たとえば、ES6 では、「Array」オブジェクトに新しい「Array.from」メソッドが追加されます。 Babel はこのメソッドをトランスコードしません。この方法を機能させたい場合は、core-js と regenerator-runtime (後者はジェネレーター関数のトランスコーディングを提供します) を使用して、現在の環境に shim を提供できます。

インストールコマンドは以下の通りです。

$ npm install --save-dev core-js regenerator-runtime

次に、次の 2 行のコードをスクリプトの先頭に追加します。

'core-js' をインポートします。
import 'regenerator-ランタイム/ランタイム';
// または
require('core-js');
require('regenerator-runtime/runtime');

Babel には、デフォルトではトランスコードを行わない API が多数あります。詳細なリストについては、「babel-plugin-transform-runtime」モジュール (https://github.com/babel/babel/blob) の [settings.js] を参照してください。 /master/packages/babel -plugin-transform-runtime/src/runtime-corejs3-settings.js) ファイル。

ブラウザ環境

Babel はブラウザ環境でも使用でき、@babel/standalone モジュールによって提供されるブラウザ バージョンを使用して、ウェブページ。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// ES6 コード
</script>

Web ページは ES6 コードをリアルタイムで ES5 に変換するため、パフォーマンスに影響を与えることに注意してください。運用環境では、トランスコードされたスクリプトをロードする必要があります。

Babel は、ES6 コードを ES5 コードにオンラインで変換できる REPL オンライン コンパイラー を提供しています。変換されたコードは、ES5 コードとして Web ページに直接挿入して実行できます。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

次の章