試行錯誤を邪魔しない開発環境

ある機能を実装する際、完成形のコードになるまでには、プログラムとして不正確な状態や、プロダクト品質ではない状態を経る
- 静的型検査や lint rule に違反したコードが途中に挟まる
型エラーや lint エラーは望ましくないので、できるだけ早くこうした情報を開発者に伝え、気付けるようにすると良い
- CI でこうしたエラーを検知して、Pull Request をマージする前に気づけるようにするとか
- エディタ上にエラーの情報を表示して、コーディング中に気づけるようにするとか
エラーを積極的に通知してくれるのはありがたいけど、やりすぎには注意するべき

なんとなくでも動いてくれたほうが嬉しい

例えば lint エラーがあった際に、watch モードで起動しているビルドやテストの実行を止めて、lint エラー見つけたよーと教えてくれる開発環境がたまにあるけど...
- 別にビルドやテストの実行は止める必要ないと思う
- なんとなくでも動いて結果を教えてくれるほうが、試行錯誤しやすくて嬉しい
TypeScript なら(静的)型エラーを無視してトランスパイル...なんてこともできる
- ts-loader に transpileOnly: true オプションを渡したり、swc のような (型検査なしで) トランスパイルだけするツールを使えばできる
  - 多少型のミスマッチがあっても実行できるところまでは動くし、問題があったら実行時エラー (TypeError など) が出るだけ
- このアプローチはここ数年で当たり前になってきた気がする
  - 試行錯誤のしやすさのため...というよりは watch ビルドに掛かる時間を短縮するためというのが主目的
  - あと swc や esbuild のようなツールが普及したというのもありそう
- 何だかんだで背後が動的型検査の JavaScript だからこそできる荒業だと思う

「create-react-app」という React アプリケーションを作成するためのフレームワークがある
主に React 初学者が React を使った開発方法を学ぶためにある
- しかし面倒な環境構築が不要かつ、難しいビルド周りの設定を上手く隠蔽してくれるので、業務でも十分有効なフレームワークだと思う
- id:mizdra も業務で使ってる
ただ、watch ビルド中に lint エラー or (静的)型エラーが検出された時の挙動が id:mizdra が期待しているものからズレててイマイチ
- 以下のように lint エラーをブラウザの画面いっぱいにオーバーレイで表示してくる
- ブラウザで開いているページ上にオーバーレイで lint エラーが表示されている様子
- 一応ビルド自体はされていて、右上のバツボタンからオーバーレイを閉じればページを操作できる
  - とはいえビルドされ直されるたびにオーバーレイが出るのでわずらわしい
- おそらくReact 初学者がメインユーザーなフレームワークゆえに、エラーを目立たせる作りになっているのだろう
  - しかし初学者でない人からすると、おせっかい機能だと思う
そういう感じなので、最近は TSC_COMPILE_ON_ERROR=true DISABLE_ESLINT_PLUGIN=true react-scripts start で起動してる
- ref: Advanced Configuration | Create React App

空の body を持つ関数を禁止する lint rule とかあるけど、ああいうのもわずらわしく感じる
- () => {} から書き始めるので、大体空になって怒られる
- 書いている途中で赤線が引かれて、「あれ何か間違った?」とびっくりすることが多い
- こういうのも警告レベルを落としたり、無効にすると良い?
  - しかしキリがなくて大変そう
  - こういう細かいチューニングをするよりは他のことに時間を掛けたい
- 発想は面白いと思う！
エディタ上で未 format のコードに赤線を引いてくる開発環境もあるけど、あれもわずらわしい
- インデントの深さが間違ってたら真っ赤になる
  - スタイルガイドに合ってないだけで、コードの挙動は正しいのに…
- エディタ上では警告せずに formatOnSave で勝手に format する & CI 上では警告する、くらいが丁度よい
  - ref: ESLint, Prettier, VS Code, npm scripts の設定: 2021春