WordPressをReact化するためにReactビギナーズガイドやった

つい最近発売されたReactビギナーズガイドを一通りやってみました。最後のFluxはReduxの勉強をする予定だったので頭が混んがらないようにあえてやってません。

目次と概要

  • 1章 Hello world
  • 2章 コンポーネントのライフサイクル
  • 3章 :高機能な表コンポーネント
  • 4章 JSX
  • 5章 開発環境のセットアップ
  • 6章 アプリケーションのビルド
  • 7章 品質チェック、型チェック、テスト、そして繰り返し
  • 8章 Flux

1章~3章まではReactの構文などを学び、それを踏まえてWeb上で動くExcelを作ってみよう!というお話です。ES2015(ES6)の書き方が良くわかってないjQueryばっかり使ってた老害なので第1章から勉強になりました。

4章は3章で作ったExcelアプリケーションをJSXというReact独自の文法に書き換えてみよう!という内容です。

5章~7章は自分の端末に開発環境を構築し、ReactのJSXで書いたファイルをBabelというツールを使って.jsにコンパイルする内容や、コードの文法のチェック方法、テスト方法の話です。

8章は散漫になりがちなReactのコードをわかりやすくするために作られたFluxという概念?を使ってわかりやすく整理しましょうという内容。

感想

そもそもなぜReactを学ぼうと思ったかというと、このWordPressサイトをReact化しようと思ったからです。WP4.7より正式にWordPress REST APIがリリースされ、WordPressという檻から脱獄できるぞとなったのでそれを表示する一つの手法としてReactを勉強してみました。以下の記事をみたのもきっかけです。

React + Redux + WP REST APIで爆速ブログを作ったので事例として紹介します

一通り学んだところでこの自分のWebサイトをReact化してみようと色々調べてたところ以下のWPテーマを発見。

A React+Redux WordPress theme

なるほどなるほど、このテーマはWPテーマの中にReactコードを突っ込んで利用している形で便利そうだなと思いました。テーマファイルとしてはとてもシンプルで、「index.php」「header.php」「footer.php」がメインで使用されているだけでreact-routerでWordPress REST APIの取得するファイルの形式を色々変えて表示するという内容でした。

で、実際やってみたのですが、遅い…。

Reactで爆速ブログを作られた方は、WordPressを「AWS+KUSANAGI」の環境においていると書いていらっしゃってなんでそんな高パフォーマンスの仕様にしてるんだと不思議だったのですが、恐らくWordPress REST APIの取得速度を上げるためなのでしょうか?自分はmixhostというレンタルサーバーでやってみたのですが、普通にPHPで書いたほうが全然速いわという結果になり断念。

自分のようにWordPressで構築したWebサイトの受託をメインとしてるWebデザイナーとしてはReactは高機能すぎて使いみちあんまりないなという印象でした。

かといってせっかく取得した技術なので今後はついでに流行りのvue.jsを触ってみたり、自分が運営している「FITOUT」に使ってみたりしたいなと思った次第です。

Reactの本は非常にわかりやすかったのでおすすめです。といっても日本で発売されているReact本が少ないので比較できていないですが。気になる方はぜひやってみて下さい。

© 2011 - 2017 ShoYamane