---
title: "カスタムブロック開発で @wordpress/scripts を活用するための準備の流れ"
canonical_url: "https://olein-design.com/blog/try-wordpress-scripts-for-custom-blocks-develop"
language: "ja"
date_published: "2019-12-16T10:52:01+09:00"
date_modified: "2019-12-16T10:52:01+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "Gutenberg"
    - "カスタムブロック"
---

# カスタムブロック開発で @wordpress/scripts を活用するための準備の流れ

WordCamp Osaka 2019での情報収集を機に、ブロックエディタに関する技術的な知識を確認しておく必要性を強く感じました。

なので、まずは公式ドキュメントを読み進めるという時間を作って手を動かして見ました。

その際に、@wordpress/scripts を初めて使ってみたので流れをまとめておきたいと思います。

## @wordpress/scripts ってなに？

僕もあまり難しいことは分かっていないのですが、要するに書いたプログラムを良しなに処理してくれると考えておけばいいのかな？

[埋め込みコンテンツ](https://make.wordpress.org/core/2019/03/25/building-javascript/)

[埋め込みコンテンツ](https://developer.wordpress.org/block-editor/packages/packages-scripts/)

とにかく使ってればわかるので試してみましょう！といっても、普段から`npm` を使っている人ならば、特別何かを用意しなければならないというわけではありません。

また、こちらに導入ページも用意されているので、参照して進めていけば問題なく使えると思います。

[埋め込みコンテンツ](https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/)

*ブロックエディタ開発のハンドブックにJavaScriptのビルド設定が紹介されているので必見*

npmについて「ん？」という方は、昔こんな記事も書いているので参照してもらうとなんとなくつかめるかもしれません。

[埋め込みコンテンツ](https://olein-design.com/blog/build-webpage-by-npm-script)

## 準備みよう

まずは適当でもいいので使ってみましょう。

WordPressのローカル開発環境を用意して、その中にプラグインを作っていくという状況を想定して話を進めていきますね。

Finderでも黒い画面でも良いので、プラグイン用のディレクトリを作っておきましょう。

```
$ cd wp-content/plugins
$ mkdir sample-plugin
```

### npmの準備

そこにnpmをセットアップしていきます。

```
$ npm init
```

すると、パッケージの名前やら何やら聞かれると思いますが、あとで変更もできるのでタンタカターンッ！！（エンター連打）しておきましょう。

これでnpmの準備ができました。`package.json`というファイルが生成されていることが確認できると思います。

### @wordpress/script の準備

次に、このプロジェクト（例でいうプラグイン開発）に@wordpress/scriptsを使えるようにします。

```
$ npm install --save-dev --save-exact @wordpress/scripts
```

このコマンドを実行すると、黒い画面でつらつらつらーっと何やら動いていくと思いますが「俺、やってる感」を感じながら見つめておきましょう。（僕はいつもそうです）

処理が終わると`package.json`に以下の記述が追加されていることを確認できるはずです。

```
"devDependencies": {
  "@wordpress/scripts": "6.0.0"
}
```

これで準備完了です。

### コマンドを用意する

次に@wordpress/scriptsを利用するためのコマンドを用意しておきます。

`package.json`をエディタか何かで開きましょう。そして、このような記述を追加しましょう。

```
"scripts": {
  "build": "wp-scripts build"
},
```

どんな感じで記述したら良いかわからない方は、こちらのソースなどを確認してみると参考になると思います。

[埋め込みコンテンツ](https://github.com/WordPress/gutenberg-examples/blob/master/01-basic-esnext/package.json)

## 使ってみよう

### ディレクトリ構造について

いつもの開発環境に合わせて`scripts` を設定することはできますが、ここではデフォルトで想定されている環境を紹介しておきます。

```
- build
- src
  - index.js
sample.php
```

### src/index.js を作る

`src`ディレクトリに`index.js`のようにJavaScriptファイルを用意して、参照記事にもあるようなスクリプトを記述してみましょう。

```
import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'myguten/test-block', {
    title: 'Basic Example',
    icon: 'smiley',
    category: 'layout',
    edit: () => <div>Hola, mundo!</div>,
    save: () => <div>Hola, mundo!</div>,
} );
```

### ビルドしてみる

それではビルドしてみましょう。

```
$ npm run build
```

すると、プログラムの間違いがなければエラーもなく終了すると思います。完了したら`build`ディレクトリの中を確認してみてください。あらかじめ`build`ディレクトリを作っておかなくても、自動的に作ってくれるはずです。

`build/index.js`の中身を確認すると、このようになっているはずです。

```
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(1);Object(o.registerBlockType)("myguten/test-block",{title:"Basic Example",icon:"smiley",category:"layout",edit:function(){return Object(r.createElement)("div",null,"Hola, mundo!")},save:function(){return Object(r.createElement)("div",null,"Hola, mundo!")}})}]);
```

ES Nextで書いたJavaScriptが良しなにコンパイルされていることが確認できると思います。（圧縮されているので解読しにくいとは思いますが…）

### PHP側からスクリプトを設定する

あとは、`index.php`でスクリプトを設定してあげればカスタムブロックとして動作するはずです。

```
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

wp_register_script(
    'myguten-block',
    plugins_url( 'build/index.js', __FILE__ ),
    $asset_file['dependencies'],
    $asset_file['version']
);
```

冒頭に`build/index.asset.php`という生成されたファイルを読み込んでいますが、こちらのファイルはそれぞれの依存関係を収納しているファイルだと理解しておいてください。

> Using wp-scripts ver 5.0.0+ the build step will also produce a `index.asset.php` file that contains an array of dependencies and version number for your block.
>
> https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/#dependency-management

これでエディタ画面から作ったブロックを使うことができるはずです。（「Basic Simple」というブロックができているはず）

## まとめ

簡単にnpmを使ったカスタムブロック開発環境の作り方をご紹介しました。まとめると、プロジェクトディレクトリ内で、

1. `npm install`
2. `src`ディレクトリで開発
3. `npm build`

という感じかと思います。実際に手を動かしてみると、素早く理解することができるかと思います。ぜひチャレンジしてみましょう！