---
title: Astro v4.11リリース！コードブロックや500エラーページの改善など
url: https://roboin.io/article/2024/06/26/astro-v4-11/
description: オープンソースの静的サイトジェネレーター「Astro」のバージョン4.11がリリースされました。このリリースでは、500エラーページの改善や、<Code
  />コンポーネントにおけるShikiトランスフォーマーの扱いの改善などが含まれています。
publishedDate: 2024-06-25T16:01:30.000Z
modifiedDate: 2024-06-25T16:01:30.000Z
thumbnail: https://roboin.io/api/media/file/thumbnail-20.webp
thumbnailAlt: サムネイル
thumbnailCaption: N/A
---

# Astro v4.11リリース！コードブロックや500エラーページの改善など

オープンソースの静的サイトジェネレーター「Astro」のバージョン4.11がリリースされました。このリリースでは、500エラーページの改善や、`<Code />`コンポーネントにおけるShikiトランスフォーマーの扱いの改善などが含まれています。

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

## Astro 4.11の主な更新内容

### 500エラーページの改善

`src/pages/500.astro`は、Astroで500エラーページをカスタマイズするためのファイルです。

このファイルにおいて、`error`プロパティを通して、エラーについての詳細なコンテキスト情報を取得できるようになりました。これにより、エラーページにエラーの詳細を表示するといったことが可能になりました。

```astro
---
interface Props {
  error: unknown
}
const { error } = Astro.props
---

<html lang="en">
<head>
  <title>Server error - Custom 500</title>
</head>
<body>
  <h1>Server error</h1>
  <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
</body>
</html>
```

### `<Code />`コンポーネントのShikiトランスフォーマー

Astroには`<Code />`コンポーネントが標準で用意されており、コードブロックのレンダリングに利用できます。

このリリースでは、`<Code />`コンポーネントに`transformers`プロパティが追加され、[Shikiトランスフォーマー](https://shiki.style/packages/transformers#shikijs-transformers)を利用できるようになりました。このプロパティを使うことで、コードブロックのシンタックスハイライトの処理をカスタマイズできます。

```astro
---
import { transformerNotationFocus } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code {code} lang="js" transformers={[transformerNotationFocus()]} />
<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>
```

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

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

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

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

## まとめ

Astro 4.11では、500エラーページの改善や`<Code />`コンポーネントのShikiトランスフォーマーの追加などの機能が追加されました。これにより、Astroを使った開発がより便利になり、より高度なカスタマイズが可能になります。

## 参考

- [Astro 4.11 | Astro](https://astro.build/blog/astro-4110/)