LaravelがVue.jsやReactのビルド環境を導入したことをうけて、PHPを愛する私もいよいよJavaScriptフレームワークに取り組むことにしました。
当初は、Laravelのデフォルトにもなっており、以前にも少しだけ触れたことがあったVueの方を追いかけるつもりだったのですが、私の知っている方がReactを扱っていたことに影響され、私もReactを触ってみることにしました。
この記事ではPHPerである私がReactに触れた際に感じたことなどをまとめました。
JavaScriptが難しい？
私もjQueryを使った簡単なフロントエンド開発程度は経験があったのですが、今のJavaScriptは私の知っていたものとは一変していました。
アロー関数はもとより、分割代入、スプレッド構文、デコレーターや関数型言語を意識したmapやfilterなどなど。サンプルコードなどでも当然のように使われているので、少し悩まされました。
とは言え覚えるべきことは多くなく、以下のページなどをチェックするくらいで、おおよそ理解できるようになりました。
ES2015(ES6) 入門 – Qiita
環境構築で足踏み
Reactを扱う上でビルドツールはほぼ必須ということで、最近よく使われているwebpackを導入しました。webpackの使い方のほか、併せて必要なのbabelや、以前gulpで用いていたeslintなどの導入方法もチェック。webpackは細かい設定が求められるので、gulpよりも少しクセがあるような印象を受けました。
これからReactに触れてみようという方は、webpack + babelのビルド環境だけをまず整えて、慣れてからeslintやTypeScriptの導入などと進めていけばいいと思います。
ちなみにcreate-react-appを使えば簡単に環境構築ができますが、設定を変えるとなると結局はwebpack自体を触ることになるようです。LaravelのReactビルド環境でもwebpackの設定項目を用いる必要があるので、webpackの扱いには慣れておいたほうが良いと思います。
React自体はシンプル
JSXの見た目の異様さなどもあってかなり構えていたのですが、React自体は想像していたよりもずっと分かりやすく感じました。多くの部分が普通のJavaScript感覚で書けるので、JavaScriptに慣れている人ならVueよりも取っ付きやすいんじゃないかと思います。
JSXは気持ち悪いと評判？（私もそう思っていました）ですが一瞬でなれました。
Reduxはやや難関
状態管理を担うモジュールとしてReduxがよく使われているようなので、私もひとまずこれを覚えようと考えました。ですが日本語としてまとめられた情報が少ない上に、書かなければいけないボイラープレートが多く、さらにRedux自体がかなり関数言語寄りの指向のようで、PHP脳の私はちょっと苦戦を強いられました。
以下のような手順を踏んで、ある程度は理解できたんじゃないかと思います。
- Reduxの仕組みを頭に入れる
（Redux入門【ダイジェスト版】10分で理解するReduxの基礎 – Qiita） - Qiitaなどの日本語解説をたくさん見る
（この段階ではぼんやりとした理解） - Presentational ComponentsとContainer Componentsを意識する
（ComponentとContainerについて- Qiita） - 公式のサンプルコードを読み解く
（Examples – Redux）
もちろん英語が得意なら2あたりは別のアプローチがあると思います。
PHPerにはMobX？
状態管理はReduxに変えてMobXを用いるケースも増えているようです。
MobXはオブジェクト指向風に書けるので、PHP脳の私でも自然に受け入れられました。記述するコードもReduxより簡潔です。
ただRedexとの比較では一長一短あるようなので、どちらが良いとは言えないのかもしれません。
SSRはどうしよう
サーバーサイドがPHPベースの環境でもV8Jsを用いることでSSRできることを確認できました。ただ情報があまり多くないため、信頼性などにちょっと不安が残ります。
Node.jsベースでNext.jsを用いても比較的簡単にSSRできそうですが、APIの扱いなど考慮すると、それはそれで面倒がありそうです。
GoogleはJavaScriptのレンダリングを解釈してくれるそうなので、割り切ってSSR無しにする選択肢もあり迷ってしまいます。
まとめ
ReactはJSXの見た目とは裏腹にコードが書きやすく感じたので結構気に入りました。
一見するとVueの方が馴染みやすく簡単そうですが、状態管理やSSRなどに手を出し始めると恐らく学習コストはそれほど変わらないんじゃないかと思います（Vueはチュートリアル程度しかやったことがありませんので推測です）。
Laravelも5.5からReactのビルド環境に切り替えることができるようになったので、我々PHPerもReactに触れる機会が増えてくるんじゃないでしょうか。
コメント