Skip to content

i18n(ja): Update astro-components.mdx #11503

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
merged 6 commits into from
Apr 28, 2025
+9 −7
Merged

i18n(ja): Update astro-components.mdx #11503

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
99b60f9
fix: the position of codeblock comments for readability
Apr 22, 2025
20f49c3
feat: add whitespace to JavaScript objects
Apr 22, 2025
ec8e2a6
feat: add a link to the map function
Apr 22, 2025
8eceab5
remove unnecessary whitespace
Apr 22, 2025
3d76a4c
add inline codeblocks
Apr 22, 2025
31e5aa5
Merge branch 'main' into i18n-ja-guides-astro-components
yanthomasdev Apr 28, 2025
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
16 changes: 9 additions & 7 deletions src/content/docs/ja/basics/astro-components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ Astroコンポーネントがクライアントサイドでインタラクティ

Astroコンポーネントは、**コンポーネントスクリプト**と**コンポーネントテンプレート**という2つの主要な部分で構成されています。それぞれのパーツは異なる役割を担いますが、この2つを組み合わせることで、使いやすさと、どんなものにも対応できる表現力を兼ね備えたフレームワークを提供しています。


```astro title="src/components/EmptyComponent.astro"
---
// コンポーネントスクリプト (JavaScript)
Expand Down Expand Up @@ -90,7 +89,7 @@ const { title } = Astro.props;
</ul>

<!-- テンプレートディレクティブを使って、複数の文字列やオブジェクトからクラス名を作成できます -->
<p class:list={["add", "dynamic", {classNames: true}]} />
<p class:list={["add", "dynamic", { classNames: true }]} />
```


Expand Down Expand Up @@ -220,12 +219,15 @@ const { title } = Astro.props;
---
<div id="content-wrapper">
<Header />
<slot name="after-header" /> <!-- `slot="after-header"` 属性を持つ子要素はここに入ります。 -->
<!-- `slot="after-header"` 属性を持つ子要素はここに入ります。 -->
<slot name="after-header" />
<Logo />
<h1>{title}</h1>
<slot /> <!-- `slot`属性をもたない子要素、`slot="default"`属性を持つ子要素はここに入ります。 -->
<!-- `slot`属性をもたない子要素、`slot="default"`属性を持つ子要素はここに入ります。 -->
<slot />
<Footer />
<slot name="after-footer" /> <!-- `slot="after-footer"` 属性を持つ子要素はここに入ります。 -->
<!-- `slot="after-footer"` 属性を持つ子要素はここに入ります。 -->
<slot name="after-footer" />
</div>
```

Expand Down Expand Up @@ -285,7 +287,7 @@ import CustomTable from './CustomTable.astro';
:::

:::note
Astroのスロット名は、map関数の中などで動的には生成できません。UIフレームワークコンポーネントの内部でこの機能が必要な場合は、フレームワーク側で動的なスロットを生成しておくのがベストです。
Astroのスロット名は、[map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)関数の中などで動的には生成できません。UIフレームワークコンポーネントの内部でこの機能が必要な場合は、フレームワーク側で動的なスロットを生成しておくのがベストです。
:::

### スロットのフォールバックコンテンツ
Expand All @@ -312,7 +314,7 @@ const { title } = Astro.props;
</div>
```

フォールバックコンテンツは、slot="name"属性を持つ対応する要素が名前付きスロットに渡されていない場合にのみ表示されます。
フォールバックコンテンツは、`slot="name"`属性を持つ対応する要素が名前付きスロットに渡されていない場合にのみ表示されます。

スロット要素は存在するが渡すコンテンツがない場合、Astroは空のスロットを渡します。空のスロットが渡された場合、フォールバックコンテンツをデフォルトとしては使用できません。フォールバックコンテンツは、スロット要素が見つからない場合にのみ表示されます。

Expand Down