---
title: Astro v4.9リリース！コンテナーAPIやReact 19のサポートなど
url: https://roboin.io/article/2024/05/29/astro-v4-9/
description: オープンソースの静的サイトジェネレーター「Astro」のバージョン4.9がリリースされました。このリリースでは、新しいコンテナーAPIの追加、React
  19のサポート、安定化された実験的機能などが含まれています。
publishedDate: 2024-05-29T08:11:52.000Z
modifiedDate: 2024-06-09T08:04:40.000Z
thumbnail: https://roboin.io/api/media/file/thumbnail-23.webp
thumbnailAlt: サムネイル
thumbnailCaption: N/A
---

# Astro v4.9リリース！コンテナーAPIやReact 19のサポートなど

オープンソースの静的サイトジェネレーター「Astro」のバージョン4.9がリリースされました。このリリースでは、新しいコンテナーAPIの追加、React 19のサポート、安定化された実験的機能などが含まれています。

この記事では、Astro 4.9のアップデート内容について詳しく解説します。

## Astro 4.9の主な更新内容

### コンテナーAPIの追加

Astro 4.9では、**コンテナーAPI**が導入されました。コンテナーAPIを使うと、AstroのコンポーネントをAstroアプリケーションの外部でレンダリングできます。この機能は、ReactやPreactのサーバーサイドレンダリングと似た機能です。

たとえば、次のようなコードでAstroコンポーネントを文字列にレンダリングできます。

```typescript
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Component from './components/Component.astro';

const container = await AstroContainer.create();
console.log(await container.renderToString(Component));
```

このAPIは現在、実験的な機能として提供されています。現時点では、Vitestなどのフレームワークによるテストにおいて、Astroコンポーネントをレンダリングしやすくすることに焦点を当てているとのことです。

コンテナーAPIの詳細については、[コンテナーAPIのドキュメント](https://docs.astro.build/reference/container-reference/)を参照してください。フィードバックについては、[コンテナーAPIのRFC](https://github.com/withastro/roadmap/pull/916)で受け付けています。

### React 19サポート

Astro 4.9では、最新のReact v19への完全なサポートが追加されました。Reactの新しいフォームアクション機能にも対応しています。

たとえば、`useActionState`フックを使用して、フォームの送信状態を管理できるようになっています。

```typescript
import { actions } from 'astro:actions';
import { useActionState } from 'react';
import { experimental_withState } from '@astrojs/react/actions';

export function Like({ postId }: { postId: string }) {
  const [state, action, pending] = useActionState(
    experimental_withState(actions.like),
    0, // initial likes
  );

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <button disabled={pending}>{state} ❤️</button>
    </form>
  );
}
```

また、状態を追跡する必要がない場合は、Astro Actionsを直接呼び出せるようになっています。

```typescript
import { actions } from 'astro:actions';

export function SignOut() {
  return (
    <form action={actions.signOut}>
      <button>Sign Out</button>
    </form>
  );
}
```

AstroアクションはAstro 4.8で導入された実験的な機能です。設定方法などの詳細は、こちらの記事で紹介しています。

[Astro v4.8リリース！Astroアクションやリクエストの書き換え機能など](https://roboin.io/article/2024/05/13/astro-v4-8/)

また、Astro Actionsの詳細やフィードバックについては、[Astro ActionsのRFC](https://github.com/withastro/roadmap/blob/actions/proposals/0046-actions.md)を参照してください。

### 実験的機能の正式提供

Astro 4.6で実験的に導入されていた**CSRFプロテクション**や、Astro 4.3で導入されていた**i18nドメインサポート**が正式に利用可能になりました。

[Astro v4.6リリース！i18n強化やCSRF保護などが追加](https://roboin.io/article/2024/04/13/astro-v4-6/)

CSRFプロテクションを有効にするためには、`experimental.security.csrfProtection`の代わりに`security.checkOrigin`を使用する必要があります。また、i18nドメインのサポートはデフォルトで有効化されており、`experimental.i18nDomains`オプションは不要になりました。

## Astro 4.9へのアップデート方法

既存のプロジェクトをAstro v4.9にアップデートするには、`@astrojs/upgrade`を使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードできます。

```bash
npx @astrojs/upgrade
```

```bash
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest
```

## まとめ

Astro 4.9は、新しいコンテナーAPIやReact 19のサポートなど、多くの新機能と安定化された実験的機能を含むアップデートとなっています。

## 参考

- [Astro 4.9 | Astro](https://astro.build/blog/astro-490/)