[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/wordpressバックエンドをaiに全任せしてみた-感性が要:{}":9},{"links":4},[5],{"platform":6,"url":7,"icon":8},"note","https://note.com/morinoupa2020","simple-icons:note",{"post":10,"relatedPosts":48,"prevPost":116,"nextPost":117},{"id":11,"slug":12,"title":13,"date":14,"excerpt":15,"content":16,"thumbnail":17,"categories":18,"tags":23,"difficulty":44,"tldr":45,"readingTime":46,"relatedTech":47},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の設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]","\u003Cp>WordPressのバックエンド——カスタム投稿タイプの定義、REST APIの設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。\u003C/p>\n\u003Cp>前回までの連載で「デザインやアニメーションなど、人間の感性に頼る部分はAIだけでは難しい」という話をしました。じゃあ逆に、感性があまり求められないバックエンドの作業は、どこまでAIに任せられるのか？\u003C/p>\n\u003Cp>このサイトの開発ではClaude Codeの「Agent Teams」機能を使い、バックエンド担当・フロントエンド担当といった形でAIエージェントに役割を分担させています。今回はそのうちのバックエンド——WordPressの実装をAIに全任せした結果を振り返ります。\u003C/p>\n\u003Ch2>AIに渡した要件\u003C/h2>\n\u003Cp>今回のサイトはヘッドレスCMS構成です。WordPressはコンテンツ管理だけを担当し、フロントエンドはNuxt 4で構築しています。つまりWordPress側に必要なのは、テーマの見た目ではなく「データを正しく管理・配信する仕組み」です。\u003C/p>\n\u003Cp>もうひとつ意識していたのが、\u003Cstrong>バックエンドにはできるだけお金をかけない\u003C/strong>ということ。WordPressをレンタルサーバーで動かしているのもそうですし、有料プラグインを使わずに実装するのもその一環です。コンテンツ管理に毎月のランニングコストをかけたくなかった。\u003C/p>\n\u003Cp>AIに渡した要件をざっくりまとめると、こんな感じでした。\u003C/p>\n\u003Cul>\n\u003Cli>複数のカスタム投稿タイプ（ブログ、実績、スキル、経歴、FAQ など）の定義\u003C/li>\n\u003Cli>それぞれに必要なACFフィールドの設計と実装\u003C/li>\n\u003Cli>REST APIのカスタマイズ（不要フィールドの除外、タクソノミーのターム名解決、セキュリティ対策）\u003C/li>\n\u003Cli>サイト設定の管理画面（キャッチコピー、ヒーロースライド、SNSリンクなどを管理画面から更新できるように）\u003C/li>\n\u003Cli>フロントエンドのキャッシュをWordPressの更新と連動してパージする仕組み\u003C/li>\n\u003Cli>\u003Cstrong>有料プラグインは使わない\u003C/strong>（ACF PROなどに頼らず、WordPress標準の機能で実現する）\u003C/li>\n\u003C/ul>\n\u003Cp>コストをかけずに、ヘッドレスCMSとして必要な機能をひと通り揃える。これが今回AIに出したお題です。\u003C/p>\n\u003Ch2>出来上がったもの\u003C/h2>\n\u003Cp>結論から言うと、AIはこれらをかなりの精度で実装してくれました。\u003C/p>\n\u003Ch3>カスタム投稿タイプとフィールド定義\u003C/h3>\n\u003Cp>必要なCPTがすべて定義され、各投稿タイプに適切なACFフィールドが設定されました。\u003C/p>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>投稿タイプ\u003C/th>\n\u003Cth>主なACFフィールド\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>ブログ\u003C/td>\n\u003Ctd>難易度、読了時間、TLDR（要約）\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>実績\u003C/td>\n\u003Ctd>プロジェクトタイプ、担当範囲、成果\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>スキル\u003C/td>\n\u003Ctd>習熟度、使用開始年\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>経歴\u003C/td>\n\u003Ctd>期間、役職、説明\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>クライアントの声\u003C/td>\n\u003Ctd>評価、企業名、担当者名\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>FAQ\u003C/td>\n\u003Ctd>質問、回答\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003Cp>タクソノミーも、ブログカテゴリ・タグ、技術スタック（複数CPTで共用）、業界カテゴリなど、必要な分類体系が整理されていました。\u003C/p>\n\u003Ch3>REST APIのカスタマイズ — チーム開発が効いた部分\u003C/h3>\n\u003Cp>ヘッドレスCMS構成で地味に重要なのが、REST APIのレスポンスを最適化することです。ここは「バックエンドが返すデータ」と「フロントエンドが受け取りたいデータ」のすり合わせが必要になる領域で、今回のAgent Teamsの体制が特に活きました。\u003C/p>\n\u003Cp>たとえば、タクソノミー（カテゴリやタグ）。WordPress標準のREST APIはタクソノミーをIDでしか返しません。フロント側で表示名を使いたければ、別途リクエストを投げて名前を取得する必要がある。これに対して、バックエンド担当のエージェントがレスポンスに名前とスラッグも含めるようにしたことで、フロント側の追加リクエストが不要になりました。\u003C/p>\n\u003Cp>アイキャッチ画像のURLも同じです。通常はひと手間かけないと画像URLが取れないんですが、バックエンド側で直接返すようにした。フロントエンド担当のエージェントが「こういう形でデータが欲しい」、バックエンド担当が「じゃあこう返す」——このやり取りがPM（自分の場合はClaude Code本体）の調整のもとで自然に回っていたのは、Agent Teamsの強みだと思います。\u003C/p>\n\u003Cp>その他にも、ヘッドレス構成では不要なフィールドの除外や、セキュリティ周りの対策も漏れなく揃っていました。\u003C/p>\n\u003Ch3>管理画面のカスタマイズ\u003C/h3>\n\u003Cp>一番感心したのがここです。WordPressのSettings APIを使って、サイト全体の設定を管理画面から編集できるUIが作られていました。\u003C/p>\n\u003Cul>\n\u003Cli>タブ形式で設定項目を整理（キャッチコピー、ヒーロースライド、SNSリンク、サービス一覧など）\u003C/li>\n\u003Cli>メディアライブラリとの連携\u003C/li>\n\u003Cli>リピーターフィールド（項目の追加・削除・並び替え）\u003C/li>\n\u003C/ul>\n\u003Cp>ACF PROがなくてもノーコードで管理画面が構築できていたのは、正直驚きました。\u003C/p>\n\u003Ch3>キャッシュパージ連携\u003C/h3>\n\u003Cp>WordPressで記事を更新したら、Nuxt側のキャッシュを自動でクリアする仕組みも実装されていました。投稿タイプごとにパージ対象のパスがマッピングされていて、たとえばブログ記事を更新したら\u003Ccode>/api/blogs\u003C/code>と\u003Ccode>/blog\u003C/code>のキャッシュが消える。サイト設定を変えたらトップページのキャッシュが消える、という具合です。\u003C/p>\n\u003Cp>非同期で実行されるため、投稿の保存処理がブロックされないのも好印象でした。\u003C/p>\n\u003Ch2>実際に使ってみて見つかった問題\u003C/h2>\n\u003Cp>ここまでは良い話。ただ、実際に管理画面を使い始めると、いくつか問題が出てきました。\u003C/p>\n\u003Ch3>キー名の不一致問題\u003C/h3>\n\u003Cp>サービス一覧の設定で、管理画面からクラス名を入力しても、フロント側に反映されないという現象が発生しました。\u003C/p>\n\u003Cp>原因を調べると、管理画面のフォームで保存しているキー名と、REST APIが読み出そうとしているキー名が違っていた。いわゆるcamelCaseとsnake_caseの不一致です。\u003C/p>\n\u003Cp>AIが書いたコードとしては一貫しているつもりだったんでしょうが、管理画面とAPIで別々に実装しているうちにキー名がズレた。結局、REST API側で両方のキーを参照するフォールバック処理を追加して解決しました。\u003C/p>\n\u003Ch3>運用を想定していない設計\u003C/h3>\n\u003Cp>スキルの「経験年数」は当初、管理画面から直接数字を入力する仕様でした。\u003C/p>\n\u003Cp>これ、今年は正しくても来年になったら全スキルの年数を手動で更新する必要がある。スキルの数が増えるほど管理の手間が増えます。\u003C/p>\n\u003Cp>「使用開始年」を入力して、フロント側で現在年から差し引いて表示する方式に変更しました。年が変わっても自動で更新されます。\u003C/p>\n\u003Cp>これはAIのバグというより、「運用視点の欠如」という問題です。仕様通りに動くコードは書けるけれど、「このデータを誰がいつ更新するのか」まで想像するのはまだ難しいようです。\u003C/p>\n\u003Ch3>タブ間のデータ消失\u003C/h3>\n\u003Cp>管理画面がタブ形式になっている関係で、あるタブの設定を保存したときに、別のタブの設定が消えてしまう問題がありました。\u003C/p>\n\u003Cp>Settings APIの仕様上、フォームに含まれないデータは空で上書きされてしまう。タブを切り替えたときに「今表示していないタブのデータを保持する」処理が必要で、既存の保存値をフォールバックとして使うよう修正しました。\u003C/p>\n\u003Ch3>後から必要になった並び順の変更機能\u003C/h3>\n\u003Cp>ヒーロースライドやSNSリンクの表示順を管理画面から変更したいという要件が後から出てきました。初期実装では順番が固定だったため、ドラッグによる並び替え機能を追加する必要がありました。\u003C/p>\n\u003Cp>これもAIが実装しましたが、並び替えたあとにフォームのデータ構造を整合させる処理が必要で、見た目以上に手間のかかる対応でした。\u003C/p>\n\u003Ch2>バックエンドはAI向きなのか？\u003C/h2>\n\u003Cp>振り返ると、\u003Cstrong>バックエンドの実装はAIの得意領域\u003C/strong>だと感じます。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>パターンが明確\u003C/strong> — 投稿タイプの定義、フィールドの登録、REST APIのカスタマイズ。どれもWordPressの定番パターンに沿った実装で、仕様を伝えれば適切な仕組みを使って実装してくれる\u003C/li>\n\u003Cli>\u003Cstrong>感性の出番が少ない\u003C/strong> — フロントエンドと違って「この余白がなんか違う」みたいなフィードバックがほとんど発生しない。仕様通りに動けば正解\u003C/li>\n\u003Cli>\u003Cstrong>修正が軽微\u003C/strong> — 問題が見つかっても局所的な修正で済む。大規模なリファクタリングが必要になるような設計ミスはなかった\u003C/li>\n\u003C/ul>\n\u003Cp>一方で、\u003Cstrong>「実際に使ってみないとわからない問題」は必ず出る\u003C/strong>というのも事実です。キー名の不一致、運用を考慮していない設計、タブ間のデータ消失——どれもコードとしては正しく動いているけれど、人間が管理画面を触ってはじめて気づく類のものでした。\u003C/p>\n\u003Ch2>まとめ\u003C/h2>\n\u003Cp>バックエンドこそAIに任せるべきか？という問いに対する自分の答えは、\u003Cstrong>「任せるべき。ただし、使い始めてからの微調整は前提」\u003C/strong>です。\u003C/p>\n\u003Cp>定型的な実装をAIに一気に作ってもらって、自分は管理画面を実際に操作しながら「ここ使いにくい」「この仕様だと運用が回らない」というフィードバックを返す。このサイクルが回れば、バックエンド開発はかなり効率化できます。\u003C/p>\n\u003Cp>逆に、AIが書いたコードを一切触らずにそのまま本番に持っていくのは危険です。動くことと使いやすいことは別の話なので。\u003C/p>\n\u003Cp>技術ブログの次回は、このサイトのインフラ構成とデプロイ戦略について書く予定です。\u003C/p>\n","",[19],{"id":20,"name":21,"slug":22},44,"技術深掘り","deep-dive",[24,28,32,36,40],{"id":25,"name":26,"slug":27},78,"AI協働","ai-collaboration",{"id":29,"name":30,"slug":31},81,"Claude Code","claude-code",{"id":33,"name":34,"slug":35},82,"PHP","php",{"id":37,"name":38,"slug":39},83,"REST API","rest-api",{"id":41,"name":42,"slug":43},31,"WordPress","wordpress","intermediate","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",[],[49,75,98],{"id":50,"slug":51,"title":52,"date":53,"excerpt":54,"thumbnail":17,"categories":55,"tags":57,"difficulty":72,"tldr":73,"readingTime":74},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]",[56],{"id":20,"name":21,"slug":22},[58,59,60,64,68],{"id":25,"name":26,"slug":27},{"id":29,"name":30,"slug":31},{"id":61,"name":62,"slug":63},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":65,"name":66,"slug":67},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":69,"name":70,"slug":71},86,"実務","%e5%ae%9f%e5%8b%99","beginner","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",{"id":76,"slug":77,"title":78,"date":79,"excerpt":80,"thumbnail":17,"categories":81,"tags":83,"difficulty":44,"tldr":96,"readingTime":97},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[82],{"id":20,"name":21,"slug":22},[84,88,92],{"id":85,"name":86,"slug":87},20,"Nuxt","nuxt",{"id":89,"name":90,"slug":91},26,"TypeScript","typescript",{"id":93,"name":94,"slug":95},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。","7",{"id":99,"slug":100,"title":101,"date":102,"excerpt":103,"thumbnail":17,"categories":104,"tags":109,"difficulty":72,"tldr":115,"readingTime":74},246,"ai-web-dev-07-future-engineer","【AI×Web制作 #7】AI時代のエンジニア像 — これからの開発スタイル","2026-02-25T16:00:00","全7回の連載を振り返り、AI時代にエンジニアの価値はどう変わるかを考える。「使える人」から「引き出せる人」へ——新しい開発スタイルの提案。",[105],{"id":106,"name":107,"slug":108},38,"トレンド","trend",[110,111],{"id":25,"name":26,"slug":27},{"id":112,"name":113,"slug":114},79,"プロジェクト管理","project-management","AI時代のエンジニアの価値は「技術を使える」から「AIから最適な結果を引き出せる」へ。言語化力・判断力・PM力が鍵。",{"slug":77,"title":78,"thumbnail":17},{"slug":51,"title":52,"thumbnail":17}]