2児のパパ系Webエンジニア
の開発日記
A Dad-of-Two Engineer's Development Diary

Astro 6にアップグレードしてみた!v5からの移行手順とLive Content Collectionsの使い心地

Astro 6にアップグレードしてみた!v5からの移行手順とLive Content Collectionsの使い心地

🙌 結論から

このブログでも使っている Astro を、v5 系から v6 系にアップグレードしてみました。

一番の目当ては、Live Content Collections が正式に安定版になったことです!

実際に触ってみると、コンテンツの取得まわりだけでなく、開発サーバーの挙動まで変わっていて、ちょっとした地殻変動を感じました(・∀・)

移行作業自体は思ったよりすんなり終わったので、Astro を使っているならまず検証環境で試してみる価値はあると思います。

💡 Astro 6 で何が変わったのか

Astro 6 は2026年3月にリリースされたメジャーバージョンです。

目玉は、v5.10 で実験的に入っていた Live Content Collections の安定化でした!

これまでの Content Collections は、ビルド時にコンテンツを読み込む前提でした。

Live Content Collections なら、CMS側のデータが更新されても、ビルドをやり直さずにその場で反映されるようになるんです✨

私のブログはローカルの Markdown ファイルが中心なので恩恵は限定的ですが、外部 CMS と連携しているプロジェクトではかなり効果が大きいはずです。

もうひとつ気になっていたのが、開発サーバー astro dev の再設計で、Vite の Environment API を使う形に変わったところでした(・_・;)

👀 v5 から v6 へアップグレードしてみた

手順自体はシンプルで、package.json の astro のバージョンを上げて npm install するだけでした。

npm install astro@^6.0.8
npm run build

このブログでは @astrojs/mdx も v5 系に上げる必要があったので、あわせてバージョンを揃えました。

npm install @astrojs/mdx@^5.0.3

ビルド自体はエラーなく通ったんですが、一部の設定オプションが非推奨になっていたようで、警告がいくつか出ました(´・ω・`)

エラーではなく警告だったので後回しにしても一応動くには動きますが、そのうち直したほうがいいなと思っています。

✨ Live Content Collections を使ってみた感想

正直、最初は「うちの構成には関係ないかな」と思っていました。

でも実際に触ってみると、意外と使えそうな場面がありました(^^)

たとえば記事のタグ一覧や関連記事の抽出を、ビルド時ではなくリクエスト時に取得する形へ切り替えられそうな部分があります。

検証環境で loader を Live 対応のものに差し替えただけで動いたのは、かなりびっくりしました🙌

ドキュメントを読みながら試した範囲では、既存の Content Collections の書き方とほぼ地続きでした。

「安定版になったから触ってみるか」くらいの温度感でも十分についていける印象です!

🔤 フォントAPIとdevサーバーの改善も見逃せない

Live Content Collections の陰に隠れがちですが、組み込みのフォントAPIもさりげなく便利になっていました。

Google Fonts や Fontsource のフォントを、設定ファイルに書くだけで管理できるようになっています。

これまで <link> タグを手で書いたり、パッケージを個別に入れたりしていた部分が、設定1箇所にまとまったのはかなり快適です!

開発サーバーの再設計についても、Vite の Environment API を使うことで、本番と同じランタイムに近い形で astro dev が動くようになったとのことです。

体感としても、開発中に気づかなかった挙動が本番ビルドで急に出る、みたいな事故がやや減った気がしますね(´・∀・)

実験的機能として Rust製コンパイラの追加も予告されていて、今後のリリースにも注目したいところです👀

⚠️ 移行でハマった非推奨警告の中身

私が実際に一番時間を使ったのは、ビルド時に出た警告の中身を1個ずつ潰す作業でした。

警告そのものはエラーではないので、実は放置してもビルドは通ります。

ただ、後回しにするとどの警告が何個あったか分からなくなってくるので、npm run build の出力をそのままファイルに落として、grep で件数を数えるところから始めました。

npm run build 2>&1 | tee build.log
grep -c "deprecated" build.log

内容を見ていくと、大半は astro.config.mjs 側の古いオプション名が新しい書き方に置き換わっていた、というものでした。

私のブログはMDXでカテゴリ・タグを管理しているだけの単純な構成だったので、影響は数箇所で済みましたが、Content Collectionsのloaderを独自実装しているプロジェクトほど、この警告の数が増える印象を受けました。

一つずつ潰していく過程で、Astro 6の設定ファイルの読み方そのものにも詳しくなれたので、結果的には悪くない時間の使い方だったと思っています。

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

この記事を書いている作業環境のガジェットを楽天ROOMにまとめています ✨ 在宅エンジニアのデスク作りの参考にどうぞ 🙌

👍 まとめ

Astro 6 は、Live Content Collections の安定化を中心に、開発サーバーやフォント管理まで地続きで改善されたメジャーアップデートでした。

移行作業自体は package.json を書き換えて npm install するだけで、大きな破壊的変更にハマることはありませんでした。

Astro を使っているプロジェクトなら、まずは検証環境で一度アップグレードしてみるのがおすすめです🙌

※ Astro のリリース内容は今後も更新される可能性があります。最新情報は Astro公式ブログ をご確認ください👀

参考になったらシェアしてもらえるとうれしいです🙌

Xでポスト Threads はてブ LINE