mirror of https://github.com/yewstack/yew
76 lines
2.1 KiB
Plaintext
76 lines
2.1 KiB
Plaintext
---
|
||
title: 'html! マクロを使用してHTMLを処理する'
|
||
description: 'これはHTMLですが、完全にそうではありません！'
|
||
comment: 'ファイルを短く簡潔に保つようにしてください。これは、読者がYewのコンポーネントをより簡単に理解できるようにするためであり、正確なAPIドキュメントを提供するためではありません。'
|
||
---
|
||
|
||
import Tabs from '@theme/Tabs'
|
||
import TabItem from '@theme/TabItem'
|
||
|
||
`html!` マクロを使用して、HTML に似た式を記述できます。Yew はバックグラウンドでそれを DOM を表現する Rust コードに変換します。
|
||
|
||
```rust
|
||
use yew::prelude::*;
|
||
|
||
let my_header: Html = html! {
|
||
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
|
||
};
|
||
```
|
||
|
||
フォーマットされた式と同様に、波括弧を使用して周囲のコンテキストの値を HTML に埋め込むことができます：
|
||
|
||
```rust
|
||
use yew::prelude::*;
|
||
|
||
let header_text = "Hello world".to_string();
|
||
let header_html: Html = html! {
|
||
<h1>{header_text}</h1>
|
||
};
|
||
|
||
let count: usize = 5;
|
||
let counter_html: Html = html! {
|
||
<p>{"My age is: "}{count}</p>
|
||
};
|
||
|
||
let combined_html: Html = html! {
|
||
<div>{header_html}{counter_html}</div>
|
||
};
|
||
```
|
||
|
||
`html!` を使用する際の重要なルールの 1 つは、1 つのラッピングノードしか返せないということです。複数の要素のリストをレンダリングするために、`html!` は空のタグ（フラグメント）の使用を許可しています。空のタグは名前のないタグで、それ自体は HTML 要素を生成しません。
|
||
|
||
<Tabs>
|
||
<TabItem value="Invalid" label="Invalid">
|
||
|
||
```rust , compile_fail
|
||
use yew::html;
|
||
|
||
// エラー：ルート HTML 要素は1つだけ許可されています
|
||
html! {
|
||
|
||
<div></div>
|
||
<p></p>
|
||
|
||
};
|
||
```
|
||
|
||
</TabItem>
|
||
<TabItem value="Valid" label="Valid">
|
||
|
||
```rust
|
||
use yew::html;
|
||
|
||
// 修正：HTML 空のタグを使用してラップする
|
||
html! {
|
||
<>
|
||
<div></div>
|
||
<p></p>
|
||
</>
|
||
};
|
||
```
|
||
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
詳細については、[HTML の詳細](concepts/html/introduction.mdx)を参照してください。
|