AIアシスタントと挑む！古いGatsbyブログの完全リファクタリング日誌

このブログ、長年放置していたのですが、さすがに色々なものが古くなりすぎていました。Gatsbyのバージョンは古いし、セキュリティ的にも心配...。そこで今回は、最近使っているCLIのAIアシスタントに指示を出しながら、どこまでモダンな環境に改修できるか挑戦してみました。

本記事では、「どんな指示（プロンプト）で、AIがどう動いたか」という、AIとのペアプログラミングのような開発作業の全記録を残しておこうと思います。

第一章: 依存関係の海へダイブ

まずは、古くなった依存関係の整理から。最初の指示はシンプルに、こう切り出しました。

指示: このプロジェクトで使用されている依存関係のバージョンが古いので、新しいバージョンへアップグレードする計画を立ててください。

AIはすぐにnpm outdatedを実行して現状を把握し、安全に更新するための段階的な計画を提案してくれました。計画を承認し、いざ実行！

AIの応答: 承知いたしました。計画通り、Gatsby本体と関連プラグインの更新から開始します。

計画通りGatsby関連のパッケージが更新された直後、最初の壁にぶつかりました。

第二章: 謎のビルドエラーとAIの推察

早速実行したビルドは、あえなく失敗。画面にはこんなエラーが。

ERROR #11321 "length" is outside of buffer bounds

AIはキャッシュクリアなどを試みましたが、状況は変わらず。しかし、エラーメッセージを元に追加調査を行ったAIは、「Node.jsのバージョンが原因かもしれない」という可能性を指摘してきました。当時私が使っていたv24と、Gatsbyの内部ライブラリの相性問題を突き止めたのです。

言われた通り、私の環境でNode.jsのバージョンを安定版のv22に切り替えて作業を続行させると...無事にビルドが成功！AIとの共同作業で、見事に問題を切り分けることができました。

第三章: 「なんかフォント違くない？」

ビルドは通ったものの、サイトの表示を確認すると、どうもフォントの雰囲気が以前と違います。すかさず、次の指示を出しました。

指示: フォントが変わってしまっているようですが元のフォントを維持する事はできますか？

この曖昧な指示から¹、AIは「@fontsourceパッケージのメジャーバージョンアップによる破壊的変更が原因ではないか」と推測。調査の結果、v5からは可変フォントの読み込み方が@fontsource-variable/という別パッケージに変わっていたことを突き止めました。

しかし、パッケージを入れ替えても問題は解決せず。AIはさらに調査を進め、最終的にCSS側で指定しているフォント名'MontserratVariable'（スペースなし）と、新しいパッケージが提供するフォント名'Montserrat Variable'（スペースあり）の僅かな違いが原因であることを特定。見事に元のフォント表示を復元してくれました。この探偵作業は、自力でやっていたら相当時間がかかったはずです。

第四章: セキュリティの穴を塞ぐ

技術的な問題を片付けるため、次はセキュリティ脆弱性の対応を依頼しました。

指示: npm auditで出るその他の脆弱性は対応する必要がありますか？対応は可能ですか？

AIはまず、脆弱性への対応は重要であると述べた上で、安全な修正計画を提案。npm audit fixでは破壊的変更が起きてしまう問題に対し、package.jsonのoverrides機能を使う方法を提示してくれました。

  "overrides": {
    "cookie": ">=0.7.0",
    "tmp": ">=0.2.4"
  }

この指示で、修正可能な脆弱性はすべて解決。一部、ライブラリ側でまだ修正がリリースされていない脆弱性が残りましたが、その理由まで丁寧に説明してくれました。

第五章: いよいよデザイン改修へ

技術的な負債の返済が終わったところで、お待ちかねのデザイン改修です。

指示: サイトのデザインをダークモードに変更したいです。

AIはすぐにCSS変数を書き換え、ダークモードの初期実装を完了。しかし、出来上がったデザインは少しコントラストが強すぎると感じました。そこで、すかさず追加の指示を出します。

追加指示: Nord（ https://www.nordtheme.com/ ）のような雰囲気にする事はできますか？

この指示を受け、AIはNordの公式サイトからカラーパレットを抽出。それを元に再度CSSを調整し、目に優しい、落ち着いた雰囲気のデザインに見事に修正してくれました。

仕上げに、コードブロックのテーマも全体の雰囲気に合わせるため、利用可能なテーマ一覧をAIに表示させ、最終的にprism-one-darkを選択。これでデザイン作業も完了です。

終わりに: AIとのペアプログラミング体験

今回の改修作業は、まるでAIアシスタントとペアプログラミングをしているような体験でした。私が「何をしたいか」「どう感じたか」という方針やフィードバックを与え、AIがそれを元に具体的な調査、分析、実装を行う。このサイクルを高速に回すことで、自分一人でやるよりも圧倒的なスピードで開発を進めることができました。

この記事自体も、AIに「今回の修正対応の流れをブログ記事としてまとめて」と指示し、出てきた草稿に「AIと共同作業した流れが分かるように書き直して」と追加指示して作成したものです。²

具体的な指示さえ出せれば、AIは強力な相棒になってくれる。そんなことを実感したプロジェクトでした。