今までVue をメインに使っていましたが、個人開発だし好きにしたらええがなと React にすることにしました。React は今まで何度も公式チュートリアルをやってはそっとじを繰り返す状態だったのですが、過去のことはキレイさっぱり忘れて、心機一転公式ページを見てみることにします。
って？ あれっ？ 何か日本語になってる？ よくわからんけど Copyright の部分が Facebook になってるから間違いないと思うけど…と戸惑いながら色々と見ていきます。ドキュメントも翻訳されてる？
今まで公式ページは Vue.js が日本語翻訳とかスゴイ充実していて本当にありがたかったんだけど、最近はReact もスゴイのね。これは嬉しい誤算。折角日本語訳が充実しているので、有り難くGetting Started から読ませて頂くことにします。
既存のウェブサイトに React を追加する
あれっ？ 既存のサイトに追加するのは React って推奨されてなかったと勝手に思い込んでいたので少し驚いています。むしろそういう時は Vue だよねっと思っていたのですが、これは本当に自分の認識が随分と間違っていたようです。React って SPA だけじゃないんだね。
1分で React を導入する
何やらそそる見出しが続きます。マジかよーそんなに簡単じゃなかったと思うんだけど。
インターネットへの接続さえあれば、1 分間でこのセクションを終わらせることができます。
グイグイきます。そこまで言うならやってみましょう。
ステップ 1：HTML に DOM コンテナを追加する
まずは編集したい HTML ファイルを開きましょう。React で描画したい箇所を決めて、空の
<div>要素を追加しましょう。例えばこんな感じです。<div id=”like_button_container”></div>
ほほう。じゃあこの下辺りに入れてみよう。この直下に上のコードを入れてみました。
おおう。いーじゃないですかー。でもかるーく小一時間は溶かしました。しかも React ではなく WordPress の 方で、子テーマなのに get_template_directory_uri() で「なんで読み込まれないんだろう、おかしいなぁ」などとやっておりました。はい。で、やっと React のコンポーネントが読み込まれたのですが、なんの気なしに react-dom.development.js のコードを見てみたら、2万行あるじゃないですか！ まさかこの記事のためだけにこんなに行数の多い jsファイルを読み込むのもなぁ…と思っていたら、もうずっと以前に「えっReact? ReactってあのReact? 」とか言って WordPress に React が入ってるのに驚いて Post していたはずなのにすっかり忘れておりました。
それを思い出し、まてよ？と言うことは同梱されている React を自作の js に紐づけてやれれば、新たに2万行を読み込まなくて良いのでは！？ と、あっち行ったりこっち行ったりと相変わらずのポンコツぶりです。まぁこんなことでこんなに時間を溶かす人もいないとは思いますが、どこかの誰かの役に立つかも分かりませんので、一応コードを書いておきましょうか。
（自作 js をWordPress に同梱されている React への紐付けかた）
wp_enqueue_script( 'like_button', get_stylesheet_directory_uri() . '/js/like_button.js', [ 'wp-element' ], '', true );やっぱり WordPress むずかしい…。
結論として「1分で React を導入する」は今回の私のケースですと「すでに導入は終わっておりますが何か？」でした。
Oh… 我ながら本当に…
コメント