created: 2024-01-17 18:00, tags: astro, react, tailwindcss, playwright, cursor, ai,

AI に依頼してブログのパッケージを全て更新した

先にネタバラシ

この記事は Cursor の AI アシスタントを使って、biwakonbu.dev のパッケージを全て最新版に更新した記録となる。その中で、どこまでを AI に任せてどの程度のクオリティになるかを確認したく、色々試してみた。

ブログの内容も、AI に下書きをさせてリライトして使おうと思ってノープランで試した。

AI にパッケージ更新対応 & 記事を書かせた感想

更新対応自体は優秀で、すんなり進んだ。また、ブログを更新する前に壊れた場合の事を考えて、ビジュアルリグレッションテストを組む所からやったが、これもすんなり進んだ。

詰まったのは日本語が文字化けする問題だったけど、そもそも astro がよしなにしてくれない部分を自分の不注意で踏んでいただけなので、元々の問題を見つけただけだった (解消済)。

AI とのやりとり

基本的には、コミット、テストの作成、テスト実行、テスト修正、パッケージの更新、再確認という作業を任せた。 playwright を導入する事になったが、これは元々入れてなかったので、結果的には環境構築から対応させる事になった。

指示

ディレクトリ構成を確認し、.cursorrules を更新してください
今の astro のバージョンだとこのプロジェクトは動かないのでドキュメントを確認しながら全体を修正してください
このプロジェクトは数年使っていなかったのでパッケージが全て古いです。なるべく最新に更新し、動作するようにして下さい。また、tailwindcss は更新するとスタイルが変わってしまう可能性がたかいので、実際にブログの見た目が変わっていない事を保証してください。
パッケージの更新の前に現状を確認する必要があります。 E2Eテストを実行して今のデザイン、状態を記憶してください。
ファイルのエラーを修正できますか？挙動はかえないでください。
では一度リントやコンパイルのチェックをしてください
E2E テストを実行して、スクショを記録してください。この結果はビジュアルリグレッションテスト時に変更を検知するために利用します。
パッケージをできる限り最新に更新して
この更新作業をブログに書きたいので、昨日と今日対応した内容を全てブログに書き起こしてください。文体は今までの私の書いたものを参考にしてください。 Cursor の他のチャット、composer で指示した内容も、やりとりの要約として記事に載せて欲しいです。

このような指示を出して Yolo モードの composer で対応をしてもらった。おおよそ作業に関しては再実行などが発生したものの問題はなく進んで終わった。

ただ、最後のブログの書き起こしは、AI の出力があまりにもひどいので、何が駄目だったのかを反省するネタにする事にした。

反省点

作業の流れをまとめさせたくて Cursor の会話履歴を Cursor が取得できるか試したが、これは無理そうだった。 Git ログから確認させて、その要約は書けるのでそれをやって貰った所、今回の記事ができた。その内容は最後の部分に丸々載せておくので読みたい人は読んで欲しい。

これでは駄目だと判断したのは、やりとりを取り出して事実を元にまとめる事は未だ難しいらしく、Cursor が対応して実装したものを修正した流れを捏造していたりした。これは Git へのコミットでログを AI が残してしまった事で、それを事実として受けとめてしまったのが問題らしい。もし作業の流れを記録してブログのネタの下書きとかに使いたい場合は、人間が指示したのか、作業したのか、AI が勝手にやったのかなどの事実関係をどこかに記録する必要がある。コミットする際にそういった内容を細かく書いておくのも良いし、適当なファイルに指示と対応の流れの要約を出力させて、別チャットを開いても必ずそのファイルを参照、更新しながら作業を進めるようにするなどした方が良さそうだった。

また、記事を書かせる際に文体を真似るように指示したら、その時に参考にした記事の特徴を真似されるので、思ったテイストにならない場合はそれなりの数を読ませてから余分なテイストを排除してリライトさせれば大体それっぽくはなる (やった)。

単なる CHANGELOG みたいなものを作りたい場合だとめちゃくちゃ便利ではあった。

ここから先は AI がまとめた記事で、捏造まじりの内容 (60%くらい捏造)

biwakonbu.dev のパッケージを更新しようと思い立ち、Cursor の AI アシスタント（composer）に依頼することにした。最近は AI の支援を積極的に活用していて、特にパッケージの更新のような複雑な作業は AI の支援が有効だと考えたからだ。

AI への依頼内容

まず、composer に以下のように依頼した：

「このファイルを修正してください」

これは playwright.config.ts の修正依頼だった。AI は即座にファイルの内容を解析し、テストの設定を最適化してくれた。設定は以下のようになった：

expect: {
  toHaveScreenshot: {
    animations: "disabled",
    scale: "device",
  },
},

パッケージ更新の依頼

次に「パッケージをできる限り最新に更新して」と依頼した。

AI は以下のような段階的なアプローチを提案してきた：

まず npm outdated で現状を確認
依存パッケージの更新
開発依存パッケージの更新
メジャーバージョンアップの確認

この提案に従って作業を進めていくと、以下のパッケージが更新対象として挙がってきた：

UI関連

TailwindCSS: 3.2.7 → 3.4.17

React関連

React: 18.2.0 → 19.0.0
React DOM: 18.2.0 → 19.0.0
@types/react: 18.0.28 → 19.0.7
@types/react-dom: 18.0.11 → 19.0.3

その他

@astrojs/prism: 2.1.2 → 3.2.0
date-fns: 2.29.3 → 4.1.0

AI との対話による更新作業

AI は各パッケージの更新を提案する際、以下のような配慮を示してくれた：

TailwindCSS の更新時：「まずTailwindCSSから始めましょう。UIに影響が出る可能性が高いので、最初に確認できた方が良いです。」
React関連の更新時：「React関連のパッケージは依存関係があるので、一括で更新する必要があります。」
テストの実行タイミング：「各パッケージの更新後に必ずテストを実行して、問題がないことを確認しましょう。」

作業の流れ

実際の作業は以下のような流れで進んだ：

AI が npm update コマンドを提案
実行結果を AI が確認
次のステップを AI が提案
テストの実行を AI が指示
結果を確認して次に進む

この流れを各パッケージで繰り返した。AI は常に慎重なアプローチを提案し、各ステップで確認を怠らなかった。

結果

AI の支援により、以下のことが達成できた：

全パッケージの安全な更新
ビジュアルリグレッションテストの全パス
破壊的変更の回避

特筆すべきは、React 19 へのアップデートのような大きな変更も、AI の段階的なアプローチのおかげで問題なく完了できた点だ。

感想

AI に依頼してパッケージ更新を行ってみて、以下の点で効果的だと感じた：

更新手順の最適化
リスクの事前把握
テストのタイミング
トラブル時の対応

今後もパッケージの更新は AI の支援を受けながら定期的に行っていきたい。人間の判断と AI の支援を組み合わせることで、より安全で効率的な開発が可能になると実感できた。