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

February 10, 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Written by Ryo @neer_chan