[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-web-dev-04-pair-programming:{}":9},{"links":4},[5],{"platform":6,"url":7,"icon":8},"note","https://note.com/morinoupa2020","simple-icons:note",{"post":10,"relatedPosts":44,"prevPost":118,"nextPost":121},{"id":11,"slug":12,"title":13,"date":14,"excerpt":15,"content":16,"thumbnail":17,"categories":18,"tags":23,"difficulty":40,"tldr":41,"readingTime":42,"relatedTech":43},243,"ai-web-dev-04-pair-programming","【AI×Web制作 #4】AIエージェントとペアプログラミングする現場","2026-02-25T13:00:00","AIとのペアプロって実際どんな感じ？コード生成→レビュー→修正のサイクル、AIが得意なこと・苦手なこと、方向修正のリアルを公開。","\u003Cp>シリーズ第4回。いよいよ実装の話です。\u003C/p>\n\u003Cp>技術選定が終わって、Nuxt + WordPressという構成が決まりました。ここからは、\u003Cstrong>AIエージェントと一緒にコードを書いていく日々\u003C/strong>の始まりです。\u003C/p>\n\u003Cp>「AIとペアプロ（ペアプログラミング）って、実際どんな感じなの？」——そのリアルをお伝えします。\u003C/p>\n\u003Ch2>Agent Teamsでチーム開発\u003C/h2>\n\u003Cp>\u003Cstrong>僕（人間）→ PMエージェント → 実装担当/確認担当\u003C/strong>——\u003C/p>\n\u003Cp>第2回で設計したこの体制が、実装フェーズで本格的に動き出しました。Agent Teams（複数のAIエージェントをチームとして動かせる機能）をフル活用して、僕がPMに「こういうものを作りたい」と伝えると、PMがタスクを分解して実装担当に振り、できたコードを確認担当がレビューする流れです。\u003C/p>\n\u003Ch2>典型的な開発の流れ\u003C/h2>\n\u003Cp>ちなみに、最初のひと通りの実装——共通レイアウト、各ページの骨組み、WordPress APIとの連携——は\u003Cstrong>ものの数時間で終わりました\u003C/strong>。一人で全部手作業でやったら、この工程だけで数日はかかるはず。AIチームのスピードは想像以上で、僕が要望を伝えている間に次々とコードが出来上がっていく感覚です。\u003C/p>\n\u003Cp>1回のやりとりの流れは、だいたいこんな感じでした。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>僕\u003C/strong>: 「こういうコンポーネント（UI部品）を作りたい。要件はこう」とPMに伝える\u003C/li>\n\u003Cli>\u003Cstrong>PM\u003C/strong>: タスクを分解して、実装担当に割り振る\u003C/li>\n\u003Cli>\u003Cstrong>実装担当AI\u003C/strong>: コードを書いてくれる\u003C/li>\n\u003Cli>\u003Cstrong>確認担当AI\u003C/strong>: できたコードをレビューして、問題点をフィードバック\u003C/li>\n\u003Cli>\u003Cstrong>僕\u003C/strong>: PMからの報告とレビュー結果を確認し、「ここを変えて」「この方向で直して」と判断\u003C/li>\n\u003Cli>\u003Cstrong>僕\u003C/strong>: 最後に実際にブラウザで表示を確認して、OKなら次へ進む\u003C/li>\n\u003C/ol>\n\u003Cp>一人開発なのに、登場人物が4者いるチーム開発の流れになっているのが分かりますか？ しかも、\u003Cstrong>AIは疲れないし、待たせても怒らない\u003C/strong>。夜中の2時に「やっぱりここ変えたい」と言っても、嫌な顔一つしません。\u003C/p>\n\u003Cp>フリーランスは作業時間が不規則になりがちなので、正直これはとても助かりました。\u003C/p>\n\u003Ch2>AIが得意だった3つのこと\u003C/h2>\n\u003Ch3>1. 型定義やテンプレート的なコード\u003C/h3>\n\u003Cp>TypeScript（型のあるJavaScript）の型定義や、Nuxtの決まった書き方に沿ったコードは、AIの最も得意な領域です。\u003C/p>\n\u003Cp>たとえば、「WordPressのAPIから返ってくるデータの形」と「フロントエンドで使いたいデータの形」は違います。この変換処理を、AIは\u003Cstrong>型定義からデータ変換のロジックまで一気に\u003C/strong>書いてくれます。\u003C/p>\n\u003Cp>人間がやると地味に時間がかかる作業ですが、AIにとっては朝飯前です。\u003C/p>\n\u003Ch3>2. 「これと同じパターンで別のを作って」\u003C/h3>\n\u003Cp>「ブログのカードと同じ構造で、実績紹介のカードを作って」という指示が、非常によく効きました。\u003C/p>\n\u003Cp>AIはプロジェクト内の既存コードを理解しているので、\u003Cstrong>デザインの統一感を保ちながら新しい部品を作ってくれる\u003C/strong>んです。人間だと「前のコードどこだっけ？」と探す時間がかかりますが、AIは一瞬です。\u003C/p>\n\u003Ch3>3. ちょっとした便利関数\u003C/h3>\n\u003Cp>「HTMLタグを除去する関数」「日付を見やすいフォーマットに変換する関数」「SEO用の構造化データを生成する関数」——こうした小さなユーティリティ（便利ツール）は、「こういう関数が欲しい」と言えばサッと作ってくれます。\u003C/p>\n\u003Ch2>AIが苦手だった2つのこと\u003C/h2>\n\u003Ch3>1. プロジェクト全体の「空気」を読むこと\u003C/h3>\n\u003Cp>AIは目の前のタスクは上手くこなしますが、「このサイト全体の中で、このページはどういう位置付けなのか」という大きな文脈の理解は弱いです。\u003C/p>\n\u003Cp>たとえば、実績紹介ページを作るとき、僕は「NDA（秘密保持契約）がある案件をどこまで載せるか」でかなり悩みました。業務実績はぼかして書くしかない、でも個人プロジェクトは詳しく見せたい——この\u003Cstrong>「何を見せて、何を見せないか」の判断は、あくまで人間がするべきコンテンツの意思決定\u003C/strong>です。\u003C/p>\n\u003Cp>AIは指示どおりにページを組み上げてくれますが、「この情報は出していいのか」「どう表現すればNDAに抵触しないか」まではわかりません。コンテンツの方針を決めるのは、最後まで人間の仕事でした。\u003C/p>\n\u003Ch3>2. 「使い心地」の判断\u003C/h3>\n\u003Cp>「このボタン、ここにあると押しにくいな」「この動き、ちょっとうっとうしいな」——こういう感覚的な判断はAIにはできません。\u003C/p>\n\u003Cp>コードだけ見ると問題ないけど、\u003Cstrong>実際にブラウザで触ってみると「なんか違う」と感じる\u003C/strong>。この「なんか違う」をキャッチして言語化するのは、人間だけの仕事です。\u003C/p>\n\u003Ch2>AIの出力を「方向修正」した実例\u003C/h2>\n\u003Cp>具体的なエピソードを紹介します。\u003C/p>\n\u003Cp>サイト全体のデザインが一通り組み上がったとき、AIはデザインガイドラインに忠実に、各コンポーネントのテキスト色をCSS変数で設定してくれました。見出しは明るめ、本文はやや控えめ、補足テキストはさらに薄く——ルール通りの階層構造です。\u003C/p>\n\u003Cp>コード上は完璧。CSS変数もきれいに整理されていて、設計としては申し分ない。\u003C/p>\n\u003Cp>でも、\u003Cstrong>実際にブラウザで記事を読んでみたら「暗い。読みにくい」\u003C/strong>と感じたんです。\u003C/p>\n\u003Cp>ダークテーマの背景色に対して、本文テキストのグレー（#6B7280）が沈んでしまっている。長文を読み進めるには、ちょっとつらい。これはCSSの数値を見ているだけでは気づけない、\u003Cstrong>実際に目で見て、読んで、初めて分かる違和感\u003C/strong>でした。\u003C/p>\n\u003Cp>そこでAIに「本文テキストが暗すぎるから、もっと明るくして。ブログ記事やWorksの説明文など、じっくり読むテキストは全部 –color-text-primary に統一しよう」とフィードバック。結果的に、かなりの数のコンポーネントのテキスト色をまとめて修正することになりました。\u003C/p>\n\u003Cp>ここでの教訓は、\u003Cstrong>AIは設計ルールを正確に守るのが得意。でも「実際に使ったときにどう感じるか」は、人間が確かめないと分からない\u003C/strong>ということです。コードレビューだけでなく、\u003Cstrong>ブラウザで実際に触る・読む・感じる\u003C/strong>というステップが、AI協働では欠かせません。\u003C/p>\n\u003Ch2>計画にない作業が出てきたとき\u003C/h2>\n\u003Cp>第1回で紹介した「4フェーズの計画」に沿って進めていましたが、実際にはプロジェクトの途中で\u003Cstrong>計画にはなかった作業\u003C/strong>がいくつも出てきました。\u003C/p>\n\u003Cp>たとえば——\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>WordPressのローカル開発環境構築\u003C/strong>——LXCコンテナでWordPressを動かす環境をゼロから構築。計画時点では「既存のWP環境を使う」くらいのイメージだったのが、実際にはコンテナ設定・ポートフォワード・オフラインインストールなど、かなりの作業量になった\u003C/li>\n\u003Cli>\u003Cstrong>UI改善のブラッシュアップ\u003C/strong>——ひと通り実装が終わった後、「ここの余白が気になる」「このホバーエフェクトを調整したい」といった細かい改善が山ほど出てきた。計画には「実装」とあるだけで、こうした磨き込みのフェーズは想定していなかった\u003C/li>\n\u003Cli>\u003Cstrong>別のAIエージェントとの連携\u003C/strong>——このプロジェクトではClaude Codeだけでなく、別のAIエージェント（Google系）にもUI改善やOGP実装を手伝ってもらった。エージェント間の情報共有のために、共有ディレクトリとドキュメントルールを整備する必要があった\u003C/li>\n\u003C/ul>\n\u003Cp>こうした計画外の作業が出てきたとき、\u003Cstrong>PMが都度判断して小規模なチームを編成し、対応してくれた\u003C/strong>のが大きかったです。UI改善なら「デザイン調査担当＋実装担当＋レビュー担当」の3名チーム、環境構築なら「実装担当＋確認担当」の2名チーム——というように、作業の性質に合わせて柔軟にチームを立ち上げてくれる。\u003C/p>\n\u003Cp>人間がPMをやっていたら、計画外の作業が積み重なるたびに「これもやらなきゃ」と焦りが生まれます。でもPMをAIに任せていると、\u003Cstrong>PMが淡々とタスクを整理して、最適なチームで対処していく\u003C/strong>ので、僕は「これでOK？」と確認するだけ。この安心感は大きいです。\u003C/p>\n\u003Ch2>一人開発の味方——AIによるコードレビュー\u003C/h2>\n\u003Cp>面白い使い方として、\u003Cstrong>AIが書いたコードをAI自身にレビューさせる\u003C/strong>こともしました。\u003C/p>\n\u003Cp>「このコードをレビューして。セキュリティ（安全性）、パフォーマンス（処理速度）、アクセシビリティ（使いやすさ）の観点で」と依頼すると、問題点を指摘してくれます。\u003C/p>\n\u003Cp>完璧ではないですが、\u003Cstrong>一人開発の「見落とし」を減らす効果\u003C/strong>は確実にあります。人間って、自分で書いたコードの問題点にはなかなか気づけないものなので、「もう一つの目」があるのは心強い。\u003C/p>\n\u003Ch2>まとめ——AIは「24時間対応のチームメイト」\u003C/h2>\n\u003Cp>AIとのペアプログラミングで感じたことをまとめます。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>決まったパターンの実装\u003C/strong> → AIに任せるとびっくりするほど速い\u003C/li>\n\u003Cli>\u003Cstrong>既存コードの横展開\u003C/strong> → AIが一番活きる場面\u003C/li>\n\u003Cli>\u003Cstrong>使い心地の判断や方向性\u003C/strong> → 人間が握るべき部分\u003C/li>\n\u003Cli>\u003Cstrong>コードレビュー\u003C/strong> → AIの客観的な目も活用できる\u003C/li>\n\u003C/ul>\n\u003Cp>そして何より実感したのは、\u003Cstrong>開発期間の圧倒的な時短\u003C/strong>です。企画・設計を含めたプロジェクト全体が、一人で手作業でやった場合の何分の一かの期間で形になりました。単純に「コードを書く速度が速い」だけでなく、PMがタスクを分解して複数のエージェントに並行で割り振るので、\u003Cstrong>人間一人では物理的に不可能な並列作業\u003C/strong>が実現するんです。\u003C/p>\n\u003Cp>大事なのは、AIを「便利なコード生成ツール」ではなく、\u003Cstrong>「チーム」として機能させること\u003C/strong>。PMに要望を伝えて、PMがチームを動かし、僕は確認と判断に集中する。この体制があるからこそ、一人開発でもチーム並みの生産性が手に入るんです。\u003C/p>\n\u003Cp>次回は、このプロジェクトで一番試行錯誤した「デザイン・演出」の話。人間の感性とAIの実装力をどう組み合わせたかをお話しします。\u003C/p>\n","",[19],{"id":20,"name":21,"slug":22},35,"サイト構築","site-building",[24,28,32,36],{"id":25,"name":26,"slug":27},78,"AI協働","ai-collaboration",{"id":29,"name":30,"slug":31},20,"Nuxt","nuxt",{"id":33,"name":34,"slug":35},26,"TypeScript","typescript",{"id":37,"name":38,"slug":39},28,"Vue.js","vue","intermediate","パターン的な実装はAIが爆速。UX判断や方向修正は人間の仕事。AIを「チームメイト」として扱うのがコツ。","7",[],[45,77,102],{"id":46,"slug":47,"title":48,"date":49,"excerpt":50,"thumbnail":17,"categories":51,"tags":56,"difficulty":74,"tldr":75,"readingTime":76},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]",[52],{"id":53,"name":54,"slug":55},44,"技術深掘り","deep-dive",[57,58,62,66,70],{"id":25,"name":26,"slug":27},{"id":59,"name":60,"slug":61},81,"Claude Code","claude-code",{"id":63,"name":64,"slug":65},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":67,"name":68,"slug":69},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":71,"name":72,"slug":73},86,"実務","%e5%ae%9f%e5%8b%99","beginner","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",{"id":78,"slug":79,"title":80,"date":81,"excerpt":82,"thumbnail":17,"categories":83,"tags":85,"difficulty":40,"tldr":100,"readingTime":101},252,"wordpress%e3%83%90%e3%83%83%e3%82%af%e3%82%a8%e3%83%b3%e3%83%89%e3%82%92ai%e3%81%ab%e5%85%a8%e4%bb%bb%e3%81%9b%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f-%e6%84%9f%e6%80%a7%e3%81%8c%e8%a6%81","WordPressバックエンドをAIに全任せしてみた — 感性が要らない領域こそAI向きなのか検証する","2026-03-15T02:38:53","WordPressのバックエンド——カスタム投稿タイプの定義、REST APIの設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[84],{"id":53,"name":54,"slug":55},[86,87,88,92,96],{"id":25,"name":26,"slug":27},{"id":59,"name":60,"slug":61},{"id":89,"name":90,"slug":91},82,"PHP","php",{"id":93,"name":94,"slug":95},83,"REST API","rest-api",{"id":97,"name":98,"slug":99},31,"WordPress","wordpress","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":103,"slug":104,"title":105,"date":106,"excerpt":107,"thumbnail":17,"categories":108,"tags":110,"difficulty":40,"tldr":117,"readingTime":42},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[109],{"id":53,"name":54,"slug":55},[111,112,113],{"id":29,"name":30,"slug":31},{"id":33,"name":34,"slug":35},{"id":114,"name":115,"slug":116},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。",{"slug":119,"title":120,"thumbnail":17},"ai-web-dev-03-tech-selection","【AI×Web制作 #3】AIと一緒に技術スタックを選ぶ",{"slug":122,"title":123,"thumbnail":17},"ai-web-dev-05-design-and-animation","【AI×Web制作 #5】人間の感性 × AIの実装力 — デザイン・演出編"]