Title: 開発プラットフォーム
Author: Akira Tachibana
Published: 2020年5月14日
Last modified: 2025年3月20日

---

# 開発プラットフォーム

## この投稿内

 * [UI コンポーネント](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#UI-コンポーネント)
 * [開発スクリプト](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#開発スクリプト)
 * [ブロックエディター](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#ブロックエディター)

[↑ ページの先頭へ戻る](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#wp--skip-link--target)

Gutenberg プロジェクトは、より良い WordPress エディターを作るだけでなく、その上で
構築するプラットフォームの作成を目指しています。プラットフォームは JavaScript パッケージ
とツールから構成され、Web アプリケーションで利用できます。[npm で利用可能なパッケージのリストを参照してください](https://www.npmjs.com/org/wordpress)。

## 󠀁[UI コンポーネント](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#UI-コンポーネント)󠁿

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

プロジェクト内から wp-scripts を使用する簡単な例を示します。

まず、依存をインストールします。

    ```notranslate
    npm install --save @wordpress/components
    ```

React での使用方法は次のとおりです。

    ```notranslate
    import { Button } from '@wordpress/components';

    function MyApp() {
    	return <Button>Hello Button</Button>;
    }
    ```

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

## 󠀁[開発スクリプト](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#開発スクリプト)󠁿

[`@wordpress/scripts` パッケージ](https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/README.md)
は JavaScript 開発用の再利用可能なスクリプト集です。ビルド、lint、テスト用のスクリプト
が含まれ、すべてのスクリプトで追加の構成ファイルは不要です。

プロジェクトで `wp-scripts` ツールを使用する簡単な例を示します。

まず、依存をインストールします。

    ```notranslate
    npm install --save-dev @wordpress/scripts
    ```

次に package.json ファイルに scripts セクションを追加します。

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

これで `npm run build` と実行すると、構成済みのすべてのデフォルトの webpack 、たとえば
フォーマットや lint を実行してプロジェクトをビルドします。`start` コマンドは開発
モードで使用します。完全なドキュメントについては [`@wordpress/scripts` パッケージ](https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/README.md)
を参照してください。

詳細については「ブロックエディターハンドブック」の「[JavaScript ビルド環境のセットアップ](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/javascript/js-build-setup/)」
を参照してください。

## 󠀁[ブロックエディター](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/?output_format=md#ブロックエディター)󠁿

[`@wordpress/block-editor` パッケージ](https://developer.wordpress.org/block-editor/packages/packages-block-editor/)
を使用するとスタンドアロンのブロックエディターを作成し、使用できます。

詳細については [チュートリアル – カスタムブロックエディターの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/)
を参照してください。

[原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/platform/README.md)

公開日

2020年5月14日

最終更新

2025年3月20日

[  前へ: クエリーループブロックの拡張](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/extending-the-query-loop-block/)

[  次へ: カスタムブロックエディターの構築](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/platform/custom-block-editor/)