mizdra's blog

ぽよぐらみんぐ

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

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

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

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

create-react-app のおせっかい機能

  • 「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 で起動してる

更に一歩踏み込んで考えてみる

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

書いてみて思ったけど、「静的型エラーを無視してトランスパイルする」とか「ブラウザにエラー内容をオーバーレイで表示しない」とか、Web フロントエンドならではの話題ばかりだった。

ポケットモンスター・ポケモン・Pokémon・は任天堂・クリーチャーズ・ゲームフリークの登録商標です.

当ブログは @mizdra 個人により運営されており, 株式会社ポケモン及びその関連会社とは一切関係ありません.