ChatGPTやGeminiに毎日同じ指示を打ち込んでいて、そろそろ定型作業を切り出したいと感じているフロントエンドエンジニアに向けた内容です。AIエージェント（人の指示を都度受けずに判断・実行まで行うAIの仕組み）を自作する方法を3方式に分けて整理し、フロントエンド開発の文脈でどれが使いやすいかを考えます。難しい前提知識は不要で、今日から試せる確認ポイントも添えます。
AIエージェントの自作方法は、大きく分けてチャット型・自動化型・実行型の3つに分類できます。それぞれ入力と出力の形が異なるため、まずこの違いを押さえると選び方に迷いにくくなります。
3つの方式は何が違うのか
チャット型は、GeminiやClaudeのチャット画面上に「スキル」や「カスタム指示」として役割・手順を登録しておく方式です。たとえばGeminiには「Gemini Gems」のようなカスタムアシスタント機能があり、名前・説明・指示文をあらかじめ設定しておくことで、毎回同じプロンプトを打たずに呼び出せます。対話の起点は常に人間側にあり、AIは会話のたびに応答するだけなので、自律的に動き回るわけではありません。
自動化型はn8nやDifyのようなワークフローツールを使い、トリガー（きっかけとなる条件）から処理までを自動で回す方式です。n8nはノードをドラッグ＆ドロップでつなぐビジュアルなワークフローエンジンで、セルフホスト（自前サーバーでの運用）も可能なOSS（オープンソースソフトウェア）です。情報収集から整形、通知までを定期実行で任せられるのが特徴で、人が指示を出すたびに待機するチャット型とは対照的です。
実行型はClaude CodeやCodexのように、ターミナルやエディタ上でコードの読み書き・実行まで行わせる方式です。Claude Codeはファイルの読み書き、コマンド実行、テストの実行までを一連の流れとしてこなせるため、単なる「コード生成補助」より踏み込んだ権限を持ちます。この3方式は「どこまでをAIに任せるか」というスコープ（作業範囲）の違いで並べ替えると理解しやすく、チャット型は応答のみ、自動化型は定型作業の反復実行、実行型はコード変更を含む実作業、という順に任せる範囲が広がっていきます。
フロントエンド開発でどこに当てはめるか
この3分類をフロントエンドの現場仕事に当てはめると、役割分担が見えてきます。
チャット型は、コンポーネント設計のレビュー観点を固定したいときや、CSSのデバッグ手順を毎回同じフォーマットで確認したいときに向いています。指示文に「レスポンシブ対応のチェックリストで答えて」のような固定のルールを書いておけば、毎回プロンプトを書き直す手間がなくなります。
自動化型は、Lighthouse（Googleが提供するWebページ品質測定ツール）のスコアを定期的に取得してSlackに通知する、npmパッケージの脆弱性情報を集めて週次でまとめる、といった定型の巡回作業に向いています。n8nにはHTTPリクエストノードやスケジュールトリガーが標準で用意されているため、API連携を伴う監視タスクを組みやすい構成です。
実行型は、Reactコンポーネントの型エラー修正やテストコードの追加など、実際にリポジトリへ変更を加える作業に向いています。Claude Codeはターミナル上でgit diffの内容を把握しながら動くため、変更範囲を人が都度確認しやすいのも利点です。ただし権限が強い分、実行前にブランチを切る・バックアップを取るといった安全策は欠かせません。
CI/CDやノーコード自動化との比較で見える立ち位置
フロントエンドエンジニアにとって自動化型のn8nは、GitHub ActionsのようなCI/CD（継続的インテグレーション・継続的デリバリー）パイプラインと役割が近く見えますが、性質は異なります。GitHub Actionsはコードのpushやプルリクエストといった明確なイベントに反応するのに対し、n8nはAPI呼び出し・定期実行・Webhookなど、より広い範囲のトリガーを柔軟に組み合わせられる汎用ワークフロー基盤です。既存のCIにAIエージェントの判断ステップを挟みたい場合、n8nをCIの外側で動かし、結果だけをWebhook経由でCIに連携する構成も検討できます。
実行型のClaude Codeは、GitHub CopilotのようなIDE内の補完ツールとも比較されますが、Copilotが「次の一行」を提案するのに対し、Claude Codeは「タスク全体を任せて最後まで実行させる」設計です。この違いは、エディタの枠内で完結するか、ターミナルやファイルシステム全体に触れるかという権限範囲の違いとして理解すると整理しやすくなります。
今日確認できること
実際に試す前に、自分の環境で以下を確認しておくと選択を間違えにくくなります。
- 任せたい作業が「応答」「反復実行」「コード変更」のどれに近いかを1つに絞る
- Geminiのスキル機能（カスタムアシスタント）が自分のアカウントプランで使えるか、Google公式のGemini設定画面で確認する
- n8nを試す場合はセルフホスト版かクラウド版かを選び、無料枠の実行回数制限を公式サイトで確認する
- Claude Codeを試す場合は、対象リポジトリでGitの管理下にあるか、変更前にブランチを切れる状態かを確認する
- AIに渡す権限の範囲（読み取りのみか、書き込み・実行まで許可するか）を最初に決めておく
どの方式も、最初から大きな権限を与える必要はありません。チャット型で指示文の精度を固めてから自動化型・実行型へ段階的に広げていくと、途中でつまずいても被害を小さく抑えられます。
まとめ
AIエージェントの自作は、チャット型・自動化型・実行型という3つのスコープの違いで整理すると選びやすくなります。フロントエンド開発では、レビュー観点の固定にチャット型、Lighthouseスコアの監視など定型巡回に自動化型、コード変更を伴う作業に実行型という使い分けが現実的です。まずは自分が任せたい作業がどのスコープに属するかを1つ書き出し、対応するツールの無料枠や権限設定を公式サイトで確認するところから始めてみてください。