---
title: '要素'
description: 'HTML および SVG 要素のサポート'
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

## DOM ノード

Yew で DOM ノードを手動で作成または管理する理由はたくさんあります。たとえば、管理されたコンポーネントと競合する可能性のある JS ライブラリとの統合などです。

`web-sys` を使用すると、DOM 要素を作成して `Node` に変換できます。次に、`VRef` を使用して `Html` 値として使用できます：

```rust
use web_sys::{Element, Node};
use yew::prelude::*;
use gloo::utils::document;

#[component]
fn MyComponent() -> Html {
    // メモ化された関数、一度だけ実行されます
    let node = use_memo(
        (),
        |_| {
            // ドキュメントから div 要素を作成
            let div: Element = document().create_element("div").unwrap();
            // コンテンツ、クラスなどを追加
            div.set_inner_html("Hello, World!");
            // Element を Node に変換
            let node: Node = div.into();
            // その Node を Html 値として返す
            Html::VRef(node)
        },
    );

    // use_memo は Rc ポインタを返すので、参照解除とクローンが必要です
    (*node).clone()
}

```

## 動的なタグ名

高階コンポーネントを構築する際、タグ名が静的ではない状況に遭遇することがあります。例えば、`Title` コンポーネントがあり、レベル属性に応じて `h1` から `h6` までの任意の内容をレンダリングする場合です。大きなマッチ式を使用する代わりに、Yew は `@{name}` を使用してタグ名を動的に設定することを許可します。ここで、`name` は文字列を返す任意の式です。

```rust
use yew::prelude::*;

let level = 5;
let text = "Hello World!".to_owned();

html! {
    <@{format!("h{}", level)} class="title">{ text }</@>
};
```

## 動的な属性名

動的なタグ名と同様に、属性名も実行時に決定できます。これは HTMX のようなコロンを含む属性（例: `hx-on:click`）を使用するライブラリや、属性名がコンパイル時に不明な場合に便利です。

動的な属性名には、文字列リテラルと式の 2 つの構文があります。

### 文字列リテラルの属性名

文字列リテラルを属性名として直接使用します：

```rust
use yew::prelude::*;

html! {
    <div "hx-on:click"="alert('Clicked!')" />
};
```

中括弧で囲んだ値でも使用できます：

```rust
use yew::prelude::*;

let handler = "alert('Clicked!')";

html! {
    <div "hx-on:click"={handler} />
};
```

### 式の属性名

任意の式を中括弧で囲んで、属性名を動的に計算します：

```rust
use yew::prelude::*;

let attr_name = format!("hx-on:{}", "click");

html! {
    <div { attr_name }={ "alert('Clicked!')" } />
};
```

式は `Into<AttrValue>` を実装する型（例: `String`、`&str`、`AttrValue`）に評価される必要があります。

:::note
動的な属性名は HTML 要素でのみサポートされています。コンポーネントのプロパティには静的な Rust 識別子が必要です。[コンポーネントプロパティ](../function-components/properties.mdx)を参照してください。
:::

## 論理値属性

いくつかのコンテンツ属性（例えば、checked、hidden、required）は論理値属性と呼ばれます。Yew では、論理値属性はブール値に設定する必要があります：

```rust
use yew::prelude::*;

html! {
    <div hidden=true>
        { "This div is hidden." }
    </div>
};
```

これは次の **HTML** と機能的に同等です：

```html
<div hidden>This div is hidden.</div>
```

論理値属性を false に設定することは、その属性を使用しないことと同等です。論理式の値を使用することもできます：

```rust
use yew::prelude::*;

let no = 1 + 1 != 2;

html! {
    <div hidden={no}>
        { "This div is NOT hidden." }
    </div>
};
```

これは次の **HTML** と機能的に同等です：

```html
<div>This div is NOT hidden.</div>
```

## 文字列に似た属性

いくつかの論理値属性に加えて、多くの文字列に似た HTML 属性を扱うことがあります。Yew には、文字列に似た値をコンポーネントに渡すためのいくつかのオプションがあります。

```rust
use yew::{html, virtual_dom::AttrValue};

let str_placeholder = "I'm a str!";
let string_placeholder = String::from("I'm a String!");
let attrvalue_placeholder = AttrValue::from("I'm an AttrValue!");

html! {
    <div>
        <input placeholder={str_placeholder} />
        <input placeholder={string_placeholder} />
        <input placeholder={attrvalue_placeholder} />
    </div>
};
```

それらはすべて有効ですが、特にクローンを作成する必要がある場合や、別のコンポーネントに属性として渡す必要がある場合は、Yew のカスタム `AttrValue` を使用することをお勧めします。

## HTML 要素のオプション属性

ほとんどの HTML 属性はオプションの値（Some(x) または None）を使用できます。これにより、属性がオプションとしてマークされている場合にその属性を省略できます。

```rust
use yew::prelude::*;

let maybe_id = Some("foobar");

html! {
    <div id={maybe_id}></div>
};
```

属性が `None` に設定されている場合、その属性は DOM に設定されません。

## 関連例

- [インライン HTML](https://github.com/yewstack/yew/tree/master/examples/inner_html)
