保存のたびに失われる⾃我。ハッカソンに静的解析ツールは必要なのか？

うめきたTechカンファレンス　~大新年会~ - connpass でLTをした時のスライドです。
友達らと出たハッカソンである友人がFormatter/Linterに苦しめられた実体験を元に、ハッカソンにおける静的解析ツールについてお話しました。

Transcript

1. 保存のたびに失われる自我。ハ ッカソンに静的解析ツールは必 要なのか？ @timdaik うめきたTech カンファレンス 新年会LT 2026.01.24
2. アジェンダ リンタ・フォーマッタとは？ ハッカソンで起きたこと なぜ問題が起きたのか 結論：使うべきなのか？
3. リンタ・フォーマッタとは？ 静的解析ツールと呼ばれる コードの品質を自動で向上させる チーム開発での一貫性を保つ エディタと統合して自動実行可能 設定ファイルでルールをカスタマイズできる 保存時やコミット時に自動適用できる 美しいプログラムを機械的に書けるツール
4. リンタ（Linter ）とは？ ソースコードを解析してコーディングルールに違反している箇所を検出 自動で修正してくれる場合も 目的 バグの原因になりうる箇所を事前に発見 パフォーマンスや可読性の問題を解決 文法上の表記揺れを統一 // JavaScript の例：セミコロンの有無 console.log("Hello") // セミコロンなし（OK） console.log("World"); // セミコロンあり（OK） // Linter が統一してくれる
5. フォーマッタ（Formatter ）とは？ ソースコードのスタイルをルールに基づいて整形 主にインデントやトークン間のスペースを揃える 保存時に自動実行できる // Before function example( ){const x=1;return x+2;} // After function example() { const x = 1; return x + 2; }
6. 事のあらまし ハッカソンで実際に起きたこと
7. プロジェクトの概要 メンバー構成 5 人チーム そのうち2 人がハッカソン初参加 実際の開発期間は約1 週間 使用技術 Web フロントエンド TypeScript, React に初めて触れる3 人 練度：授業中の課題でJS を使ってアプリケーションを作ったことがあるくらい 今はAI あるし、コードレビューもするから大丈夫やと思ってた
8. 良かれと思って… やったこと リンタ・フォーマッタのコンフィグを設定 エディタの拡張機能も入れるよう指示 目的 開発体験の向上 Git の余計な差分を発生させない レビュー体験を上げる みんな（自分）が楽にするための施策 しかし… リンタ・フォーマッタにキレてるY 君がいた
9. Y 君の主張 何が起きたのか CSS のカラーコードが勝手に修正された /* Y君が書いたコード */ .button { color: #FFFFFF; background: #FF5733; } /* ファイル保存時に自動で... */ .button { color: #ffffff; /* 小文字に修正された */ background: #ff5733; } せっかく大文字に統一したのに… 何度書き直しても勝手に小文字にされる
10. 実際のエラーメッセージ CSS の16 進数フォーマット Linter が小文字を強制していた Y 君が大文字で書く 保存すると自動で小文字に変換 何度やっても同じ結果... 機械的に否定される感覚
11. その他のエラー例 import 文の並び順 import 文が自動でソートされる設定になっていた。自分なりの順序 で整理しても、保存すると勝手に並び替えられてしまう。 スプレッド構文のフォーマット スプレッド構文の改行位置やスペース、インデントの深さまで指定 される。自由に書けない！
12. 考えられる問題 もし本当に問題になっていたら？ 保存時にフォーマッタが自動実行される 自分の好きな構文スタイルが上書きされる 機械的に否定される感覚 起こりうるリスク メンバーのUX が下がる可能性 チーム内に軋轢が生まれるかも 良かれと思った施策が裏目に… 実際には冗談交じりに揉めただけですが…
13. もしかして… ハッカソンに静的解析ツールは入れないほうが良い？
14. いや、逆に絶対入れて欲しい！！ 理由 自動フォーマットできる 保存するだけでコードが整形される 無駄なGit 差分が発生しない コーディングスタイルが統一されている AI に生成させるコードにも必要 AI はコーディングガイドなんて知ったこっちゃない レビューコストが下がる スタイルの議論をせずに済む バグを未然に防げる 潜在的な問題を事前に検出
15. オススメの静的解析ツール Biome 高速で設定が簡単な、Linter + Formatter の統合ツール。Prettier の後継として注目されています。 husky & lint-staged コミット前に自動でLinter を実行。チーム全体でコード品質を保てます。 .editorconfig エディタの設定を統一。インデントや改行コードなど、基本的なルールを共有できます。
16. 導入時のポイント 事前の説明をしっかりと セットアップのサポート フィードバックを聞く ドキュメントを残す
17. ありがとうございました リンター/ フォーマッターの歴史や今後について語られています 参考：リファクタリングとともに生きるラジオ #74