クイックスタート

ブロックを作成して登録するために必要なファイルの構造をスキャフォールドするために@wordpress/create-blockパッケージを使用すると、設定なしでwp-scriptsを使用した最新のJavaScriptビルドセットアップも得られますので、wp-scriptsをインストールしたり、アセットをエンキューしたりする心配はありません。詳細については、create-blockを始めるを参照してください。

インストール

コンピュータにNode.jsとnpmがインストールされていることを確認してください。まだの場合は、Node.js開発環境ガイドを確認してください。

次に、プロジェクトフォルダーを作成し、package.jsonファイル、buildフォルダー、およびsrcフォルダーが含まれていることを確認してください。srcフォルダーにはindex.jsファイルも含まれている必要があります。

package.jsonファイルを以前に作成していない場合は、ターミナルでプロジェクトフォルダーに移動し、npm initコマンドを実行します。インタラクティブなプロンプトが手順を案内します。お好みで設定してくださいが、「エントリーポイント」を尋ねられたら、build/index.jsと入力してください。

もちろん、wp-scriptsを使用してプロジェクトを設定する方法はたくさんありますが、これはBlock Editor Handbook全体で使用される推奨アプローチです。

最後に、次のコマンドを実行してwp-scriptsパッケージを開発依存関係としてインストールします: 

  1. npm install @wordpress/scripts --save-dev

インストールが完了すると、プロジェクトフォルダーは次のようになります: 

  1. example-project-folder/
  2. ├── build/
  3. ├── node_modules/ (autogenerated)
  4. ├── src/
  5. │   └── index.js
  6. ├── package-lock.json (autogenerated)
  7. └── package.json

基本的な使用法

インストールが完了したら、wp-scriptsに付属する事前定義されたスクリプトをpackage.jsonファイルのスクリプトセクションで参照することで実行できます。以下はその例です: 

  1. {
  2.    "scripts": {
  3.    "start": "wp-scripts start",
  4.    "build": "wp-scripts build"
  5.    }
  6. }

これらのスクリプトは、npm run {script name}コマンドを使用して実行できます。

wp-scriptsを使用したビルドプロセス

最も頻繁に使用する2つのスクリプトはstartとbuildで、これらはビルドステップを処理します。すべてのオプションについては、パッケージドキュメントを参照してください。

プロジェクトに取り組む際は、npm run startコマンドを使用してください。これにより、開発サーバーが起動し、変更が検出されるたびにプロジェクトが自動的に再ビルドされます。build/index.jsのコンパイルされたコードは最適化されないことに注意してください。

プロジェクトをデプロイする準備ができたら、npm run buildコマンドを使用します。これにより、コードが最適化され、プロダクション準備が整います。

ビルドが完了すると、build/index.jsにコンパイルされたJavaScriptファイルが作成されます。

ビルドプロセスでは、依存関係の配列とバージョン番号（キャッシュバスティング用）を含むbuild/index.asset.phpファイルも作成されます。このwp-scriptsビルドプロセスなしでブロックを登録するには、*.asset.php依存関係ファイルを手動で作成する必要があります（例を参照）。

アセットのエンキュー

  2. エディター内の他のコンテキストでファイルを手動でエンキューするには、[エディターでのアセットのエンキュー](/read/wordpress/ff1a78d0c8363ba3.md)ガイドを参照してくださいが、ここでは典型的な実装を示します。  
  5. ``````bash
  6. /**
  7.  * Enqueue Editor assets.
  8.  */
  9. function example_project_enqueue_editor_assets() {
  10.    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
  12.    wp_enqueue_script(
  13.    'example-editor-scripts',
  14.    plugins_url( 'build/index.js', __FILE__ ),
  15.    $asset_file['dependencies'],
  16.    $asset_file['version']
  17.    );
  18. }
  19. add_action( 'enqueue_block_editor_assets', 'example_project_enqueue_editor_assets' );
  20. `

エディターでファイルを手動でエンキューする例もあります。

次のステップ

  1.  <a name="maintaining-code-quality"></a>
  4. ### コード品質の維持
  6. 開発者がコードの品質を向上させるのを助けるために、`````wp-scripts`````にはESLintやPrettierなどのツールが事前に設定されています。ESLintはJavaScriptがベストプラクティスと[WordPressコーディング標準](/read/wordpress/f5b66f34a23fec88.md)に準拠していることを確認し、Prettierはコードを自動的にフォーマットします。利用可能なスクリプトには次のものが含まれます:  
  9. ``````bash
  10. {
  11.    "scripts": {
  12.    "format": "wp-scripts format",
  13.    "lint:css": "wp-scripts lint-style",
  14.    "lint:js": "wp-scripts lint-js",
  15.    }
  16. }
  17. `

定期的にコードをリンティングおよびフォーマットすることで、自分自身や他の開発者にとって機能的で明確かつ保守可能なコードを確保できます。

テストの実行

コードを書くことを超えて、その機能を検証することは重要です。wp-scriptsにはJavaScriptテストフレームワークであるJestが含まれており、エンドツーエンドおよびユニットテストスクリプトの両方があります: 

  1. {
  2.    "scripts": {
  3.    "test:e2e": "wp-scripts test-e2e",
  4.    "test:unit": "wp-scripts test-unit-js"
  5.    }
  6. }

ユニットテストは、関数などの個々のコードユニットが意図した通りに機能することを検証し、エンドツーエンド（E2E）テストは、実際のユーザーシナリオをシミュレートしてシステムのすべての部分がシームレスに連携して機能することを確認します。

高度な設定

wp-scriptsは堅実なデフォルト設定を提供しますが、より専門的なセットアップが必要な場合もあります。良いニュースは、wp-scriptsが非常に適応性が高いことです。たとえば、デフォルトのwebpack設定を拡張およびオーバーライドでき、ローダーやプラグインを追加したり、ビルドプロセスのほぼすべての部分を変更したりできます。この柔軟性により、プロジェクトが成長するにつれて、または要件が変わるにつれて、wp-scriptsを進化するニーズに合わせて調整できます。

すべての設定オプションについては、wp-scripts パッケージドキュメントを参照してください。

追加リソース