今の現場で使っているReactの仲間たちを紹介する

この記事は

現在、自分の職場ではPHPベースのウェブサービスをReactjsにリプレイスしています。
そんな中、React以外の様々なライブラリを導入したので、紹介したいと思います。

なぜそう思ったか

Reactは非常に柔軟なライブラリで、1つのウェブサービスを開発する際に、様々な他のライブラリと組み合わせて実装することが一般的なようです。
自分たちがどんな技術を採用したのか共有することで、これから導入しようとしている人たちの参考になればと思います。

アプリ構築

• create-react-app
  • コマンド一発でReactアプリに必要なものをインストールしてくれる。
  • インストール後はnpm startだけでReactアプリが立ち上がります。驚愕。

デザインフレームワーク

• material-ui
  • 美しいデザインのパーツを簡単に作れるライブラリです。
  • SVGアイコン等もそろっているので、デザインが苦手でもさくっときれいなアプリが作れます。

状態管理

• redux
• react-redux
  • React+Reduxの組み合わせが最も有名だったので。
  • 実際に開発してみると、Reduxが必要とは限らないケースもあることが分かりました。
  • 自分の現場では、無理にReduxに状態管理させるのではなく、デザインの実装に必要な簡単なものは、Reactコンポーネントでstateを管理しています。

ルーティング

• react-router
  • Reactだけではルーティングしてくれないので、専用のライブラリをインストールする必要があります。
  • 自分の現場では、WEBサーバの設定を変更できないという制約があったためHashRouterを採用しましたが、BrouserRouterを利用することが推奨されています。

サーバサイドレンダリング

• 使用していません。

API通信

• redux-thunk
  • React+ReduxではWEB APIをどこで呼ぶかは自由です。
  • Reduxの公式で解説されていたredux-thunkを使っています。

コーディング規約

• eslint
  • airbnbの規約を採用しています。
  • Airbnb React/JSX Style Guide

テスト

• jest
  • create-react-appに最初から梱包されています。

モック

• json-server
  • ReactではAPIからデータを取得して、アプリを開発することが多いと思います。
  • 開発の際に、APIのモックを簡単に立ててくれます。

デプロイ

• jenkins
• capistrano
• npm scripts
  • jenkins + capistranoは既存のシステムから変えずにそのまま利用しています。
  • ビルドに必要な前準備等はnpm scriptsを使って書いています。

---

次回は、これらのライブラリの詳細について書いていきたいと思います。