ハウツーガイド - 開発プラットフォーム（Development Platform）

UIコンポーネント
開発スクリプト
UIコンポーネント

UIコンポーネント

［WordPressコンポーネントパッケージ］(https://developer.wordpress.org/block-editor/reference-guide/components/)には、プロジェクトで使用できる一連のUIコンポーネントが含まれています。利用可能なコンポーネントと設定のインタラクティブガイドについては、［WordPress Storybookサイト］(https://wordpress.github.io/gutenberg/)を参照してください。

ここでは、プロジェクトでコンポーネントを使用する方法の簡単な例を示します。

依存関係をインストールします:

npm install --save @wordpress/components

Reactでの使用:

import { Button } from '@wordpress/components';
function MyApp() {
   return <Button>Hello Button</Button>;
}

多くのコンポーネントにはスタイルを追加するためのCSSが含まれており、コンポーネントが正しく表示されるためにはそれを含める必要があります。コンポーネントのスタイルシートは、node_modules/@wordpress/components/build-style/style.cssにありますので、直接リンクするか、コピーしてプロジェクトに含めることができます。

開発スクリプト

@wordpress/scriptsパッケージは、JavaScript開発のための再利用可能なスクリプトのコレクションです — ビルド、リント、テスト用のスクリプトが含まれており、追加の設定ファイルは不要です。

ここでは、プロジェクトでwp-scriptsツールを使用する方法の簡単な例を示します。

依存関係をインストールします:

npm install --save-dev @wordpress/scripts

次に、package.jsonファイルにスクリプトセクションを追加できます。例えば:

"scripts": {
   "build": "wp-scripts build",
   "format": "wp-scripts format",
   "lint:js": "wp-scripts lint-js",
   "start": "wp-scripts start"
   }

その後、npm run buildを使用して、すでに設定されたデフォルトのwebpack設定でプロジェクトをビルドできます。同様に、フォーマットとリントにも使用できます。startコマンドは開発モードに使用されます。完全なドキュメントについては、@wordpress/scriptsパッケージを参照してください。

詳細については、Block Editor HandbookのJavaScriptの始め方チュートリアルを参照してください。

UIコンポーネント

ここでは、プロジェクトでコンポーネントを使用する方法の簡単な例を示します。

依存関係をインストールします:

npm install --save @wordpress/components

Reactでの使用:

import { Button } from '@wordpress/components';
function MyApp() {
   return <Button>Hello Button</Button>;
}