Author: {author}
-{body}
-{session.user?.name}さん、ようこそ
- ) : ( -未ログイン
- ) - } -{session.user?.name}
-``` - -さらに、`auth`オブジェクトを使ってミドルウェアでルートを保護することもできます。次の例では、ログイン後のダッシュボード (`/dashboard`) にアクセスしようとするユーザーが認証済みかを確認し、未認証の場合はホームページへリダイレクトします。 - -```ts title="src/middleware.ts" -import { auth } from "../../../auth"; // Better Authインスタンスをインポート -import { defineMiddleware } from "astro:middleware"; - -export const onRequest = defineMiddleware(async (context, next) => { - const isAuthed = await auth.api - .getSession({ - headers: context.request.headers, - }) - if (context.url.pathname === "/dashboard" && !isAuthed) { - return context.redirect("/"); - } - return next(); -}); -``` - -### 次のステップ - -- [Better Auth Astroガイド](https://www.better-auth.com/docs/integrations/astro) -- [Astro用Better Authサンプル](https://github.com/better-auth/examples/tree/main/astro-example) -- [Better Authドキュメント](https://www.better-auth.com/docs) -- [Better Auth GitHubリポジトリ](https://github.com/better-auth/better-auth) - -## Clerk - -ClerkはUIコンポーネント、API、管理ダッシュボードを備えたユーザー管理サービスです。[公式Clerk SDK for Astro](https://clerk.com/docs/references/astro/overview) が提供されています。 - -### インストール - -任意のパッケージマネージャで `@clerk/astro` を追加します。 - -
-
)}
-
-```
-
-インターフェイスはフィールドタイプを反映しています。WYSIWYGの`description`フィールドはHTML文字列としてロードされ、[`set:html`](/ja/reference/directives-reference/#sethtml)を使い描画します。
-
-同様に[ページを取得して](https://buttercms.com/docs/api/#get-a-single-page)フィールドを表示できます。
-
-```astro title="src/pages/ShopItem.astro"
----
-import { butterClient } from "../lib/buttercms";
-const response = await butterClient.page.retrieve("*", "simple-page");
-const pageData = response.data.data;
-
-interface Fields {
- seo_title: string,
- headline: string,
- hero_image: string,
-}
-
-const fields = pageData.fields as Fields;
----
-
- {item.name} - ${item.price}
- -{fields.headline}
-{item.fields.title}
- -My Blog
--
- {posts.map((post) => (
-
-
-
-
{post.title}
- - -{post.description}
-
- ))}
-
{title}
- - - - -``` - -http://localhost:4321/ にアクセスしていずれかの投稿をクリックすると動的ルーティングが動作していることが分かります！ - -#### サーバーサイドレンダリング - -[プロジェクトでSSRを有効にする](/ja/guides/on-demand-rendering/)場合、Contentfulデータを取得するために動的ルーティングで `slug` パラメータが利用されます。 - -`src/pages/posts`に`[slug].astro`を作成します。URLからスラッグを取得するために[`Astro.params`](/ja/reference/api-reference/#params)を使って、以下のように`getEntries`に渡してあげます。 - -```astro title="src/pages/posts/[slug].astro" ---- -import { contentfulClient } from "../../lib/contentful"; -import type { BlogPost } from "../../lib/contentful"; - -const { slug } = Astro.params; - -const data = await contentfulClient.getEntries{post?.title}
- - - - -``` - -### サイトを公開する - -ウェブサイトをデプロイするために、[デプロイガイド](/ja/guides/deploy/)へアクセスして好みのホスティングプロバイダーにあわせた説明に従ってください。 - -#### Contentfulの変更時に再ビルドする - -もしプロジェクトがAstroのデフォルトである静的モードを使っている場合、コンテンツを変更した時に新しいビルドを行うトリガーをするためのWebhookをセットアップする必要があります。もしNetlifyかVercelをホスティングプロバイダーとして使っている場合、コンテンツイベントから新しいビルドをトリガーするためにWebhook機能を使えます。 - -##### Netlify - -NetlifyのWebhookをセットアップするためには以下の手順が必要です。 - -{blok.title}
-{blok.description}
-{blok.title}
-{blok.description}
-My blog
--
- {posts.map(post => (
-
-
-
- {post.title}
-
{post.description}
-
- ))}
-
-
{blogPost.data.title}
-著者: {author.data.name}
- - - -次もおすすめ
-{relatedPosts.map(p => ( - {p.data.title} -))} -``` - -### コレクションクエリのフィルタリング - -`getCollection()`はオプションの"filter"コールバックを受け取り、エントリーの`id` や`data`（フロントマター）プロパティに基づいてクエリをフィルタリングします。`type: 'content'`のコレクションについては、`slug`に基づいてフィルタリングもできます。 - -:::note -`slug`プロパティはコンテンツコレクションに固有のもので、JSONやYAMLのコレクションをフィルタリングするときには利用できません。 -::: - -これを使用して、コンテンツを好きな基準でフィルタリングできます。たとえば、`draft`のようなプロパティでフィルタリングして、下書きのブログ記事がブログに公開されないようにできます。 - -```js -// 例: `draft: true`を含むエントリーを除外 -import { getCollection } from 'astro:content'; -const publishedBlogEntries = await getCollection('blog', ({ data }) => { - return data.draft !== true; -}); -``` - -開発サーバーの実行時にのみ閲覧可能で、本番用にはビルドされない下書き（draft）ページも作成できます。 - -```js -// 例: 本番用にビルドするときにのみ、`draft: true`を含むエントリーを除外 -import { getCollection } from 'astro:content'; -const blogEntries = await getCollection('blog', ({ data }) => { - return import.meta.env.PROD ? data.draft !== true : true; -}); -``` - -filterの引数は、コレクション内の入れ子ディレクトリによるフィルタリングもサポートします。`id`にはネストされた完全なパスが含まれるので、各`id`の先頭でフィルタリングして、特定のネストされたディレクトリからのアイテムだけを返せます。 - -```js -// 例: コレクション内のサブディレクトリによるエントリーのフィルタリング -import { getCollection } from 'astro:content'; -const englishDocsEntries = await getCollection('docs', ({ id }) => { - return id.startsWith('en/'); -}); -``` - -### Astroテンプレートでのコンテンツの使用 - -コレクションエントリーをクエリすると、Astroコンポーネントテンプレートの内部で各エントリーに直接アクセスできます。これにより、コンテンツへのリンク（コンテンツ`slug`を使用）やコンテンツに関する情報（`data`プロパティを使用）などのHTMLをレンダリングできます。 - -コンテンツをHTMLにレンダリングする方法については、下記の[コンテンツをHTMLにレンダリングする](#コンテンツをhtmlにレンダリングする)を参照してください。 - -```astro ---- -// src/pages/index.astro -import { getCollection } from 'astro:content'; -const blogEntries = await getCollection('blog'); ---- --
- {blogEntries.map(blogPostEntry => (
-
- - {blogPostEntry.data.title} - - - ))} -
公開日: {entry.data.published.toDateString()}
-{entry.data.title}
-{blogPost.data.title} — {remarkPluginFrontmatter.readingTime}
-``` - -{frontmatter.title}
-{frontmatter.pubDate.toISOString().slice(0,10)}
-``` -`toLocaleDateString`を使って日、月、年をフォーマットする例を見るには、Astro公式ブログテンプレートの[`ユーザー
-{randomUser.name.first} {randomUser.name.last}
- - -{JSON.stringify(data)}
;
-};
-
-export default Movies;
-```
-
-
-## GraphQLクエリ
-
-Astroはまた、`fetch()`を使用して任意の有効なGraphQLクエリでGraphQLサーバーにクエリを投げられます。
-
-```astro title="src/components/Film.astro" "await fetch"
----
-const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
- {
- method: 'POST',
- headers: {'Content-Type':'application/json'},
- body: JSON.stringify({
- query: `
- query getFilm ($id:ID!) {
- film(id: $id) {
- title
- releaseDate
- }
- }
- `,
- variables: {
- id: "ZmlsbXM6MQ==",
- },
- }),
- });
-
-const json = await response.json();
-const { film } = json.data;
----
-Star Wars: A New Hopeに関する情報を取得
-タイトル: {film.title}
-公開年: {film.releaseDate}
-``` - -## ヘッドレスCMSからのfetch - -Astroコンポーネントは、お気に入りのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。[動的ルーティング](/ja/guides/routing/#動的ルーティング)を使用すれば、コンポーネントはCMSコンテンツをもとにページを生成できます。 - -StoryblokやContentful、WordPressなどのヘッドレスCMSとAstroを組み合わせる方法について詳しくは、[CMSガイド](/ja/guides/cms/)を参照してください。 - -## コミュニティリソース - -- [Creating a fullstack app with Astro + GraphQL](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/) diff --git a/src/content/docs/ja/guides/deploy/aws.mdx b/src/content/docs/ja/guides/deploy/aws.mdx deleted file mode 100644 index c5678f27f9f46..0000000000000 --- a/src/content/docs/ja/guides/deploy/aws.mdx +++ /dev/null @@ -1,280 +0,0 @@ ---- -title: AstroサイトをAWSにデプロイする -description: AWSを使ってAstroサイトをウェブにデプロイする方法。 -type: deploy -i18nReady: true ---- - -[AWS](https://aws.amazon.com/)は、Astroサイトのデプロイに使用できる、機能豊富なウェブアプリホスティングプラットフォームです。 - -プロジェクトをAWSにデプロイするには、[AWSコンソール](https://aws.amazon.com/console/)を使用する必要があります。(これらのアクションのほとんどは、[AWS CLI](https://aws.amazon.com/cli/)を使用しても実行できます)。このガイドでは、AWSにサイトをデプロイする手順を最も基本的な方法から説明します。その後、コスト効率とパフォーマンスを向上させるための追加サービスをデモンストレーションします。 - -## AWS Amplify - -AWS Amplifyは、フロントエンドのWebおよびモバイル開発者が、AWS上で迅速かつ容易にフルスタックアプリケーションを構築できるようにするという目的のために設計されたツールと機能のセットです。 - -1. 新しいAmplify Hostingプロジェクトを作成します。 -2. リポジトリをAmplifyに接続します。 -3. ビルド出力ディレクトリ `baseDirectory` を `/dist` に変更します。 - - ```yaml - version: 1 - frontend: - phases: - preBuild: - # npmを使用していない場合は、`npm ci` を `yarn install` または `pnpm i` に変更してください。 - commands: - - npm ci - build: - commands: - - npm run build - artifacts: - baseDirectory: /dist - files: - - '**/*' - cache: - paths: - - node_modules/**/* - ``` - -`pnpm` を使用する場合は、`node_modules` の代わりにpnpm storeディレクトリをキャッシュするために、設定を変更する必要があります。以下は推奨のビルド設定です. - - - ```yaml - version: 1 - frontend: - phases: - preBuild: - commands: - - npm i -g pnpm - - pnpm config set store-dir .pnpm-store - - pnpm i - build: - commands: - - pnpm run build - artifacts: - baseDirectory: /dist - files: - - '**/*' - cache: - paths: - - .pnpm-store/**/* - ``` - -Amplifyは、あなたがリポジトリにコミットをプッシュすると、自動的にあなたのウェブサイトをデプロイし、更新します。 - -## S3での静的ウェブサイトホスティング - -S3はあらゆるアプリケーションの出発点です。プロジェクトファイルやその他のアセットが保存されます。S3はファイルの保存容量とリクエスト数に対して課金されます。S3についての詳細は[AWS documentation](https://aws.amazon.com/s3/)を参照してください。 - -1. プロジェクト名を含んだS3バケットを作成します。 - - :::tip - バケット名はグローバルに一意でなければなりません。プロジェクト名とサイトのドメイン名の組み合わせをお勧めします。 - ::: - -2. **「パブリックアクセスをすべてブロック」**を無効にします。デフォルトでは、AWSはすべてのバケットを非公開に設定しています。公開するには、バケットのプロパティにある「パブリックアクセスをブロック」のチェックを外す必要があります。 - -3. `dist`にあるビルドしたファイルをS3にアップロードします。これは、コンソールで手動で行うか、AWS CLIを使用して行うことができます。AWS CLIを使用する場合は、[AWS認証情報で認証](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)の後に、以下のコマンドを使用できます。 - - ``` - aws s3 cp dist/ s3://Astroの中でReactコンポーネントを直接使ってください！
-
-
-```
-
-:::caution
-**Astro**コンポーネント（`.astro`）だけが複数のフレームワークのコンポーネントを含められます。
-:::
-
-## フレームワークコンポーネントにPropsを渡す
-
-Astroコンポーネントからフレームワークコンポーネントにpropを渡せます。
-
-```astro title="src/pages/frameworks-props.astro"
----
-import TodoList from '../components/TodoList.jsx';
-import Counter from '../components/Counter.svelte';
----
-
-
-```
-
-:::caution[関数をプロパティとして渡す]
-フレームワークコンポーネントに関数をプロパティとして渡せますが、それはサーバーレンダリングの間だけ機能します。もしこの関数をハイドレードされたコンポーネント（例えば、イベントハンドラーとして）で使用しようとするとエラーが発生します。
-
-これはAstroでは関数をシリアライズ（サーバーからクライアントへの転送）できないためです。
-:::
-
-
-## フレームワークコンポーネントに子要素を渡す
-
-Astroコンポーネントでは、フレームワークコンポーネントに子要素を**渡せます**。各フレームワークは、これらの子要素を参照するための固有のパターンがあります。React、Preact、Solidは`children`という特別なプロパティを使用し、SvelteとVueは`これは、テキストとボタンがあるサイドバーです。
-メニュー
-テキストとボタンを含むサイドバーがあります。
- -テキストとボタンを含むサイドバーがあります。
-
-
-`(または他の要素)でラップしてからスタイルを付与するか検討してください。
-
-スコープされたスタイルの詳細度は維持され、他のCSSファイルやCSSライブラリと一緒に一貫して動作でき、スタイルがコンポーネント外に適用されるのを防ぐ境界は維持されます。
-
-### グローバルスタイル
-
-ほとんどのコンポーネントではスコープされたスタイルを使うことをおすすめしますが、いずれはグローバルでスコープされていないCSSを書くまっとうな理由が見つかるかもしれません。この場合、`
-```
-
-また、`:global()`セレクタを使用すると、同じ`
-`class:list`の詳細については、[ディレクティブのリファレンス](/ja/reference/directives-reference/#classlist)ページを参照してください。
-
-
-### CSS変数
-
-`define:vars`については、[ディレクティブのリファレンス](/ja/reference/directives-reference/#definevars)のページをご覧ください。
-
-
-### 子コンポーネントへの`class`の受け渡し
-
-Astroでは、`class`のようなHTML属性は子コンポーネントには自動で伝わりません。
-
-その代わり、子コンポーネントで`class`プロパティを受け取り、それをルート要素に適用します。`class`はJavaScriptの[予約語](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words)なので、分割代入を利用して名前を変更する必要があります。
-
-デフォルト設定でスコープ付きスタイルを使用する場合は、`data-astro-cid-*`属性も渡す必要があります。これは、Propsの残り(`...rest`)をコンポーネントに渡すことで行うことができます。`scopedStyleStrategy`を`class`または`where`に変更した場合は、`...rest`Propsは必要ありません。
-
-```astro title="src/components/MyComponent.astro" {2,4}
----
-const { class: className, ...rest } = Astro.props;
----
-This will be red!
-```
-
-:::note[親コンポーネントからスコープされたクラス]
-`data-astro-cid-*`属性は親のスコープに子を含むため、親から子へスタイルがカスケードされる可能性があります。 これが意図しない副作用をもたらすのを避けるには、子コンポーネントで一意なクラス名を使用するようにしてください。
-:::
-
-### インラインスタイル
-
-HTML要素は、`style`属性を使ってインラインでスタイルを設定できます。これは、CSS文字列またはCSSプロパティのオブジェクトで指定できます。
-
-```astro title="src/pages/index.astro"
-// これらは同じです
-詳しくは`public/`や`src/`にある[静的アセット](/ja/guides/imports/)の使い方をご覧ください。
-
-### ローカルスタイルシートのインポート
-
-:::caution[npmパッケージを使用する場合]
-npmパッケージからインポートする場合、`astro.config`を更新する必要があるかもしれません。以下の[スタイルシートをnpmパッケージからインポートする](#npmパッケージからスタイルシートをインポートする)をご覧ください。
-:::
-
-ESMのインポート構文を使用して、Astroコンポーネントのfrontmatterでスタイルシートをインポートできます。CSSのインポートは、[Astroコンポーネント内の他のESMのインポート](/ja/basics/astro-components/#コンポーネントスクリプト)のように動作し、**コンポーネントからの相対パス**を、ほかのimportと同様にコンポーネントスクリプトの**先頭**に記述しなければなりません。
-
-```astro title="src/pages/index.astro" {4}
----
-// AstroはこのCSSを自動的にバンドルし、最適化します。
-// これは.scssや.stylなどのプリプロセッサーのファイルにも有効です。
-import '../styles/utils.css';
----
-
-```
-
-ESMによるCSSの`import`は、ReactやPreactのようなJSXコンポーネントを含む、あらゆるJavaScriptファイル内でサポートされています。 これは、Reactコンポーネントに対して、コンポーネント単位できめ細かいスタイルを記述するのに便利です。
-
-### npmパッケージからスタイルシートをインポートする
-
-また、外部のnpmパッケージからスタイルシートを読み込む必要がある場合もあります。これは特に[Open Props](https://open-props.style/)のようなユーティリティでよくあることです。パッケージが**ファイル拡張子の使用を推奨**している場合(例:`package-name/styles`の代わりに `package-name/styles.css` )、これは他のローカルスタイルシートと同様に動作するはずです。
-
-```astro
----
-// src/pages/random-page.astro
-import 'package-name/styles.css';
----
-
-```
-
-パッケージが**ファイル拡張子の使用を推奨していない**場合(例: `package-name/styles`)は、まずAstroの設定を更新する必要があります！
-
-`package-name`から`normalize`という名前のCSSファイルをインポートしているとします(ファイル拡張子は省略されています)。ページを正しくプリレンダリングするために、`package-name`を[`vite.ssr.noExternal`配列](https://vite.dev/config/#ssr-noexternal)に追加してください。
-
-```js ins={7}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- vite: {
- ssr: {
- noExternal: ['package-name'],
- }
- }
-})
-```
-
-:::note
-これは[Vite固有の設定](https://vite.dev/config/#ssr-noexternal)であり、[Astro SSR](/ja/guides/on-demand-rendering/)とは関係がありません。
-:::
-
-これで、`package-name/normalize`を自由にインポートできるようになりました。これは、他のローカルスタイルシートと同様に、Astroによってバンドルされ、最適化されます。
-
-```astro {3}
----
-// src/pages/random-page.astro
-import 'package-name/normalize';
----
-
-```
-
-### "link"タグで静的スタイルシートを読み込む
-
-また、``要素を使用して、ページにスタイルシートを読み込めます。これは、`/public`ディレクトリにあるCSSファイルへの絶対URLパスか、外部のウェブサイトへのURLである必要があります。``のhref値を相対パスで指定することはサポートされていません。
-
-```astro title="src/pages/index.astro" {3,5}
-
-
-
-
-
-
-```
-
-この方法では`public/`ディレクトリを使用するため、Astroが提供する通常のCSS処理、バンドル、最適化はスキップされます。これらの変換が必要な場合は、上記の[ローカルスタイルシートのインポート](#ローカルスタイルシートのインポート)の方法を使用してください。
-
-## カスケード順序
-
-Astroのコンポーネントは、複数のCSSのソースを評価しなければならないことがあります。たとえば、コンポーネントはCSSスタイルシートをインポートし、それ自身の`
-Astro
-
-
-
-
-
- ```shell
- npx astro add tailwind
- ```
-
-
- ```shell
- pnpm astro add tailwind
- ```
-
-
- ```shell
- yarn astro add tailwind
- ```
-
-
-
-Astroインテグレーションのインストール、インポート、設定の手順については、[インテグレーションガイド](/ja/guides/integrations-guide/)を参照してください。
-
-## CSSプリプロセッサ
-
-Astroは、[Vite][vite-preprocessors]を通じて、[Sass][sass]、[Stylus][stylus]、[Less][less]といったCSSプリプロセッサをサポートしています。
-
-### SassとSCSS
-
- ```shell
- npm install sass
- ```
-
-`.astro`ファイルで`
-```
-
-詳しくは[Viteのドキュメント](https://vite.dev/guide/assets.html#importing-asset-as-url)をご覧ください。
-
-### `?url` CSSインポート
-
-高度な使い方をする場合、プロジェクトの`src/`ディレクトリ内にあるCSSファイルを直接のURL参照でインポートできます。これは、CSSファイルがどのようにページに読み込まれるかを完全に制御する必要がある場合に便利です。しかし、この場合、そのCSSファイルをページの残りのCSSと一緒に最適化することはできません。
-
-これはほとんどのユーザーにはおすすめできません。代わりに、CSSファイルを`public/`内に配置し、一貫したURLの参照を得られるようにしましょう。
-
-:::caution
-`?url`を指定して小さいCSSファイルをインポートすると、Base64でエンコードされたCSSファイルの内容がデータURLとして返されることがありますが、これは最終的なビルドのときだけです。エンコードされたデータURL(`data:text/css;base64,...`)をサポートするようにコードを書くか、この機能を無効にするために[`vite.build.assetsInlineLimit`](https://vite.dev/config/#build-assetsinlinelimit)設定オプションを `0`にセットする必要があります。
-:::
-
-```astro
----
-// 高度な例！ ほとんどのユーザーにおすすめされません。
-import stylesUrl from '../styles/main.css?url';
----
-
-
-```
-
-詳しくは[Viteのドキュメント](https://vite.dev/guide/assets.html#importing-asset-as-url)をご覧ください。
-
-
-[less]: https://lesscss.org/
-[sass]: https://sass-lang.com/
-[stylus]: https://stylus-lang.com/
-[svelte-style]: https://svelte.dev/docs#component-format-style
-[tailwind]: /ja/guides/integrations-guide/tailwind/
-[vite-preprocessors]: https://vite.dev/guide/features.html#css-pre-processors
-[vue-css-modules]: https://vue-loader.vuejs.org/guide/css-modules.html
-[vue-scoped]: https://vue-loader.vuejs.org/guide/scoped-css.html
diff --git a/src/content/docs/ja/guides/syntax-highlighting.mdx b/src/content/docs/ja/guides/syntax-highlighting.mdx
index 7d81df6256dfe..d8f343d581d15 100644
--- a/src/content/docs/ja/guides/syntax-highlighting.mdx
+++ b/src/content/docs/ja/guides/syntax-highlighting.mdx
@@ -124,7 +124,7 @@ Astroで使用する場合は次に注意します。
- [`
-
- ```shell
- npm install -D cypress
- ```
-
- これにより、プロジェクトの開発用依存関係としてCypressがローカルにインストールされます。
-
-
- ```shell
- pnpm add cypress --save-dev
- ```
-
-
- ```shell
- yarn add cypress --dev
- ```
-
-
-
-### 設定
-
-プロジェクトのルートに、以下の内容の`cypress.config.js`ファイルを作成します。
-
-```js title="cypress.config.js"
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
- e2e: {
- supportFile: false
- }
-})
-```
-
-### 最初のCypressのテストを作成する
-
-1. テストするページを選択します。ここでは以下の`index.astro`ページを例としてテストします。
-
- ```html title="src/pages/index.astro"
- ---
- ---
-
-
- Astro最高!
-
-
-
-
-
- ```shell
- npm init playwright@latest
- ```
-
-
- ```shell
- pnpm dlx create-playwright
- ```
-
-
- ```shell
- yarn create playwright
- ```
-
-
-
-### 初めてのPlaywrightのテストを作成する
-
-1. テストするページを選択します。ここでは以下の`index.astro`ページを例としてテストします。
-
- ```html title="src/pages/index.astro"
- ---
- ---
-
-
- Astro最高!
-
-
-
-
- ```
-
-1. 新しいフォルダを作成し、`src/test`に以下のテストファイルを追加します。以下のテストをファイルに貼り付けて、ページのメタ情報が正しいことを確認します。ページの``の値を、テストするページと一致するように更新してください。
-
- ```jsx title="src/test/index.spec.ts" "Astro最高!"
- import { test, expect } from '@playwright/test';
-
- test('メタ情報が正しい', async ({ page }) => {
- await page.goto("http://localhost:4321/");
-
- await expect(page).toHaveTitle('Astro最高!');
- });
- ```
-
- :::tip[baseurlをセットする]
- 設定ファイル`playwright.config.ts`で[`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)と設定すると、`page.goto("http://localhost:4321/")`の代わりに、より便利なURLとして`page.goto("/")`を使用できます。
- :::
-
-### Playwrightのテストを実行する
-
-ひとつまたは複数のテストを、複数のブラウザで実行可能です。デフォルトでは、テスト結果はターミナルに表示されます。必要に応じて、HTML Test Reporterを開いて完全なレポートを表示したり、テスト結果をフィルタリングできます。
-
-1. 上の例のテストをコマンドラインから実行するには、`test`コマンドを使用します。単一のテストのみを実行する場合は、ファイル名をコマンドに含めます。
-
- ```sh
- npx playwright test index.spec.ts
- ```
-
-1. HTML Test Reportの全体を確認するには、次のコマンドを使用して開きます。
-
- ```sh
- npx playwright show-report
- ```
-
-:::tip
-実際にデプロイされたサイトにより近付けるため、本番環境のコードをテストしましょう。
-:::
-
-#### 応用：テスト中に開発用Webサーバーを起動する
-
-Playwrightの設定ファイルで[`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests)オプションを使用すると、テストスクリプトの実行時に、Playwrightに開発用Webサーバーを起動させることもできます。
-
-以下はnpmを使用する場合の設定とコマンドの例です。
-
-1. プロジェクトのルートにある`package.json`ファイルに、`"test:e2e": "playwright test"`のようにテストスクリプトを追加します。
-
-1. `playwright.config.ts`に`webServer`オブジェクトを追加し、コマンドの値を`npm run preview`に設定します。
-
- ```js title="playwright.config.ts" ins={4-9} "npm run preview"
- import { defineConfig } from '@playwright/test';
-
- export default defineConfig({
- webServer: {
- command: 'npm run preview',
- url: 'http://localhost:4321/',
- timeout: 120 * 1000,
- reuseExistingServer: !process.env.CI,
- },
- use: {
- baseURL: 'http://localhost:4321/',
- },
- });
- ```
-
-1. `npm run build`を実行した上で、`npm run test:e2e`によりPlaywrightのテストを実行します。
-
-Playwrightについての詳細は、以下のリンクを参照してください。
-
-- [Getting started with Playwright](https://playwright.dev/docs/intro)
-- [Use a development server](https://playwright.dev/docs/test-webserver#configuring-a-web-server)
diff --git a/src/content/docs/ja/guides/troubleshooting.mdx b/src/content/docs/ja/guides/troubleshooting.mdx
deleted file mode 100644
index 78aeafe37d1c4..0000000000000
--- a/src/content/docs/ja/guides/troubleshooting.mdx
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: トラブルシューティング
-description: 助けが必要ですか？何か困ったことがありますか？私たちはあなたを支援します。
-i18nReady: true
----
-
-Astroは、コードのトラブルシューティングとデバッグを支援するため、いくつかのツールを提供しています。
-
-## よくあるエラーメッセージ
-
-ターミナルで表示される一般的なエラーメッセージとその意味、および対処法を紹介します。
-
-### Cannot use import statement outside a module （モジュール外でimport文が使えません）
-
-Astroコンポーネントでは、`<script>`タグはデフォルトで[JavaScriptモジュール](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)として巻き上げられロードされます。タグに[`is:inline`ディレクティブ](/ja/reference/directives-reference/#isinline)などの属性が含まれていると、このデフォルトの動作は解除されます。
-
-**解決方法**: もし、`<script>`タグに何らかの属性を追加している場合は、import文を使用できるように`type="module"`属性も追加する必要があります。
-
-**ステータス**: 期待されるAstroの動作、意図したとおりです。
-
-**自分だけの問題ではないと思うなら？**
-[この問題](https://github.com/withastro/astro/issues?q=is%3Aissue+is%3Aopen+Cannot+use+import+statement)を報告した人が他にいないか確認してください！
-
-### Unable to render component（コンポーネントをレンダリングできません）
-
-Astroテンプレートにインポートして使用しているコンポーネントにエラーがあることを示します。
-
-#### よくある原因
-
-レンダリング時、`window`または`document`オブジェクトにアクセスしようとした場合、発生する可能性があります。デフォルトでは、Astroはコンポーネントを[アイソモーフィック](https://en.wikipedia.org/wiki/Isomorphic_JavaScript)にレンダリングします。つまり、ブラウザのランタイムが利用できないサーバー上で実行されるということです。この事前レンダリングステップを無効にするには、[`client:only`ディレクティブ](/ja/reference/directives-reference/#clientonly)を使用します。
-
-**解決方法**: レンダリング後にそれらのオブジェクトにアクセスしてみてください（例: Reactの[`useEffect()`](https://react.dev/reference/react/useEffect)またはVueの[`onMounted()`](https://vuejs.org/api/composition-api-lifecycle.html#onmounted)とSvelteの[`onMount()`](https://svelte.dev/docs#run-time-svelte-onmount)）。
-
-**ステータス**: 期待されるAstroの動作、意図したとおりです。
-
-#### そうではない？
-
-**解決方法**: [Astroコンポーネント](/ja/basics/astro-components/)または[UIフレームワークコンポーネント](/ja/guides/framework-components/)の適切なドキュメントをチェックする。[Astro.new](https://astro.new)からAstroのスターターテンプレートを開き、最小限のAstroプロジェクトでコンポーネントのみのトラブルシューティングを検討してください。
-
-**自分だけの問題ではないと思うなら？**
-[この問題](https://github.com/withastro/astro/issues?q=is%3Aissue+is%3Aopen+Unable+to+render+Component)を報告した人が他にいないか確認してください！
-
-### Expected a default export（デフォルトのエクスポートを予想）
-
-このエラーは、無効なコンポーネントをインポートまたはレンダリングしようとしたとき、または正しく動作していないコンポーネントをインポートまたはレンダリングしようとしたときに表示されることがあります。(この特定のメッセージは、AstroでのUIコンポーネントのインポートが動作する方法によって発生します。)
-
-**解決方法**: インポートおよびレンダリングしているコンポーネントのエラーを探し、それが正しく動作していることを確認してください。[astro.new](https://astro.new)からAstroスターターテンプレートを開き、最小限のAstroプロジェクトであなたのコンポーネントだけをトラブルシューティングすることを検討してみてください。
-
-**ステータス**: 期待されるAstroの動作、意図したとおりです。
-
-
-## 共通の不具合
-
-### コンポーネントがレンダリングされない
-
-まず、[`.astro`コンポーネントスクリプト](/ja/basics/astro-components/#コンポーネントスクリプト)または[`.mdx`ファイル](/ja/guides/markdown-content/#mdxでコンポーネントを使用)で**コンポーネントがインポート**しているかどうか確認します。
-
-それから、import文を確認してください。
-
-- インポートのリンク先が違っていませんか？（importパスを確認してください）
-- インポートしたコンポーネントと同じ名前になっていますか？(コンポーネント名と、[`.Astro`構文にしたがっていること](/ja/reference/astro-syntax/#astroとjsxの違い)を確認してください。）
-- インポート時に拡張子が含まれていますか？（インポートしたファイルに拡張子が含まれているか確認してください。例: `.Astro`、`.md`、`.vue`、`.svelte`。 注: `.js(x)`と`.ts(x)`のファイルのみ、拡張子は必要ありません。）
-
-### コンポーネントがインタラクティブでない
-
-もし、コンポーネントがレンダリングされているのに（上記参照）、ユーザーの操作に反応しない場合、コンポーネントをハイドレートするための[`client:*` ディレクティブ](/ja/reference/directives-reference/#クライアントディレクティブ)が不足している可能性があります。
-
-デフォルトでは、[UIフレームワークコンポーネントはクライアントでハイドレーションされません](/ja/guides/framework-components/#インタラクティブなコンポーネント)。もし`client:*`ディレクティブが提供されない場合、そのHTMLはJavaScriptなしでページにレンダリングされます。
-
-:::tip
-[Astroコンポーネント](/ja/basics/astro-components/)は、HTMLだけのテンプレートコンポーネントで、クライアントサイドのランタイムはありません。しかし、Astroコンポーネントのテンプレートで`<script>`タグを使用すると、グローバルスコープで実行されるJavaScriptをブラウザに送信できます。
-:::
-
-### パッケージ'X'が見つかりません
-
-Astroの起動時に `"Cannot find package 'react'"`（または同様の）警告が表示された場合、そのパッケージをプロジェクトにインストールする必要があることを意味します。すべてのパッケージマネージャーが、peer dependenciesを自動的にインストールするわけではありません。Node v16+でnpmを使用している場合、このセクションを気にする必要はありません。
-
-たとえば、Reactは`@astrojs/react`インテグレーションのpeer dependenciesです。つまり、公式の`react`と`react-dom`パッケージを、インテグレーションと一緒にインストールする必要があります。そうすると、インテグレーションは自動的にこれらのパッケージから取得します。
-
-```shell ins="react react-dom"
-# 例: インテグレーションとフレームワークを一緒にインストールする
-npm install @astrojs/react react react-dom
-```
-
-フレームワークのレンダラーやCSSツールなどのパッケージをAstroに追加する方法は、[Astroのインテグレーションガイド](/ja/guides/integrations-guide/)を参照してください。
-
-### `Astro.glob()` - no matches found（一致するものはありません）
-
-`Astro.glob()`を使用してファイルをインポートする場合は、必要なファイルすべてにマッチする正しいglob構文を使用するようにしてください。
-
-#### ファイルパス
-
-たとえば、`src/pages/index.Astro` で `../components/**/*.js` を使用すると、次の両方のファイルをインポートできます。
-- `src/components/MyComponent.js`
-- `src/components/includes/MyOtherComponent.js`
-
-#### サポートされている値
-
-`Astro.glob()`は動的変数と文字列補間をサポートしていません。
-
-これはAstroのバグではありません。Viteの[`import.meta.glob()`関数](https://vite.dev/guide/features.html#glob-import)の制限によるもので、静的な文字列リテラルしかサポートしていません。
-
-これを回避するには、代わりに`Astro.glob()`を使って必要なファイルをすべて含む、より大きなファイル群をインポートし、フィルタリングしてください。
-
-```astro {6-7}
----
-// src/components/featured.astro
-const { postSlug } = Astro.props;
-const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`;
-
-const posts = await Astro.glob('../pages/blog/*.md');
-const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost));
----
-
-<p>
- お気に入りの投稿をみてください！ <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>
-</p>
-```
-
-### Yarn 2+でAstroを使う（Berry）
-
-Yarn 2+、通称Berryは、Nodeモジュールの保存と管理に[Plug'n'Play (PnP)](https://yarnpkg.com/features/pnp)という技術を使用しているため、`create-astro`による新しいAstroプロジェクトの初期化やAstroでの作業中に[問題を引き起こす](https://github.com/withastro/astro/issues/3450)ことがあります。回避するには、`yarnrc.yml`の[`nodeLinker`プロパティ](https://yarnpkg.com/configuration/yarnrc#nodeLinker)を`node-modules`に設定します。
-
-```yaml
-nodeLinker: "node-modules"
-```
-
-## ヒントとコツ
-
-### `console.log()`を使ったデバッグ
-
-`console.log()`は、Astroのコードをデバッグするためのシンプルでありながら人気のある方法です。`console.log`ステートメントをどこに書くかによって、デバッグ出力がどこに出力されるかが決まります。
-
-#### Frontmatter
-
-AstroのFrontmatterの`console.log()`は、常にAstro CLIを実行している**ターミナル**に出力されます。これは、Astroがサーバー上で動作していて、ブラウザ上では動作しないためです。
-
-```astro {5}
----
-const sum = (a, b) => a + b;
-
-// 例: CLIターミナルに "4 "を出力する。
-console.log(sum(2, 2));
----
-```
-
-#### JSスクリプト
-
-Astroの`<script>`タグ内に記述またはインポートされたコードは、ブラウザ上で実行されます。`console.log()`ステートメントやその他のデバッグ出力は、ブラウザのコンソールに出力されます。
-
-### フレームワークコンポーネントのデバッグ
-
-[フレームワークコンポーネント](/ja/guides/framework-components/)（ReactやSvelteなど）はユニークです。これらはデフォルトでサーバーサイドにレンダリングされ、`console.log()`のデバッグ出力がターミナルに表示されることを意味します。しかし、これらはブラウザ用にハイドレートすることもでき、それによってデバッグログがブラウザにも表示されるかもしれません。
-
-これはSSR出力とブラウザのハイドレートされたコンポーネントとの間の差異をデバッグするのに便利でしょう。
-
-### Astro `<Debug />` コンポーネント
-
-Astroコンポーネントのデバッグを支援するために、Astroは組み込みの`<Debug />`コンポーネントを提供し、任意の値をコンポーネントHTMLテンプレートに直接レンダリングします。これは、ターミナルとブラウザの間を行ったり来たりすることなく、ブラウザ上で素早くデバッグするのに便利です。
-
-
-```astro {2,7}
----
-import { Debug } from 'astro/components';
-const sum = (a, b) => a + b;
----
-
-<!-- 例: {answer: 6}をブラウザに出力 -->
-<Debug answer={sum(2, 4)} />
-```
-
-Debugコンポーネントは、さらに柔軟で簡潔なデバッグを行うためのさまざまな構文オプションをサポートしています。
-
-```astro {2,7-9}
----
-import { Debug } from 'astro/components';
-const sum = (a, b) => a + b;
-const answer = sum(2, 4);
----
-<!-- 例: 3つの例はすべて等価である。 -->
-<Debug answer={sum(2, 4)} />
-<Debug {{answer: sum(2, 4)}} />
-<Debug {answer} />
-```
-
-## もっと知りたい？
-
-[Discord](https://astro.build/chat)の`#support`チャンネルで、問題を説明してください。私たちはいつでも喜んでお手伝いします！
-
-現在の[アストロの未解決問題](https://github.com/withastro/astro/issues/)にアクセスして、既知の問題に遭遇しているかどうかを確認したり、バグレポートを提出したりできます。
-
-また、[RFCディスカッション](https://github.com/withastro/rfcs/discussions/)では、Astroの既知の制限事項があるか確認し、あなたのユースケースに関連する提案があるか確認できます。
diff --git a/src/content/docs/ja/guides/typescript.mdx b/src/content/docs/ja/guides/typescript.mdx
deleted file mode 100644
index 4ecefe67b7f6f..0000000000000
--- a/src/content/docs/ja/guides/typescript.mdx
+++ /dev/null
@@ -1,326 +0,0 @@
----
-title: TypeScript
-description: Astro組み込みのTypeScriptサポートの使い方を学ぶ。
-i18nReady: true
----
-
-import Since from '~/components/Since.astro'
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-Astroには[TypeScript](https://www.typescriptlang.org/)のサポートが組み込まれています。Astroプロジェクトで`.ts`や`.tsx`ファイルをインポートしたり、[Astroコンポーネント](/ja/basics/astro-components/#コンポーネントスクリプト)の中で直接TypeScriptコードを書いたり、お好みで[`astro.config.ts`](/ja/guides/configuring-astro/#astroの設定ファイル)ファイルを使うこともできます。
-
-TypeScriptにより、オブジェクトやコンポーネントの形状（shape）をコードで定義して実行時エラーを防ぐことができます。たとえば、TypeScriptで[コンポーネントのpropsに型を付ける](#コンポーネントprops)と、コンポーネントが受け付けないpropを設定した場合にエディタ内にエラーが発生します。
-
-AstroプロジェクトでTypeScriptコードを書かなくても、その恩恵を受けられます。Astroは常にコンポーネントのコードをTypeScriptとして扱い、[Astro VSCode拡張機能](/ja/editor-setup/)は自動補完やヒント、エラーをエディタ内で提供するためにできる限りの推論を行います。
-
-Astroの開発サーバーは型チェックを行いませんが、[スクリプトの追加](#型チェック)によりコマンドラインから型エラーをチェックできます。
-
-## 準備
-
-Astroのスタータープロジェクトには`tsconfig.json`ファイルが含まれています。TypeScriptコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解するために、このファイルは重要です。`tsconfig.json`ファイルがないと、npmパッケージのインポートなどの一部の機能がエディタで完全にサポートされません。Astroを手動でインストールする場合は、必ずこのファイルを自分で作成してください。
-
-Astroには、`base`、`strict`、`strictest`という3つの拡張可能な`tsconfig.json`のテンプレートが含まれています。`base`テンプレートは、JavaScriptのモダンな機能のサポートを可能とし、他のテンプレートの基礎としても使用されます。プロジェクトでTypeScriptを書く予定がある場合は、`strict`または`strictest`を使用することをお勧めします。[astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)で3つのテンプレートの設定を確認・比較できます。
-
-いずれかのテンプレートを継承するには、[`extends`という設定項目](https://www.typescriptlang.org/tsconfig#extends)を使用します。
-
-```json title="tsconfig.json"
-{
- "extends": "astro/tsconfigs/base"
-}
-```
-
-また、[Viteのクライアント型](https://vite.dev/guide/features.html#client-types)をプロジェクトで利用できるように、テンプレートには`src`フォルダ内に`env.d.ts`が含まれています。
-
-```typescript title="env.d.ts"
-/// <reference types="astro/client" />
-```
-
-VSCodeを使っていない場合は、[Astro TypeScriptプラグイン](https://www.npmjs.com/package/@astrojs/ts-plugin)をインストールすることで、`.ts`ファイルからの`.astro`ファイルのインポートをサポートできます（これは再エクスポートに便利なことがあります）。
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- npm install @astrojs/ts-plugin
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- pnpm add @astrojs/ts-plugin
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- yarn add @astrojs/ts-plugin
- ```
- </Fragment>
-</PackageManagerTabs>
-
-そして、以下の設定を`tsconfig.json`に追加します。
-
-```json title="tsconfig.json"
- "compilerOptions": {
- "plugins": [
- {
- "name": "@astrojs/ts-plugin"
- },
- ],
- }
-```
-
-プラグインが正しく機能していることを確認するには、`.ts`ファイルを作成し、その中にAstroコンポーネントをインポートします。エディタには警告メッセージが何も表示されないはずです。
-
-### UIフレームワーク
-
-プロジェクトで[UIフレームワーク](/ja/guides/framework-components/)を使用する場合は、フレームワークに応じた追加の設定が必要かもしれません。詳細については、フレームワークのTypeScriptドキュメントを参照してください。 ([Vue](https://vuejs.org/guide/typescript/overview.html#using-vue-with-typescript)、[React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup)、[Preact](https://preactjs.com/guide/v10/typescript)、[Solid](https://www.solidjs.com/guides/typescript))
-
-## 型のインポート
-
-可能な限り、明示的な型のインポートとエクスポートを使用しましょう。
-
-```js del={1} ins={2} ins="type"
-import { SomeType } from './script';
-import type { SomeType } from './script';
-```
-
-こうすることで、Astroのバンドラーがインポートした型をJavaScriptであるかのように誤ってバンドルするようなエッジケースを避けることができます。
-
-`tsconfig.json`ファイルで、型のインポートを強制するようにTypeScriptを設定できます。[`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)を`true`に設定してください。TypeScriptはインポートをチェックし、いつ`import type`を使用するべきかを伝えてくれます。この設定はAstroのすべてのプリセットでデフォルトで有効化されています。
-
-```json title="tsconfig.json" ins={3}
- {
- "compilerOptions": {
- "verbatimModuleSyntax": true
- }
- }
-```
-
-## Importエイリアス
-
-Astroは、`tsconfig.json`と`jsconfig.json`の`paths`設定で定義する[importエイリアス](/ja/guides/imports/#importエイリアス)をサポートしています。
-
-
-```astro title="src/pages/about/nate.astro" "@components" "@layouts"
----
-import HelloWorld from '@components/HelloWorld.astro';
-import Layout from '@layouts/Layout.astro';
----
-```
-
-```json title="tsconfig.json" {5-6}
-{
- "compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@components/*": ["src/components/*"],
- "@layouts/*": ["src/layouts/*"]
- }
- }
-}
-```
-
-## `window`と`globalThis`の拡張
-
-グローバルオブジェクトにプロパティを追加することもできます。これは、`env.d.ts`ファイルに`declare`キーワードを使用してトップレベルの宣言を追加することで可能です。
-
-```ts title="env.d.ts"
-declare const myString: string;
-declare function myFunction(): boolean;
-```
-
-これにより、`globalThis.myString`と`globalThis.myFunction`、さらに`window.myString`と`window.myFunction`に型が提供されます。
-
-`window`はクライアントサイドのコード内でのみ利用可能なことに注意してください。`globalThis`はサーバーサイドとクライアントサイドの両方で利用できますが、サーバーサイドの値はクライアントとは共有されません。
-
-`window`オブジェクト上のプロパティにのみ型付けしたい場合は、代わりに`Window`インターフェイスを提供してください。
-
-```ts title="env.d.ts"
-interface Window {
- myFunction(): boolean;
-}
-```
-
-## コンポーネントProps
-
-AstroはTypeScriptによるコンポーネントpropsの型付けをサポートしています。有効にするには、コンポーネントのfrontmatterにTypeScriptの`Props`インターフェースを追加します。`export`文を使用することもできますが、必須ではありません。[Astro VSCode拡張機能](/ja/editor-setup/)は、`Props`インターフェースを自動的に探し、そのコンポーネントを他のテンプレート内で使用するときに適切なTSサポートを提供します。
-
-```astro title="src/components/HelloProps.astro" ins={2-5}
----
-interface Props {
- name: string;
- greeting?: string;
-}
-const { greeting = 'Hello', name } = Astro.props;
----
-<h2>{greeting}, {name}!</h2>
-```
-
-### propsの型でよくあるパターン
-
-- コンポーネントがpropsやスロット経由のコンテンツを受け取らない場合は、`type Props = Record<string, unknown>`を使用できます。
-
-- コンポーネントがデフォルトスロットから子要素を受け取る必要がある場合は、`type Props = { children: any; };`によりこれを強制できます。
-
-## 型ユーティリティ
-
-<p><Since v="1.6.0" /></p>
-
-Astroには、propsに型を付ける際によく出くわすパターン向けに、組み込みのユーティリティ型を提供しています。これらは`astro/types`エントリポイントから利用可能です。
-
-### 組み込みのHTML属性
-
-Astroは、マークアップが有効なHTML属性を使用していることを確認するために`HTMLAttributes`型を提供しています。この型により、コンポーネントのpropsを構成しやすくなります。
-
-たとえば`<Link>`コンポーネントを作成する場合、次のようにコンポーネントのprops型に`<a>`タグのデフォルトHTML属性を反映できます。
-
-```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
----
-import { HTMLAttributes } from 'astro/types';
-// `type`を使う
-type Props = HTMLAttributes<'a'>;
-// または`interface`を拡張します
-interface Props extends HTMLAttributes<'a'> {
- myProp?: boolean;
-}
-const { href, ...attrs } = Astro.props;
----
-<a href={href} {...attrs}>
- <slot />
-</a>
-```
-
-また、`.d.ts`ファイルで`astroHTML.JSX`名前空間を再宣言し、デフォルトのJSX定義を拡張して非標準の属性を追加することも可能です。
-
-```ts
-// src/custom-attributes.d.ts
-
-declare namespace astroHTML.JSX {
- interface HTMLAttributes {
- 'data-count'?: number;
- 'data-label'?: string;
- }
-
- // CSSのカスタムプロパティをスタイルオブジェクトに追加する
- interface CSSProperties {
- '--theme-color'?: 'black' | 'white';
- }
-}
-```
-
-:::note
-`astroHTML`は`.astro`コンポーネント内にグローバルに注入されます。TypeScriptファイルで使用するには、[triple-slashディレクティブ](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html)を使用します。
-
-```ts
-/// <reference types="astro/astro-jsx" />
-
-type MyAttributes = astroHTML.JSX.ImgHTMLAttributes;
-```
-:::
-
-### `ComponentProps`型
-
-<p><Since v="4.3.0" /></p>
-
-この型エクスポートを利用すると、別のコンポーネントが`Props`型を直接エクスポートしていなかったとしても、そのコンポーネントが受け付ける`Props`を参照できるようになります。
-
-以下に示すのは、`astro/types`の`ComponentProps`を使用して`<Button />`コンポーネントの`Props`型を参照する例です。
-
-```astro title="src/pages/index.astro"
----
-import type { ComponentProps } from 'astro/types';
-
-import Button from "./Button.astro";
-
-type ButtonProps = ComponentProps<typeof Button>;
----
-```
-
-### ポリモーフィックな型
-
-<p><Since v="2.5.0" /></p>
-
-Astroには、異なるHTML要素としてレンダリング可能なコンポーネントを、完全に型安全に作成することを簡単にするヘルパーがあります。これは、渡されたpropsに応じて、`<a>`または`<button>`のいずれかとしてレンダリングされる`<Link>`のようなコンポーネントに便利です。
-
-以下の例では、完全に型付けされた、任意のHTML要素としてレンダリングできるポリモーフィックなコンポーネントを実装しています。[`HTMLTag`](#組み込みのhtml属性)型を使うことで、`as` propが有効なHTML要素であることを保証しています。
-
-```astro
----
-import type { HTMLTag, Polymorphic } from 'astro/types';
-
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
-
-const { as: Tag, ...props } = Astro.props;
----
-
-<Tag {...props} />
-```
-
-### `getStaticPaths()`の型の推論
-
-<p><Since v="2.1.0" /></p>
-
-Astroには、動的ルーティングに対して[`getStaticPaths()`](/ja/reference/routing-reference/#getstaticpaths)関数から返される型を扱うためのヘルパーがあります。
-
-[`Astro.params`](/ja/reference/api-reference/#params)の型は`InferGetStaticParamsType`で、[`Astro.props`](/ja/reference/api-reference/#props)の型は`InferGetStaticPropsType`で取得できます。
-
-```astro title="src/pages/posts/[...slug].astro" {2,14-15}
----
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
-
-export const getStaticPaths = (async () => {
- const posts = await getCollection('blog');
- return posts.map((post) => {
- return {
- params: { slug: post.slug },
- props: { draft: post.data.draft, title: post.data.title },
- };
- });
-}) satisfies GetStaticPaths;
-
-type Params = InferGetStaticParamsType<typeof getStaticPaths>;
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { slug } = Astro.params as Params;
-// ^? { slug: string; }
-const { title } = Astro.props;
-// ^? { draft: boolean; title: string; }
----
-```
-
-## 型チェック
-
-エディタで型エラーを確認するには、[Astro VS Code拡張機能](/ja/editor-setup/)をインストールしてください。`astro start`と`astro build`コマンドは、esbuildでコードをトランスパイルしますが、型チェックは実行しないことに注意してください。TypeScriptのエラーが含まれている場合にビルドされないようにするには、`package.json`のbuildスクリプトを次のように変更します。
-
-```json title="package.json" del={2} ins={3} ins="astro check &&"
- "scripts": {
- "build": "astro build",
- "build": "astro check && astro build",
- },
-```
-
-:::note
-`astro check`は、TypeScriptプロジェクトに含まれるすべてのファイルをチェックします。SvelteとVueファイル内の型をチェックするには、それぞれ[`svelte-check`](https://www.npmjs.com/package/svelte-check)と[`vue-tsc`](https://www.npmjs.com/package/vue-tsc)パッケージを使用できます。
-:::
-
-import ReadMore from '~/components/ReadMore.astro'
-
-<ReadMore>Astroにおける[`.ts`ファイルのインポート](/ja/guides/imports/#typescript)についてもっと読む。</ReadMore>
-
-<ReadMore>[TypeScriptの設定](https://www.typescriptlang.org/tsconfig/)についてもっと読む。</ReadMore>
-
-## トラブルシューティング
-
-### 同時に複数のJSXフレームワークを型付けしたときのエラー
-
-同じプロジェクトで複数のJSXフレームワークを使用する場合、フレームワークごとに`tsconfig.json`内の設定が異なり、互いにコンフリクトして問題が発生することがあります。
-
-**解決策**：最も使用するフレームワークに合わせて、[`jsxImportSource`設定](https://www.typescriptlang.org/tsconfig#jsxImportSource)を`react`（デフォルト）、`preact`または`solid-js`に設定します。次に、競合する異なるフレームワークのファイル内で[プラグマコメント](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx)を使用します。
-
-デフォルト設定である`jsxImportSource: react`の場合は、次のように使用します。
-
-```jsx
-// Preact向け
-/** @jsxImportSource preact */
-
-// Solid向け
-/** @jsxImportSource solid-js */
-```
diff --git a/src/content/docs/ja/guides/upgrade-to/v2.mdx b/src/content/docs/ja/guides/upgrade-to/v2.mdx
deleted file mode 100644
index e18e0546f114e..0000000000000
--- a/src/content/docs/ja/guides/upgrade-to/v2.mdx
+++ /dev/null
@@ -1,423 +0,0 @@
----
-title: Astro v2へのアップグレード
-description: プロジェクトをAstroの最新にアップグレードする方法
-i18nReady: true
----
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-import { FileTree } from '@astrojs/starlight/components';
-
-
-このガイドはAstro v1からAstro v2への移行へ役立ちます。
-
-古いプロジェクトからv1へのアップグレードが必要ですか? [古い移行ガイド](/ja/guides/upgrade-to/v1/)をご覧ください。
-
-## Astroをアップグレードする
-
-パッケージマネージャを使用して、プロジェクトのAstroのバージョンを最新版に更新してください。Astroインテグレーションを使用している場合は、それらも最新バージョンにアップデートしてください。
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- # Astro v2.xのアップグレード
- npm install astro@latest
-
- # 例: ReactとTailwindのインテグレーションをアップグレードする
- npm install @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- # Astro v2.xのアップグレード
- pnpm add astro@latest
-
- # 例: ReactとTailwindのインテグレーションをアップグレードする
- pnpm add @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- # Astro v2.xのアップグレード
- yarn add astro@latest
-
- # 例: ReactとTailwindのインテグレーションをアップグレードする
- yarn add @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
-</PackageManagerTabs>
-
-## Astro v2.0の互換性のない変更点
-
-Astro v2.0では、いくつかの変更点があり、以前廃止された機能が削除されています。もしv2.0にアップグレードした後、プロジェクトが期待通りに動作しない場合、このガイドですべての変更点の概要とコードベースの更新方法を確認してください。
-
-リリースノートの全文は[変更履歴](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)をご覧ください。
-
-### 削除: Node 14のサポート
-
-Node 14は2023年の4月に終了する予定です。
-
-Astro v2.0では、Node 14のサポートを完全に停止し、すべてのAstroユーザーがNodeのよりモダンな機能を利用できるようにしました。
-
-#### どうすればいいの？
-
- 開発環境とデプロイ環境の両方が**Node `16.12.0`以降**を使用していることを確認してください。
-
-1. Nodeのローカルバージョンを確認します:
-
- ```sh
- node -v
-
- ```
- ローカル環境のアップグレードが必要な場合は[Nodeをインストール](https://nodejs.org/ja/download/)してください。
-
-
-2. [デプロイ環境](/ja/guides/deploy/)自身のドキュメントを確認し、Node 16をサポートしているかどうかを確認します。
-
- AstroプロジェクトにNode `16.12.0`を指定するには、ダッシュボードの設定、または`.nvmrc`ファイルのいずれかを使用します。
-
-
-### 予約: `src/content/`
-
-Astro v2.0では、MarkdownやMDXファイルを[コンテンツコレクション](/ja/guides/content-collections/)に整理するためのCollections APIが追加されました。このAPIは、`src/content/`を特別なフォルダとして予約します。
-
-#### どうすればいいの？
-
-`src/content/`フォルダの名前を変更し、競合を回避します。このフォルダが存在する場合は、[コンテンツコレクション](/ja/guides/content-collections/)にのみ使用することができるようになりました。
-
-### 変更: `Astro.site`末尾のスラッシュ
-
-v1.xでは、astro.config.mjsで `site` として設定したURLに `Astro.site` でアクセスすると、常に末尾にスラッシュが付くようにしました。
-
-Astro v2.0では、`site`の値が変更されなくなりました。`Astro.site`は定義された正確な値を使用し、必要であれば末尾のスラッシュを指定する必要があります。
-
-#### どうすればいいの？
-
- `astro.config.mjs`で、`site`に設定したURLの末尾にスラッシュを追加します。
-
-```js del={5} ins={6}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- site: 'https://example.com',
- site: 'https://example.com/',
-});
-```
-
-### 変更: ビルドアセット用の`_astro/`フォルダー
-
-v1.xでは、アセットは`assets/`や`chunks/`、ビルド出力のルートなど、様々な場所にビルドされていました。
-
-Astro v2.0では、すべてのビルド出力アセットを新しい`_astro/`フォルダに移動し、場所を統一しています。
-
-<FileTree>
-- dist/
- - _astro
- - client.9218e799.js
- - index.df3f880e0.css
-</FileTree>
-{/* TODO: Set anchor link from #buildformat to #buildassets */}
-この場所は[新しい`build.assets`設定オプション](/ja/reference/configuration-reference/#buildformat)で制御できます。
-
-#### どうすればいいの？
-
-これらの資産の場所に依存している場合、開発プラットフォームの設定を更新します。
-
-### 変更: Markdownプラグインの設定
-
-#### 削除: `extendDefaultPlugins`
-
- v1.xでは、Astroは独自のMarkdownプラグインを追加する時に、Astroのデフォルトプラグインを再有効化するために`markdown.extendDefaultPlugins`を使用しました。
-
-Astro v2.0ではこの動作がデフォルトとなったため、この設定オプションを完全に削除しています。
-
-Markdownの設定でremarkとrehypeのプラグインを適用しても、**Astroのデフォルトのプラグインを無効にしなくなりました。** GitHub-Flavored MarkdownとSmartypantsは、カスタムの `remarkPlugins` や `rehypePlugins` が設定されているかどうかにかかわらず適用されるようになりました。
-
-##### どうすればいいの？
-
-設定の`extendDefaultPlugins`を削除してください。これはv2.0のAstroのデフォルトの動作になったので、この行を削除しても差し支えはありません。
-
-```js del={6}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- markdown: {
- extendDefaultPlugins,
- }
-});
-```
-
-#### 追加: `gfm`と`smartypants`
-
-v1.xでは、 `markdown.extendDefaultPlugins: false`を設定することでAstroのデフォルトMarkdownプラグイン(GitHub-Flavored MarkdownとSmartyPants)の両方を無効化することができました。
-
-Astro v2.0では、`markdown.extendDefaultPlugins: false`を、Astroに内蔵されたデフォルトのMarkdownプラグインを個別に制御するブール値のオプションに置き換えました。これらはデフォルトで有効になっており、個別に `false` に設定できます。
-
-##### どうすればいいの？
-
-`extendDefaultPlugins: false`を削除し、その代わりに各プラグインを個別に無効化するフラグを追加しました。
-
-- `markdown.gfm: false` GitHub-Flavored Markdownを無効化する
-- `markdown.smartypants: false` SmartyPantsを無効化する
-
-```js del={6} ins={7-8}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- markdown: {
- extendDefaultPlugins: false,
- smartypants: false,
- gfm: false,
- }
-});
-```
-
-### 変更: MDXプラグイン設定
-
-#### 置き換え: `extendPlugins`が`extendMarkdownConfig`へ変更されました。
-
-v1.xでは、MDXインテグレーションの`extendPlugins`オプションで、MDXファイルがMarkdownの設定をどのように継承するかを管理しました。Markdownの全設定(`markdown`)、またはAstroのデフォルトプラグインのみ(`default`)です。
-
-Astro v2.0では、`mdx.extendPlugins`で制御される動作を、デフォルトで`true`になる3つの新しい独立した設定可能なオプションに置き換えています。
-
-- **[`mdx.extendMarkdownConfig`](/ja/guides/integrations-guide/mdx/#extendmarkdownconfig)** を使えば、Markdownの設定のすべてまたは一部を引き継げます。
-- **`mdx.gfm`** でMDXのGitHub-Flavored Markdownの有効・無効化を設定します。
-- **`mdx.smartypants`** MDXのSmartyPantsの有効・無効化を設定します。
-
-##### どうすればいいの？
-
-`extendPlugins: 'markdown'`を設定から削除してください。これで、デフォルトの動作になります。
-
-```js del={8}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
- integrations: [
- mdx({
- extendPlugins: 'markdown',
- }),
- ],
-});
-```
-
-`extendPlugins: 'defaults'`を`extendMarkdownConfig: false`に置き換え、GitHub-Flavored MarkdownとSmartyPantsの個別のオプションを追加し、これらのデフォルトプラグインをMDXで個別に有効化します。
-
-```js del={8} ins={9-11}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
- integrations: [
- mdx({
- extendPlugins: 'defaults',
- extendMarkdownConfig: false,
- smartypants: true,
- gfm: true,
- }),
- ],
-});
-```
-
-#### 追加: Markdownに対応したMDX設定オプションの追加
-
-Astro v2.0では、MDXインテグレーション設定において、[利用可能なすべてのMarkdown設定オプション](/ja/reference/configuration-reference/#マークダウンのオプション)（`drafts`を除く）を個別に設定できるようになりました。
-
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
- markdown: {
- remarkPlugins: [remarkPlugin1],
- gfm: true,
- },
- integrations: [
- mdx({
- remarkPlugins: [remarkPlugin2],
- gfm: false,
- })
- ]
-});
-```
-
-##### どうすればいいの？
-
-MarkdownとMDXの設定を再検討し、既存の設定と利用可能な新しいオプションを比較します。
-
-
-
-### 変更: フロントマターへのプラグインアクセス
-
-v1.xでは、remarkとrehypeプラグインはユーザーのフロントマターにアクセスすることができませんでした。Astroはプラグインのフロントマターをファイルのフロントマターにマージし、ファイルのフロントマターをプラグインに渡さないようにしました。
-
-Astro v2.0ではremarkとrehypeプラグインがフロントマターインジェクションを介してユーザーのフロントマターへのアクセスを提供します。これにより、プラグインの作者はユーザーの既存のフロントマターを変更したり、他のプロパティに基づいて新しいプロパティを計算したりすることができます。
-
-
-#### どうすればいいの？
-
-あなたが書いたremarkやrehypeプラグインの動作が変わったかどうか確認してください。`data.astro.frontmatter`は空のオブジェクトではなく、完全なMarkdownまたはMDXドキュメントのフロントマターになったことに注意してください。
-
-### 変更: RSSの構成
-
-v1.xでは、AstroのRSSパッケージは、`items: import.meta.glob(...)`を使って、RSSフィードアイテムのリストを生成することができました。この使い方は現在非推奨であり、いずれ削除される予定です。
-
-Astro v2.0では、`items`プロパティに`pagesGlobToRssItems()`が導入されました。
-
-#### どうすればいいの？
-
-`import.meta.glob()`を含む既存の関数を`pagesGlobToRssItems()`ヘルパーでラップしてください。
-
-```js ins={3, 8, 10}
-// src/pages/rss.xml.js
-import rss, {
- pagesGlobToRssItems
-} from '@astrojs/rss';
-
-export async function get(context) {
- return rss({
- items: await pagesGlobToRssItems(
- import.meta.glob('./blog/*.{md,mdx}'),
- ),
- });
-}
-```
-
-### 変更: Svelte IDEのサポート
-
-Astro v2.0では、[`@astrojs/svelte`インテグレーション](/ja/guides/integrations-guide/svelte/)を使用する場合、プロジェクトに`svelte.config.js`ファイルが必要です。これはIDEの自動補完を提供するために必要です。
-
-#### どうすればいいの？
-
-プロジェクトのルートに`svelte.config.js`ファイルを追加します。
-
-```js
-// svelte.config.js
-import { vitePreprocess } from '@astrojs/svelte';
-
-export default {
- preprocess: vitePreprocess(),
-};
-```
-
-新規ユーザーの場合、`astro add svelte`を実行すると、このファイルが自動的に追加されます。
-
-### 削除: `legacy.astroFlavoredMarkdown`
-
-v1.0では、Astroは古いastroFlavored Markdown(Components in Markdownとしても知られている)をレガシ機能へ移行しました。
-
-Astro v2.0では、`legacy.astroFlavoredMarkdown` オプションは完全に削除されました。`.md`ファイル内のコンポーネントをインポートして使うことはできなくなります。
-
-#### どうすればいいの？
-
-このレガシーフラグを削除します。 Astroでは使用できなくなりました。
-
-```js del={3-5}
-// astro.config.mjs
-export default defineConfig({
- legacy: {
- astroFlavoredMarkdown: true,
- },
-})
-
-```
-
-v1.xでこの機能を使用していた場合は、[MDXインテグレーション](/ja/guides/integrations-guide/mdx/)を使用することをお勧めします。これにより、コンポーネントとJSX式をMarkdown構文で組み合わせることができます。
-
-### 削除: `Astro.resolve()`
-
-v0.24では、Astroは、ブラウザーで参照する可能性があるアセットへの解決済みURLを取得するための `Astro.resolve()` を非推奨にしました。
-
-Astro v2.0では、このオプションが完全に削除されています。あなたのコードで`Astro.resolve()`を使用すると、エラーが発生します。
-
-#### どうすればいいの？
-
-アセットパスの解決は、代わりに`import`を使用します。例えば、次のようになります。
-
-```astro
-// src/pages/index.astro
----
-import 'style.css';
-import imageUrl from './image.png';
----
-
-<img src={imageUrl} />
-```
-
-### 削除: `Astro.fetchContent()`
-
-v0.26では、ローカルのMarkdownファイルからデータを取得するための`Astro.fetchContent()`を非推奨にしました。
-
-Astro v2.0では、このオプションは完全に削除されています。あなたのコードで`Astro.fetchContent()`を実行すると、エラーになります。
-
-#### どうすればいいの？
-
-{/* TODO: Set anchor link from #その他のアセット to #astroglob */}
-[`Astro.glob()`](/ja/guides/imports/#その他のアセット)を使ってローカルのMarkdownファイルを取得したり、[コンテンツコレクション](/ja/guides/content-collections/)に変換したりできます。
-
-```astro
-// src/pages/index.astro
----
-const allPosts = await Astro.glob('./posts/*.md');
----
-```
-
-### 更新: `Astro.canonicalURL`
-
-v1.0では、Astroは正規のURLを構築するための`Astro.canonicalURL`を非推奨にしました。
-
-Astro v2.0では、このオプションは完全に削除されています。あなたのコードで`Astro.canonicalURL`を実行すると、エラーになります。
-
-
-#### どうすればいいの？
-
-`Astro.url`を使用して、正規のURLを構築します。
-
-```astro
-// src/pages/index.astro
----
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
----
-
-```
-
-### 更新: Vite 4
-
-Astro v2.0は、2022年12月にリリースされたVite 3から[Vite 4](https://vite.dev/)にアップグレードします。
-
-#### どうすればいいの？
-
-コードの変更は必要ありません。Astro内部でほとんどのアップグレードに対応しました。ただし、Viteの微妙な動作はバージョンによって変化することがあります。
-
-問題が発生した場合は、公式の[Vite移行ガイド](https://vite.dev/guide/migration.html)を参照してください。
-
-## Astro v2.0 実験用フラグを削除しました。
-
-`astro.config.mjs`から以下の実験的フラグを削除します。
-
-```js del={5-9}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- experimental: {
- contentCollections: true,
- prerender: true,
- errorOverlay: true,
- },
-})
-```
-
-これらの機能は、デフォルトで利用できるようになりました。
-
-- MarkdownやMDXのファイルを型安全で管理する方法として、[コンテンツコレクション](/ja/guides/content-collections/)があります。
-- SSR使用時に[個別ページ静的HTMLにプリレンダリング](/ja/guides/on-demand-rendering/)をし、高速化とキャッシュ性能の向上を図る。
-- エラーメッセージのオーバーレイのデザインを変更しました。
-
-## 既知の問題点
-
-現在、既知の問題はありません。
diff --git a/src/content/docs/ja/guides/upgrade-to/v3.mdx b/src/content/docs/ja/guides/upgrade-to/v3.mdx
deleted file mode 100644
index a9f594b02a6eb..0000000000000
--- a/src/content/docs/ja/guides/upgrade-to/v3.mdx
+++ /dev/null
@@ -1,695 +0,0 @@
----
-title: Astro v3へのアップグレード
-description: プロジェクトを最新版のAstro（v3.0）にアップグレードする方法。
-i18nReady: true
----
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-このガイドでは、Astro v2からAstro v3への移行方法について説明します。
-
-古いプロジェクトをv2にアップグレードする必要がありますか？ [以前の移行ガイド](/ja/guides/upgrade-to/v2/)を参照してください。
-
-## Astroをアップグレードする
-
-パッケージマネージャーを使用して、プロジェクトのAstroのバージョンを最新に更新します。 Astroのインテグレーションを使用している場合は、そちらも最新バージョンに更新してください。
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- # Astro v3.xにアップグレード
- npm install astro@latest
-
- # ReactとTailwindのインテグレーションをアップグレードする例
- npm install @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- # Astro v3.xにアップグレード
- pnpm add astro@latest
-
- # ReactとTailwindのインテグレーションをアップグレードする例
- pnpm add @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- # Astro v3.xにアップグレード
- yarn add astro@latest
-
- # ReactとTailwindのインテグレーションをアップグレードする例
- yarn add @astrojs/react@latest @astrojs/tailwind@latest
- ```
- </Fragment>
-</PackageManagerTabs>
-
-:::note[他にやることはありますか？]
-Astroを最新版にアップグレードしたあと、プロジェクトへの変更が必要とは限りません！
-
-しかし、エラーや予想外の動作が発生した場合は、変更された内容と、プロジェクトを更新する必要があるかどうかを以下で確認してください。
-:::
-
-## Astro v3の実験的なフラグの削除
-
-`astro.config.mjs`から以下の実験的なフラグを削除します。
-
-```js del={5-8}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- experimental: {
- assets: true,
- viewTransitions: true,
- },
-})
-```
-
-これらの機能はデフォルトで利用できるようになりました。
-
-- アニメーションによるページ遷移とアイランドを永続化するためのビュートランジション。
-- 新しい`<Image />`コンポーネントと`getImage()`関数を含む、Astroで画像を使用するための新しい画像サービスAPI`astro:assets`。**この実験的なフラグを使用していたかどうかにかかわらず**、詳細な[画像をアップグレードするためのアドバイス](/ja/guides/images/#v2xからv30へのアップグレード)を読んで、プロジェクトへの影響を確認してください。
-
-以上2つのエキサイティングな機能とその他については、[3.0のブログ記事](https://astro.build/blog/astro-3/)を確認してください！
-
-
-
-## Astro v3の破壊的変更
-
-Astro v3.0には、いくつかの破壊的な変更と、以前に非推奨になっていた機能の削除が含まれています。v3.0にアップグレードしたあとプロジェクトが期待通りに動作しない場合はこのガイドを読み、すべての破壊的な変更の概要と、コードベースを更新する方法についての手順を確認してください。
-
-リリースノートの全文については、[変更履歴](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)を参照してください。
-
-### 削除: Node 16のサポート
-
-Node 16は2023年9月にサポート終了予定です。
-
-すべてのAstroユーザーがNodeのよりモダンな機能を利用できるようにするため、Astro v3.0ではNode 16のサポートを完全に終了します。
-
-#### どうすればいいですか？
-
-開発環境とデプロイ環境の両方が**Node `18.14.1`以上**を使用していることを確認してください。
-
-1. ローカルのNodeのバージョンを確認します。
-
- ```sh
- node -v
- ```
-
-
-
-2. [デプロイ環境](/ja/guides/deploy/)のドキュメントを読み、Node 18がサポートされていることを確認してください。
-
- AstroプロジェクトにNode `18.14.1`を指定するには、ダッシュボードの設定または`.nvmrc`ファイルを使用します。
-
- ```bash title=".nvmrc"
- 18.14.1
- ```
-
-### 削除: TypeScript 4のサポート
-
-Astro v2.xの`tsconfig.json`のプリセットでは、TypeScript 4.xと5.xの両方がサポートされていました。
-
-Astro v3.0では`tsconfig.json`のプリセットが更新され、TypeScript 5.xのみをサポートするようになりました。Astroは現在、TypeScript 5.0（2023年3月）を使用しているか、（VS Code 1.77などのように）エディタにTypeScript 5.0が含まれていることを前提とします。
-
-#### どうすればいいですか？
-
-TypeScriptをローカルにインストールしている場合は、v5.0以上に更新してください。
-
-```bash
-npm install typescript@latest --save-dev
-```
-
-### 削除: `@astrojs/image`
-
-Astro v2.xでは、Astroは`<Image />`や`<Picture />`コンポーネントを含む公式の画像インテグレーションを提供していました。
-
-Astro v3.0では、このインテグレーションはコードベースから完全に削除されます。Astroの新しい画像向けソリューションは、組み込みの画像サービスAPI`astro:assets`です。
-
-#### どうすればいいですか？
-
-`@astrojs/image`インテグレーションをプロジェクトから削除します。インテグレーションをアンインストールするだけでなく、インポート文と、既存の`<Image />`と`<Picture />`コンポーネントを更新または削除する必要があります。また、デフォルトの画像処理サービスを設定する必要があるかもしれません。
-
-画像のガイドには、[古い画像インテグレーションを削除するための完全なステップバイステップの手順](/ja/guides/images/#astrojsimageを削除する)が記載されています。
-
-`astro:assets`に移行すると、新しい画像オプションや機能が追加されており、これらを使ってみたくなるはずです。詳細については、[v3.0の画像アップグレードアドバイス](/ja/guides/images/#v2xからv30へのアップグレード)をご覧ください！
-
-```js del={3,7}
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import image from '@astrojs/image';
-
-export default defineConfig({
- integrations: [
- image(),
- ]
-})
-```
-
-### 削除: `<Markdown />`コンポーネント
-
-Astro v1.xで`<Markdown />`コンポーネントは非推奨となり、外部パッケージに移動されました。
-
-Astro v3.0では、`@astrojs/markdown-component`パッケージは完全に削除されます。Astroの`<Markdown />`コンポーネントは、プロジェクトで動作しなくなります。
-
-#### どうすればいいですか？
-
-`@astrojs/markdown-component`のすべてのインスタンスを削除します。
-
-```astro del={2} title="src/components/MyAstroComponent.astro"
----
-import Markdown from '@astrojs/markdown-component';
----
-```
-
-コード内で同じような`<Markdown />`コンポーネントを引き続き使用するには、[`astro-remote`](https://github.com/natemoo-re/astro-remote)などの[コミュニティインテグレーション](https://astro.build/integrations/)を使用してみてください。インテグレーションのドキュメントに従って、必要に応じて`<Markdown />`コンポーネントのインポートと属性を更新してください。
-
-それ以外の場合は、`.astro`ファイルからAstroの`<Markdown />`コンポーネントのインポートとコンポーネント自体を削除します。コンテンツを直接HTMLとして書き直すか、`.md`ファイルから[Markdownをインポート](/ja/guides/markdown-content/#markdownのインポート)する必要があります。
-
-### 削除: 非推奨の1.xのAPI
-
-Astro v1.xでは、初期のAstroの設定値や、`<style global>`と`<script hoist>`のサポートは非推奨とされました。しかし、これらは後方互換性のためにまだサポートされていました。
-
-Astro v3.0では、これらの非推奨APIは完全に削除されます。公式にサポートされている[設定](/ja/reference/configuration-reference/)と、モダンな`<style is:global>`と`<script>`構文を代わりに使用する必要があります。
-
-#### どうすればいいですか？
-
-v1.xのAPIを引き続き使用する場合は、代わりに各機能に対応する新しいAPIを使用してください。
-
-- 非推奨となった設定値については、[0.26移行ガイド](/ja/guides/upgrade-to/v1/#new-configuration-api)を参照してください。
-- 非推奨となったscript/style属性については、[0.26移行ガイド](/ja/guides/upgrade-to/v1/#new-default-script-behavior)を参照してください。
-
-### 削除: サーバーコードでのWeb APIの部分的なシム
-
-Astro v2.xでは、サーバーでレンダリングされるコードで`document`や`localStorage`などのWeb APIの部分的なシムが提供されていました。これらのシムは、しばしば不完全で信頼性がありませんでした。
-
-Astro v3.0では、これらの部分的なシムは完全に削除されます。サーバーでレンダリングされるコードではWeb APIは利用できなくなります。
-
-#### どうすればいいですか？
-
-サーバーでレンダリングされるコンポーネントでWeb APIを使用している場合は、それらのAPIを使用している箇所に条件文を追加するか、[`client:only`クライアントディレクティブ](/ja/reference/directives-reference/#clientonly)を使用する必要があります。
-
-### 削除: コンテンツコレクションの`astro:content`の`image`
-
-Astro v2.xでは、コンテンツコレクションAPIは、コンテンツコレクションのスキーマで使用するために`astro:content`からエクスポートしていた`image`を非推奨としました。
-
-Astro v3.0では、このエクスポートは完全に削除されます。
-
-#### どうすればいいですか？
-
-非推奨となった`astro:content`の`image()`を使用している場合、これはもう存在しないため削除してください。代わりに、[`schema`の`image`ヘルパー](/ja/guides/images/#コンテンツコレクションのスキーマを更新する)を使用して画像を検証します。
-
- ```ts title="src/content/config.ts" del={1} ins={2} "({ image })"
-import { defineCollection, z, image } from "astro:content";
-import { defineCollection, z } from "astro:content";
-
- defineCollection({
- schema: ({ image }) =>
- z.object({
- image: image(),
- }),
-});
-```
-
-### 削除: 0.14以前のShikiのテーマ名
-
-Astro v2.xでは、Shikiの一部のテーマ名が変更されましたが、後方互換性のためにもとの名前が保持されていました。
-
-Astro v3.0では、変更されたテーマ名を優先し、もとの名前は削除されます。
-
-#### どうすればいいですか？
-
-プロジェクトで以下のテーマのいずれかを使用している場合は、新しい名前に変更してください。
-
-- `material-darker` -> `material-theme-darker`
-- `material-default` -> `material-theme`
-- `material-lighter` -> `material-theme-lighter`
-- `material-ocean` -> `material-theme-ocean`
-- `material-palenight` -> `material-theme-palenight`
-
-### 削除: `class:list`機能
-
-Astro v2.xでは、[`class:list`ディレクティブ](/ja/reference/directives-reference/#classlist)は、[`clsx`](https://github.com/lukeed/clsx)に影響されたカスタム実装を使用しており、重複排除や`Set`のサポートなど、いくつかの追加機能がありました。
-
-Astro v3.0では、`class:list`で`clsx`を直接使用するようになり、重複排除や`Set`の値はサポートされなくなりました。
-
-#### どうすればいいですか？
-
-`class:list`ディレクティブに渡している`Set`要素を、プレーンな`Array`に置き換えます。
-
-```astro title="src/components/MyAstroComponent.astro" del={4} ins={5}
-<Component class:list={[
- 'a',
- 'b',
- new Set(['c', 'd'])
- ['c', 'd']
-]} />
-```
-
-### 削除: propとしての`class:list`の受け渡し
-
-Astro v2.xでは、[`class:list`の値](/ja/reference/directives-reference/#classlist)は[`Astro.props['class:list']`](/ja/reference/api-reference/#props)を介してコンポーネントに送信されました。
-
-Astro v3.0では、`class:list`の値は、`Astro.props['class']`を介してコンポーネントに送信される前に、文字列に正規化されます。
-
-#### どうすればいいですか？
-
-`class:list`プロパティを受け取ることを期待しているコードを削除します。
-
-```astro title="src/components/MyAstroComponent.astro" del={2,3,7} ins={4,8} "classList" "'class:list': classList"
----
-import { clsx } from 'clsx';
-const { class: className, 'class:list': classList } = Astro.props;
-const { class: className } = Astro.props;
----
-<div
- class:list={[className, classList]}
- class:list={[className]}
-/>
-```
-
-### 削除: キャメルケースのCSS変数のケバブケースへの変換
-
-Astro v2.xでは、`style`属性に渡されたキャメルケースの[CSS変数](/ja/guides/styling/#css変数)は、（書かれた通りの）キャメルケースと（後方互換性のために必要な）ケバブケースの両方でレンダリングされました。
-
-Astro v3.0では、キャメルケースのCSS変数名のケバブケースへの変換は削除され、もとのキャメルケースのCSS変数のみがレンダリングされます。
-
-```astro "my-value"
----
-// src/components/MyAstroComponent.astro
-const myValue = "red"
----
-<!-- 入力 -->
-<div style={{ "--myValue": myValue }}></div>
-
-<!-- Astro 2.xの出力 -->
-<div style="--my-value:var(--myValue);--myValue:red"></div>
-<!-- Astro 3.0の出力 -->
-<div style="--myValue:red"></div>
-```
-
-#### どうすればいいですか？
-
-Astroがスタイルをケバブケースへと変換することに依存している場合は、下の例のように既存のスタイルをキャメルケースに更新して、スタイルが失われないようにします。
-
-```astro del={3} ins={4} title="src/components/MyAstroComponent.astro"
-<style>
- div {
- color: var(--my-value);
- color: var(--myValue);
- }
-</style>
-```
-
-### 削除: `getStaticPaths()`の戻り値の自動フラット化
-
-Astro v2.xでは、[`getStaticPaths()`](/ja/reference/routing-reference/#getstaticpaths)の戻り値は、配列の配列を返してもエラーとならないように、自動的にフラット化されていました。
-
-Astro v3.0では、`getStaticPaths()`の結果に対する自動フラット化が削除されます。
-
-#### どうすればいいですか？
-
-期待されているオブジェクトの配列ではなく、配列の配列を返している場合は、`.flatMap`と`.flat`を使用して、フラットな配列を返すようにしてください。
-
-コードを更新する必要がある場合は、[`getStaticPath()`の戻り値はオブジェクトの配列でなければならないことを示すエラーメッセージ](/ja/reference/errors/invalid-get-static-paths-entry/#何が問題か)が表示されます。
-
-### 移動: `astro check`は外部パッケージが必要になりました
-
-Astro v2.xでは、[`astro check`](/ja/reference/cli-reference/#astro-check)はAstroにデフォルトで含まれており、その依存関係はAstroにバンドルされていました。これは、`astro check`を使用するかどうかにかかわらず、パッケージが肥大化することを意味していました。また、TypeScriptとAstro Language Serverのバージョンを制御できないという問題もありました。
-
-
-Astro v3.0では、`astro check`コマンドをAstroのコアから外に移動し、外部パッケージ`@astrojs/check`が必要になりました。さらに、`astro check`コマンドを使用するには、プロジェクトに`typescript`をインストールする必要があります。
-
-#### どうすればいいですか？
-
-Astro v3.0にアップグレードして`astro check`コマンドを実行し、必要な依存関係をインストールしようとするプロンプトに従うか、`@astrojs/check`と`typescript`を手動でプロジェクトにインストールしてください。
-
-### 非推奨: `build.excludeMiddleware`と`build.split`
-
-Astro v2.xでは、`build.excludeMiddleware`と`build.split`は、SSRモードでアダプターを使用する場合に、特定のファイルがどのように出力されるかを変更するために使用されました。
-
-Astro v3.0では、これらのビルド設定オプションは、`edgeMiddleware`と`functionPerRoute`という、同様のタスクを実行するための新しい[SSRアダプター設定オプション](/ja/guides/integrations-guide/#公式インテグレーション)に置き換えられます。
-
-#### どうすればいいですか？
-
-Astroの設定ファイルを更新して、**アダプターの設定**で新しいオプションを直接使用するようにします。
-
-```js title="astro.config.mjs" del={5-7} ins={9}
-import { defineConfig } from "astro/config";
-import vercel from "@astrojs/vercel/serverless";
-
-export default defineConfig({
- build: {
- excludeMiddleware: true
- },
- adapter: vercel({
- edgeMiddleware: true
- }),
-});
-```
-
-```js title="astro.config.mjs" del={5-7} ins={9}
-import { defineConfig } from "astro/config";
-import netlify from "@astrojs/netlify/functions";
-
-export default defineConfig({
- build: {
- split: true
- },
- adapter: netlify({
- functionPerRoute: true
- }),
-});
-```
-
-### 非推奨: `markdown.drafts`
-
-Astro v2.xでは、`markdown.drafts`の設定を使用すると、開発サーバーでは閲覧可能ですが、本番環境ではビルドされないドラフトページを作成できました。
-
-Astro v3.0では、この機能は非推奨となり、代わりにコンテンツコレクションにより手動でドラフトページをフィルタリングする方法が採用されました。これにより、より細かな制御が可能となりました。
-
-#### どうすればいいですか？
-
-プロジェクト内の一部のページをドラフトとして扱い続けるには、[コンテンツコレクションに移行](/ja/guides/content-collections/#ファイルベースのルーティングからの移行)し、フロントマターで`draft: true`を使用して[ページを手動でフィルタリング](/ja/guides/content-collections/#コレクションクエリのフィルタリング)します。
-
-### 非推奨: エンドポイントでのプレーンオブジェクトの返却
-
-Astro v2.xでは、エンドポイントはプレーンオブジェクトを返すことができ、これはJSONレスポンスに変換されました。
-
-Astro v3.0では、`Response`オブジェクトを直接返すことが推奨され、この動作は非推奨となりました。
-
-#### どうすればいいですか？
-
-エンドポイントを更新して、`Response`オブジェクトを直接返すようにします。
-
-```ts title="endpoint.json.ts" del={2} ins={3}
-export async function GET() {
- return { body: { "title": "Bobのブログ" }};
- return new Response(JSON.stringify({ "title": "Bobのブログ" }));
-}
-```
-
-以前のフォーマットを維持する必要がある場合は、`ResponseWithEncoding`オブジェクトを使用できますが、将来的には非推奨となります。
-
-```ts title="endpoint.json.ts" del={2} ins={3}
-export async function GET() {
- return { body: { "title": "Bob's blog" } };
- return new ResponseWithEncoding({ body: { "title": "Bob's blog" }});
-}
-```
-
-### デフォルトの変更: tsconfig.jsonプリセットの`verbatimModuleSyntax`
-
-Astro v2.xでは、[`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)の設定はデフォルトでオフになっており、これに相当するTypeScript 4.xの`importsNotUsedAsValues`が`strict`プリセットで有効になっていました。
-
-Astro v3.0では、`verbatimModuleSyntax`はすべてのプリセットで有効になっています。
-
-#### どうすればいいですか？
-
-このオプションでは、`import type`構文を使用して型をインポートする必要があります。
-
-```astro title="src/components/MyAstroComponent.astro" "type"
----
-import { type CollectionEntry, getEntry } from "astro:content";
----
-```
-
-上記のように`type`を使用して型をインポートすることを推奨しますが、問題が発生する場合は、`tsconfig.json`ファイルで`verbatimModuleSyntax: false`を設定して無効にすることもできます。
-
-```json title="tsconfig.json" "false"
-{
- "compilerOptions": {
- "verbatimModuleSyntax": false
- }
-}
-```
-
-### デフォルトの変更: `3000`番ポート
-
-Astro v2.xでは、Astroはデフォルトで`3000`番ポートで実行されていました。
-
-{/* cli-referenceを更新したらリンク先を#--port-numberにする */}
-
-Astro v3.0では、[デフォルトのポート](/ja/reference/cli-reference/)が`4321`に変更されました。🚀
-
-#### どうすればいいですか？
-
-テストや`README`などで`localhost:3000`を参照している場合は、新しいポート`localhost:4321`を反映するように更新します。
-
-
-### デフォルトの変更: import.meta.env.BASE_URLの`trailingSlash`
-
-Astro v2.xでは、`import.meta.env.BASE_URL`はデフォルトで[`base`](/ja/reference/configuration-reference/#base)の設定値の[末尾にスラッシュ](/ja/reference/configuration-reference/#trailingslash)を追加していました。`trailingSlash: "ignore"`も末尾にスラッシュを追加していました。
-
-Astro v3.0では、`import.meta.env.BASE_URL`に末尾のスラッシュを追加しなくなりました。`trailingSlash: "ignore"`が設定されている場合も同様です。（`base`と`trailingSlash: "always"`または`trailingSlash: "never"`を組み合わせた場合の既存動作は変更されていません。）
-
-#### どうすればいいですか？
-
-`base`にすでに末尾のスラッシュがある場合は、変更は必要ありません。
-
-`base`に末尾のスラッシュがなく、以前のデフォルト（または`trailingSlash: "ignore"`）の動作を維持したい場合は、末尾にスラッシュを追加します。
-
-```js title="astro.config.mjs" del={4} ins={5}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- base: 'my-base',
- base: 'my-base/',
-});
-```
-
-### デフォルトの変更: `compressHTML`
-
-{/* configuration-referenceを更新したらリンク先を#compresshtmlにする */}
-
-Astro v2.xでは、[`compressHTML`](/ja/reference/configuration-reference/)が明示的に`true`に設定されている場合にのみ、Astroは出力されたHTMLを圧縮しました。デフォルト値は`false`でした。
-
-Astro v3.0では、出力されたHTMLをデフォルトで圧縮します。
-
-#### どうすればいいですか？
-
-`compressHTML: true`を設定している場合は、これが新しいデフォルトの動作となったため、削除できます。
-
-```js title="astro.config.mjs" del={4}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- compressHTML: true
-})
-```
-
-HTMLの圧縮を無効にするには、`compressHTML: false`を設定する必要があります。
-
-### デフォルトの変更: `scopedStyleStrategy`
-
-{/* configuration-referenceを更新したらリンク先を#scopedstylestrategyにする */}
-
-Astro v2.xでは、[`scopedStyleStrategy`](/ja/reference/configuration-reference/)のデフォルト値は`"where"`でした。
-
-Astro v3.0では、新しいデフォルト値`"attribute"`が導入されました。デフォルトでは、スタイルは`data-*`属性を使用して適用されます。
-
-#### どうすればいいですか？
-
-プロジェクトで現在の[スタイルのスコープ](/ja/guides/styling/#スコープされたスタイル)を維持するには、設定ファイルを以前のデフォルト値に更新します。
-
-
-```js title="astro.config.mjs" ins={4}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- scopedStyleStrategy: "where"
-})
-```
-
-### デフォルトの変更: `inlineStyleSheets`
-
-{/* configuration-referenceを更新したらリンク先を#buildinlinestylesheetsにする */}
-
-Astro v2.xでは、プロジェクトのすべてのスタイルシートはデフォルトでリンクタグとして送信されていました。[`build.inlineStylesheets`](/ja/reference/configuration-reference/)の設定を使用して、`"always"`で常に`<style>`タグにインライン化するか、あるいは`"auto"`で一定サイズ以下のスタイルシートのみをインライン化するかを選択できましたが、デフォルトの設定は`"never"`でした。
-
-Astro v3.0では、`inlineStylesheets`のデフォルト値が`"auto"`に変更されました。`ViteConfig.build.assetsInlineLimit`（デフォルトは4kb）より小さいスタイルシートはデフォルトでインライン化されます。その他の場合は、プロジェクトのスタイルは外部スタイルシートとして送信されます。
-
-#### どうすればいいですか？
-
-プロジェクトの現在の動作を維持する場合は、`build.inlineStylesheets`を以前のデフォルト値`"never"`に設定します。
-
-
-```js title="astro.config.mjs" ins={4-6}
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
- build: {
- inlineStylesheets: "never"
- }
-})
-```
-
-### デフォルトの変更: 画像サービス
-
-Astro v2.xでは、Squooshが[デフォルトの画像処理サービス](/ja/guides/images/#デフォルトの画像サービス)でした。
-
-Astro v3.0では、デフォルトの画像処理サービスとしてSharpが含まれており、またSquooshを使用するための設定オプションが提供されています。
-
-#### どうすればいいですか？
-
-:::note
-`pnpm`のような[厳格なパッケージマネージャー](https://pnpm.io/pnpm-vs-npm#npms-flat-tree)を使用している場合は、Astroの依存関係であるにもかかわらず、プロジェクトにSharpを手動でインストールする必要があるかもしれません。
-
-```bash
-pnpm add sharp
-```
-:::
-
-画像の変換に引き続きSquooshを使用する場合は、次のように設定を更新します。
-
-```ts title="astro.config.mjs" ins={4-6}
-import { defineConfig, squooshImageService } from "astro/config";
-
-export default defineConfig({
- image: {
- service: squooshImageService(),
- }
-})
-```
-
-### 変更: HTTPリクエストメソッドの大文字小文字
-
-Astro v2.xでは、[HTTPリクエストメソッド](/ja/guides/endpoints/#httpメソッド)は、`get`、`post`、`put`、`all`、`del`のように小文字の関数名で書かれていました。
-
-Astro v3.0では、大文字の関数名を使用します。`del`は`DELETE`となります。
-
-#### どうすればいいですか？
-
-すべての関数を大文字に変更します。
-
-- `get`は`GET`
-- `post`は`POST`
-- `put`は`PUT`
-- `all`は`ALL`
-- `del`は`DELETE`
-
-```js title="endpoint.ts" del={1} ins={2}
-export function get() {
-export function GET() {
- return new Response(JSON.stringify({ "title": "Bobのブログ" }));
-}
-```
-
-### 変更: 複数のJSXフレームワークの設定
-
-Astro v2.xでは、同じプロジェクトで[複数のJSXフレームワークのインテグレーション](/ja/guides/integrations-guide/#公式インテグレーション)（React、Solid、Preact）を使用することができましたが、どのファイルがどのフレームワークのものであるかを指定する必要はありませんでした。
-
-Astro v3.0では、複数のJSXフレームワークのインテグレーションがインストールされている場合、どのファイルにどのフレームワークを使用するかを指定するための、`include`と`exclude`という新しいインテグレーション設定オプションを使用する必要があります。これにより、Astroは単一フレームワークの使用や、React Fast Refreshなどの高度な機能を上手くサポートできるようになりました。
-
-#### どうすればいいですか？
-
-同じプロジェクトで複数のJSXフレームワークを使用している場合は、`include`（また必要があれば`exclude`）をファイルとフォルダの配列に設定します。ワイルドカードを使用して複数のファイルパスを含めることができます。
-
-`/components/react/`や`/components/solid/`のように、共通のフレームワークコンポーネントを同じフォルダに配置することをおすすめしますが、これは必須ではありません。
-
-```js ins={13,16,19}
-import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
-import react from '@astrojs/react';
-import svelte from '@astrojs/svelte';
-import vue from '@astrojs/vue';
-import solid from '@astrojs/solid-js';
-
-export default defineConfig({
- // 複数のフレームワークを有効にして、さまざまな種類のコンポーネントをサポートします。
- // 単一のフレームワークのみを使用している場合、`include`は必要ありません！
- integrations: [
- preact({
- include: ['**/preact/*']
- }),
- react({
- include: ['**/react/*']
- }),
- solid({
- include: ['**/solid/*'],
- }),
- ]
-});
-```
-
-### 変更: `Astro.cookies.get(key)`が`undefined`を返すようになりました
-
-Astro v2.xでは、[`Astro.cookies.get(key)`](/ja/reference/api-reference/#cookies)は、クッキーが存在しなくても常に[`AstroCookie`オブジェクト](/ja/reference/api-reference/#astrocookie-type)を返していました。存在を確認するには、`Astro.cookies.has(key)`を使用する必要がありました。
-
-Astro v3.0では、クッキーが存在しない場合、`Astro.cookies.get(key)`は`undefined`を返します。
-
-#### どうすればいいですか？
-
-`Astro.cookies.get(key)`を使用する前に`Astro.cookie`オブジェクトの存在を確認しているコードは、この変更によって壊れることはありませんが、存在確認はもう必要ありません。
-
-`has()`を使用して`Astro.cookies`の値が`undefined`かどうかを確認しているコードは、安全に削除できます。
-
-```js del={1-3} ins={5-7}
-if (Astro.cookies.has(id)) {
- const id = Astro.cookies.get(id)!;
-}
-
-const id = Astro.cookies.get(id);
-if (id) {
-}
-```
-
-### 変更: Astro CLIのプログラムでの実行
-
-Astro v2.xでは、`"astro"`パッケージエントリポイントは、Astro CLIを直接エクスポートして実行していました。この方法でAstroを実行することはおすすめしません。
-
-Astro v3.0では、CLIをエントリポイントから削除し、`dev()`、`build()`、`preview()`、`sync()`などの新しい実験的なJavaScript APIをエクスポートします。
-
-#### どうすればいいですか？
-
-{/* cli-referenceを更新したらリンク先を#advanced-apis-experimentalにする */}
-
-Astro CLIを[プログラムで実行する](/ja/reference/programmatic-reference/)には、新しい実験的なJavaScript APIを使用します。
-
-```js
-import { dev, build } from "astro";
-
-// Astroの開発サーバーを起動する
-const devServer = await dev();
-await devServer.stop();
-
-// Astroプロジェクトをビルドする
-await build();
-```
-
-
-### 変更: Astroの内部APIエントリポイントのエクスポートパス
-
-Astro v2.xでは、`astro/internal/*`と`astro/runtime/server/*`からAstroの内部APIをインポートすることができました。
-
-Astro v3.0では、既存の`astro/runtime/*`エントリポイントを優先して、2つのエントリポイントを削除しました。さらに、コンパイラ固有のランタイムコードには、新しい`astro/compiler-runtime`エクスポートが追加されました。
-
-#### どうすればいいですか？
-
-これらはAstroの内部APIのエントリポイントであり、プロジェクトに影響を与えることはありません。ただし、これらのエントリポイントを使用している場合は、以下のように更新します。
-
-```js del={1,4,10} ins={2,5,11}
-import 'astro/internal/index.js';
-import 'astro/runtime/server/index.js';
-
-import 'astro/server/index.js';
-import 'astro/runtime/server/index.js';
-```
-
-```js ins={5} del={4}
-import { transform } from '@astrojs/compiler';
-
-const result = await transform(source, {
- internalURL: 'astro/runtime/server/index.js',
- internalURL: 'astro/compiler-runtime',
- // ...
-});
-```
-
-## コミュニティリソース
-
-Astro v3.0に関する良い資料をご存知ですか？[このページを編集](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v3.mdx)し、以下にリンクを追加してください！
-
-## 既知の問題
-
-現在、既知の問題はありません。
diff --git a/src/content/docs/ja/guides/upgrade-to/v4.mdx b/src/content/docs/ja/guides/upgrade-to/v4.mdx
deleted file mode 100644
index 730a737a25970..0000000000000
--- a/src/content/docs/ja/guides/upgrade-to/v4.mdx
+++ /dev/null
@@ -1,389 +0,0 @@
----
-title: Astro v4へのアップグレード
-description: プロジェクトを最新版のAstro（v4.0）にアップグレードする方法。
-i18nReady: true
----
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
-このガイドでは、Astro v3からAstro v4への移行方法について説明します。
-
-古いプロジェクトをv3にアップグレードする必要がありますか？[以前の移行ガイド](/ja/guides/upgrade-to/v3/)を参照してください。
-
-v3のドキュメントが必要ですか？[ドキュメントサイトの以前のバージョン（メンテナンスされていないv3.6のスナップショット）](https://docs-git-v3-docs-unmaintained-astrodotbuild.vercel.app/)をご覧ください。
-
-## Astroをアップグレードする
-
-パッケージマネージャーを使用して、プロジェクトのAstroとすべての公式インテグレーションを最新バージョンに更新します。
-
-<PackageManagerTabs>
- <Fragment slot="npm">
- ```shell
- # Astroと公式インテグレーションを一緒にアップグレードする
- npx @astrojs/upgrade
- ```
- </Fragment>
- <Fragment slot="pnpm">
- ```shell
- # Astroと公式インテグレーションを一緒にアップグレードする
- pnpm dlx @astrojs/upgrade
- ```
- </Fragment>
- <Fragment slot="yarn">
- ```shell
- # Astroと公式インテグレーションを一緒にアップグレードする
- yarn dlx @astrojs/upgrade
- ```
- </Fragment>
-</PackageManagerTabs>
-
-
-必要であれば、[Astroインテグレーションの手動アップグレード](/ja/guides/integrations-guide/#手動アップグレード)も可能です。プロジェクトの他の依存関係もアップグレードする必要があるかもしれません。
-
-
-:::note[他に必要なことはありますか？]
-Astroを最新版にアップグレードしたあと、プロジェクトへの変更が必要とは限りません！
-
-しかし、エラーや予想外の動作が発生した場合は、変更された内容と、プロジェクトを更新する必要があるかどうかを以下で確認してください。
-:::
-
-Astro v4.0は、[破壊的な可能性のある変更](#破壊的変更)や、[以前に非推奨となっていた機能の削除](#以前に非推奨となっていた機能の削除)を含んでいます。
-
-v4.0にアップグレードしたあとプロジェクトが期待どおりに動作しない場合は、このガイドを確認して、すべての破壊的な変更の概要と、コードベースを更新する方法についての手順を確認してください。
-
-完全なリリースノートについては、[チェンジログ](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)を確認してください。
-
-## Astro v4.0の実験的なフラグの削除
-
-`astro.config.mjs`において、実験的な`devOverlay`フラグを削除し、`i18n`の設定をトップレベルに移動してください。
-
-```js del={5-9} ins={11-14} title="astro.config.mjs"
-import { defineConfig } from 'astro/config';
-
-export default defineConfig({
- experimental: {
- devOverlay: true,
- i18n: {
- defaultLocale: "en",
- locales: ["en", "fr", "pt-br", "es"],
- }
- },
- i18n: {
- defaultLocale: "en",
- locales: ["en", "fr", "pt-br", "es"],
- },
-})
-```
-
-これらの設定、`i18n`とリネームされた`devToolbar`は、Astro v4.0で利用可能になりました。
-
-[v4.0のブログ記事](https://astro.build/blog/astro-4/)で、これら2つのエキサイティングな機能の詳細などについて確認してください！
-
-## アップグレード
-
-Astroの依存関係のメジャーアップグレードは、プロジェクトに破壊的な変更をもたらす可能性があります。
-
-### アップグレード: Vite 5.0
-
-Astro v3.0では、開発サーバーと本番用バンドラーとしてVite 4が使用されていました。
-
-Astro v4.0は、Vite 4をVite 5にアップグレードします。
-
-#### どうすればいいですか？
-
-Vite固有のプラグインや設定、APIを使用している場合は、[Viteの移行ガイド](https://ja.vite.dev/guide/migration.html)にアクセスして、破壊的な変更を確認し、必要に応じてプロジェクトをアップグレードしてください。Astro自体に対する破壊的な変更はありません。
-
-### アップグレード: unified、remarkとrehypeの依存関係
-
-Astro v3.xでは、MarkdownとMDXを処理するために、unified v10およびそれと関連した互換性のあるremark/rehypeパッケージが使用されていました。
-
-Astro v4.0は、[unifiedをv11](https://github.com/unifiedjs/unified/releases/tag/11.0.0)にアップグレードし、その他のremark/rehypeパッケージを最新バージョンにアップグレードします。
-
-#### どうすればいいですか？
-
-カスタムのremark/rehypeパッケージを使用している場合は、それらがunified v11をサポートするように、パッケージマネージャーを使用してすべてのパッケージを最新バージョンに更新してください。使用しているパッケージは`astro.config.mjs`で確認できます。
-
-アクティブに更新されているパッケージを使用している場合、大きな破壊的な変更はないはずですが、一部のパッケージはまだunified v11と互換性がないかもしれません。デプロイする前にMarkdown/MDXページを目視して、サイトが意図したとおりに機能しているかどうか確認してください。
-
-## 破壊的変更
-
-以下の変更は、Astroにおける破壊的な変更と見なされます。破壊的な変更には、一時的な後方互換性がある場合とない場合とがありますが、すべてのドキュメントは、現在サポートされているコードのみを示すように更新されています。
-
-v3.xプロジェクトのドキュメントを参照する必要がある場合は、[v4.0がリリースされる前の（メンテナンスされていない）ドキュメントのスナップショット](https://docs-git-v3-docs-unmaintained-astrodotbuild.vercel.app/)を参照してください。
-
-### リネーム: `entrypoint` (インテグレーションAPI)
-
-Astro v3.xでは、ルートのエントリーポイントを指定するインテグレーションAPI`injectRoute`のプロパティは`entryPoint`という名前でした。
-
-Astro v4.0は、他のAstro APIとの整合性を保つために、このプロパティを`entrypoint`にリネームします。`entryPoint`プロパティは非推奨ですが、引き続き動作し、使用している場合はコードを更新するように促す警告がログに出力されます。
-
-#### どうすればいいですか？
-
-`injectRoute` APIを使用するインテグレーションがある場合は、`entryPoint`プロパティを`entrypoint`にリネームしてください。あなたがAstro 3と4の両方をサポートしたいライブラリの作者である場合は、`entryPoint`と`entrypoint`の両方を指定できます。この場合、警告はログ出力されません。
-
-```js ins={4} del={3}
-injectRoute({
- pattern: '/fancy-dashboard',
- entryPoint: '@fancy/dashboard/dashboard.astro'
- entrypoint: '@fancy/dashboard/dashboard.astro'
-});
-```
-
-### 変更: インテグレーションAPIの`app.render`のシグネチャ
-
-Astro v3.0では、`app.render()`メソッドは、`routeData`と`locals`を別々のオプション引数として受け取っていました。
-
-Astro v4.0は、`app.render()`のシグネチャを変更します。これら2つのプロパティは、単一のオブジェクトにまとめられるようになりました。このオブジェクトと2つのプロパティは、いずれも必須ではありません。
-
-#### どうすればいいですか？
-
-アダプタをメンテナンスしている場合、現在のシグネチャは次のメジャーバージョンまで引き続き動作します。新しいシグネチャに移行するには、複数の独立した引数としてではなく、`routeData`と`locals`をオブジェクトのプロパティとして渡します。
-
-```diff lang="js"
-- app.render(request, routeData, locals)
-+ app.render(request, { routeData, locals })
-```
-### 変更: アダプターはサポートする機能を指定する必要があります
-
-Astro v3.xでは、アダプターはサポートする機能を指定する必要はありませんでした。
-
-Astro v4.0では、アダプターはサポートする機能のリストを指定するために、`supportedAstroFeatures{}`プロパティを渡す必要があります。このプロパティは任意ではなくなりました。
-
-#### どうすればいいですか？
-
-アダプターの作者は、サポートする機能のリストを指定するために、`supportedAstroFeatures{}`オプションを渡す必要があります。
-
-```js title="my-adapter.mjs" ins={9-11}
-export default function createIntegration() {
- return {
- name: '@matthewp/my-adapter',
- hooks: {
- 'astro:config:done': ({ setAdapter }) => {
- setAdapter({
- name: '@matthewp/my-adapter',
- serverEntrypoint: '@matthewp/my-adapter/server.js',
- supportedAstroFeatures: {
- staticOutput: 'stable'
- }
- });
- },
- },
- };
-}
-```
-
-### 削除: Shiki言語の`path`プロパティ
-
-Astro v3.xでは、`markdown.shikiConfig.langs`に渡されるShiki言語は、自動的にShikiji互換の言語に変換されました。Shikijiは、Astroが構文のハイライトに使用している内部ツールです。
-
-Astro v4.0は、設定をわかりづらくさせていたShiki言語の`path`プロパティのサポートを削除します。これは、`langs`に直接渡すことができるインポートに置き換えられます。
-
-#### どうすればいいですか？
-
-言語のJSONファイルをインポートし、オプションに渡します。
-
-```diff lang="js"
-// astro.config.js
-+ import customLang from './custom.tmLanguage.json'
-
-export default defineConfig({
- markdown: {
- shikiConfig: {
- langs: [
-- { path: '../../custom.tmLanguage.json' },
-+ customLang,
- ],
- },
- },
-})
-```
-
-## 非推奨
-
-以下の非推奨機能へのサポートは終了し、以後はドキュメントの追加もおこなわれません。プロジェクトを適切に更新してください。
-
-一部の非推奨機能は、完全に削除されるまで一時的に機能し続ける場合があります。その他の機能は、単に無効になるか、あるいはコードを更新するように促すエラーが発生します。
-
-### 非推奨: ビュートランジションの`submit`イベントの`handleForms`
-
-Astro v3.xでは、`<ViewTransitions />`コンポーネントを使用するプロジェクトは、`form`要素の`submit`イベントに対する処理を有効にする必要がありました。このためには`handleForms`プロパティを渡す必要がありました。
-
-Astro v4.0では、`<ViewTransitions />`を使用すると、`form`要素の`submit`イベントをデフォルトで処理します。`handleForms`プロパティは非推奨となり、何の効果もなくなりました。
-
-#### どうすればいいですか？
-
-`ViewTransitions`コンポーネントから`handleForms`プロパティを削除します。これはもう必要ありません。
-
-```astro title="src/pages/index.astro" del="handleForms"
----
-import { ViewTransitions } from "astro:transitions";
----
-<html>
- <head>
- <ViewTransitions handleForms />
- </head>
- <body>
- <!-- 色々 -->
- </body>
-</html>
-```
-
-`submit`イベントの処理を無効にしたい場合は、該当する`form`要素に`data-astro-reload`属性を追加します。
-
-```astro title="src/components/Form.astro" ins="data-astro-reload"
-<form action="/contact" data-astro-reload>
- <!-- -->
-</form>
-```
-
-## 以前に非推奨となっていた機能の削除
-
-以下の非推奨機能は、コードベースから完全に削除され、使用できなくなりました。これらの機能の一部は、非推奨となってからもプロジェクトで引き続き機能する可能性があります。他の機能は、単に無効になるかもしれません。
-
-これらの削除された機能を使用しているプロジェクトはビルドできなくなり、機能を削除するよう促すサポートドキュメントはもうありません。
-
-### 削除: エンドポイントでのプレーンオブジェクトの返却
-
-Astro v3.0では、エンドポイントからプレーンオブジェクトを返すことは非推奨となりましたが、Astro v2との互換性を維持するために引き続きサポートされていました。また、移行を容易にするために`ResponseWithEncoding`ユーティリティも提供されていました。
-
-Astro v4.0では、プレーンオブジェクトのサポートが削除され、エンドポイントは常に`Response`を返す必要があります。`ResponseWithEncoding`ユーティリティも適切な`Response`型に置き換えられるかたちで削除されています。
-
-#### どうすればいいですか？
-
-`Response`オブジェクトを直接返すようにエンドポイントを更新します。
-
-```diff lang="ts"
- export async function GET() {
-- return { body: { "title": "ボブのブログ" }};
-+ return new Response(JSON.stringify({ "title": "ボブのブログ" }));
- }
-```
-
-`ResponseWithEncoding`の使用箇所を削除するには、`ArrayBuffer`を使用するようにコードをリファクタリングします。
-
-```diff lang="ts"
- export async function GET() {
- const file = await fs.readFile('./bob.png');
-- return new ResponseWithEncoding(file.toString('binary'), undefined, 'binary');
-+ return new Response(file.buffer);
- }
-```
-
-### 削除: `build.split`と`build.excludeMiddleware`
-
-Astro v3.0では、`build.split`と`build.excludeMiddleware`のビルド設定オプションは非推奨となり、同じタスクを実行するために[アダプターの設定オプション](/ja/reference/adapter-reference/#アダプターの機能について)に置き換えられました。
-
-Astro v4.0では、これらのプロパティは完全に削除されます。
-
-#### どうすればいいですか？
-
-非推奨の`build.split`または`build.excludeMiddleware`を使用している場合、これらはもう存在しないため、削除する必要があります。
-
-アダプターの設定で[これらの非推奨のミドルウェアプロパティを更新する](/ja/guides/upgrade-to/v3/#非推奨-buildexcludemiddlewareとbuildsplit)ためのv3の移行ガイドを参照してください。
-
-### 削除: `Astro.request.params`
-
-Astro v3.0では、`Astro.request.params` APIは非推奨となりましたが、後方互換性のために保持されていました。
-
-Astro v4.0では、このオプションは完全に削除されます。
-
-#### どうすればいいですか？
-
-すべての出現箇所を、サポートされている置き換え先である[`Astro.params`](/ja/reference/api-reference/#params)に更新します。
-
-```astro del={1} ins={2}
-const { id } = Astro.request.params;
-const { id } = Astro.params;
-```
-
-### 削除: `markdown.drafts`
-
-Astro v3.0では、下書きの記事のビルドを制御するために`markdown.drafts`を使用することは非推奨となりました。
-
-Astro v4.0では、このオプションは完全に削除されます。
-
-#### どうすればいいですか？
-
-非推奨の`markdown.drafts`を使用している場合、これはもう存在しないため、削除する必要があります。
-
-プロジェクト内の一部のページを下書きとしてマークし続けるには、[コンテンツコレクションに移行](/ja/guides/content-collections/#ファイルベースのルーティングからの移行)し、代わりに`draft: true`フロントマタープロパティで[ページを手動でフィルタリング](/ja/guides/content-collections/#コレクションクエリのフィルタリング)します。
-
-### 削除: `getHeaders()`
-
-Astro v3.0では、`getHeaders()` Markdownのエクスポートは非推奨となり、`getHeadings()`に置き換えられました。
-
-Astro v4.0では、このオプションは完全に削除されます。
-
-#### どうすればいいですか？
-
-非推奨の`getHeaders()`を使用している場合、これはもう存在しないため、削除する必要があります。サポートされている置き換え先である`getHeadings()`に置き換えてください。
-
-```js del={2} ins={3}
-const posts = await Astro.glob('../content/blog/*.mdx');
-const firstPostHeadings = posts.at(0).getHeaders();
-const firstPostHeadings = posts.at(0).getHeadings();
-```
-
-
-### 削除: `getStaticPaths()`における`rss`の使用
-
-Astro v3.0では、`getStaticPaths()`で非推奨の`rss`ヘルパーを使用するとエラーが発生しました。
-
-Astro v4.0では、このヘルパーは完全に削除されます。
-
-#### どうすればいいですか？
-
-RSSフィードを生成するためにこのサポートされていないメソッドを使用している場合は、RSSのセットアップに[`@astrojs/rss`インテグレーション](/ja/recipes/rss/)を使用する必要があります。
-
-### 削除: 小文字のHTTPメソッド名
-
-Astro v3.0では、小文字のHTTPリクエストメソッド名（`get`、`post`、`put`、`all`、`del`）を使用することは非推奨となりました。
-
-Astro v4.0では、小文字の名前へのサポートは完全に削除されます。すべてのHTTPリクエストメソッドは、大文字を使用して記述する必要があります。
-
-#### どうすればいいですか？
-
-非推奨の小文字の名前を使用している場合、これらを対応する大文字の名前に置き換える必要があります。
-
-[大文字のHTTPリクエストメソッドを使用する方法](/ja/guides/upgrade-to/v3/#変更-httpリクエストメソッドの大文字小文字)については、v3の移行ガイドを参照してください。
-
-### 削除: `base`プレフィックスがない場合の301リダイレクト
-
-Astro v3.xでは、ベースパスがなしでパブリックディレクトリのアセットにアクセスすると、Astroのプレビューサーバーは301リダイレクトを返しました。
-
-Astro v4.0では、プレビューサーバーが実行されている場合、開発サーバーと同じ動作になるように、ベースパスのプレフィックスがない場合にはパブリックディレクトリのアセットに対して404ステータスが返されます。
-
-#### どうすればいいですか？
-
-Astroのプレビューサーバーを使用する場合、パブリックディレクトリからのすべての静的アセットのインポートとURLには、[baseの値](/ja/reference/configuration-reference/#base)がパスの先頭に付けられている必要があります。
-
-以下の例は、`base: '/docs'`が設定されている場合に、パブリックフォルダから画像を表示するために必要な`src`属性を示しています。
-
-```astro title="src/pages/index.astro" ins="/docs"
-// public/images/my-image.pngにアクセスする:
-
-<img src="/docs/images/my-image.png" alt="">
-```
-
-### 削除: `astro/client-image`の自動変換
-
-Astro v3.xでは、非推奨の画像インテグレーションで使用されていた`astro/client-image`型が削除されましたが、`env.d.ts`ファイルでこれが見つかった場合は、デフォルトのAstro型`astro/client`に自動変換されました。
-
-Astro v4.0では、`astro/client-image`は無視され、`env.d.ts`は自動的には更新されなくなります。
-
-#### どうすればいいですか？
-
-`src/env.d.ts`で`@astrojs/image`の型を設定していて、v3.0にアップグレードしても型が自動的に変換されなかった場合は、`astro/client-image`型を`astro/client`に手動で置き換えてください。
-
-```ts title="src/env.d.ts" del={1} ins={2}
- /// <reference types="astro/client-image" />
- /// <reference types="astro/client" />
-```
-
-
-## コミュニティリソース
-
-Astro v4.0に関する良い資料をご存知ですか？[このページを編集](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v4.mdx)し、以下にリンクを追加してください！
-
-## 既知の問題
-
-[GitHub上のAstroのissues](https://github.com/withastro/astro/issues/)で報告済みの問題を確認するか、問題を報告してください。
diff --git a/src/content/docs/ja/guides/view-transitions.mdx b/src/content/docs/ja/guides/view-transitions.mdx
deleted file mode 100644
index ad5b0ccfc768d..0000000000000
--- a/src/content/docs/ja/guides/view-transitions.mdx
+++ /dev/null
@@ -1,749 +0,0 @@
----
-title: ビュートランジション
-description: >-
- ビュートランジションを使用して、Astroでページ間のシームレスなナビゲーションを実現する。
-i18nReady: true
----
-import Since from '~/components/Since.astro'
-import { Steps } from '@astrojs/starlight/components'
-
-Astroでは、**オプトイン式ページ単位のビュートランジション**を数行のコードで実現できます。ビュートランジションは、ブラウザがナビゲーション時に通常おこなうページ全体の更新なしでページコンテンツを更新し、ページ間のシームレスなアニメーションを提供します。
-
-Astroは、単一のページの`<head>`に追加可能な`<ClientRouter />`ルーティングコンポーネントを提供しており、これにより別ページへの遷移を制御できます。このコンポーネントは軽量なクライアントサイドルーターを提供し、[ナビゲーションをインターセプト](#クライアントサイドナビゲーションの流れ)してページ間の遷移をカスタマイズできるようにします。
-
-このコンポーネントを共通のヘッドやレイアウトなど再利用可能な`.astro`コンポーネントに追加すると、サイト全体でのアニメーション付きのページ遷移（SPAモード）が可能になります。
-
-Astroのビュートランジションは新しい[View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/)ブラウザAPIによって提供されており、また以下の機能も含みます。
-
-- `fade`や`slide`、`none`など、いくつかの[組み込みのアニメーションオプション](#組み込みのアニメーションディレクティブ)。
-- 戻る・進むの両ナビゲーションでのアニメーションのサポート。
-- [トランジションアニメーションのすべての要素を完全にカスタマイズ](#アニメーションをカスタマイズする)し、さらに独自のアニメーションを作成する機能。
-- [非ページへのリンクに対しクライアントサイドナビゲーションを防止する](#クライアントサイドナビゲーションの防止)オプション。
-- まだView Transition APIをサポートしていないブラウザのための[フォールバック用動作の制御](#フォールバックの制御)。
-- [`prefers-reduced-motion`](#prefers-reduced-motion)の自動サポート。
-
-:::note
-デフォルトでは、すべてのページは通常のフルページのブラウザナビゲーションを使用します。ビュートランジションを有効化すると、ページ単位またはサイト全体で使用できます。
-:::
-
-## ページにビュートランジションを追加する
-
-`<ClientRouter />`ルーティングコンポーネントをインポートし、`<head>`内に追加することで、ビュートランジションを個別のページで有効化できます。
-
-```astro title="src/pages/index.astro" ins={2,7}
----
-import { ClientRouter } from 'astro:transitions';
----
-<html lang="ja">
- <head>
- <title>私のホームページ
-
Title
-こんにちは
-``` - -
-
-```
-
-```astro title="src/pages/index.astro"
----
-import MyComponent from "../components/MyComponent.astro"
----
-
-テキスト
-テキスト
-``` - - -## 外部スタイル - -外部のグローバルなスタイルシートを参照する方法は2つあります。プロジェクトのソース内にあるファイルの場合はESMのインポート、`public/` ディレクトリにあるファイルやプロジェクトの外部でホストされているファイルの場合は絶対URLリンクになります。 - -
-
-```
-
-2つのルールが同じ詳細度を持つ場合、出現順序が評価され、最後のルールの値が優先されます。
-
-```astro title="src/components/MyComponent.astro"
-
-- このヘッダーは紫（purple）になります！ -
-
-
-```
-
-Astro CSSのルールは、つぎの出現順で評価されます。
-
-- **head内の``タグ** (最も低い優先順位)
-- **インポートされたスタイル**
-- **scoped styles** (最優先)
-
-### スコープされたスタイル
-
-[スコープされたスタイル](#スコープされたスタイル)を使用しても、CSSの詳細度が高まるわけではありませんが、常に登場順が最後になります。したがって、同じ比重の他のスタイルよりも優先されます。たとえば、スコープされたスタイルと競合するスタイルシートをインポートした場合、スコープされたスタイルの値が適用されます。
-
-```css title="src/components/make-it-purple.css"
-h1 {
- color: purple;
-}
-```
-
-```astro title="src/components/MyComponent.astro"
----
-import "./make-it-purple.css"
----
-
-- このヘッダーは赤（red）になります！ -
-
-
-```
-
-インポートされたスタイルの詳細度をあげると、スコープされたスタイルより優先されます。
-
-```css title="src/components/make-it-purple.css"
-div > h1 {
- color: purple;
-}
-```
-
-```astro title="src/components/MyComponent.astro"
----
-import "./make-it-purple.css"
----
-
-- このヘッダーは赤（red）になります！ -
-
-
-```
-
-### インポート順序
-
-Astroコンポーネントで複数のスタイルシートをインポートする場合、CSSルールはインポートされた順番に評価されます。CSSがいつ評価されるかにかかわらず、より高い詳細度によって、表示するスタイルが常に決定されます。しかし、競合するスタイルが同じ比重を持つ場合、最後にインポートされたものが優先されます。
-
-```css title="src/components/make-it-purple.css"
-div > h1 {
- color: purple;
-}
-```
-```css title="src/components/make-it-green.css"
-div > h1 {
- color: green;
-}
-```
-```astro title="src/components/MyComponent.astro"
----
-import "./make-it-green.css"
-import "./make-it-purple.css"
----
-
-- このヘッダーは紫（purple）になります！ -
-
-
-```
-
-`
-- このヘッダーは紫（purple）になります！ -
-
-
-```
-
-:::tip
-Astroでよくあるパターンは、[Layoutコンポーネント](/ja/basics/layouts/)の中にグローバルCSSをインポートすることです。Layoutコンポーネントは必ず他のインポートより先にインポートして、優先順位を一番低くしてください。
-:::
-
-### `link`タグ
-
-[linkタグ](#linkタグで静的スタイルシートを読み込む)で読み込まれたスタイルシートは、Astroファイル内の他のどのスタイルよりも先に、順番に評価されます。したがって、これらのスタイルは、インポートされたスタイルシートやスコープされたスタイルよりも優先順位が低くなります。
-
-```astro title="src/pages/index.astro"
----
-import "../components/make-it-purple.css"
----
-
-
-
-
-
-
- - このヘッダーは紫（purple）になります！ -
-
-
-
-
-```
-
-## CSSインテグレーション
-
-Astroには、[Tailwind](https://tailwindcss.com)など、人気のCSSライブラリやツール、フレームワークをプロジェクトに追加するための仕組みがあります！
-
-### Tailwind
-
-プロジェクトでTailwindを使用するには、公式の[Astro Tailwindインテグレーション][tailwind]を、パッケージマネージャーの`astro add`コマンドを使ってインストールします。
-
-これは紫（purple）になります
-