AI専用のリンターを作る #yumemi_patch

2025年7月4日(金)開催、「【Qiita Bash】MCPで広がる生成AI活用の可能性」で登壇した、弁護士ドットコム株式会社 クラウドサイン エンジニア の辻佳佑が登壇した際の資料です。

セッションタイトル：AI 専用のリンターを作る

フロントエンド × AI - 品質と効率を高める生成AIの活用
https://yumemi.connpass.com/event/356693/

■ 弁護士ドットコム株式会社プロダクト組織について
https://speakerdeck.com/bengo4com/introduction-for-creators

■ 採用情報はこちら
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム Creators’ blog
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATOR'S
https://x.com/bengo4_creators

Transcript

1. Bengo4.com, Inc. AI 専用のリンターを作る 2025.07.04 辻 佳佑
2. Bengo4.com, Inc. 辻 佳佑 Keisuke Tsuji フロントエンドエンジニア 弁護士ドットコム株式会社 クラウドサイン ＜ 趣味 ＞ ボイトレ・ミシン ＜ X アカウント ＞ @t0daaay 2 自己紹介
3. Bengo4.com, Inc. AI 使ってますか？ 3
4. Bengo4.com, Inc. 4 弁護士ドットコム の AI ツール活用状況 他にも色々
5. Bengo4.com, Inc. 5 手動コーディングの一時禁止
6. Bengo4.com, Inc. 6 全社で AI 活用コンテストが開催
7. Bengo4.com, Inc. 7 AIエージェントサービスがリリース
8. Bengo4.com, Inc. 今 AI が熱い🔥 8
9. Bengo4.com, Inc. 本題！ 9
10. Bengo4.com, Inc. フロントエンド実装、 AI エージェント で上手くこなせてる？ 10
11. Bengo4.com, Inc. 11 Button コンポーネントを作って！ 仕様: • xxxxxxxx • xxxxxxxx • xxxxxxxx ※コンテキストが過不足ないケースを想定
12. Bengo4.com, Inc. 12 仕様通り Button コンポーネント作った！
13. Bengo4.com, Inc. 以上、完成。 13
14. Bengo4.com, Inc. 以上、完成。 14
15. Bengo4.com, Inc. 15 AI の生成コードでありがちな問題 • コードがバグってる • コーディングルールに沿わない実装
16. Bengo4.com, Inc. 16 AI 生成コードでありがちな問題 • コードがバグってる • コーディングルールに沿わない実装
17. Bengo4.com, Inc. 17 問題1: コードがバグっている TDDしよう
18. Bengo4.com, Inc. 18
19. Bengo4.com, Inc. 19 TDD させるプロンプト例 - TDD を実施してください (RED → GREEN → REFACTORING)
20. Bengo4.com, Inc. 20 補足: 原則通りに TDD させたいなら ... 前述のプロンプトだと最初に全テストを一括で書こうとする。 単機能ごとに TDD サイクルを回したいなら、テスト駆動開発の著者 Kent Beck 氏のプロンプトが参考になる。 https://github.com/KentBeck/BPlusTree3/blob/main/rust/docs/CL AUDE.md ※最後にこれに関連したプロンプト紹介します
21. Bengo4.com, Inc. テストを実行することで バグを検知できるようになる👍 21
22. Bengo4.com, Inc. 22 AI 生成コードでありがちな問題 • コードがバグってる • コーディングルールに沿わない実装
23. Bengo4.com, Inc. コーディングルールを AI の システムプロンプトに書けば安心？ 23
24. Bengo4.com, Inc. コーディングルールを AI の システムプロンプトに書けば安心？ 24
25. Bengo4.com, Inc. 25 システムプロンプト守らない問題 システムプロンプト（ルールファイル） は記述してい ても、その内容が守られないことが多くある。
26. Bengo4.com, Inc. じゃあ、どうする？ 26
27. Bengo4.com, Inc. リンターの出番 27
28. Bengo4.com, Inc. 28
29. Bengo4.com, Inc. 29 - TDD を実施してください(RED → GREEN → REFACTORING) - 最後に、 `npm run lint` を実行して今回の実装で発生した warning と error を修正してく ださい リンターを実行させるプロンプト例
30. Bengo4.com, Inc. これでコーディングルールが 守られるようになる？ 30
31. Bengo4.com, Inc. 31 プロジェクトのリンターあるある • リンターのルールがコーディングルールに対して緩い • リンターのルールの追加でチームの合意が必要（導入まで長引く） • AI 特有の微妙な構文や、頻繁にしがちなミスがルールとして考慮され ていない
32. Bengo4.com, Inc. AI 専用のリンター で解決👍 32
33. Bengo4.com, Inc. 33
34. Bengo4.com, Inc. • 厳格なルールを導入する • npx コマンドで実行する • AI 特有のミスを検知可能にする • 変更差分に注目してチェック可能にする 34 AI 専用のリンターでやること
35. Bengo4.com, Inc. • コーディングルールや一般的なプラクティスをもとに、プロダクトの リンターで導入できていないルールを入れる • ライブラリにないものはカスタムルールとして追加する（カスタム ルールの作成は生成 AI が得意） 35 厳格なルールを導入する
36. Bengo4.com, Inc. • このリンターは AI に実行させて、自律的に修正させることが目的 なので、プロジェクトにインストールしない • npx コマンドで実行することで、常に最新のルールが適用できる • 個人、もしくは少人数での取り組みとしてミニマムに開始可能（多く のエンジニアとの調整が不要） 36 npx コマンドで実行する
37. Bengo4.com, Inc. • AI 特有の微妙な構文やミスがあるので、それもルールに適用して 検知させる ◦ 例: ライブラリの新機能の実装は LLM の学習データが少なく不安定 37 AI 特有のミスを検知可能にする
38. Bengo4.com, Inc. • 実装範囲外のエラーはノイズになる可能性があるので変更部分 にできるだけフォーカスしてエラーを出す • paleite/eslint-plugin-diff を使って変更した行だけリンター実行 できるようにして実現可能 38 変更差分に注目してチェック可能にする
39. Bengo4.com, Inc. - TDD を実施してください(RED → GREEN → REFACTORING) - 実装完了後、 `npx AI専用リンター {変更ファイル } --diff --no-cache` を実行して今回の 実装で発生した warning と error を修正してください - 最後に、`npm run lint` を実行して今回の実装で発生した warning と error を修正してくだ さい 39 AI 専用のリンターを実行させるプロンプト例 ※ —diff は paleite/eslint-plugin-diff を適用し、 変更した行 だけ検査するようにしたオリジナルのオプション
40. Bengo4.com, Inc. これでリンターで管理可能な コーディングルールは 検知できる環境に👍 40
41. Bengo4.com, Inc. 最初から欲しいリンターのルールを網羅するのは難しい。 下記をルールとして随時追加していくのがオススメ。 • AI エージェントによる実装後、修正が必要 になった内容 • コードレビューで指摘された内容 41 AI 専用のリンターにルールを追加して育てる
42. Bengo4.com, Inc. ## TODO 上から順に実行してください。 1. eslint.config.ts にルールを追加してください 2. テストをして意図した通りにリンターが動作するか確認してください 3. 上手くエラー検知しない場合は修正してください 4. テスト成功後、テスト時の検証テスト用のファイルを作成した場合は削除してください 42 ルール追加用プロンプト例
43. Bengo4.com, Inc. 43 実例 デフォルト値を設定し忘れている 任意のプロパティの場合は、デフォルト値をつけておいたほうが良さそうです。 コードレビューの指摘
44. Bengo4.com, Inc. 44 バイブコーディングでルールを追加 ## TODO 上から順に実行してください。 1. eslint.config.ts にルールを追加してください 2. テストをして意図した通りにリンターが動作するか確認してください 3. 上手くエラー検知しない場合は修正してください 4. テスト成功後、テスト時の検証テスト用のファイルを作成した場合は削除してください ## ESLint に追加するルール vue の props がオプショナルだったときにデフォルト値の設定を必須にする。 例: × const { disabled } = defineProps<{ disabled?: boolean }>() ◦ const { disabled = false } = defineProps<{ disabled?: boolean }>()
45. Bengo4.com, Inc. 45 追加されたルール（長いので一部省略）
46. Bengo4.com, Inc. 46 AI 専用のリンターを実行した結果、エラーとして検知できた 👏
47. Bengo4.com, Inc. 次に AI が同じミスをした場合は、 自己検知で修正可能に🎉 47
48. Bengo4.com, Inc. 最後に、単機能ごと に先ほどのワークフローを 実行できるプロンプトを紹介 48
49. Bengo4.com, Inc. 49 単機能ごとにワークフローを実行する （for Claude Code）
50. Bengo4.com, Inc. 50 TODO にワークフローを明記させることで、サブエージェントがワークフローを適切に理解してタスク 実行できるようになる。明記がないとワークフロー通りの動きをしないので注意。 複雑なワークフローを反復させるコツ
51. Bengo4.com, Inc. 51 機能1 機能2 機能n これで仕様を満たすまでワークフローを何度も実行し続けてくれる🎉
52. Bengo4.com, Inc. We are Hiring
53. Bengo4.com, Inc. ありがとうございました
54. 会社紹介 54
55. Bengo4.com,Inc. VISION まだないやり方で、世界を前へ。 Drive a paradigm shift for the better world. MISSION ｢プロフェッショナル・テック ｣で、次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。専門知とテクノロジーで、社会に貢献する。
56. Bengo4.com, Inc. OUR SERVICE 最新の法改正や実務について分かりやすく解説する 日本最大級の企業法務ポータルサイト 日本最大級の無料法律相談ポータルサイト 税理士に無料で相談・検索できる日本最大級の 税務相談ポータルサイト 時事問題の弁護士解説を中心としたメディア 弁護士事務所、企業法務職向け人材紹介事業 契約の締結から管理までデジタルで完結させる 契約マネジメントプラットフォーム AI基盤技術「 LegalBrain 1.0」を組み込んだ リーガル特化型 AIエージェント