From bcd49248e4da4d0db9aa247889c10e690601848a Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Thu, 29 Dec 2022 10:08:47 +0900 Subject: [PATCH 1/2] i18n(ja): Update islands.mdx --- src/pages/ja/concepts/islands.mdx | 34 +++++++++++++------------------ 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/src/pages/ja/concepts/islands.mdx b/src/pages/ja/concepts/islands.mdx index b392fc69b8133..a2a2947b6d6bd 100644 --- a/src/pages/ja/concepts/islands.mdx +++ b/src/pages/ja/concepts/islands.mdx @@ -1,38 +1,33 @@ --- layout: ~/layouts/MainLayout.astro title: Astroアイランド -description: >- - Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャーのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie - Sylor-Millerによって初めて作られ、Preactの作者、Jason Millerによって広まりました。 +description: "Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャーのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie 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 +41,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 +53,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に指示できます。ユーザーがそこまでスクロールしなければ、ロードされることはありません。 From a2847fcc1c731fdbc414d7c6275a5bcd5e104c06 Mon Sep 17 00:00:00 2001 From: Shinya Fujino Date: Thu, 29 Dec 2022 10:34:19 +0900 Subject: [PATCH 2/2] Revert description --- src/pages/ja/concepts/islands.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/ja/concepts/islands.mdx b/src/pages/ja/concepts/islands.mdx index a2a2947b6d6bd..f3ec3e76a5d3b 100644 --- a/src/pages/ja/concepts/islands.mdx +++ b/src/pages/ja/concepts/islands.mdx @@ -1,7 +1,9 @@ --- layout: ~/layouts/MainLayout.astro title: Astroアイランド -description: "Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャーのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie Sylor-Millerによって初めて作られ、Preactの作者、Jason Millerによって広まりました。" +description: >- + Astroアイランド（別名：コンポーネントアイランド）は、Astroが開拓したWebアーキテクチャーのパターンの1つです。「アイランドアーキテクチャ」は、2019年にEtsyのフロントエンドアーキテクトKatie + Sylor-Millerによって初めて作られ、Preactの作者、Jason Millerによって広まりました。 i18nReady: true ---