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

(2023/12/24) この文書の原文は削除されました。以後は「ブロック開発の基本原理」以下を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

「ブロックエディターハンドブック」では JavaScript の例を「JSX」と「Plain」の2つの構文で示しています。

「Plain」は、トランスパイラステップなしで、WordPress でサポートするブラウザーの最小要件 と互換の JavaScript コードです。なお、トランスパイラステップは一般にビルドプロセスと呼ばれます。

「JSX」は、JavaScript の特定のバージョンを意味せず、最新の言語定義、そして、HTML と JavaScript を混ぜた JSX 構文 を指します。JSX を使用するとマークアップコードの読み書きが楽になりますが、ブラウザと互換のコードにトランスパイルするビルド手順が必要です。Webpack や Babel はこのトランスパイルを実行するツールです。

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

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

標準的な JavaScript とモダンなアプローチとの間の、一般的なコードの違いに関する説明と例については ESNext 構文ドキュメント を参照してください。

最終更新日: 2023年12月24日