こんにちは、小西です。

AutoScale という会社でスマートで効率的なTwitter アカウント管理ツール「SocialDog」というサービスを運営しています。

2017年4月にこちらのサービスを React 化してから、約1年が経過しました。それまでの jQuery のコードと比べ圧倒的に可読性が向上し、バグも激減、SPAになったことでページ遷移もなくなり動作もサクサクになりました。

そこで今回は、開発初期に知っておきたかったなということを中心に、ハマったことや、あの時こうしておけばよかったという点を記事にしてみます。

ちゃんと JS を書いたことがない、これからサービスを SPA 化したい、という方の参考になれば幸いです。

ちなみに現状 SocialDog のJSのコードは、コンポーネント約40個、テスト含め合計行数3万行くらいの規模です。 Twitter アカウントをお持ちの方はずっと無料で使えますので、ぜひ実際使ってみてください。

SocialDog

React コンポーネントの props, state そのものは簡単

React は、データを渡すと、HTML っぽい JSX という言語を使って、DOM を吐き出すものです。データが変更されると、DOM の差分だけ自動的に変更されます。非常にシンプルでわかりやすいです。

React コンポーネントの概念は非常に簡単なので、入門サイトを見れば30分もあれば理解できると思います。 React 単体の学習コストはそんなに高くない印象で、React そのものはあまりハマることはありませんでした。

ハマったのは、どちらかというと以下のような React そのものの周辺の環境整備や仕組みの理解でした。

複数のツールを組み合わせてビルド環境を作る必要があり、開発環境整備のハードルが高い

React の開発では、ES6などの最新の文法でソースコードを書いて、トランスパイラを使ってブラウザで動く状態にすることが一般的です。

私達は Webpack + Babel という構成でビルドしているので、以下のような流れになります。

ソースコードを書く
Webpack +Babel が変更を検知し、トランスパイルする（このとき依存関係もimportされる）
ブラウザから読み込む

私はそれまでJavaScript といえば jQuery しか書いたことなかったので、適当にソースコード書いてHTMLから script タグで呼ぶだけだったところからすると、大分面倒になった感じがあります。

今となっては、トランスパイルのプロセスがあることによって、syntax エラーにはすぐ気づけますし、ソースコードの可読性・再利用性も圧倒的に上がったのでいいことづくしだと思えます。

苦痛なのは最初だけで、すぐに快感に変わりますｗ

初期のうちから Webpack や Babel の役割をちゃんと理解して開発をすすめるとよいと思います。

React は View しかないので、多数のライブラリの導入が必要

React そのものには、View の機能しかありません。

SPAを作ろうとすると、ルーティングやデータの管理など、それぞれについてライブラリを選択し、導入する必要があります。

いままで jQuery しかまともに JS を書いたことがなく、まだ概念も完全に理解できていない初期に、一個ずつドキュメントを読みコードに統合していくのは結構大変でした。

ちょっとSPAを書こうと思ったら、おそらく以下のようなものを導入することになると思います。最初にちゃんとドキュメントを読んでからコードを書くことを強くオススメします。

できるだけベーシックな構成になるよう、以下のライブラリを使うことにしました。

react-redux (stateの管理をする)
redux-thunk (Redux の Action Creator の処理を非同期にかける)
react-router (URLとコンポーネントの紐付け、画面遷移まわり)
immutable.js (変数をイミュータブルにすることで Reducer の処理や state の管理が楽になります)
superagent (Ajax ライブラリ。jQuery.ajax さようなら。）

この点 AngularJS はルーティングなどがコミコミで、書き方も決まっているので、最初迷うことが少なそうです。

ただこの部分は、一度行ってしまえばチームメンバーはやらなくていいので、最初に作る人が辛みを引き受けることでチームメンバーはそこまで辛くないかもしれません。

React に対応していないライブラリは導入がやや面倒

全部のコンポーネントをReact の「管理された」コンポーネントにするためには、ライブラリ側の React 対応が必須になります。

例えば、グラフ描画の HighCharts というライブラリがありますが、このライブラリは React 用のコンポーネントがあるので、簡単に既存のアプリに統合できます。

↓こんな感じで、データはReact らしく、props として渡すことができます。この書き方ができると超気持ちいいですね。

<ReactHighcharts config = {config} />

React に対応していない場合は、React のコンテナ外に作るか、消えない <div> 要素とかを作ってそこに入れる感じになります。

その部分だけ componentDidMount なんかに以下のようなコードを書いたりしないといけません。

    $('#calendar').fullCalendar({config})

イベントハンドラが必要なら、componentDidMount や componentWillUnmount で bind したり unbind したりが必要になったりします。

たぶん一回はイベントハンドラを unbind しわすれてイベントが2回発火する事件がおきますｗ

Redux (Flux) に慣れるのが大変

React では、Redux や Flux などを使ってデータを管理することが多いと思います。 Action Creator, Reducer, Store なんかのアレです。

この概念を理解するまではコードを書くのが少しつらいです。理解してしまえば難しいことはないので、辛いのは最初の1週間だけです。私は、データの受け渡しの例の図を開発初期ずっとデスクトップに表示していました。

私が以前まで書いていた jQuery のコードでは、グローバル変数地獄か、メソッド間で変数を渡しまくり地獄で、非常に大変でした。 Redux を導入したおかげでデータの受け渡し方法が明確になり、コードの可読性が大幅に高まりました。

ES6, JSXの文法に慣れる

ES6 やJSX でJSを書くとそれまでの書き方とは大きく変わります。最初の2週間くらいは、わかっていないことが多くて、辛かったです。

特に、以下のようなことは、一番最初に理解すべきだっだなと今になって思います。

ES6のimport/export の使い方、default の有無、export の有無の違い
JavaScript のプリミティブな変数、オブジェクトの違い
アロー関数と this, bind() について
関数の巻き上げ
Array.* 系のメソッド（便利な関数がたくさんあるのですが、最初その存在を知らず、ついforEachとかで書いてしまいがちです。 map, reduce, every, some で書くのが読みやすく JS っぽいと思います。MDNが日本語で網羅されており、非常にわかりやすいです。最初にざっと眺めておくことをオススメします）
Promise （非同期処理のコールバック地獄を防ぐため Promise も必須だと思います）
async/await（非同期処理は、Promise よりもasync/waitで書くほうがわかりやすい処理が多いと思います。最初は async/wait の存在を知らなかったので、Promise で書いているせいで冗長な箇所が残ってしまいました。もっと早く使えばよかった・・・。こちらは ES7 にする必要があります）