注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客
NO IMAGE

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ディレクトリを眺めてみよう。

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門書籍

作者Stoyan Stefanov

クリエーター牧野 聡

発行オライリージャパン

発売日2017年3月11日

カテゴリー単行本(ソフトカバー)

ページ数248

ISBN4873117887

Supported by amazon Product Advertising API

投稿 WordPress 5.0内でReactだけを利用する方法Capital P に最初に表示されました。

#wordpress #ワードプレス #SEO #集客

「Capital P」を閲覧する

NO IMAGE
最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG