Skip to main content

AI開発支援ツール

開発環境をより良くするためのAI支援ツールを紹介する。

これらのツールは、AIエージェントの機能を拡張し、フロントエンド開発やコードレビューの効率を向上させる。

目的別ツール選定表​

AIエージェントにプロジェクトを探索・分析させる際に有効なツールを目的別に分類した。

目的推奨ツールAIとの連携パターン
依存関係分析madge, dependency-cruiser循環参照の検出、アーキテクチャ違反の特定
不要コード発見knip未使用ファイル・エクスポートの抽出と削除判断
セキュリティsemgrep, git-secrets脆弱性パターンのスキャンと修正案の生成
型品質向上type-coverageany の撲滅、型定義が不十分な箇所の特定
Git 分析git log, gh (GitHub CLI)変更頻度の高い「ホットスポット」の特定、PRレビュー
ドキュメントmermaid-cli, textlint図の構文チェック、文章の校正とトンマナ統一
バンドル分析bundle-phobia, webpack-bundle-analyzerパッケージ導入判断、肥大化原因の特定

Agent Skills​

AIコーディングエージェントの機能を拡張する再利用可能な命令セットである。

Vercel Labsが提供するこのツールは、AIエージェント向けのパッケージマネージャーとして機能し、ReactやNext.jsの最適化ルールなどを簡単に導入できる。

インストール​

npx add-skill vercel-labs/agent-skills

サポート対象エージェント​

  • Claude Code
  • OpenCode
  • Cursor
  • Codex
  • Antigravity

主要機能​

  • react-best-practices: ReactとNext.jsのパフォーマンス最適化ガイドライン
  • web-design-guidelines: Webインターフェースのベストプラクティスレビュー
  • vercel-deploy-claimable: Vercelへの即座のデプロイ機能

参考リンク​

Frontend Design Plugin​

Claude Code向けのプラグインである。

高品質で本番レベルのフロントエンドインターフェースを構築するためのツールであり、モダンなデザインパターンを使用して洗練されたインターフェースを作成できる。

React、Vue、Svelte、vanilla HTML/CSSをサポートしている。

インストール​

claude plugins add frontend-design@claude-code-plugins

有効化​

claude.settingsファイルでプラグインを有効化する。

{
  "enabledPlugins": {
    "frontend-design@claude-code-plugins": true
  }
}

主要機能​

  • /frontend-design: ページやコンポーネントの構築を支援するガイド付きワークフロー
  • /design: UIコンポーネントを素早く生成するクイックモード
  • /ui: デザインシステムを考慮したUIコンポーネント生成
  • /layout: レスポンシブレイアウトとページ構造の作成

参考リンク​

Difit​

ローカルのGit差分をGitHub風のインターフェースで表示し、レビューできるCLIツールである。

AIエージェント向けのプロンプト生成機能を備え、コードレビューを効率化する。

インストール​

インストール方法は、目的に応じて以下の3種類がある。

  • クイック試用

    npx difit

  • グローバルインストール

    npm install -g difit

  • AIエージェントとの統合

    npx skills add yoshiko-pg/difit

主要機能​

  • 複数の差分表示モード（単一コミット、コミット/ブランチ比較、未コミット変更）
  • GitHub PRのレビュー機能（--prフラグ）
  • コメントシステムとAI向けプロンプト生成
  • 自動ファイル折りたたみ（生成ファイル、ロックファイル、削除ファイルなど）
  • シンタックスハイライト（20以上のプログラミング言語）
  • Unified/Split差分表示の切り替え
  • TUIモード（--tuiフラグ）

参考リンク​

関連ガイド​

これらのツールと組み合わせることで、AIエージェントとの協働開発がより効率的になる。

AIとの連携パターン​

CLIツールの出力をAIに渡す際の代表的なパターン。

  1. 結果を根拠として判断させる：
    • AIに knip を実行させ、その結果（未使用リスト）を元に「どのファイルを削除し、どのエクスポートを非推奨にするか」を判断させる。
  2. メトリクスに基づいた最適化：
    • type-coverage の数値をAIに渡し、「このディレクトリの型カバレッジを80%から90%に引き上げて」と依頼する。
  3. 静的解析による自動修正：
    • semgrep で検出された脆弱性パターンに対し、AIにパッチを作成させる。

導入時の注意点とリスク​

ツールを導入・運用する際の代表的なリスクと回避策。

  • 誤検知（False Positives）：
    • リスク: ツールが正常なコードをエラーと判定し、AIが誤って修正してしまう。
    • 回避策: 重要な操作（ファイルの削除など）は、AIの判断の後に必ず人間が確認するステップを設ける。
  • ネットワーク・言語依存：
    • リスク: semgrep のようにルール取得に外部ネットワークが必要なツールや、特定の言語にしか対応していないツールがある。
    • 回避策: オフライン環境や異言語プロジェクトでのフォールバック策（代替ツールの指定）をSkillsに定義しておく。
  • CI コストの増大：
    • リスク: 重い解析ツールをCIですべて回すと、開発体験が損なわれる。
    • 回避策: ローカルのGit Hooksでは差分のみを対象とし、全件スキャンは定期実行やPR時のCIに限定する。
Last updated on