「2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う」に触発されたので最近使っている構成を書こうと思う。割とやりたい放題。
リリース時の複雑性はAPIいくつか叩いて組み合わせて出すようなSPAマッシュアップサイト以上の規模で、後々スケールすることを想定している。
ソースコード→ HibikineKage/react-boilerplate
Redux入り版→ HibikineKage/react-redux-todo-sample
Stack
- React
- TypeScript
- Babel v7
- Webpack v4
- Sass
- ESLint
- Prettier
- Jest
以下は規模に応じてオプションで。
- Redux
- Redux Thunk
- Redux Saga
意図
Vueが流行っていてNuxt.jsも触って快適さを体感してはいるが、ソースコードの混沌度が高まってきたときのコンポーネントの分割のつらさでいえばReactの方がまだましなのでReactを選択している。
エコシステム周りもReactはVue, Angularと比べればだいぶ枯れてきているのも理由として挙げている。
AltJSはTypeScriptを選択。型のないJSは1時間で書き捨てるようなコードだけでいいよ。
Flowを使わない理由としては、単純にTypeScriptの方が型定義ファイルが多いことや、エディタの補完の強さを理由としている。特にVSCode使っている時にはFlowの設定が若干つらい。
TypeScriptのトランスパイラに任せてBabelは食わせなくてもいいが、極力ブラウザ側の機能で動かせるものは動かしたいので@babel/envを挟んでいる。
Webpackはv4になってだいぶ速くなった。Parcelは融通が利かないのと、サーバーサイドをTypeScript(Node.js)で書くときにどうしようもなくなるのでよほど書き捨てる場合でもない限りは使っていないし、一度Webpackも環境さえ組めばそれを使い回せばいいので結局使っていない。
最近はCSSはSassで書き、スタイルはFLOCSSを採用している。
LinterはESLint, FormatterはPrettierで最近統一している。多少うざいこともあるが、C言語に戻ったときに手作業でフォーマットを直してるのがバカバカしくなるぐらいには快適。
Jestは遅いという点を除けば手抜きできるから使い続けている。エコシステムが一番まともに回っているテストツールだと(個人的に)思っているのが採用理由。
Reduxをオプションとしたのは、ReactのStateやContextで事が済むケースが多いため。型のつらさも倍増するので、必要に応じてReduxは入れれば良いと思う。
感想
早くNuxt.jsがもっと快適になってほしい。
何かあればコメントどうぞ。