diff --git a/src/pages/ja/concepts/islands.mdx b/src/pages/ja/concepts/islands.mdx index b392fc69b8133..f3ec3e76a5d3b 100644 --- a/src/pages/ja/concepts/islands.mdx +++ b/src/pages/ja/concepts/islands.mdx @@ -6,33 +6,30 @@ description: >- Sylor-Millerによって初めて作られ、Preactの作者、Jason Millerによって広まりました。 i18nReady: true --- -import IslandsDiagram from '~/components/IslandsDiagram.astro'; - +import IslandsDiagram from '~/components/IslandsDiagram.astro'; **Astroアイランド**(別名:コンポーネントアイランド)は、Astroが開拓したWebアーキテクチャーのパターンです。「アイランドアーキテクチャー」のアイデアは、2019年にEtsyのフロントエンドアーキテクトである[Katie Sylor-Miller](https://twitter.com/ksylor)によってはじめて作られ、Preact作者のJason Millerによって[この投稿](https://jasonformat.com/islands-architecture/)で広められました。 - ## Astroアイランドとは? 「Astroアイランド」とは、HTMLの静的なページ上にあるインタラクティブなUIコンポーネントを指します。1つのページに複数のアイランドが存在でき、アイランドは常に孤立して表示されます。静的で非インタラクティブなHTMLの海に浮かぶ島(アイランド)とお考えください。 - ヘッダー(インタラクティブアイランド) - サイドバー(静的HTML) - - テキスト、画像などの静的コンテンツ - - イメージカルーセル(インタラクティブアイランド) - フッター(静的HTML) - 出典:[Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/) + ヘッダー(インタラクティブアイランド) + サイドバー(静的HTML) + + テキスト、画像などの静的コンテンツ + + イメージカルーセル(インタラクティブアイランド) + フッター(静的HTML) + 出典:[Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/) Astroでは、サポートされているUIフレームワーク(React、Svelte、Vueなど)を使って、ブラウザ上でアイランドをレンダリングできます。同じページでさまざまなフレームワークを混在させることも、ただ好きなものを選ぶこともできます。 このアーキテクチャパターンは、**パーシャルハイドレーション**または**選択的ハイドレーション**として知られている技術に基づいています。Astroはこの技術を裏側で活用し、アイランドを自動的に動かします。 - ## Astroでアイランドはどのように機能しますか? **Astroは、デフォルトでクライアントサイドのJavaScriptを一切使用せずにすべてのウェブサイトを生成します。** [React](https://reactjs.org/)、[Preact](https://preactjs.com/)、[Svelte](https://svelte.dev/)、[Vue](https://vuejs.org/)、[SolidJS](https://www.solidjs.com/)、[AlpineJS](https://alpinejs.dev/)、または[Lit](https://lit.dev/)で作られたフロントエンドUIコンポーネントを使うと、Astroが自動的に前もってHTMLとして生成し、すべてのJavaScriptを取り除いてから、それを表示します。このように、ページ内の未使用のJavaScriptをすべて削除することで、すべてのサイトをデフォルトで高速に保つことができます。 @@ -46,7 +43,7 @@ import MyReactComponent from '../components/MyReactComponent.jsx'; ``` -しかし、インタラクティブなUIを作成するためには、クライアントサイドのJavaScriptが必要になります。ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、Astroはアイランドを作成するように依頼します。 +しかし、インタラクティブなUIを作成するためには、クライアントサイドのJavaScriptが必要になります。Astroでは、ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、アイランドを作成します。 ```astro title="src/pages/index.astro" ins="client:load" --- @@ -58,14 +55,13 @@ import MyReactComponent from '../components/MyReactComponent.jsx'; ``` -Astroアイランドでは、サイトの大部分は純粋で軽量のHTMLとCSSのままです。上の例では、ページの残りの部分を変更することなく、単一の孤立した**島にインタラクティブ機能**を追加しただけです。 - +Astroアイランドにより、サイトの大部分は純粋で軽量なHTMLとCSSのままです。上の例では、ページの残りの部分を変更することなく、単一の独立した**インタラクティブなアイランド**を追加しただけです。 ## アイランドの利点は何ですか? -Astroアイランドで構築するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるもっとも遅いリソースの1つなので、1バイトが重要なのです。 +Astroアイランドで構築するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは、それを必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるもっとも遅いリソースの1つなので、1バイトが重要なのです。 -もうひとつのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックする必要はないのです。この2つは並行してロードされ、分離してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。 +もうひとつのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックする必要はないのです。この2つは並行してロードされ、独立してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。 さらに、各コンポーネントのレンダリング方法とタイミングをAstroに正確に指示できます。画像カルーセルの読み込みコストが非常に高い場合は、特別な[clientディレクティブ](/ja/reference/directives-reference/#client-directives)を付けて、カルーセルが画面上で見えるようになったときだけ読み込むようにAstroに指示できます。ユーザーがそこまでスクロールしなければ、ロードされることはありません。