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はエラー表示系の機能が不足している
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.