Skip to content

i18n(ja): Update islands.mdx #2251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
delucis merged 3 commits into from
Dec 29, 2022
Merged

i18n(ja): Update islands.mdx #2251

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bcd4924
i18n(ja): Update islands.mdx
morinokami Dec 29, 2022
a2847fc
Revert description
morinokami Dec 29, 2022
2743013
Merge branch 'main' into i18n-ja-islands
delucis Dec 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions src/pages/ja/concepts/islands.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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の海に浮かぶ島（アイランド）とお考えください。

<IslandsDiagram>
<Fragment slot="headerApp">ヘッダー（インタラクティブアイランド）</Fragment>
<Fragment slot="sidebarApp">サイドバー（静的HTML）</Fragment>
<Fragment slot="main">
テキスト、画像などの静的コンテンツ
</Fragment>
<Fragment slot="carouselApp">イメージカルーセル（インタラクティブアイランド）</Fragment>
<Fragment slot="footer">フッター（静的HTML）</Fragment>
<Fragment slot="source">出典：[Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
<Fragment slot="headerApp">ヘッダー（インタラクティブアイランド）</Fragment>
<Fragment slot="sidebarApp">サイドバー（静的HTML）</Fragment>
<Fragment slot="main">
テキスト、画像などの静的コンテンツ
</Fragment>
<Fragment slot="carouselApp">イメージカルーセル（インタラクティブアイランド）</Fragment>
<Fragment slot="footer">フッター（静的HTML）</Fragment>
<Fragment slot="source">出典：[Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
Comment on lines -21 to +26
Copy link
Copy Markdown
Member Author

@morinokami morinokami Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#1776 に対応します（原文に対する実質的な変更は、これと #2133 における MDX への変更だけです。残りは既存翻訳の改善となります）。

</IslandsDiagram>

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をすべて削除することで、すべてのサイトをデフォルトで高速に保つことができます。
Expand All @@ -46,7 +43,7 @@ import MyReactComponent from '../components/MyReactComponent.jsx';
<MyReactComponent />
```

しかし、インタラクティブなUIを作成するためには、クライアントサイドのJavaScriptが必要になります。ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、Astroはアイランドを作成するように依頼します。
しかし、インタラクティブなUIを作成するためには、クライアントサイドのJavaScriptが必要になります。Astroでは、ページ全体をSPAのようなJavaScriptアプリケーションにするのではなく、アイランドを作成します。
Comment on lines -49 to +46
Copy link
Copy Markdown
Member Author

@morinokami morinokami Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原文は

But sometimes, client-side JavaScript is required for creating interactive UI. Instead of forcing your entire page to become an SPA-like JavaScript application, Astro asks you to create an island.

となります。訳文の最後が「Astroはアイランドを作成するように依頼します」となっているのですが、ここの意味が少し通りづらい（「誰に依頼する？」と読める）気がしたため、読みやすくなるよう変更してみました。


```astro title="src/pages/index.astro" ins="client:load"
---
Expand All @@ -58,14 +55,13 @@ import MyReactComponent from '../components/MyReactComponent.jsx';
<MyReactComponent client:load />
```

Astroアイランドでは、サイトの大部分は純粋で軽量のHTMLとCSSのままです。上の例では、ページの残りの部分を変更することなく、単一の孤立した**島にインタラクティブ機能**を追加しただけです。

Astroアイランドにより、サイトの大部分は純粋で軽量なHTMLとCSSのままです。上の例では、ページの残りの部分を変更することなく、単一の独立した**インタラクティブなアイランド**を追加しただけです。
Comment on lines -61 to +58
Copy link
Copy Markdown
Member Author

@morinokami morinokami Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With Astro Islands, the vast majority of your site remains pure, lightweight HTML and CSS. In the example above, you have just added a single, isolated island of interactivity without also changing the rest of the page.

が原文ですが、冒頭の With Astro Islands は「〜を用いると」というようなことだと思うので、「Astroアイランドでは」を「Astroアイランドにより」に修正しました。

また、第二文に関して、まず isolated の訳を「独立した」に変更しました。isolated というと「孤立」や「隔離」などの単語が確かに頭に浮かぶのですが、これらの日本語はなんとなくネガティブな感じがし、一方もとの意味は「他に影響を与えない」というポジティブな意味だと思われるため、「独立した」という語に変更してみました。また、island of interactivity に関して、ここでの island はいわゆる普通の意味での「島」ではないため、「アイランド」に修正しました。最後に、added の対象は island であると思われるため、of interactivity はもとの訳文のように意訳せず「インタラクティブな」と訳し、「アイランドを追加」となるようにています。


## アイランドの利点は何ですか？

Astroアイランドで構築するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるもっとも遅いリソースの1つなので、1バイトが重要なのです。
Astroアイランドで構築するもっとも明白な利点は、パフォーマンスです。ウェブサイトの大部分は高速で静的なHTMLに変換され、JavaScriptは、それを必要とする個々のコンポーネントにのみ読み込まれます。JavaScriptは、バイト単位で読み込むことができるもっとも遅いリソースの1つなので、1バイトが重要なのです。
Comment on lines -66 to +62
Copy link
Copy Markdown
Member Author

@morinokami morinokami Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JavaScriptは必要とする個々のコンポーネントにのみ読み込まれます

は直すか迷いましたが、なんとなく引っかかったためより正確に「それを」を追加しています。


もうひとつのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックする必要はないのです。この2つは並行してロードされ、分離してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。
もうひとつのメリットは、並列ロードです。上のイラストの例では、優先度の低い「画像カルーセル」のアイランドが、優先度の高い「ヘッダー」のアイランドをブロックする必要はないのです。この2つは並行してロードされ、独立してハイドレーションされます。つまり、ヘッダーは、ページ下部の重いカルーセルを待つことなく、すぐにインタラクティブな状態になります。
Comment on lines -68 to +64
Copy link
Copy Markdown
Member Author

@morinokami morinokami Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こちらの「分離して（in isolation）」は特に問題はないと思いますが、上の訳に合わせて「独立して」に変更しています。


さらに、各コンポーネントのレンダリング方法とタイミングをAstroに正確に指示できます。画像カルーセルの読み込みコストが非常に高い場合は、特別な[clientディレクティブ](/ja/reference/directives-reference/#client-directives)を付けて、カルーセルが画面上で見えるようになったときだけ読み込むようにAstroに指示できます。ユーザーがそこまでスクロールしなければ、ロードされることはありません。

Expand Down