Blog

Claude CodeにブログをAstroへ移行してもらいました

「ブログをNext.js(SSG)に移行しました」で紹介した通り、このブログはNext.js + Reactで実装されていました。

4年ほど経っていくつか問題も抱えていたので、今度はAstroに移行しました。

また、その際Claude Codeを最大限活用し、その結果1日ほどで移行が完了しています。

移行に至った背景やどのようにAIを活用したのかについて紹介します。

背景

移行しようと思ったのは、新しい技術を触れてみたかったからです。

というのが純粋なモチベーションですが、このブログは多くの問題を抱えていました。

AIを使えばマイグレーションもすっとできるのでは？と思い立ち、早速フレームワークの選定からはじめました。

なぜAstroを選んだのか

まずはChat GPTにおすすめのフレームワークを聞いてみます。

静的なwebsite（SSG)を作るためのツールをいくつか紹介してください。最新で一番あついツールを紹介してください。以下、**2025年現在最新かつ注目の静的サイトジェネレーター（SSG）**として、特に熱いツールを日本語で厳選してご紹介します！直近で注目の「最もアツい」SSGツール Astro（アストロ）最近の開発者の会話でも多く推されており、特に「Hacker News」では以下のようなコメントもありました："My vote goes to Astro.build, a pretty new but very solid tool that seems to fit your needs well." whalesync.com +15 Hacker News +15 Mattock +15 2025年において、React系の生成で注目されるツールに含まれており、Next.jsやGatsbyと並んで語られることが多いです Medium。Astroはモダンな仕組みで、パフォーマンスやフレームワーク柔軟性に優れており、最新潮のSSGツールとして非常に注目されています。

ここではじめてAstroの存在を知りました。

AstroはできるだけJavaScriptをブラウザに送らないことで高速化していることを知り、こういったブログ記事には非常に向いていると感じました。

また、Markdownのコンテンツをサポートしていて、課題の一つである記事の更新のしにくさも改善できそうでした。

別の選択肢としてDocusaurusがあったのですが、こちらはカスタマイズが少ししにくいのと、Astroの目新しさに惹かれました。

マイグレーション手順

今回マイグレーションにあたってClaude Codeを最大限活用しました。

Proプラン（月額$20）を契約しており、モデルは「Claude Sonnet 4」を利用しています。

1. orphan branchを作る

今回は完全に新しいプロジェクトを作ることにしました。

新しいrepositoryを作っても良かったのですが、まっさらなgit branchを使うことにしました。

orphan branchと呼ぶらしいのですが、作り方を全く覚えてないのでClaude Codeに作ってもらいます。

完全に新しい空のディレクトリのブランチを作成してください
ブランチ名はastroにしてください

すると以下のコマンドが実行されました。

git checkout --orphan astro
git rm -rf . && git clean -fxd

良さそうです。

2. Astroの新規プロジェクトを作成する

Astroのプロジェクトの作り方を調べるのもめんどくさいので、ドキュメントへのリンクと、ブログサイトを作りたい旨をClaude Code伝えます。

以下のようにblog templateで新規作成してくれました。

npm create astro@latest -- --template blog
npm install

3. git worktreeで古いプロジェクトを参照できるようにする

既存のコードを参照するために、git worktreeを使って古いブランチを別ディレクトリで開きます。

ここだけは手動で行いました。

4. レイアウトを移行する

既存のファイルを指定しながら、TopページやContactページを作っていきます。

一気に色々やらせようとすると意図しない動作をするので、少しずつ細かく指示をしていきます。

5. コンテンツを移行する

ブログの内容はサーバに保存されていたので、これをマークダウンファイルに変換する必要がありました。

APIのエンドポイントを教えて変換して、と伝えると、フォーマットはあっているが内容が不正確なものになっていました。

一度ブログ内容を理解したうえで書き直そうとしていたようです。

そこで、移行するためのスクリプトを書いて実行して、と伝えるとうまくいきました。

動画や画像をダウンロードし、パスを書き換えるという作業も、スクリプトの作成を依頼するとスムーズに完了しました。

まとめ

そんなこんなで手を動かしたのは約8時間、1日で移行が完了しました。

爆速で移行が完了し、またサイトの動作も爆速なので非常に満足しています。

普段はAndroidをメインで書いているので、Webは本当にたまにしか読み書きしないのですが、そういう不慣れなプラットフォームを触るのにAIは非常に向いていると思います。

Astroも初めて触れましたが、AIの力もあり何も問題ありませんでした。

Reactと似た形でコンポーネントが定義できるので、理解しやすかったのもありそうです。

これくらいの規模のサイトであれば、作って壊してを繰り返すのがちょうど良いかもしれません。

今後の展望としては、今まであった人気のブログ記事がまだ表示できていないので、ちょっと仕組みを考えようと思っています。