[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fWkWaTP-nKLt2RuGKVoOECp9tagNRIU3qI6-zvVphaqY":3,"/api/social-links:{}":211},{"posts":4,"total":209,"totalPages":210},[5,41,67,90,108,124,146,163,181,196],{"id":6,"slug":7,"title":8,"date":9,"excerpt":10,"thumbnail":11,"categories":12,"tags":17,"difficulty":38,"tldr":39,"readingTime":40},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]","",[13],{"id":14,"name":15,"slug":16},44,"技術深掘り","deep-dive",[18,22,26,30,34],{"id":19,"name":20,"slug":21},78,"AI協働","ai-collaboration",{"id":23,"name":24,"slug":25},81,"Claude Code","claude-code",{"id":27,"name":28,"slug":29},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":31,"name":32,"slug":33},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":35,"name":36,"slug":37},86,"実務","%e5%ae%9f%e5%8b%99","beginner","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",{"id":42,"slug":43,"title":44,"date":45,"excerpt":46,"thumbnail":11,"categories":47,"tags":49,"difficulty":64,"tldr":65,"readingTime":66},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の設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[48],{"id":14,"name":15,"slug":16},[50,51,52,56,60],{"id":19,"name":20,"slug":21},{"id":23,"name":24,"slug":25},{"id":53,"name":54,"slug":55},82,"PHP","php",{"id":57,"name":58,"slug":59},83,"REST API","rest-api",{"id":61,"name":62,"slug":63},31,"WordPress","wordpress","intermediate","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":68,"slug":69,"title":70,"date":71,"excerpt":72,"thumbnail":11,"categories":73,"tags":75,"difficulty":64,"tldr":88,"readingTime":89},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[74],{"id":14,"name":15,"slug":16},[76,80,84],{"id":77,"name":78,"slug":79},20,"Nuxt","nuxt",{"id":81,"name":82,"slug":83},26,"TypeScript","typescript",{"id":85,"name":86,"slug":87},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。","7",{"id":91,"slug":92,"title":93,"date":94,"excerpt":95,"thumbnail":11,"categories":96,"tags":101,"difficulty":38,"tldr":107,"readingTime":40},246,"ai-web-dev-07-future-engineer","【AI×Web制作 #7】AI時代のエンジニア像 — これからの開発スタイル","2026-02-25T16:00:00","全7回の連載を振り返り、AI時代にエンジニアの価値はどう変わるかを考える。「使える人」から「引き出せる人」へ——新しい開発スタイルの提案。",[97],{"id":98,"name":99,"slug":100},38,"トレンド","trend",[102,103],{"id":19,"name":20,"slug":21},{"id":104,"name":105,"slug":106},79,"プロジェクト管理","project-management","AI時代のエンジニアの価値は「技術を使える」から「AIから最適な結果を引き出せる」へ。言語化力・判断力・PM力が鍵。",{"id":109,"slug":110,"title":111,"date":112,"excerpt":113,"thumbnail":11,"categories":114,"tags":116,"difficulty":64,"tldr":123,"readingTime":89},245,"ai-web-dev-06-quality-and-deploy","【AI×Web制作 #6】AIと品質を守る — レビュー・テスト・デプロイ","2026-02-25T15:00:00","一人開発でもAIをチームメイトにすれば品質管理体制が作れる。コードレビュー、キャッシュ戦略、自動デプロイのリアルな協働プロセスを紹介。",[115],{"id":14,"name":15,"slug":16},[117,118,119],{"id":19,"name":20,"slug":21},{"id":77,"name":78,"slug":79},{"id":120,"name":121,"slug":122},39,"パフォーマンス","performance","品質は「気をつける」ではなく「仕組みで防ぐ」。AIで構築コストが下がった分、後回しにしがちな自動化も実現できる。",{"id":125,"slug":126,"title":127,"date":128,"excerpt":129,"thumbnail":11,"categories":130,"tags":135,"difficulty":64,"tldr":145,"readingTime":89},244,"ai-web-dev-05-design-and-animation","【AI×Web制作 #5】人間の感性 × AIの実装力 — デザイン・演出編","2026-02-25T14:00:00","デザインやアニメーション——人間の感性が一番試される領域でのAI協働。「こういう雰囲気にしたい」を伝えるコツと、試行錯誤のリアルを語ります。",[131],{"id":132,"name":133,"slug":134},35,"サイト構築","site-building",[136,137,141],{"id":19,"name":20,"slug":21},{"id":138,"name":139,"slug":140},7,"CSS","css",{"id":142,"name":143,"slug":144},12,"GSAP","gsap","デザインの言語化がAI協働の鍵。AIは実装力、人間は感性と「やめる判断」を担う。良いデザインは引き算。",{"id":147,"slug":148,"title":149,"date":150,"excerpt":151,"thumbnail":11,"categories":152,"tags":154,"difficulty":64,"tldr":162,"readingTime":89},243,"ai-web-dev-04-pair-programming","【AI×Web制作 #4】AIエージェントとペアプログラミングする現場","2026-02-25T13:00:00","AIとのペアプロって実際どんな感じ？コード生成→レビュー→修正のサイクル、AIが得意なこと・苦手なこと、方向修正のリアルを公開。",[153],{"id":132,"name":133,"slug":134},[155,156,157,158],{"id":19,"name":20,"slug":21},{"id":77,"name":78,"slug":79},{"id":81,"name":82,"slug":83},{"id":159,"name":160,"slug":161},28,"Vue.js","vue","パターン的な実装はAIが爆速。UX判断や方向修正は人間の仕事。AIを「チームメイト」として扱うのがコツ。",{"id":164,"slug":165,"title":166,"date":167,"excerpt":168,"thumbnail":11,"categories":169,"tags":171,"difficulty":64,"tldr":180,"readingTime":89},242,"ai-web-dev-03-tech-selection","【AI×Web制作 #3】AIと一緒に技術スタックを選ぶ","2026-02-25T12:00:00","Nuxt vs Next.js、WordPressヘッドレスCMS——技術選定でAIとどう議論し、最終的に人間がどう判断したか。意思決定のプロセスを公開します。",[170],{"id":14,"name":15,"slug":16},[172,173,177,178,179],{"id":19,"name":20,"slug":21},{"id":174,"name":175,"slug":176},16,"Next.js","next",{"id":77,"name":78,"slug":79},{"id":81,"name":82,"slug":83},{"id":61,"name":62,"slug":63},"AIは比較情報を素早く出してくれるリサーチャーとして優秀。ただし、キャリア戦略や運用のリアリティを含む最終判断は人間の仕事。",{"id":182,"slug":183,"title":184,"date":185,"excerpt":186,"thumbnail":11,"categories":187,"tags":192,"difficulty":38,"tldr":195,"readingTime":89},241,"ai-web-dev-02-role-design","【AI×Web制作 #2】AIエージェントとの「役割分担」を設計する","2026-02-25T11:00:00","AIに「作って」と言うだけでは良いものはできない。プロジェクト成功の鍵は、人間とAIの役割分担の設計にある。実際のタスク分解と指示の出し方を公開。",[188],{"id":189,"name":190,"slug":191},42,"ワークスタイル","workstyle",[193,194],{"id":19,"name":20,"slug":21},{"id":104,"name":105,"slug":106},"AI協働のプロジェクトは「判断は人間、実行はAI」が基本。タスクの分解粒度と指示の具体性が成果を左右する。",{"id":197,"slug":198,"title":199,"date":200,"excerpt":201,"thumbnail":11,"categories":202,"tags":204,"difficulty":38,"tldr":207,"readingTime":208},41,"ai-web-dev-01-why-ai-collaboration","【AI×Web制作 #1】なぜ「AI×人間」でポートフォリオサイトを作ったのか","2026-02-25T10:00:00","「Nuxt使えます」「TypeScript書けます」——スキルの羅列が響かなくなる時代に、何を見せるべきか。AI協働でサイトを作ることにした理由を語ります。",[203],{"id":132,"name":133,"slug":134},[205,206],{"id":19,"name":20,"slug":21},{"id":77,"name":78,"slug":79},"技術スキルの羅列ではなく「AIと組んでプロジェクトを動かせる力」を見せるために、ポートフォリオサイト自体をAI協働で作ることにした。","5",10,1,{"links":212},[213],{"platform":214,"url":215,"icon":216},"note","https://note.com/morinoupa2020","simple-icons:note"]