ブロックエディターでの JavaScript の利用

Topics

  • JavaScript ビルドプロセス
  • ビルドプロセスなしの JavaScript
  • その他の情報

ブロックエディターで JavaScript を利用する場合、ほとんどのケースでは JavaScript ビルドプロセスを推奨します。ビルドプロセスを使用するとコードの中で ESNext や JSX (他にもあります) の構文や機能を使え、ほとんどのブラウザに対応したコードを作成できます。

JavaScript ビルドプロセス

“ESNext” は、JavaScript の最新の構文と機能を指す動的な名前です。“JSX” は、React プロジェクトによって作成された JavaScript のカスタム構文拡張で、使い慣れた HTML タグに似た構文を使用して JavaScript を書けます。

ブラウザは ESNext や JSX の構文を解釈、実行できないため、これらの構文をブラウザが理解できるコードに変換する、変換ステップが必要です。

“webpack” はプラグインで拡張可能なツールです。JavaScript を処理し、ブラウザで実行可能な、コンパイルされたバンドルを作成します。“Babel” は JavaScript をあるフォーマットから別のフォーマットに変換します。Babel は ESNext や JSX を実環境で使用可能な JavaScript に変換する webpack プラグインです。

@wordpress/scripts パッケージはこれらのライブラリを抽象化して、開発を標準化、簡素化します。webpack や Babel の設定のために詳細を処理する必要はありません。wp-scripts 入門をチェックしてください。

特に、wp-scripts パッケージでは、JavaScript モジュールを使用してコードをさまざまなファイルに分散し、ビルドプロセスの最後で2、3のバンドルされたファイルを取得できます (を参照)。

ビルドプロセスの図解を開く

適切な package.json スクリプト を使用すると、production (本番) モードと development (開発) モードの両方で、wp-scripts を使用してビルドプロセスを起動できます。

  • npm run build – “production” モードビルド – このプロセスではコードがミニファイ (縮小) され、ブラウザでのダウンロードが速くなります。
  • npm run start – “development” モードビルド – このプロセスは、バンドルされているファイルのコードをミニファイせず、ファイルのソースマップファイルを作成します。またソースファイルに変更がないかを監視するプロセスを実行し続け、開発中にリビルドします。

wp-scripts に自身のカスタム webpack.config.js を指定することで、ニーズに合わせてビルドプロセスをカスタマイズできます。

Top ↑

ビルドプロセスなしの JavaScript

ビルドプロセスなしでの JavaScript の使用は、要件の少ないコード開発 (特に JSX を必要としないコード開発) では、もう一つの良い選択肢かもしれません。

ビルドプロセスなしの場合、wp グローバルオブジェクトから直接メソッドにアクセスし、手動でスクリプトをエンキューしなければなりません。WordPress JavaScript パッケージ には wp グローバル変数 を通してアクセスできますが、この wp オブジェクトを通して使用したいすべてのスクリプトには、登録時、パッケージのハンドルを依存配列に追加する責任があります。

そのため、例えばスクリプトがブロックバリエーションの登録に “blocks” パッケージの registerBlockVariation メソッドを使用したい場合、wp-blocks ハンドルを依存配列に追加して、スクリプトがアクセスしようとしたときに wp.blocks.registerBlockVariation が定義されていることを保証する必要があります (を参照)。

投稿やサイトの編集中に、ブラウザの開発ツールで wp.data.select('core/editor').getBlocks() を実行してみてください。コンソールからエディタ全体を利用できます。

enqueue_block_editor_assets フックと、関連する標準的な wp_enqueue_script (そして wp_register_script) を使用してエディター用の JavaScript アセットをエンキューし、wp 経由でこれらのパッケージにアクセスできます ( を参照)。詳細はエディター内でのアセットのエンキューを参照してください。

Top ↑

その他の情報

原文

最終更新日: