Skip to content
··2分で読めます

Claude Codeでブログのバックエンドを4日で再構築した話

485件のWordPress記事をNext.jsに4日で移行しました。Claude Codeにコード生成者ではなくプロダクトマネージャーのように考えさせるプラグインを使って。

2週間前、Claude Codeのfrontend-designプラグインを使ってWordPressサイトを3日でリデザインしました。その後、DIALØGUEを再構築し、14日で完成。加速に恐怖を感じたことについて書きました。

でもまだ終わっていませんでした。あのWordPressリデザインは、17年物の家に新しいペンキを塗っただけでした。基盤はまだPHP、MySQL、そして毎月支払っているGCP VMのままでした。

そこで、合理的な人間がやることをしました:全体をNext.jsに移行したのです。4日で。

ProjectWhatTime
DIALØGUE v1MVP podcast generator約6ヶ月
STRAŦUM9 AI agents, multi-tenant75日
Site redesignWordPress frontend overhaul3日
DIALØGUE v2Complete app rebuild14日
このプロジェクトWordPress → Next.js, 485 posts, Sydney RAG4日

今回の違いは?Superpowersというコミュニティプラグインが、Claude Codeとの働き方を変えてくれたことです。


スタート地点

私のブログは17年間WordPressで運営されていました。PHP、MySQL、GCP VM。動いていましたが:

  • Sydney(私のAIチャットボット)は2025年11月に引退 — ベクトルデータベースのコストに見合わなかった
  • 変更のたびにSSH、ファイル転送、キャッシュクリアが必要
  • 485件の記事がMySQLデータベースにロックされていた
  • Yoastプラグインによる基本的なSEO

最終結果

LayerBeforeAfter
ContentMySQL database485 MDX files in Git
AI AssistantRetiredSydney 2.0 with Supabase pgvector
ImagesWordPress uploads (14k+ files)Vercel Blob (~2,000 optimized)
SEOYoast pluginSitemap, RSS, structured data, FAQ schema, llms.txt
DeploySSH + file transfergit push

でもアーキテクチャは本題ではありません。本題は、プラグインがどのようにして燃え尽きずにこれを可能にしたかです。


Superpowersが違う理由

ほとんどのAIコーディングツールはリアクティブです。聞けば答える。ピンポンです。

Superpowersはこれを逆転させます。プラグインに偽装したメソドロジー — あなたとClaude両方にタイピング前の思考を強制する構造化されたワークフローです。

1. ブレインストーミング(ビジネスファースト、コードは後)

「WordPressブログをNext.jsに移行して」と言ったとき、Claudeはコードエディタを開きませんでした。なぜから始めたのです:

  • 「ここでのビジネスゴールは何ですか?コスト削減、イテレーション速度、それとも別の何か?」
  • 「Sydney 2.0の目的は — 汎用チャットボット、それとももっと特化したもの?」
  • 「ターゲットオーディエンスは誰ですか?訪問時にどう感じてほしいですか?」

目標を固めた後にようやく技術的な質問に移りました:

  • 「SEOのためにすべての485 URLを保持する必要がありますか?」
  • 「画像の状況は — ローカルアップロードですか、CDNですか?」

結果は?何を構築するかだけでなくなぜを捉えたデザインドキュメント — 競合分析、ターゲットオーディエンス、成功指標を含めて。会話に約20分かかりましたが、その後のすべてが揃いました。

2. プランニング(すべてを動かすドキュメント)

ブレインストーミングの後、Superpowersは実装計画を生成しました — 曖昧な箇条書きではなく、400行以上の具体的なタスク:

  • 作成または修正する正確なファイルパス
  • 各タスクの検証ステップ
  • タスク間の依存関係
  • 各タスクは2〜5分の作業にスコープされている

レビューして優先順位を調整し、「実行」と言えます。

3. 並行エージェント(ここからスピードが出る)

予想していなかったことがあります:Claude Codeは異なるモデルをいつ使うか知っているのです。

複雑なアーキテクチャの判断にはSonnet 4.5を使います — 重厚な思考者です。でも複数ファイルの読み取り、ボイラープレートの生成、コンテンツの要約のような並行タスクには?Haiku 4.5エージェントを起動します — 4〜5倍速く、コストは何分の一かです。

移行中、複数のHaikuエージェントが同時に動くのを見ていました — 1つがブログ記事を抽出し、別の1つがCSSパターンを分析し、もう1つがコンポーネントのスタブを生成 — その間Sonnetが全体の計画をオーケストレーションしていました。

これはオートコンプリートではありません。チームです。

4. 組み込みコードレビュー付きの実行

Superpowersはタスクを実行するだけではなく — 各タスクの後に自身の作業をレビューします。2つの自動チェック:

  • 仕様準拠: 「計画通りに実行したか?」
  • コード品質: 「これは本当に良いコードか?」

Claudeがコンポーネントを書いた後、すぐに自分を批評するのを見ていました:「このコンポーネントは動くがDRYに違反している — 共有ロジックをユーティリティに抽出する。」 本番環境まで気づかなかったような問題を捉えることもありました。


予想外だった瞬間

AIコーディングツールを2年間使ってきました。何が起きるか分かっていると思っていました。これらの瞬間が私の間違いを証明しました。

「許可を求めるのをやめた」

2日目、Sydneyについて言及している11件のブログ記事を更新する必要がありました。古い記事には存在しなくなった機能への参照、変更されたURLへのリンク、大幅に進化したチャットボットの説明がありました。

最初の5〜6件について、Claudeは提案された変更を見せて聞きました:「これで良いですか?進めていいですか?」

私はそれぞれを承認しました。同じパターン:機能説明の更新、リンクの修正、Sydneyの進化についてのメモの追加。

7件目で、何かが変わりました。Claudeはただ... やったのです。確認リクエストなし。私の承認パターンから好みを学習していたのです。

元の計画では、Claudeが変更をレビュー用に共有するとなっていました。でも適応しました。同じタイプの変更を繰り返し承認していることを認識し、中断をやめたのです。

これは私が読んだどのドキュメントにも書かれていませんでした。創発的行動 — 数時間ではなく数ヶ月一緒に働いてきた人間の協力者に期待するような直感でした。

実際に機能する長時間セッション

以前のAIツールは20〜30分の複雑な作業の後にコンテキストを失いました。アーキテクチャを再説明し、慣習を再確立し、目標を再共有する必要がありました。

この移行は何時間も連続で走りました。Claudeは私たちがTRANSMISSIONデザインシステムを使っていることを覚えていました。content/blog/がMDXディレクトリであることを覚えていました。Sydneyには検索だけでなく会話メモリが必要であることを覚えていました。

席を離れて戻っても、まさに中断したところから再開できました。計画ドキュメントが永続的なメモリとして機能し — Claudeがそれを再読して全コンテキストを即座に理解したのです。

Sydney RAGが15分で完成、数ヶ月ではなく

最も衝撃的だったのはこれです。

RAGチャットボット(Sydney 1.0)の最初の試みには数ヶ月の学習が必要でした:ベクトルデータベース、エンベディングモデル、チャンキング戦略、検索パイプライン。Weaviateのコスト、デバッグの悪夢、コールドスタートの問題について書きました。

今回は?gitの履歴を確認しました。コアRAGパイプライン — Supabase pgvectorスキーマ、HNSWインデックス、エンベディング生成スクリプト — は15分で完了しました。

pnpm db:seed        # Sync 485 posts to Supabase
pnpm db:embeddings  # Generate embeddings

2つのコマンド。Sydneyが17年間のブログアーカイブ全体を検索できるようになりました。 :D

2024年に何ヶ月もかけて獲得した知識は?Claudeに組み込まれていました。Weaviateで毎月コストがかかっていたインフラは?Supabaseの無料枠で済みました。

どう感じればいいのか分かりません。


これが意味すること(と意味しないこと)

全員がブログをNext.jsに移行すべきだとは言っていません。Superpowersが魔法だとも言っていません。AIが開発者に取って代わるとも言っていません。

私が言っているのは:ソフトウェアの構築方法が、ほとんどの人が認識しているよりも速く変化しているということです。

繰り返し見ているパターン:

ProjectTimeWhat Changed
DIALØGUE v16 monthsLearning everything from scratch
STRAŦUM75 daysBetter tools, more experience
Site redesign3 daysfrontend-design plugin
DIALØGUE v214 daysMultiple plugins working together
Blog rebuild4 daysSuperpowers workflow

それぞれの飛躍は、より一生懸命に働くことではありませんでした。違う方法で働くこと — 補完ではなくワークフローで考えるツールとともに。(このテーブルの最新エントリー:Swiftを知らずにネイティブiOSアプリを構築 — スキャフォールドはある晩で完了しましたが、本当のプロダクトワークはまだ続いています。)

ぜひ試してみてください

Superpowersに興味があれば:

  1. Claude Codeで/pluginと入力し、リストからSuperpowersを選択
  2. コードを書く前に/superpowers:brainstormから始める
  3. 質問してもらいましょう — 実装に飛びつきたい衝動を抑えて
  4. 計画を信頼しつつ、実行前にレビューする

Claudeがあなたの好みを学習して確認を求めなくなった最初の瞬間、この記事を書いた理由が分かるでしょう。 :)


よくある質問

Superpowers for Claude Codeとは何ですか?

SuperpowersはJesse Vincentが作成したClaude Code用のコミュニティプラグインです。ブレインストーミング、プランニング、実行、コードレビューをガイドする構造化されたワークフローメソドロジーで — あなたとClaude両方にコードを書く前の思考を強制します。

Superpowersの習得にどのくらいかかりますか?

ワークフローを理解するのに約20分のブレインストーミング会話です。本当の学びは、Claudeが400行以上の実装計画を生成し、並行エージェントを派遣して実行し始めるのを見たときに起こります。

Superpowersはどんなプロジェクトでも機能しますか?

はい、でも複雑なマルチステッププロジェクトで真価を発揮します。シンプルなバグ修正にはオーバーキルです。17年分のブログ485件を移行し、RAG検索を構築し、何千もの画像を最適化する?そこで構造化されたワークフローが効果を発揮します。

SonnetとHaikuエージェントの違いは何ですか?

Claude CodeはSonnet 4.5を複雑なアーキテクチャ判断に、Haiku 4.5をファイル読み取りやボイラープレート生成のような並行タスクに使用します。Haikuは4〜5倍速く、コストは何分の一かです。システムがタスクの複雑さに基づいてどのモデルを使うか自動的に選択します。

Claude Codeは本当に好みを学習できますか?

はい — パターン認識を通じて。5〜6回同様の変更を承認した後、Claudeは確認を求めるのをやめ、残りの記事に同じパターンを適用しました。これは明示的にプログラムされたものではなく、モデルが承認パターンを理解した結果の創発的行動です。


プロジェクトで構造化されたAIワークフローを試しましたか、それともまだピンポンのやり取りをしていますか?何がうまくいっているか聞きたいです。

よろしくお願いします、Chandler


まだコーディング中、まだ学習中、まだ時々この加速に恐怖を感じています。

続きを読む

私の歩み
つながる
言語
設定