[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-web-dev-03-tech-selection:{}":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":119},{"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},242,"ai-web-dev-03-tech-selection","【AI×Web制作 #3】AIと一緒に技術スタックを選ぶ","2026-02-25T12:00:00","Nuxt vs Next.js、WordPressヘッドレスCMS——技術選定でAIとどう議論し、最終的に人間がどう判断したか。意思決定のプロセスを公開します。","\u003Cp>前回は、AIエージェントとの役割分担について書きました。\u003C/p>\n\u003Cp>今回は、このプロジェクトの\u003Cstrong>技術選定\u003C/strong>——「どんな技術を使ってサイトを作るか」を決めたプロセスをお話しします。\u003C/p>\n\u003Cp>技術選定って、正解がないんです。だからこそ、AIの力が活きる場面と、人間が判断すべき場面がはっきり分かれる、面白いフェーズでした。\u003C/p>\n\u003Ch2>まずは要件の整理から\u003C/h2>\n\u003Cp>技術を選ぶ前に、「このサイトに何が必要か」を整理しました。\u003C/p>\n\u003Cul>\n\u003Cli>ポートフォリオ（実績紹介）＋技術ブログ＋お問い合わせページ\u003C/li>\n\u003Cli>SEO（検索エンジン対策）に強いこと\u003C/li>\n\u003Cli>コンテンツはCMS（管理画面）から更新したい\u003C/li>\n\u003Cli>ダークテーマ、かっこいいアニメーション演出\u003C/li>\n\u003Cli>一人で運用・メンテナンスできること\u003C/li>\n\u003C/ul>\n\u003Cp>この要件をAIに伝えて、「これに合うフレームワーク（サイトの土台となる技術）とCMS（コンテンツ管理システム）の選択肢を、メリット・デメリット付きで出して」とお願いしました。\u003C/p>\n\u003Ch2>AIが出してくれた選択肢\u003C/h2>\n\u003Cp>フレームワーク側の候補として、\u003Cstrong>Nuxt\u003C/strong>、\u003Cstrong>Next.js\u003C/strong>、\u003Cstrong>Astro\u003C/strong>、\u003Cstrong>SvelteKit\u003C/strong>。CMS側の候補として、\u003Cstrong>WordPress（ヘッドレス）\u003C/strong>、\u003Cstrong>microCMS\u003C/strong>、\u003Cstrong>Contentful\u003C/strong>、\u003Cstrong>Notion API\u003C/strong>などが挙がりました。\u003C/p>\n\u003Cp>それぞれのメリット・デメリットを比較表にまとめてくれて、とても分かりやすかったです。\u003C/p>\n\u003Cp>ここまでは「AIの仕事」。選択肢を素早く、網羅的に出してくれるのは、AIの大きな強みです。\u003C/p>\n\u003Cp>そしてここからが「人間の仕事」——\u003Cstrong>どれを選ぶか、の判断\u003C/strong>です。\u003C/p>\n\u003Ch2>Nuxtを選んだ3つの理由\u003C/h2>\n\u003Cp>比較検討の結果、\u003Cstrong>Nuxt\u003C/strong>（Vue.jsベースのフレームワーク）を選びました。\u003C/p>\n\u003Ch3>理由1: 今一番興味がある分野だから\u003C/h3>\n\u003Cp>正直に言うと、Nuxtに「精通している」とは言えません。業務でVue.js / Nuxtの案件に携わってはいますが、JavaScriptを書くこと自体は得意でも、フレームワークとしてのNuxtを隅々まで知り尽くしているわけではないんです。\u003C/p>\n\u003Cp>でも、だからこそ選びました。\u003Cstrong>今一番深掘りしたい技術\u003C/strong>だったから。\u003C/p>\n\u003Cp>ポートフォリオサイトは、自分が「いま関心を持っていて、本気で取り組んでいる技術」で作るのが一番誠実だと思ったんです。「完璧にできるもの」より「全力で向き合っているもの」のほうが、伝わるものがある気がして。\u003C/p>\n\u003Ch3>理由2: サーバー機能が優秀\u003C/h3>\n\u003Cp>Nuxtには「Nitro」というサーバー機能が組み込まれています。これを使うと、WordPressから取ってきたデータを整理してからフロントに渡す、という処理がとても簡単に書けます。\u003C/p>\n\u003Cp>イメージとしては、\u003Cstrong>レストランの厨房（WordPress）と客席（ブラウザ）の間に、料理を盛り付けるスタッフ（Nitro）がいる\u003C/strong>感じ。このスタッフのおかげで、お客さんには綺麗に盛り付けられた料理が出てきます。\u003C/p>\n\u003Ch3>理由3: 表示速度とSEOの両立\u003C/h3>\n\u003Cp>SSR（サーバーサイドレンダリング、つまりサーバー側でHTMLを生成してから送る方式）とキャッシュ（一度作ったデータを再利用する仕組み）の組み合わせで、表示速度とSEOの両方をカバーできます。\u003C/p>\n\u003Cp>ちなみに、Next.js（React系のフレームワーク）も有力候補でした。でも、Vue.jsのエコシステムを深掘りしていきたいという自分の方向性と、ポートフォリオとしてのメッセージ性を考えて、Nuxtに決めました。\u003C/p>\n\u003Cp>こういう\u003Cstrong>「自分のキャリアの方向性」を踏まえた判断は、AIには難しい\u003C/strong>部分です。技術的な比較はAIに任せて、最終判断は人間がする。この組み合わせがうまく機能しました。\u003C/p>\n\u003Ch2>CMSの選定——過去の経験が決め手になった話\u003C/h2>\n\u003Cp>CMSの選定では、AIとの議論も参考にしつつ、最終的には\u003Cstrong>自分の過去の経験\u003C/strong>が決め手になりました。\u003C/p>\n\u003Cp>候補としてはmicroCMSやContentfulなど、最近のクラウド型ヘッドレスCMSも検討しました。APIがシンプルで使いやすいのは魅力です。\u003C/p>\n\u003Cp>ただ、僕には一つ引っかかるポイントがありました。\u003C/p>\n\u003Cp>実は過去に、\u003Cstrong>WordPressをヘッドレスCMSとして使い、Nuxtと連携するWebサイト制作の案件を数件担当した経験がある\u003C/strong>んです。WordPress自体の実務経験はそこまで多くなく、どちらかと言えばモック作成の案件のほうが多いのですが、このヘッドレスWordPress × Nuxtという構成には手応えを感じていました。\u003C/p>\n\u003Cp>REST APIでコンテンツを取得して、Nuxtのサーバー機能で整形してフロントに渡す——この流れは実案件で何度か経験していて、設計の勘所が分かっています。\u003C/p>\n\u003Cp>AIにCMSの比較を依頼したときも、WordPressヘッドレスの提案は出てきました。でも今回は、AIの提案に乗ったというより、\u003Cstrong>自分の実体験に基づいて「これなら確実にやれる」と判断した\u003C/strong>のが正直なところです。\u003C/p>\n\u003Cp>ここがAI協働の面白いところで、AIは技術的なメリット・デメリットを客観的に出してくれますが、\u003Cstrong>「過去に自分がどういう経験をして、何に手応えを感じたか」は人間にしか分からない\u003C/strong>。最終的な判断基準が自分の中にあることが、技術選定では大事だと感じました。\u003C/p>\n\u003Ch2>キャッシュ戦略——AIとの技術的な深掘り\u003C/h2>\n\u003Cp>技術スタックが決まった後、「サイトの表示速度をどう確保するか」というキャッシュ戦略をAIと一緒に考えました。\u003C/p>\n\u003Cp>キャッシュというのは、ざっくり言うと\u003Cstrong>「一度取ってきたデータをしばらく保存しておいて、次回からはそれを使い回す」\u003C/strong>仕組みです。毎回WordPressにデータを取りに行くと時間がかかるので、保存しておいたデータを使って表示を高速化します。\u003C/p>\n\u003Cp>このプロジェクトでは3段階のキャッシュを設計しました。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Nuxtサーバーのキャッシュ\u003C/strong>: API応答を一定時間保存\u003C/li>\n\u003Cli>\u003Cstrong>WordPress側のキャッシュ\u003C/strong>: WP内部でデータを保存\u003C/li>\n\u003Cli>\u003Cstrong>Webサーバーのキャッシュ\u003C/strong>: 画像やCSSファイルを高速配信\u003C/li>\n\u003C/ol>\n\u003Cp>初期案はAIが出してくれて、僕が「キャッシュの有効期限はどれくらい？」「記事を更新したらすぐ反映される？」と質問して詰めていきました。\u003C/p>\n\u003Cp>こういう\u003Cstrong>技術的な深掘り（「もし○○だったらどうなる？」を掘り下げること）は、AIが本当に得意\u003C/strong>です。「この設計の弱点は？」と聞けば、ちゃんと答えてくれる。一人で考えるより、議論の質が上がった実感がありました。\u003C/p>\n\u003Ch2>ホスティング環境——フロントとバックを分ける\u003C/h2>\n\u003Cp>技術スタックとキャッシュ戦略が決まったところで、「じゃあどこで動かすか」というホスティング環境も決めました。\u003C/p>\n\u003Cp>このサイトはフロントエンド（Nuxt）とバックエンド（WordPress）が分かれたヘッドレス構成なので、\u003Cstrong>サーバーも2台に分かれています\u003C/strong>。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>フロントエンド（Nuxt）\u003C/strong>: VPS（自分で管理するサーバー）で動作。NuxtのSSR（サーバーサイドレンダリング）を活かすにはNode.jsが動く環境が必要なので、自由度の高いVPSを選びました\u003C/li>\n\u003Cli>\u003Cstrong>バックエンド（WordPress）\u003C/strong>: レンタルサーバーで動作。WordPressを動かすだけなら、PHPとデータベースが使えるレンタルサーバーで十分。管理の手間も少ないです\u003C/li>\n\u003C/ul>\n\u003Cp>フロントエンドからはWordPressのREST API（データを取得するための窓口）を叩いてコンテンツを取得する形です。2台のサーバーがAPIで繋がっている、というイメージですね。\u003C/p>\n\u003Cp>この構成もAIと相談して決めましたが、最終的には\u003Cstrong>「自分が運用しやすいかどうか」\u003C/strong>が決め手でした。VPSは設定の自由度が高い反面、管理は自分でやる必要がある。でもNuxtを動かすにはそれが必要。一方、WordPress側はレンタルサーバーに任せて管理コストを下げる。この使い分けが、一人運用では大事だと思います。\u003C/p>\n\u003Ch2>AIの提案を鵜呑みにしないためのポイント\u003C/h2>\n\u003Cp>ただし、AIの提案をすべて信じるのは危険です。僕が心がけていたことを共有します。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>「意図伝わるかな？」と確認する\u003C/strong>——AIに指示を出した後、こちらの意図が正しく伝わっているか確認する。AIは「分かりました」と答えても、実は違う解釈をしていることがある。提案を受け取る前に、まず認識が合っているかを擦り合わせる\u003C/li>\n\u003Cli>\u003Cstrong>「なぜそれがいいの？」と必ず聞く\u003C/strong>——理由がちゃんと説明できるか確認する\u003C/li>\n\u003Cli>\u003Cstrong>デメリットもセットで聞く\u003C/strong>——良いことしか言わないAIの出力は要注意\u003C/li>\n\u003Cli>\u003Cstrong>自分の実務経験と照らし合わせる\u003C/strong>——机上の最適解と、現場の最適解は違うことがある\u003C/li>\n\u003Cli>\u003Cstrong>運用のことを考える\u003C/strong>——技術的に面白くても、一人で面倒を見られるか？\u003C/li>\n\u003C/ul>\n\u003Cp>特に最初の「認識合わせ」は大事です。AIの提案を鵜呑みにしない、というと「出力をチェックする」ことばかり意識しがちですが、\u003Cstrong>そもそも入力の段階で認識がズレていたら、どんなに出力をチェックしても的外れなまま\u003C/strong>です。「こういう方向で考えているんだけど、認識合わせをしよう」と一声かけるだけで、AIとのやりとりの精度がぐっと上がります。\u003C/p>\n\u003Cp>AIは「技術的に最も優れた選択」を提案する傾向がありますが、実際のプロジェクトでは技術以外の要素もたくさんあります。チーム体制、予算、運用の手間、キャリアの方向性……。\u003Cstrong>それらを総合して判断するのは、人間にしかできません。\u003C/strong>\u003C/p>\n\u003Ch2>まとめ——「AIに調べてもらって、人間が決める」\u003C/h2>\n\u003Cp>技術選定において、AIは\u003Cstrong>「選択肢と比較情報を素早く出してくれるリサーチャー」\u003C/strong>として、とても頼りになりました。\u003C/p>\n\u003Cp>一方で、最終的に「これでいこう」と決めるのは人間の仕事。自分のスキル、プロジェクトの特性、将来の運用——これらを総合して判断する。\u003C/p>\n\u003Cp>この\u003Cstrong>「意思決定のプロセスを可視化できること」\u003C/strong>自体が、エンジニアとしての信頼につながると考えています。「なぜその技術を選んだのか」を説明できるエンジニアは、クライアントにとっても安心感がありますよね。\u003C/p>\n\u003Cp>次回はいよいよ実装の話。AIエージェントとのペアプログラミングの現場をお見せします。\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},16,"Next.js","next",{"id":33,"name":34,"slug":35},20,"Nuxt","nuxt",{"id":37,"name":38,"slug":39},26,"TypeScript","typescript",{"id":41,"name":42,"slug":43},31,"WordPress","wordpress","intermediate","AIは比較情報を素早く出してくれるリサーチャーとして優秀。ただし、キャリア戦略や運用のリアリティを含む最終判断は人間の仕事。","7",[],[49,78,100],{"id":50,"slug":51,"title":52,"date":53,"excerpt":54,"thumbnail":17,"categories":55,"tags":57,"difficulty":75,"tldr":76,"readingTime":77},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]",[56],{"id":20,"name":21,"slug":22},[58,59,63,67,71],{"id":25,"name":26,"slug":27},{"id":60,"name":61,"slug":62},81,"Claude Code","claude-code",{"id":64,"name":65,"slug":66},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":68,"name":69,"slug":70},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":72,"name":73,"slug":74},86,"実務","%e5%ae%9f%e5%8b%99","beginner","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",{"id":79,"slug":80,"title":81,"date":82,"excerpt":83,"thumbnail":17,"categories":84,"tags":86,"difficulty":44,"tldr":98,"readingTime":99},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の設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[85],{"id":20,"name":21,"slug":22},[87,88,89,93,97],{"id":25,"name":26,"slug":27},{"id":60,"name":61,"slug":62},{"id":90,"name":91,"slug":92},82,"PHP","php",{"id":94,"name":95,"slug":96},83,"REST API","rest-api",{"id":41,"name":42,"slug":43},"ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":101,"slug":102,"title":103,"date":104,"excerpt":105,"thumbnail":17,"categories":106,"tags":108,"difficulty":44,"tldr":115,"readingTime":46},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[107],{"id":20,"name":21,"slug":22},[109,110,111],{"id":33,"name":34,"slug":35},{"id":37,"name":38,"slug":39},{"id":112,"name":113,"slug":114},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。",{"slug":117,"title":118,"thumbnail":17},"ai-web-dev-02-role-design","【AI×Web制作 #2】AIエージェントとの「役割分担」を設計する",{"slug":120,"title":121,"thumbnail":17},"ai-web-dev-04-pair-programming","【AI×Web制作 #4】AIエージェントとペアプログラミングする現場"]