JavaScript のバージョンとビルド手順

「ブロックエディターハンドブック」では JavaScript の例を「ES5」と「ESNext」の2つの構文で示しています。これらは JavaScript 言語標準定義のバージョン名です。その他にも「ES6」や「ECMAScript 2015」といった記述を見たことがあるかもしれません。これらの詳細については Wikipedia の記事 ECMAScript を参照してください。

ES5 コードは WordPress でサポートするブラウザーの最小要件 と互換です。

「ESNext」は JavaScript の特定のバージョンを意味しません。Next が表すとおり「動的」に、次の任意の言語定義を意味します。「ESNext」の機能は新しい機能や提唱された機能のためブラウザの中にはまだ実装していないものもあります。このためすべてのブラウザーで動作する構文にコードを変換する、追加のビルド手順が必要です。Webpack や Babel はこの変換を実行するツールです。

さらに、このハンドブックの ESNext コード例は、HTML と JavaScripto を混ぜた JSX 構文 を含みます。JSX を使用するとマークアップコードの読み書きが楽になりますが、互換コードに変換するビルド手順が必要です。

簡素化のため JavaScript チュートリアルでは ES5 定義を使用します。JSX は使用しません。ES5 のコードは追加のビルド手順を必要とせずブラウザーでそのまま動作します。多くの場合、単純なプラグインや実験であれば同様のアプローチで問題ないでしょう。そして、コードが大きく複雑になった際に ESNext に切り替えるのも良い考えです。ブロックエディターの大部分のコードやドキュメントは EXNext を使用します。

ESNext 構文を使用する開発環境をセットアップする方法については JavaScript ビルド手順のドキュメント を参照してください。

最終更新日: