2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。
- react-best-practices
ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述）
github
- サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです
- （ただのサンプルなので、実装はハリボテです）
2017年版
2018年版
2017年版と2018年版で使用しているpackageの比較
2017年版で使用しているpackage
- react
- redux
- redux-saga
- redux-localstorage
- recompose
- react-router
- styled-components
- storybook
- eslint
- prettier
- flow-bin
- webpack
2018年版で使用しているpackage
package差分
keep
out
in
解説
・・・という結果になったので、諸々のpackageについて解説、keep / out / inの理由に記載
keepしたpackage
react
- これが無いとreactプロジェクトじゃないということで、次へ
react-router
- URL: https://reacttraining.com/react-router/web/guides/philosophy
- reactのルーティングライブラリ
- 画面遷移が必要な場合は、ほぼ一択
- ただ、URLパラメータ周りと不満があるのと、バージョンアップ時に破滅的な修正を入れてくることが、たまにきず
styled-components
import styled from "styled-components";
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
render(<Button>ログイン</Button>)
- ↑みたいなコードで、jsに直接cssを書けるライブラリ
storybook
- URL: https://storybook.js.org/
- reactコンポーネントをサンドボックスで開発できるライブラリ
prettier
- URL: https://prettier.io/
- JavaScriptのフォーマッター
outしたpackage
redux （+ 関連package）
- URL: https://redux.js.org/
- reactで複雑な状態管理するとき使用するライブラリ
削除したpackage一覧
削除した理由
- reduxが本来必要な箇所は、親子関係以外のレイヤーに存在するコンポーネント同士で連携するために必要なものだけど、その動作を実装する機会がほぼ無い
というか、アクションしたコンポーネントに対して親子関係以外のコンポーネントが変更されるデザインの方に疑問持った方が良いと思う- 管理するactionやstoreの値が増えた時のパフォーマンス調整が難しい
2018年版での代替え
- 2018年版ではコンポーネント内でfetchしてstateに入れるだけのシンプルな実装に変更
- また認証のtokenの取得などグローバルに使用したい処理については「contextTypes」で取得できるように実装
recompose
- コンポーネントにHOCを実装をサポートするライブラリです
削除した理由
- （ライブラリ自体は良いものなので、個人的には推したい気持ちをありますが。。。）
- ライブラリの性質上、普及率がそこまで高くないのでwebアプリケーション作成には適していないと判断して削除
- 複雑なreactコンポーネントモジュールを作る時には、ガンガン使っていきたいところ
eslint
- URL: https://eslint.org/
- JavaScriptのLintライブラリ
削除した理由
- 運用が難しい
- 細かくルール設定が出来すぎてしまう
- prettierとケンカする
- 「eslint-disable」を使い出すとソースコードがカオスになる
- 以下のような共有設定を入れ始めると、大して意味の無い縛りに悩まされる
2018年版での代替え
- コード整理の役割は、prettierのみに任せる形に変更
- prettier-eslintでの併用も考えたが、eslintは「細かくルール設定が出来すぎてしまう」問題 + それを「eslint-disable」で簡単に無効にできてしまう問題があるので不採用
flow-bin
- URL: https://flow.org/
- javascriptで型定義をできるするライブラリ
削除した理由
- 重い
- バージョンアップで破滅的な仕様変更が頻繁に行われる
- atomとVSCodeのプラグインがイマイチ
- flow-typedで管理している型定義のバージョン管理が難しい
よく分からないけど型に「*」を入力すると定義checkを突破できてしまう
2018年版での代替え
- 型定義したいなら、素直にTypeScriptを使えば良くないか？と思ったので変更
webpack
- jsコードのbuildツール
削除した理由
- webpackには不満は無いが、create-react-appをejectしないと、TypeScriptをサポートできないので、巻き添えで削除
inしたpackage
TypeScript
- JavaScriptに静的型付けが行えるプログラミング言語。
追加した理由
- 上記で記載しているが、flow-binの代替えで追加
- エディターとの相性が良い（VScode、atom共に）
- webpackやparcelを使えば、jsコードに対してもフラットにimportがexportができるので部分的にTypeScriptを使用することも可能なので実装へのハードルが低い
parcel
- URL: https://parceljs.org/
- webpackと似たようなbuildツール。webpack.config.jsのような設定ファイルが必要ない
追加した理由
- 上記に記載しましたが、create-react-appをejectしないと、TypeScriptをサポートできないので、TypeScriptをサポートしてくれているparcelを採用
- まだ、時期尚早感はあるが、今のところは困ることも無い程度には使えている
総評
2017年版→2018年版になって得られたもの
- エディターが快適に動作するようになった（主にflow-binのプラグイン重かったので）
- 全体のコードが1/3程度削減（主にredux関連コードがなくなったため）
- redux系の複雑なロジックが無くなり、直感的な実装にしたのでコードが読やすくなった（はず）
- 稀に出現する「eslint-disable」から解放された
2017年版→2018年版になって失ったもの
- eslintの「rules/no-unused-vars:(未使用の変数をcheck)」などの有用な設定が使えなくなった
- webpack時に比べると、parcelはエラー表示系の機能が不足している