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