Gutenberg"の一部です。Gutenbergの連載では、ブロックの作り方などを説明してきたが、純粋にReactだけを使いたい場合やReactコンポーネントを作る方法については説明してこなかった。今回はその方法を説明しよう。5.0以降、ReactおよびReactDOMは同梱されている。したがって、自分のプラグインなりテーマなりに含める必要はない。wp-elementを指定すると、reactやらreact-domやらが入ってくる。使ってJSを読み込もう。依存関係はWordPressが解決してくれるので、特に気にする必要はない。一点注意なのだが、Reactのコードサンプルではよくimport文が使われている。WordPressの場合、Reactはグローバルに読み込まれているので、importする必要はない。wp名前空間に存在しているので、それを使えばよいし、なんならグローバルのものをそのまま使っても構わない。wp.elementにReact関連が格納されている。);WordPressにあまり詳しくない人が作ったテーマなどではよくjQueryを直接CDNから読み込んでいるのを見かけたが、それと同じことにならないよう注意しよう。APIを叩いてなにかをしたくなるのが人の性。APIを叩くためのライブラリがこれまた同梱されている。@wordpress/api-fetch、とても便利なので率先して使おう。書けば読み込み完了だ。エンドポイントへのパス。'投稿の更新に成功しました。'エラーが発生しました。APIのラッパーで、Promise形式で書くことができる。URLやnonceなどの設定も行う必要がないので、プラグイン側でPHPを書く量はかなり少なくなっている。以上、簡単ではあるが、Reactの利用方法について説明した。今後はこのやり方がスタンダードになっていくはずなので、いまのうちに覚えておこう。おまけに、役立ちそうなTipsをいくつか。Reactのチュートリアルは部分的に翻訳されているので目を通しておこう。WordPressが同梱するようになったライブラリはいくつかあり、たとえばmoment.jsなども入っている。「Gutenbergのここはどうやっているんだろう?」という点が気になったら、Gutenbergリポジトリのpackagesディレクトリを眺めてみよう。小説家であり、WordPress開発者。2016のリードオーガナイザー。山梨に土地を持ち、DIYで家を建てている。KunoichiというWordPressテーマ・プラグインマーケットプレースを作成中。コメントデータの処理方法の詳細はこちらをご覧ください。PとはWordPressエキスパートが運営するWordPress専門ニュースメディアです。サーバー代を支払い、諸々の法的責任を負っています。