---
title: Astro v5.10リリース　コンテンツを動的に取得できるライブコンテンツコレクションが追加
url: https://roboin.io/article/2025/06/21/astro-5-10/
description: コンテンツコレクションを動的に取得できるライブコンテンツコレクションや、レスポンシブ画像の対応などが含まれるAstro 5.10がリリースされました。
publishedDate: 2025-06-20T17:15:18.931Z
modifiedDate: 2025-06-20T17:15:18.931Z
thumbnail: https://roboin.io/api/media/file/astro-5-10.webp
thumbnailAlt: 「5.10」というテキストが中央に書かれている画像
thumbnailCaption: 画像：[Astro](https://astro.build/blog/astro-5100/)
---

# Astro v5.10リリース　コンテンツを動的に取得できるライブコンテンツコレクションが追加

コンテンツコレクションを動的に取得できるライブコンテンツコレクションや、レスポンシブ画像の対応などが含まれるAstro 5.10がリリースされました。

## ライブコンテンツコレクションの実験的なサポート

Astro v5.10で実験的に追加されたライブコンテンツコレクションでは、ビルド時ではなく実行時にコンテンツをフェッチし、動的でリアルタイムなコンテンツを提供できるようになります。

Astroのこれまでのコンテンツコレクションはビルド時に構築されていたため、動的なコンテンツを扱いたい場合はコンテンツコレクションを利用できませんでした。

ビルド時に構築される従来のコンテンツコレクションは、頻繁に更新されないコンテンツや、短時間でビルドできる軽量なサイトに適しています。

一方で、頻繁にコンテンツが更新される場合や、ユーザーごとにコンテンツをパーソナライズしたい場合にはライブコンテンツコレクションが便利です。

ライブコンテンツコレクションは、実行時にデータを取得する新しいローダーを使用します。

既存のローダーはビルド時に実行されますが、ライブローダーはユーザーがページにアクセスした際に実行されます。

ビルド時に実行されるローダーの方がページの読み込み時のパフォーマンスは優れていますが、動的なコンテンツを扱いたい場合はライブローダーを利用できます。

<p>
    <small>（実は当サイトは最近、コンテンツの更新に時間がかかることを理由にAstroからNext.jsに移行したのですが、もう少し早くライブコンテンツコレクションがリリースされていれば…）</small>
</p>

Astroでライブコンテンツコレクションを利用するには、設定を編集し、コンテンツコレクションを定義します。

```typescript
export default defineConfig({
  experimental: {
    liveContentCollections: true,
  },
});
```

```typescript
import { defineLiveCollection } from 'astro:content';
import { storeLoader } from './loaders/store';

export const products = defineLiveCollection({
  type: 'live',
  loader: storeLoader({
    apiKey: process.env.STORE_API_KEY,
    endpoint: 'https://api.mystore.com/v1',
  }),
});
```

ライブコンテンツコレクションのデータを取得するには、`getLiveCollection()`と`getLiveEntry()`を使用します。

詳細な実装方法は、[Astroのドキュメント](https://docs.astro.build/ja/reference/experimental-flags/live-content-collections/#when-to-use-live-content-collections)を参照してください。

## レスポンシブ画像が安定版に

Astroの`<Image>`コンポーネントの`layout`プロパティを使用すると、生成される`<img>`要素に`srcset`と`sizes`が設定されます。

レスポンシブ画像の設定は、Astroの設定でグローバルに適用するか、画像ごとに適用できます。

グローバルに適用するには、`astro.config.mjs`で`image.layout`を指定します。

```typescript
export default defineConfig({
  image: {
    responsiveStyles: true,
    layout: 'constrained',
  },
});
```

`layout`プロパティには、`constrained`、`fixed`、`full-width`のいずれかを指定できます。

`<Image>`コンポーネントの`layout`プロパティを指定すると、グローバルな設定を上書きできます。

```html
<Image
  src="/hero.jpg"
  alt="A panoramic view of the mountains"
  layout="full-width"
/>
```

また、LCP（Largest Contentful Paint）要素に使用するための`priority`プロパティも追加されており、このプロパティを指定すると`loading="eager"`、`decoding="sync"`、`fetchpriority="high"`が自動で設定されます。

```html
<Image src="/hero.jpg" alt="Hero image" priority />
```

画像のトリミング方法とは一方法を制御できる、`fit`プロパティと`position`プロパティも追加されました。

```html
<Image
  src="/profile.jpg"
  alt="Profile photo"
  fit="cover"
  position="center top"
  width={300}
  height={300}
/>
```

レスポンシブ画像機能を実験的な段階から利用していた場合は、`experimental.responsiveImages`を削除し、`image.responsiveStyles`を`true`に設定します。

```typescript
export default defineConfig({
  experimental: {
    responsiveImages: true,
  },
  image: {
    responsiveStyles: true,
  },
});
```

## そのほかの機能

静的ページでCSPを設定できるようになったほか、Cloudflare Workersのエントリーポイントファイルをカスタマイズできるようになりました。

## 参考リンク

- [Astro 5.10 | Astro](https://astro.build/blog/astro-5100/)