WordPress 5.0内でReactだけを利用する方法

さて、これまでBefore Gutenbergの連載では、ブロックの作り方などを説明してきたが、純粋にReactだけを使いたい場合やReactコンポーネントを作る方法については説明してこなかった。今回はその方法を説明しよう。

ポイント1. ReactおよびReactDOMは同梱されている

WordPress 5.0以降、ReactおよびReactDOMは同梱されている。したがって、自分のプラグインなりテーマなりに含める必要はない。たとえば、 my-script.js が自分のプラグインのJSだとすると……

<?php
// wp-elementを指定すると、reactやらreact-domやらが入ってくる。
// 依存関係に wp-element を指定する。
wp_enqueue_script( 'my-plugin-js', 'path/to/my-script.js', [ 'wp-element' ], '1.0.0', true );

上記のように wp_enqueue_script を使ってJSを読み込もう。依存関係はWordPressが解決してくれるので、特に気にする必要はない。

一点注意なのだが、Reactのコードサンプルではよくimport文が使われている。しかしWordPressの場合、Reactはグローバルに読み込まれているので、importする必要はない。wp名前空間に存在しているので、それを使えばよいし、なんならグローバルのものをそのまま使っても構わない。

const { Component, render } = wp.element; // wp.elementにReact関連が格納されている。

// オリジナルコンポーネント
class MyComponent extends Component {
  render(){
    return <div className='my-component'>コンポーネント</div>
  }
}

// ReactDOM.renderで初期化
render( <MyComponent/>, document.getElementById( 'my-component-wrapper' ) );

WordPressにあまり詳しくない人が作ったテーマなどではよくjQueryを直接CDNから読み込んでいるのを見かけたが、それと同じことにならないよう注意しよう。

ポイント2. APIアクセス用のライブラリもある

Reactコンポーネントで実装するようになると、REST APIを叩いてなにかをしたくなるのが人の性。しかしReact関連で検索すると、AxiosやFetch API（そしてそのポリフィル）の情報が出てくるのだが、WordPressのREST APIを叩くためのライブラリがこれまた同梱されている。この @wordpress/api-fetch、とても便利なので率先して使おう。依存関係に wp-api-fetch と書けば読み込み完了だ。

wp.apiFetch( {
  path: 'wp/v2/post/10', // エンドポイントへのパス。ホスト名などは不要。
  method: 'POST',
  data: {
    title: '更新するタイトル'
  }
} ).then( response => {
  // レスポンスが帰ってきたら
  alert( '投稿の更新に成功しました。' );
} ).catche( err => {
  // 失敗したら例外をキャッチ
  alert( 'エラーが発生しました。' );
} );

このライブラリはFetch APIのラッパーで、Promise形式で書くことができる。また、URLやnonceなどの設定も行う必要がないので、プラグイン側でPHPを書く量はかなり少なくなっている。

---

以上、簡単ではあるが、Reactの利用方法について説明した。今後はこのやり方がスタンダードになっていくはずなので、いまのうちに覚えておこう。おまけに、役立ちそうなTipsをいくつか。

• Reactのチュートリアルは部分的に翻訳されているので目を通しておこう。
• WordPressが同梱するようになったライブラリはいくつかあり、たとえばmoment.jsなども入っている。
• 「Gutenbergのここはどうやっているんだろう？」という点が気になったら、Gutenbergリポジトリのpackagesディレクトリを眺めてみよう。