diff --git a/src/content/docs/ja/concepts/islands.mdx b/src/content/docs/ja/concepts/islands.mdx index 05bfd95af440b..51b4bfcdb4219 100644 --- a/src/content/docs/ja/concepts/islands.mdx +++ b/src/content/docs/ja/concepts/islands.mdx @@ -1,18 +1,33 @@ --- title: Astroアイランド description: >- - Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャーのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie + Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie Sylor-Millerによって初めて作られ、Preactの作者、Jason Millerによって広まりました。 i18nReady: true --- 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は、**アイランド**（Islands）と呼ばれるフロントエンドアーキテクチャを開拓し、普及させました。アイランドアーキテクチャは、モノリシックなJavaScriptのパターンを避け、ページから不要なJavaScriptをすべて自動的に削除することで、フロントエンドのパフォーマンスを向上させます。開発者は、Astroと一緒にお気に入りのUIコンポーネントやフレームワークを使い続けながらも、なおこうしたメリットを得られます。 + +## 簡単な歴史 + +「コンポーネントアイランド」という用語は、Etsyのフロントエンドアーキテクトである[Katie Sylor-Miller](https://twitter.com/ksylor)によって2019年に作られました。その後このアイデアは拡張され、Preactの作者であるJason Millerによる2020年8月11日の[この記事](https://jasonformat.com/islands-architecture/)によって文書化されました。 + +> 「アイランド」アーキテクチャの基本的な考え方は驚くほどシンプルです。サーバーでHTMLページをレンダリングし、高度に動的な領域にはプレースホルダーやスロットを挿入しておきます。そしてクライアント上では、サーバーでレンダリングされたHTMLを再利用して、その領域に小さな自己完結型のウィジェットを「ハイドレーション」します。 +> — Jason Miller、Preactの作者 + +このアーキテクチャパターンがベースとしている技術は、**パーシャル（partial）ハイドレーション**や**選択的（selective）ハイドレーション**としても知られています。 + +対照的に、JavaScriptベースのウェブフレームワークの多くは、1つの大きなJavaScriptアプリケーション（シングルページアプリケーション、SPAとも呼ばれます）として、ウェブサイト全体をハイドレーションしてレンダリングします。SPAはシンプルでパワフルですが、クライアントサイドのJavaScriptが増えるため、ページロードパフォーマンスの問題に悩まされることになります。 + +SPAは特定の状況においては有用であり、[Astroページの中に埋め込む](/ja/guides/migrate-to-astro/from-create-react-app/)こともできます。しかし、SPAには、選択的かつ戦略的にハイドレーションするためのネイティブな機能がないため、現在ウェブ上にある多くのプロジェクトにとっては過剰な選択肢となってしまいます。 + +Astroは、Sylor-Millerが作り出したコンポーネントアイランドパターンを使い、選択的ハイドレーションを組み込んだ最初のメインストリームのJavaScriptウェブフレームワークとして人気となりました。 ## Astroアイランドとは？ -「Astroアイランド」とは、HTMLの静的なページ上にあるインタラクティブなUIコンポーネントを指します。1つのページに複数のアイランドが存在でき、アイランドは常に孤立して表示されます。静的で非インタラクティブなHTMLの海に浮かぶ島（アイランド）とお考えください。 +**Astroにおける「アイランド」とは、ページ上のインタラクティブなUIコンポーネントを指します。** アイランドとは、サーバーでレンダリングされた静的で軽量なHTMLの海に浮かぶ、インタラクティブなウィジェットのことだと考えてください。 ヘッダー（インタラクティブアイランド） @@ -20,50 +35,55 @@ import IslandsDiagram from '~/components/IslandsDiagram.astro'; テキスト、画像などの静的コンテンツ - イメージカルーセル（インタラクティブアイランド） + 画像カルーセル（インタラクティブアイランド） フッター（静的HTML） 出典：[Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/) -Astroでは、サポートされているUIフレームワーク（React、Svelte、Vueなど）を使って、ブラウザ上でアイランドをレンダリングできます。同じページでさまざまなフレームワークを混在させることも、ただ好きなものを選ぶこともできます。 +各アイランドは常にページ上の他のアイランドから独立して動作します。ページ上に複数のアイランドを存在させることもできます。またアイランドは、それぞれ異なるコンポーネントコンテキストで実行されているにもかかわらず、状態を共有したり、互いに通信することが可能です。 + +この柔軟性により、Astroは、[React](https://react.dev/)、[Preact](https://preactjs.com/)、[Svelte](https://svelte.dev/)、[Vue](https://vuejs.org/)、[SolidJS](https://www.solidjs.com/)などの複数のUIフレームワークをサポートしています。それぞれが独立しているため、1つのページで複数のフレームワークを混在させることすら可能です。 -このアーキテクチャパターンは、**パーシャルハイドレーション**または**選択的ハイドレーション**として知られている技術に基づいています。Astroはこの技術を裏側で活用し、アイランドを自動的に動かします。 +:::tip +多くの開発者は1つのUIフレームワークに固執しますが、Astroでは同じプロジェクト内で複数のフレームワークを使用できます。これにより、以下のことが可能となります。 -## Astroでアイランドはどのように機能しますか？ +- コンポーネントごとに最適なフレームワークを選択する。 +- 新しくプロジェクトを作成する必要なしに、新しいフレームワークを学ぶ。 +- 異なるフレームワークを使いながら、他の人と協力する。 +- 既存のサイトを別のフレームワークへと、ダウンタイム無しで段階的に移行する。 +::: + +## アイランドを作成する + +デフォルトでは、AstroはすべてのUIコンポーネントをHTMLとCSSのみへと自動的にレンダリングし、**クライアントサイドのJavaScriptを自動的に取り除きます。** -**Astroは、デフォルトでクライアントサイドのJavaScriptを一切使用せずにすべてのウェブサイトを生成します。** [React](https://react.dev/)、[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をすべて削除することで、すべてのサイトをデフォルトで高速に保つことができます。 ```astro title="src/pages/index.astro" ---- -// 例：JavaScriptを使用せず、ページ上で静的なReactコンポーネントを使用します。 -import MyReactComponent from '../components/MyReactComponent.jsx'; ---- - ``` -しかし、インタラクティブなUIを作成するためには、クライアントサイドのJavaScriptが必要になります。Astroでは、ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、アイランドを作成します。 +これは厳しく聞こえるかもしれませんが、この挙動により、Astroウェブサイトはデフォルトで高速となり、またウェブサイトのパフォーマンスを低下させる可能性のある不要なJavaScriptを開発者が誤って送信することを防ぎます。 + +静的なUIコンポーネントをインタラクティブなアイランドに変換するには、`client:*`ディレクティブを追加します。これによりAstroは、パフォーマンスの最適化のために、クライアントサイドのJavaScriptを自動的にビルドしてバンドルします。 ```astro title="src/pages/index.astro" ins="client:load" ---- -// 例：ページ上で動的なReactコンポーネントを使用します。 -import MyReactComponent from '../components/MyReactComponent.jsx'; ---- - + ``` -Astroアイランドにより、サイトの大部分は純粋で軽量なHTMLとCSSのままです。上の例では、ページの残りの部分を変更することなく、単一の独立した**インタラクティブなアイランド**を追加しただけです。 +アイランドでは、クライアントサイドのJavaScriptは、`client:*`ディレクティブを使って明示的にマークしたインタラクティブなコンポーネントに対してのみ読み込まれます。 + +また、インタラクティブにするかどうかはコンポーネント単位で設定されるため、各コンポーネントの使用状況に応じて読み込む優先度をそれぞれ指定できます。たとえば、`client:idle`は、ブラウザがアイドル状態になったときにコンポーネントをロードするように指示し、`client:visible`は、コンポーネントがビューポートに入ったとき初めてロードするように指示します。 ## アイランドの利点は何ですか？ -Astroアイランドで構築するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは、それを必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるもっとも遅いリソースの1つなので、1バイトが重要なのです。 +Astroアイランドを使用するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは、それを必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるリソースの中でもっとも遅いものの1つであるため、1バイトが重要なのです。 -もうひとつのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックする必要はないのです。この2つは並行してロードされ、独立してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。 +もう1つのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックすることはありません。両者は並行してロードされ、独立してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。 さらに、各コンポーネントのレンダリング方法とタイミングをAstroに正確に指示できます。画像カルーセルの読み込みコストが非常に高い場合は、特別な[clientディレクティブ](/ja/reference/directives-reference/#client-directives)を付けて、カルーセルが画面上で見えるようになったときだけ読み込むようにAstroに指示できます。ユーザーがそこまでスクロールしなければ、ロードされることはありません。 -Astroでは、ページ上のどのコンポーネントがブラウザで実行される必要があるか、Astroに明示的に伝えるのは、開発者の仕事です。Astroは、ページ上で必要なものだけを正確にハイドレーションし、サイトの残りの部分は静的なHTMLとして残します。 +Astroでは、ページ上のどのコンポーネントがブラウザで実行される必要があるか、Astroに明示的に伝えるのは、開発者の仕事です。Astroは、ページ上で必要なものだけをハイドレーションし、サイトの残りの部分は静的なHTMLとして残します。 **Astroのデフォルトで高速なパフォーマンスの秘密は、アイランドにあります。**