2024年8月15日にリリースされたAstro 4.14に関する筆者のメモです。
確実で正確な情報は元記事をご覧ください。
Astro 4.14の目玉は、試験的に導入されたContent Layer APIです。Astro内でのコンテンツをフレキシブルに管理できる新しい方法らしい。そのほか、上記の目玉含めて、今回のリリースの中心は以下の通りです。
- 実験的導入: Content Layer API
- 実験的導入: コンテンツファイル内でのIntellisense（自動補完機能？）
- 廃止予定: 動的prerender value
- 新しいinjectTypes integration API
- Codeコンポーネントでのmeta属性のサポート
アップグレード
既存プロジェクトのアップグレードには@astrojs/upgrade CLIを使用します。
手動でのアップグレードも可能です。
（コマンドは元記事参照）
実験的導入: Content Layer API
Astro 2.0で導入されたContent Collectionsの次世代機能とのことです。コンテンツ駆動サイトを手軽に構築させてくれるContent Collectionsに対する、開発者たちのフィードバッグを反映させて、威風堂々と登場って感じですね。
機能がsrc/content/内に制限されていたContent Collectionsに対して、Content Layer APIは、remote API含めどこからでもアクセスできるそうです。
（remote APIが何を指すかは、私はわかりません）
新機能自体は既存のContent Collectionsと同居可能だし、Content Collectionsは今後も継続なので、徐々に移行していけばオッケーだから、焦らないでねって書いてありました。
まあ、実験的な機能ですから、新しもの好きでない限り、もっと機能自体が熟成してから導入でもいいでしょう。特に、本番的なサイトへの導入は控えたほうがよさそうですね。
パフォーマンス
機能のパフォーマンスについても記載があります。Content Layer APIでMarkdownやMDXファイルを使った場合の、ページ生成の速度についてです。
私は趣味で小規模サイトしかつくらないので気にならないから読み飛ばします。まあ、早いみたいです。
最後にちょこっと書いてありましたが、パフォーマンスは今後も改善する予定で、かつ、大規模サイトのためにもSQLiteのバックエンドもサポートする予定らしいです。
始め方
実験的機能なので、コンフィグファイルで機能をオンにする必要があります。
そして、src/content/config.tsを準備しますが、この辺はContent Collectionsと同じっぽい。
import { defineConfig } from 'astro';
export default defineConfig({
experimental: {
contentLayer: true
}
})
コンテンツのロード
Content Collectionsと違うのはこのロードだそうです。
あらかじめデータをキャッシュするというわけです。
（詳細なコードは元記事参照）
ローダーはAstro 4.14のビルトイン機能のglob()とfile()でできますが、自前で作ってもいいそうです。データの配列さえ返せば、どっからデータをとってきてもいい。
また、その他いろいろ複雑なデータの取り方も可能だそうです。詳しいことはわからなかった。
ローダーの共有
つくったローダーはnpmを通して、配布できるらしい。
他人がつくったデータベースを共有して使用できるイメージかな？
そのほか
詳細は、RFCを読んだり、フィードバックをしてください、とのことです。
実験的導入: コンテンツファイル内でのIntellisense
私は、Intellisenseがまだピンと来ない新米なのですが、自動補完機能のことらしいですね。
HTMLなら閉じタグを補完してくれるとか、JSなら長い名前を補完してくれるとかのあれですね、たぶん。
Astro 4.14では、実験的にコンテンツファイルのフロントマター内のIntellisenseをサポートしました。
補完やヴァリデーション、ホバーテキスト（情報）の表示などをしてくれて、この補完機能はコンテンツのスキーマファイルをベースにするらしい。
元記事では、src/content/config.tsで「このキーの長さは最大十五文字で、記事のタイトルを意味します」みたいな情報を定義しておくと、コンテンツファイルのフロントマターを書いているときに、十五文字以上になったらガイドしてくれる、という例が書かれています。
この機能も実験的機能なので、使用する場合はコンフィグで明示的にONにする必要がある他、各エディタに応じた設定が必要です。
今はエディタ上で有効な機能ですが、ゆくゆくはastro checkコマンドでも機能するようにするそうです。
廃止予定: 動的prerender value
なんのことかなと思ったけど、Astroでoutput: serverやhybridにしたときのレンダリングモードを個別に変更するときの値のことっぽいね。
今まで個別のastroファイルに書いていた設定を、コンフィグファイルに集約するみたいです。
新しいinjectTypes integration API
型生成（Type Generation）が近頃注目されていて、Astroも導入していたよ、で今回なんと、ある開発者さんのおかげAstroのインテグレーションにも型生成が導入できることになりました、だそうです。
筆者は型生成がピンと来ない、ホカホカの新米なのでわからないのですが、インテグレーションが定義した型情報をユーザーの作成しているAstroプロジェクトに導入できるってことかな？
それによって、ユーザーは導入しているインテグレーションが定めている型情報を扱えるので、それにそったコンテンツがつくりやすい、みたいなことっぽく読んだ。たぶん。わからんけど。
Codeコンポーネントでのmeta属性のサポート
新しい属性の追加で、コードブロックを表示するときの可用性が高くなったようです。
筆者は使ったことないのでわかりませんが、Shikiなどの有名なシンタックスハイライターでは、属性を使って指定することで特定の行をハイライトすることができるそうなので、それができるようになったのかもしれない。
バグ修正
そのほか、多くの開発者、ユーザーの協力のもと、様々なバグが修正され、様々な機能向上がなされています。
すべての情報はリリースノート参照です。
まとめ
ということでした。
細々したサイトを運営している限りでは、今回のアップデートはあまり恩恵がなさそうですが、新しい機能があるとわくわくします。
今後もアップデートを楽しみにしています。
（自サイトにブログを導入しようと思ってAstroのサイトを覗いたら、4.14の記事を見かけたので、この記事を書きました。とんだ寄り道です）