11---
2- title : Astroの構文
3- description : .astroコンポーネント構文の紹介。
2+ title : テンプレート式のリファレンス
43i18nReady : true
54---
65
7- ** HTMLを知っていれば、最初のAstroコンポーネントを書くには十分です。 **
6+ Astroコンポーネントの構文はHTMLのスーパーセットです。この構文はHTMLやJSXを書いたことのある人にとって親しみやすいように設計され、コンポーネントやJavaScriptの式がサポートされています。
87
9- Astroコンポーネントの構文はHTMLのスーパーセットです。この構文は[ HTMLやJSXを書いたことのある人にとって親しみやすいように設計され] ( #astroとjsxの違い ) 、コンポーネントやJavaScriptの式がサポートされています。
108
119## JSXライクな式
1210
@@ -45,7 +43,8 @@ const name = "Astro";
4543```
4644
4745:::caution
48- HTML属性は文字列に変換されるため、関数やオブジェクトをHTML要素に渡すことはできません。たとえば、Astroコンポーネント内のHTML要素にイベントハンドラを割り当てることはできません。
46+ HTML属性は文字列に変換されるため、関数やオブジェクトをHTML要素に渡すことはできません。
47+ たとえば、Astroコンポーネント内のHTML要素にイベントハンドラを割り当てることはできません。
4948
5049``` astro title="dont-do-this.astro"
5150---
@@ -98,7 +97,7 @@ const visible = true;
9897
9998### 動的タグ
10099
101- HTMLタグ名またはインポートされたコンポーネントを変数に設定することで 、動的タグも使用できます。
100+ HTMLタグ名を変数に割り当てるか、コンポーネントのインポートを再割り当てすることで 、動的タグも使用できます。
102101
103102``` astro title="src/components/DynamicTags.astro" /Element|(?<!My)Component/
104103---
@@ -120,9 +119,9 @@ const Component = MyComponent;
120119
121120### フラグメント
122121
123- Astroでは、 ` <Fragment > </Fragment> ` または短縮形の ` <> < />` を使用できます 。
122+ Astroでは ` < > </> ` 表記を使用でき、組み込みの ` <Fragment />` コンポーネントを提供しています。このコンポーネントは、HTML文字列を注入するために [ ` set:* ` ディレクティブ ] ( /ja/reference/directives-reference/#sethtml ) を追加する際に、ラッパー要素を避けるのに役立ちます 。
124123
125- フラグメントは、次の例のように、 [ ` set:* ` ディレクティブ ] ( /ja/reference/directives-reference/#sethtml ) を使用する際にラッパー要素を避けるために役立ちます 。
124+ 次の例では、 ` <Fragment /> ` コンポーネントを使用して段落テキストをレンダリングします 。
126125
127126``` astro title="src/components/SetHtml.astro" "Fragment"
128127---
@@ -170,3 +169,139 @@ Astroでは、標準のHTMLコメントまたはJavaScriptスタイルのコメ
170169:::caution
171170HTMLスタイルのコメントはブラウザのDOMに含まれますが、JSのコメントはスキップされます。TODOメッセージやその他の開発専用の説明を残したい場合は、JavaScriptスタイルのコメントを使用することをお勧めします。
172171:::
172+
173+
174+ ## コンポーネントユーティリティ
175+
176+ ### ` Astro.slots `
177+
178+ ` Astro.slots ` には、Astroコンポーネントのスロットの子要素を変更するためのユーティリティ関数が含まれています。
179+
180+ #### ` Astro.slots.has() `
181+
182+ <p >
183+
184+ ** Type:** ` (slotName: string) => boolean `
185+ </p >
186+
187+ ` Astro.slots.has() ` を使用して、特定のスロット名のコンテンツが存在するかどうかを確認できます。これは、スロットのコンテンツをラップしたいが、スロットが使用されている場合にのみラッパー要素をレンダリングしたい場合に便利です。
188+
189+ ``` astro title="src/pages/index.astro"
190+ ---
191+ ---
192+ <slot />
193+
194+ {Astro.slots.has('more') && (
195+ <aside>
196+ <h2>More</h2>
197+ <slot name="more" />
198+ </aside>
199+ )}
200+ ```
201+
202+ #### ` Astro.slots.render() `
203+
204+ <p >
205+
206+ ** Type:** ` (slotName: string, args?: any[]) => Promise<string> `
207+ </p >
208+
209+ ` Astro.slots.render() ` を使用して、スロットのコンテンツをHTML文字列として非同期にレンダリングできます。
210+
211+ ``` astro
212+ ---
213+ const html = await Astro.slots.render('default');
214+ ---
215+ <Fragment set:html={html} />
216+ ```
217+
218+ :::note
219+ これは高度なユースケースです！ほとんどの場合、[ ` <slot /> ` 要素] ( /ja/basics/astro-components/#スロット ) を使用してスロットのコンテンツをレンダリングする方が簡単です。
220+ :::
221+
222+ ` Astro.slots.render() ` は、2番目のオプションの引数として、任意の子関数に転送されるパラメータの配列を受け取ります。これは、カスタムユーティリティコンポーネントに役立ちます。
223+
224+ たとえば、この ` <Shout /> ` コンポーネントは、` message ` propを大文字に変換し、デフォルトスロットに渡します。
225+
226+ ``` astro title="src/components/Shout.astro" "await Astro.slots.render('default', [message])"
227+ ---
228+ const message = Astro.props.message.toUpperCase();
229+ let html = '';
230+ if (Astro.slots.has('default')) {
231+ html = await Astro.slots.render('default', [message]);
232+ }
233+ ---
234+ <Fragment set:html={html} />
235+ ```
236+
237+ ` <Shout /> ` の子として渡されたコールバック関数は、すべて大文字の ` message ` パラメータを受け取ります。
238+
239+ ``` astro title="src/pages/index.astro"
240+ ---
241+ import Shout from "../components/Shout.astro";
242+ ---
243+ <Shout message="slots!">
244+ {(message) => <div>{message}</div>}
245+ </Shout>
246+
247+ <!-- <div>SLOTS!</div> としてレンダリングされます -->
248+ ```
249+
250+ コールバック関数は、` slot ` 属性を持つHTML要素タグでラップすることで、名前付きスロットに渡すことができます。この要素はコールバックを名前付きスロットに転送するためにのみ使用され、ページにはレンダリングされません。
251+
252+ ``` astro
253+ <Shout message="slots!">
254+ <fragment slot="message">
255+ {(message) => <div>{message}</div>}
256+ </fragment>
257+ </Shout>
258+ ```
259+
260+ ラッパータグには、標準のHTML要素またはコンポーネントとして解釈されない小文字のタグ（例：` <Fragment /> ` の代わりに ` <fragment> ` ）を使用します。HTMLの ` <slot> ` 要素はAstroのスロットとして解釈されるため、使用しないでください。
261+
262+ ### ` Astro.self `
263+
264+ ` Astro.self ` を使用すると、Astroコンポーネントを再帰的に呼び出すことができます。この動作により、コンポーネントテンプレート内で ` <Astro.self> ` を使用して、Astroコンポーネントを自身の中からレンダリングできます。これは、大規模なデータストアやネストされたデータ構造を反復処理するのに役立ちます。
265+
266+ ``` astro
267+ ---
268+ // NestedList.astro
269+ const { items } = Astro.props;
270+ ---
271+ <ul class="nested-list">
272+ {items.map((item) => (
273+ <li>
274+ <!-- ネストされたデータ構造がある場合は、`<Astro.self>` をレンダリングします -->
275+ <!-- そして、再帰呼び出しでpropを渡すことができます -->
276+ {Array.isArray(item) ? (
277+ <Astro.self items={item} />
278+ ) : (
279+ item
280+ )}
281+ </li>
282+ ))}
283+ </ul>
284+ ```
285+
286+ このコンポーネントは次のように使用できます。
287+
288+ ``` astro
289+ ---
290+ import NestedList from './NestedList.astro';
291+ ---
292+ <NestedList items={['A', ['B', 'C'], 'D']} />
293+ ```
294+
295+ そして、次のようなHTMLをレンダリングします。
296+
297+ ``` html
298+ <ul class =" nested-list"
299+ <li >A</li >
300+ <li >
301+ <ul class =" nested-list"
302+ <li >B</li >
303+ <li >C</li >
304+ </ul >
305+ </li >
306+ <li >D</li >
307+ </ul >
0 commit comments