i18n(ja): Update basics/astro-components.mdx

src/content/docs/ja/basics/astro-components.mdx

@@ -3,15 +3,24 @@ title: コンポーネント
 description: Astroコンポーネント構文の紹介です。
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro';
 
 **Astroコンポーネント**は、あらゆるAstroプロジェクトの基本的な構成要素です。クライアントサイドのランタイムを持たない、HTMLのみのテンプレートコンポーネントです。Astroコンポーネントは、`.astro`という拡張子により判別できます。
 
+:::note
+もしHTMLを知っているなら、あなたはすでに最初のAstroコンポーネントを書くのに十分な知識を持っています。
+
+<ReadMore>詳しくは[テンプレート式のリファレンス](/ja/reference/astro-syntax/)のドキュメントをご覧ください。</ReadMore>
+:::
+
 Astroコンポーネントは非常に柔軟です。多くの場合、Astroコンポーネントは、ヘッダーやプロフィールカードのような、ページ上で**再利用可能なUI**を含むことになります。また、Astroコンポーネントには、SEO対策を容易にする共通の`<meta>`タグのコレクションのような、小さなHTMLのスニペットが含まれることもあります。Astroコンポーネントは、ページ全体のレイアウトを含められます。
 
 Astroコンポーネントについて知っておくべきもっとも重要なことは、**クライアント上でレンダリングされない**ということです。コンポーネントはビルド時または[サーバーサイドレンダリング（SSR）](/ja/guides/on-demand-rendering/)によりオンデマンドにレンダリングされます。コンポーネントのフロントマターの内部にJavaScriptコードを含められますが、それらはすべて、ユーザーのブラウザに送られる最終的なページからは取り除かれます。その結果、デフォルトではJavaScriptが含められることはなく、より高速なサイトが実現します。
 
 Astroコンポーネントがクライアントサイドでインタラクティビティを必要とする場合は、[標準のHTML`<script>`タグ](/ja/guides/client-side-scripts/)や[UIフレームワークのコンポーネント](/ja/guides/framework-components/#インタラクティブなコンポーネント)を追加できます。
 
+クライアントサイドでパーソナライズされた動的なコンテンツをレンダリングする必要があるコンポーネントの場合、[サーバーディレクティブ](/ja/reference/directives-reference/#サーバーディレクティブ)を追加することでサーバーレンダリングを遅延させることができます。これらの「サーバーアイランド」は、コンテンツが利用可能になった時点でレンダリングされ、ページ全体の読み込みを遅らせることはありません。
+
 ## コンポーネント構造
 
 Astroコンポーネントは、**コンポーネントスクリプト**と**コンポーネントテンプレート**という2つの主要な部分で構成されています。それぞれのパーツは異なる役割を担いますが、この2つを組み合わせることで、使いやすさと、どんなものにも対応できる表現力を兼ね備えたフレームワークを提供しています。
@@ -51,8 +60,10 @@ const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
 
 コードフェンスは、その中に書かれたJavaScriptを「囲い込む」ことを保証するために設計されています。コードがフロントエンドのアプリケーションに漏れたり、ユーザーの手に渡ったりしません。高コストなコードや機密性の高いコード（プライベートなデータベースの呼び出しなど）が、ユーザーのブラウザに届くことを心配せずに、安全にコードを書けます。
 
-:::tip
-コンポーネントスクリプトの中には、TypeScriptも書けます！
+:::note
+AstroコンポーネントスクリプトはTypeScriptで記述されており、エディタツールやエラーチェックのためにJavaScriptに追加の構文を加えることができます。
+
+<ReadMore>Astroの[組み込みTypeScriptサポート](/ja/guides/typescript/)についてさらに読む。</ReadMore>
 :::
 
 ### コンポーネントテンプレート
@@ -88,6 +99,11 @@ const { title } = Astro.props;
   {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
 </ul>
 
+<!-- コンポーネントのレンダリングを遅延させ、フォールバックの読み込みコンテンツを提供します: -->
+<Avatar server:defer>
+  <svg slot="fallback" class="generic-avatar" transition:name="avatar">...</svg>
+</Avatar>
+
 <!-- テンプレートディレクティブを使って、複数の文字列やオブジェクトからクラス名を作成できます -->
 <p class:list={["add", "dynamic", { classNames: true }]} />
 ```
@@ -202,6 +218,8 @@ import Wrapper from '../components/Wrapper.astro';
 
 このパターンは[Astroレイアウトコンポーネント](/ja/basics/layouts/)の基本です。HTMLコンテンツのページ全体を`<Layout></Layout>`タグで囲んでレイアウトコンポーネントに送り、そこで定義された共通のページ要素の中にレンダリングさせられます。
 
+<ReadMore>[`Astro.slots` ユーティリティ関数](/ja/reference/astro-syntax/#astroslots)を読んで、スロットコンテンツにアクセスしてレンダリングする方法をさらに学びましょう。</ReadMore>
+
 ### 名前付きスロット
 
 Astroコンポーネントは、名前付きスロットも使えます。これを利用すると、対応するスロット名を持つHTML要素のみをスロットの場所に渡せます。
@@ -252,7 +270,7 @@ import Wrapper from '../components/Wrapper.astro';
 
 `<div>`でラップせずに複数のHTML要素をコンポーネントの`<slot/>`プレースホルダーに渡すには、[Astroの`<Fragment/>`コンポーネント](/ja/reference/astro-syntax/#フラグメント)の`slot=""`属性を使用します。
 
-```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body"/>"
+```astro title="src/components/CustomTable.astro" '<slot name="header" />' '<slot name="body" />'
 ---
 // ヘッドとボディのコンテンツ用の名前付きスロットプレースホルダーをもつカスタムテーブルを作成する
 ---
@@ -264,7 +282,7 @@ import Wrapper from '../components/Wrapper.astro';
 
 `slot=""`属性により`"header"`と`"body"`のコンテンツを指定して、複数の行と列のHTMLコンテンツを挿入します。個々のHTML要素にもスタイルを適用できます。
 
-```astro title="src/components/StockTable.astro" {5-7, 9-13} '<Fragment slot="header">' '<Fragment slot="body">'
+```astro title="src/components/StockTable.astro" {5-7, 9-13} '<Fragment slot="header">' '<Fragment slot="body">' '</Fragment>'
 ---
 import CustomTable from './CustomTable.astro';
 ---
@@ -373,7 +391,7 @@ Astroは`.html`ファイルをコンポーネントとしてインポートし
 
 HTMLコンポーネントは有効なHTMLしか含むことができず、そのためAstroコンポーネントの主要機能が制限されます。
 - フロントマターやサーバーサイドのインポート、動的な記法をサポートしません
-- すべての`<script>`タグはバンドルされずに残され、`is:inline`を持つ場合と同じように扱われます。
+- すべての`<script>`タグはバンドルされずに残され、[`is:inline`ディレクティブ](/ja/reference/directives-reference/#isinline)を持つ場合と同じように扱われます。
 - [`public/`フォルダにあるアセット](/ja/basics/project-structure/#public)のみを参照できます。
 
 :::note
@@ -382,6 +400,4 @@ HTMLコンポーネント内の[`<slot />`要素](/ja/basics/astro-components/#
 
 ## 次のステップ
 
-import ReadMore from '~/components/ReadMore.astro';
-
 <ReadMore>Astroプロジェクトでの[UIフレームワークコンポーネント](/ja/guides/framework-components/)の使用方法について学びます。</ReadMore>

src/content/docs/ja/reference/astro-syntax.mdx

@@ -1,12 +1,10 @@
 ---
-title: Astroの構文
-description: .astroコンポーネント構文の紹介。
+title: テンプレート式のリファレンス
 i18nReady: true
 ---
 
-**HTMLを知っていれば、最初のAstroコンポーネントを書くには十分です。**
+Astroコンポーネントの構文はHTMLのスーパーセットです。この構文はHTMLやJSXを書いたことのある人にとって親しみやすいように設計され、コンポーネントやJavaScriptの式がサポートされています。
 
-Astroコンポーネントの構文はHTMLのスーパーセットです。この構文は[HTMLやJSXを書いたことのある人にとって親しみやすいように設計され](#astroとjsxの違い)、コンポーネントやJavaScriptの式がサポートされています。
 
 ## JSXライクな式
 
@@ -45,7 +43,8 @@ const name = "Astro";
 ```
 
 :::caution
-HTML属性は文字列に変換されるため、関数やオブジェクトをHTML要素に渡すことはできません。たとえば、Astroコンポーネント内のHTML要素にイベントハンドラを割り当てることはできません。
+HTML属性は文字列に変換されるため、関数やオブジェクトをHTML要素に渡すことはできません。
+たとえば、Astroコンポーネント内のHTML要素にイベントハンドラを割り当てることはできません。
 
 ```astro title="dont-do-this.astro"
 ---
@@ -98,7 +97,7 @@ const visible = true;
 
 ### 動的タグ
 
-HTMLタグ名またはインポートされたコンポーネントを変数に設定することで、動的タグも使用できます。
+HTMLタグ名を変数に割り当てるか、コンポーネントのインポートを再割り当てすることで、動的タグも使用できます。
 
 ```astro title="src/components/DynamicTags.astro" /Element|(?<!My)Component/
 ---
@@ -120,9 +119,9 @@ const Component = MyComponent;
 
 ### フラグメント
 
-Astroでは、`<Fragment> </Fragment>`または短縮形の`<> </>`を使用できます。
+Astroでは `<> </>` 表記を使用でき、組み込みの `<Fragment />` コンポーネントを提供しています。このコンポーネントは、HTML文字列を注入するために [`set:*` ディレクティブ](/ja/reference/directives-reference/#sethtml) を追加する際に、ラッパー要素を避けるのに役立ちます。
 
-フラグメントは、次の例のように、[`set:*`ディレクティブ](/ja/reference/directives-reference/#sethtml)を使用する際にラッパー要素を避けるために役立ちます。
+次の例では、`<Fragment />` コンポーネントを使用して段落テキストをレンダリングします。
 
 ```astro title="src/components/SetHtml.astro" "Fragment"
 ---
@@ -170,3 +169,139 @@ Astroでは、標準のHTMLコメントまたはJavaScriptスタイルのコメ
 :::caution
 HTMLスタイルのコメントはブラウザのDOMに含まれますが、JSのコメントはスキップされます。TODOメッセージやその他の開発専用の説明を残したい場合は、JavaScriptスタイルのコメントを使用することをお勧めします。
 :::
+
+
+## コンポーネントユーティリティ
+
+### `Astro.slots`
+
+`Astro.slots` には、Astroコンポーネントのスロットの子要素を変更するためのユーティリティ関数が含まれています。
+
+#### `Astro.slots.has()`
+
+<p>
+
+**Type:** `(slotName: string) => boolean`
+</p>
+
+`Astro.slots.has()` を使用して、特定のスロット名のコンテンツが存在するかどうかを確認できます。これは、スロットのコンテンツをラップしたいが、スロットが使用されている場合にのみラッパー要素をレンダリングしたい場合に便利です。
+
+```astro  title="src/pages/index.astro"
+---
+---
+<slot />
+
+{Astro.slots.has('more') && (
+  <aside>
+    <h2>More</h2>
+    <slot name="more" />
+  </aside>
+)}
+```
+
+#### `Astro.slots.render()`
+
+<p>
+
+**Type:** `(slotName: string, args?: any[]) => Promise<string>`
+</p>
+
+`Astro.slots.render()` を使用して、スロットのコンテンツをHTML文字列として非同期にレンダリングできます。
+
+```astro
+---
+const html = await Astro.slots.render('default');
+---
+<Fragment set:html={html} />
+```
+
+:::note
+これは高度なユースケースです！ほとんどの場合、[`<slot />` 要素](/ja/basics/astro-components/#スロット)を使用してスロットのコンテンツをレンダリングする方が簡単です。
+:::
+
+`Astro.slots.render()` は、2番目のオプションの引数として、任意の子関数に転送されるパラメータの配列を受け取ります。これは、カスタムユーティリティコンポーネントに役立ちます。
+
+たとえば、この `<Shout />` コンポーネントは、`message` propを大文字に変換し、デフォルトスロットに渡します。
+
+```astro title="src/components/Shout.astro" "await Astro.slots.render('default', [message])"
+---
+const message = Astro.props.message.toUpperCase();
+let html = '';
+if (Astro.slots.has('default')) {
+  html = await Astro.slots.render('default', [message]);
+}
+---
+<Fragment set:html={html} />
+```
+
+`<Shout />` の子として渡されたコールバック関数は、すべて大文字の `message` パラメータを受け取ります。
+
+```astro title="src/pages/index.astro"
+---
+import Shout from "../components/Shout.astro";
+---
+<Shout message="slots!">
+  {(message) => <div>{message}</div>}
+</Shout>
+
+<!-- <div>SLOTS!</div> としてレンダリングされます -->
+```
+
+コールバック関数は、`slot` 属性を持つHTML要素タグでラップすることで、名前付きスロットに渡すことができます。この要素はコールバックを名前付きスロットに転送するためにのみ使用され、ページにはレンダリングされません。
+
+```astro
+<Shout message="slots!">
+  <fragment slot="message">
+    {(message) => <div>{message}</div>}
+  </fragment>
+</Shout>
+```
+
+ラッパータグには、標準のHTML要素またはコンポーネントとして解釈されない小文字のタグ（例：`<Fragment />` の代わりに `<fragment>`）を使用します。HTMLの `<slot>` 要素はAstroのスロットとして解釈されるため、使用しないでください。
+
+### `Astro.self`
+
+`Astro.self` を使用すると、Astroコンポーネントを再帰的に呼び出すことができます。この動作により、コンポーネントテンプレート内で `<Astro.self>` を使用して、Astroコンポーネントを自身の中からレンダリングできます。これは、大規模なデータストアやネストされたデータ構造を反復処理するのに役立ちます。
+
+```astro
+---
+// NestedList.astro
+const { items } = Astro.props;
+---
+<ul class="nested-list">
+  {items.map((item) => (
+    <li>
+      <!-- ネストされたデータ構造がある場合は、`<Astro.self>` をレンダリングします -->
+      <!-- そして、再帰呼び出しでpropを渡すことができます -->
+      {Array.isArray(item) ? (
+        <Astro.self items={item} />
+      ) : (
+        item
+      )}
+    </li>
+  ))}
+</ul>
+```
+
+このコンポーネントは次のように使用できます。
+
+```astro
+---
+import NestedList from './NestedList.astro';
+---
+<NestedList items={['A', ['B', 'C'], 'D']} />
+```
+
+そして、次のようなHTMLをレンダリングします。
+
+```html
+<ul class="nested-list">
+  <li>A</li>
+  <li>
+    <ul class="nested-list">
+      <li>B</li>
+      <li>C</li>
+    </ul>
+  </li>
+  <li>D</li>
+</ul>

src/content/docs/ja/reference/directives-reference.mdx

@@ -138,7 +138,7 @@ import api from '../db/api.js';
 <ShowHideButton client:idle />
 ```
 
-### `timeout`
+#### `timeout`
 
 <p><Since v="4.15.0" /></p>
 
@@ -224,6 +224,20 @@ Astro 2.6.0以降、インテグレーションを通じて独自の `client:*`
 
 カスタムクライアントディレクティブの作成方法については、[`addClientDirective` API](/ja/reference/integrations-reference/#addclientdirective-option) のページを参照してください。
 
+## サーバーディレクティブ
+
+これらのディレクティブは、サーバーアイランドコンポーネントのレンダリング方法を制御します。
+
+### `server:defer`
+
+`server:defer` ディレクティブを使うと、そのコンポーネントがサーバーアイランドとなり、ページ全体のレンダリングとは別にオンデマンドでレンダリングされます。
+
+<ReadMore>詳しくは[サーバーアイランド](/ja/guides/server-islands/)をご覧ください。</ReadMore>
+
+```astro
+<Avatar server:defer />
+```
+
 ## スクリプトとスタイルのディレクティブ
 
 これらのディレクティブは、HTMLの `<script>` と `<style>` タグでのみ使えます。ページ上のクライアントサイドJavaScriptとCSSの扱い方を制御するためのものです。