Edited at

2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う

More than 1 year has passed since last update.

2017年版と2018年版でwebアプリケーション作成時のreactの(マイ)ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。

ちなみにタイトルは、その過程で2018年版に削除したpackageです(理由は後述)


github


  • サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです


    • (ただのサンプルなので、実装はハリボテです)




2017年版


2018年版


2017年版と2018年版で使用しているpackageの比較


2017年版で使用しているpackage


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


prettier


outしたpackage


redux (+ 関連package)


削除したpackage一覧


削除した理由


  • reduxが本来必要な箇所は、親子関係以外のレイヤーに存在するコンポーネント同士で連携するために必要なものだけど、その動作を実装する機会がほぼ無い

  • というか、アクションしたコンポーネントに対して親子関係以外のコンポーネントが変更されるデザインの方に疑問持った方が良いと思う

  • 管理するactionやstoreの値が増えた時のパフォーマンス調整が難しい


2018年版での代替え


recompose


  • コンポーネントにHOCを実装をサポートするライブラリです


削除した理由


  • (ライブラリ自体は良いものなので、個人的には推したい気持ちをありますが。。。)

  • ライブラリの性質上、普及率がそこまで高くないのでwebアプリケーション作成には適していないと判断して削除

  • 複雑なreactコンポーネントモジュールを作る時には、ガンガン使っていきたいところ


eslint


削除した理由


2018年版での代替え


  • コード整理の役割は、prettierのみに任せる形に変更


  • prettier-eslintでの併用も考えたが、eslintは「細かくルール設定が出来すぎてしまう」問題 + それを「eslint-disable」で簡単に無効にできてしまう問題があるので不採用


flow-bin


削除した理由


  • 重い

  • バージョンアップで破滅的な仕様変更が頻繁に行われる

  • 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はエラー表示系の機能が不足している