Nullable<T>

フロント開発を支えるモジュール群

February 10, 2019

フロント開発を支えるモジュール

チームメンバーは十人十色で、そういったチームワークにおいてルールを作り守っていくのはマネジメントコストがかかる。 そういった問題を解決する際に、フロント開発で役立つモジュールを紹介。

Prettier

Prettierはコードフォーマッター。 個人による表記揺れを整形してくれる。

セミコロンやクォーテーションのような宗教戦争の元を解決してくれる。

ESLint

ESLintJavaScriptの静的検証ツール。 Prettierと似たようなところがあり、スペースのルールなども統一できる。

また、ランタイムエラーを事前に発見できるという点でかなり有用。

TypeScript用のTSLintなどもある(ただし、最近ではTSLintは見放されている)。

stylelint

ESLintStyle(CSS)バージョンだと思って問題ない。 例えば、marginに対して設定している値にpxがついていないと警告を出してくる。

ただし、ルールを強めすぎるとかえってコーディングにストレスがかかるので、そこは調整が必要。

import-sort

文字通り、import文のソートを行ってくれる。 アトミックデザインなどを採用して細かくコンポーネントを切っているとimport文だけで数十行あるってこともそんなに少なくはないので、そういった時に役立つ。

lint-staged

上記のLinter類は基本的に一度適用させてしまったあとは変更しないかぎり再び適用する意味はない。 そういった時に役立つのがlint-staged

git addしてステージに上がっているファイルに対してLinterを適用することができる。

commitlint

ここまで来るとだいたい予想つくと思うが、コミットメッセージのLinter

大規模開発やOSS界隈ではほとんど採用されている。

husky

git commitgit push にフックするためのモジュール。

特に、lint-stagedcommitlintの2つと合わせて使われる。

おわりに

上記で紹介したモジュール群を導入すればソースの品質は上がる。 しかし、品質を優先しすぎて開発スピードが落ちてはいけない場面もあるので、適切に採用していく必要がある。


Written by Ryo @neer_chan

© 2018-2020 Nullable<T>