Help us understand the problem. What is going on with this article?

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はエラー表示系の機能が不足している
wheatandcat
メインはReact-Native、NuxtJS、Golangとかやってます https://www.wheatandcat.me/
https://www.wheatandcat.me/
sharefull
短期間・短時間の仕事に特化したオンデマンドマッチングプラットフォーム「シェアフル」を開発中の、パーソルグループとランサーズの合弁会社
https://sharefull.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした