Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Avatar for 弁護士ドットコム

弁護士ドットコム

July 04, 2025
Tweet

More Decks by 弁護士ドットコム

Other Decks in Technology

Transcript

  1. Bengo4.com, Inc. 11 Button コンポーネントを作って! 仕様: • xxxxxxxx • xxxxxxxx

    • xxxxxxxx ※コンテキストが過不足ないケースを想定
  2. Bengo4.com, Inc. 20 補足: 原則通りに TDD させたいなら ... 前述のプロンプトだと最初に全テストを一括で書こうとする。 単機能ごとに

    TDD サイクルを回したいなら、テスト駆動開発の著者 Kent Beck 氏のプロンプトが参考になる。 https://github.com/KentBeck/BPlusTree3/blob/main/rust/docs/CL AUDE.md ※最後にこれに関連したプロンプト紹介します
  3. Bengo4.com, Inc. 29 - TDD を実施してください(RED → GREEN → REFACTORING)

    - 最後に、 `npm run lint` を実行して今回の実装で発生した warning と error を修正してく ださい リンターを実行させるプロンプト例
  4. Bengo4.com, Inc. • 厳格なルールを導入する • npx コマンドで実行する • AI 特有のミスを検知可能にする

    • 変更差分に注目してチェック可能にする 34 AI 専用のリンターでやること
  5. Bengo4.com, Inc. • このリンターは AI に実行させて、自律的に修正させることが目的 なので、プロジェクトにインストールしない • npx コマンドで実行することで、常に最新のルールが適用できる

    • 個人、もしくは少人数での取り組みとしてミニマムに開始可能(多く のエンジニアとの調整が不要) 36 npx コマンドで実行する
  6. 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 を適用し、 変更した行 だけ検査するようにしたオリジナルのオプション
  7. Bengo4.com, Inc. ## TODO 上から順に実行してください。 1. eslint.config.ts にルールを追加してください 2. テストをして意図した通りにリンターが動作するか確認してください

    3. 上手くエラー検知しない場合は修正してください 4. テスト成功後、テスト時の検証テスト用のファイルを作成した場合は削除してください 42 ルール追加用プロンプト例
  8. 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 }>()
  9. Bengo4.com,Inc. VISION まだないやり方で、世界を前へ。 Drive a paradigm shift for the better

    world. MISSION 「プロフェッショナル・テック 」で、次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。専門知とテクノロジーで、社会に貢献する。
  10. Bengo4.com, Inc. OUR SERVICE 最新の法改正や実務について分かりやすく解説する 日本最大級の企業法務ポータルサイト 日本最大級の無料法律相談ポータルサイト 税理士に無料で相談・検索できる日本最大級の 税務相談ポータルサイト 時事問題の弁護士解説を中心としたメディア

    弁護士事務所、企業法務職向け人材紹介事業 契約の締結から管理までデジタルで完結させる 契約マネジメントプラットフォーム AI基盤技術「 LegalBrain 1.0」を組み込んだ リーガル特化型 AIエージェント