Skip to content

Commit

Permalink
i18n(ja): Update astro-components.md translation (withastro#1788)
Browse files Browse the repository at this point in the history 
Co-authored-by: Kyosuke <[email protected]>
Co-authored-by: Chris Swithinbank <[email protected]>
  • Loading branch information
@mottox2 @kyosuke @delucis
3 people authored Oct 21, 2022
1 parent ca248cc commit 5399c3a
Showing 1 changed file with 81 additions and 17 deletions.
98 changes: 81 additions & 17 deletions src/pages/ja/core-concepts/astro-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ const myFavoritePokemon = [/* ... */];
<!-- JSXと同じように、HTMLとJavaScriptの式を混ぜる -->
<ul>
{myFavoritePokemon.map((data) => <li>{data.name}</li>)}
<ul>
</ul>
<!-- テンプレートディレクティブを使って、複数の文字列やオブジェクトからクラス名を作成する -->
<p class:list={["add", "dynamic", {classNames: true}]} />
Expand All @@ -112,6 +112,12 @@ const myFavoritePokemon = [/* ... */];

Astroコンポーネントのfront-matterコンポーネント・スクリプト内で、ローカルJavaScript変数を定義できます。また、JSXに似た式を使用して、これらの変数をコンポーネントのHTMLテンプレートに挿入できます。

:::note[動的とリアクティブ]
この手法では、frontmatterで計算された**動的な**値を含めることができます。しかし、一旦含まれると、これらの値は**リアクティブ**ではなく決して変更されることはありません。Astroコンポーネントはビルド時に一回だけ実行されるテンプレートです。

より詳しい例は[AstroとJSXの違い](#astroとjsxの違い)をご覧ください。
:::

### 変数

ローカル変数は、中括弧（`{}`）で囲んで使うことで、HTMLに追加できます。
Expand All @@ -138,6 +144,37 @@ const name = "Astro";
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />
```

:::caution
HTML属性は文字列に変換されるので、HTML要素に関数やオブジェクトを渡すことはできません。
たとえば、Astroコンポーネント中ではHTML要素にイベントハンドラーを割り当てることはできません。

```astro
---
// dont-do-this.astro
function handleClick () {
console.log("ボタンがクリックされました！");
}
---
<!-- ❌ これは動作しません！ ❌ -->
<button onClick={handleClick}>クリックしても何も起きません！</button>
```

代わりに、バニラJavaScriptで行うようにクライアントサイドスクリプトを使用してイベントハンドラを追加してください。

```astro
---
// do-this-instead.astro
---
<button id="button">Click Me</div>
<script>
function handleClick () {
console.log("ボタンがクリックされました！");
}
document.getElementById("button").addEventListener("click", handleClick);
</script>
```
:::

### 動的なHTML

ローカル変数は、JSXのような関数で使用でき、動的に生成されたHTML要素を生成できます。
Expand All @@ -153,17 +190,36 @@ const items = ["犬", "猫", "カモノハシ"];
</ul>
```

:::tip
タグを動的に設定することもできます。
AstroはJSXの論理演算子や三項演算子を用いて、HTMLを条件付きで表示することができます。

```astro "El"
```astro title="src/components/ConditionalHtml.astro" "visible"
---
// src/pages/index.astro
const El = 'div'
const visible = true;
---
<El>こんにちは！</El> <!-- <div>こんにちは！</div> としてレンダリングされます -->
{visible && <p>私を見て！</p>}
{visible ? <p>私を見て！</p> : <p>または私を見て！</p>}
```

### 動的なタグ

HTMLタグ名、またはインポートしたコンポーネントを変数に設定することで動的なタグが利用できます。

```astro title="src/components/DynamicTags.astro" /Element|(?<!My)Component/
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>こんにちは！</Element> <!-- <div>こんにちは！</div> としてレンダリングされます -->
<Component /> <!-- <MyComponent />としてレンダリングされます -->
```
:::

動的なタグを使用する場合：

- **変数名をキャピタライズする** 例えば、`element`ではなくて`Element`を利用します。そうでなければ、Astroは変数名をリテラルなHTMLタグとしてレンダリングします。

- **ハイドレーションのディレクティブはサポートしません.** [`client:*` ハイドレーションディレクティブ](/ja/core-concepts/framework-components/#インタラクティブなコンポーネント)を利用する場合、Astroは本番用にバンドルするコンポーネントを知る必要がありますが、動的なタグパターンではこれが動作しません。

### フラグメントと複数要素

Expand Down Expand Up @@ -216,10 +272,6 @@ Astroでは、JSXで使用されている`camelCase`の代わりに、すべて
<div class="box" data-value="3" />
```

#### `<head>`を変更する

JSXでは、ページの`<head>`タグを管理するために、特別なライブラリが使用されているのを見かけます。Astroでは必要ありません。トップレベルのレイアウトに `<head>` とその中身を記述します。

#### コメント

JSXではJavaScript形式のコメントを使用しますが、Astroでは標準的なHTMLのコメントを使用できます。
Expand Down Expand Up @@ -256,17 +308,17 @@ const name = "Astro"
<p>素敵な一日をお過ごしください！</p>
```

`Props`型のインターフェイスをエクスポートすることで、TypeScriptでpropsを定義できます。Astroはエクスポートされた`Props`インターフェイスを自動的に検出し、プロジェクトに対して型の警告やエラーを出します。propsは、`Astro.props`から再構成する際に、デフォルト値を与えることもできます。
TypeScriptの`Props`型のインターフェイスでpropsを定義できます。Astroはfrontmatter内の`Props`インターフェイスを自動的に検出し、プロジェクトに対して型の警告やエラーを出します。propsは、`Astro.props`から再構成する際に、デフォルト値を与えることもできます。

```astro ins={3-6} ins="as Props"
```astro ins={3-6}
---
// src/components/GreetingHeadline.astro
export interface Props {
interface Props {
name: string;
greeting?: string;
}
const { greeting = "Hello", name } = Astro.props as Props;
const { greeting = "Hello", name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>
```
Expand Down Expand Up @@ -470,9 +522,21 @@ Astroは、これらのJavaScriptクライアントサイドインポートを
</script>
```

## HTMLコンポーネント

Astroは`.html`ファイルをコンポーネントとしてインポートして使用したり、これらのファイルをページとして`src/pages`のサブディレクトリに設置することをサポートしています。フレームワークなしで構築された既存のサイトからコードを再利用したい場合や、コンポーネントに動的な機能がないことを確認したい場合はHTMLコンポーネントを利用するといいでしょう。

HTMLコンポーネントは有効なHTMLしか含むことができず、そのためAstroコンポーネントの主要機能が制限されます
- frontmatterやサーバーサイドのインポート、動的な記法をサポートしません
- すべての`<script>`タグはバンドルされずに残され、`is:inline`を持つ場合と同じように扱われます。
- [`public/`フォルダにあるアセット](/ja/guides/images/#public)のみを参照できます。

:::note
HTMLコンポーネント内の[`<slot />`要素](/ja/core-concepts/astro-components/#スロット)はAstroコンポーネントと同様に機能します。[HTML Web Component のSlot](https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot) 要素を使うためには, `<slot>` 要素に`is:inline`を追加します。
:::

## 次のステップ

📚 [Astroの組み込みコンポーネント](/ja/reference/api-reference/#built-in-components)を学びます。

📚 Astroプロジェクトでの[JavaScriptフレームワークコンポーネント](/ja/core-concepts/framework-components/)の使用方法について学びます。
📚 Astroプロジェクトでの[JavaScriptフレームワークコンポーネント](/ja/core-concepts/framework-components/)の使用方法について学びます。

0 comments on commit 5399c3a

Please sign in to comment.