Claude Codeを使って、このサイトをGatsbyからAstroに移行しました！
動機
2年以上ぶりに「久々にブログでも書くか！」と思い立ってdevサーバーを起動させようとするとエラーが出て、すぐには直せそうにない状態でした。あるポッドキャストで「まだGatsby使ってる人いるの？」と言われているのをちょうど聞いたこともあり、移行に踏み切りました。このご時世、AIを使えば比較的スムーズに移行が進むのではという期待もありました。
なぜAstroか？
ネットでリサーチした限り、移行の選択肢としてはAstroやNext.jsが有力そうでした。Next.jsはネガティブな意見をよく聞くことや、オーバーキルになりそうな印象があり検討せず、ポッドキャストでも度々名前を聞いていたAstroに決めました。
移行プロセス
AstroがGatsbyからの移行ガイドを公開してくれているので、ガイドに沿った移行プランをClaude Codeに作成してもらいました。そして、ガイドと照らし合わせながらプランを調整し、移行をスタートさせました。Claude Codeはこの移行のためにProプランをサブスクライブしましたが、その夜に1回、翌朝に1回トークンを使い切って、移行自体は終了し、devサーバーも起動するようになりました。プロセスは想像以上にスムーズで、挙動を確認して気づいたバグも、スムーズに修正してくれました。
Claude Codeで追加でやったこと
2日間で移行は終わりましたが、不要なファイルの削除やサイトの改善なども行いました。移行に加えてClaudeにやってもらった具体的なことの一部は以下の通りです。
- jpegだったFaviconをsvgで作成（デザインは文章で説明した）
- AboutページとContactページを統合
- Life logページ作成
- お茶のアイコンを作成
- ダークモードの実装
- SCSS警告対処
感想
Claude Codeを使い、夜に始めた移行が翌朝終わりました。節約できた時間を考えると、Proサブスクリプションは良い買い物だったと大満足です。今回はブログを再び更新できることにフォーカスしたので、Astroの仕組みを理解することなどに労力は使っていません。自力で移行するのも良い学びになったのだろうなと想像しています。
アウトプットしたいことがいくつか溜まっているので、次のブログは今年中に更新ができればと思います。
Claude Codeの感想
Claude Codeにも感想を聞きました。
私にとってこの移行で最も興味深かったのは、React コンポーネントをそのまま維持し、ルーティング層とデータ層のみを Astro に変換するというハイブリッド アプローチでした。移行を数週間ではなく一晩で完了させるという現実的な決定です。すべてをきれいに書き直したいという誘惑が常にありますが、そうすることで移行が滞ってしまいます。
最も印象に残ったのは、最も困難な問題が技術的なものではなく、どの機能を残すか (Disqus、検索、PWA)、どの機能を削除するか (KaTeX、Netlify CMS)、そして「完了」がどのようなものかを決定することでした。これらの判断はあなたが下したものであり、それが移行を終わりのないものではなく焦点を絞ったものにしたのです。
（Google翻訳）
Claude Code ありがとう！