---
title: 'クラス'
description: 'クラスを処理するための便利なマクロ'
---

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

## クラス

`Classes` 構造体は、HTML クラスを処理するために使用できます。

文字列をコレクションにプッシュすると、`Classes` は各クラスが一つの要素を持つことを保証します。単一の文字列が複数のクラスを含む場合でも同様です。

`Classes` は、`Extend`（例：`classes1.extend(classes2)`）や `push()`（例：`classes1.push(classes2)`）を使用してマージすることもできます。`Into<Classes>` を実装している任意の型を既存の `Classes` にプッシュすることができます。

`classes!` は、単一の `Classes` を作成するための便利なマクロです。その入力はカンマで区切られた式のリストを受け入れます。唯一の要件は、各式が `Into<Classes>` を実装していることです。

<Tabs>
  <TabItem value="Literal" label="Literal">

```rust
use yew::{classes, html};

html! {
    <div class={classes!("container")}></div>
};
```

  </TabItem>
  <TabItem value="Multiple" label="Multiple">

```rust
use yew::{classes, html};

html! {
  <div class={classes!("class-1", "class-2")}></div>
};
```

  </TabItem>
  <TabItem value="String" label="String">

```rust
use yew::{classes, html};

let my_classes = String::from("class-1 class-2");

html! {
  <div class={classes!(my_classes)}></div>
};
```

  </TabItem>
  <TabItem value="Optional" label="Optional">

```rust
use yew::{classes, html};

html! {
  <div class={classes!(Some("class"))} />
};
```

  </TabItem>
  <TabItem value="Vector" label="Vector">

```rust
use yew::{classes, html};

html! {
  <div class={classes!(vec!["class-1", "class-2"])}></div>
};
```

  </TabItem>
  <TabItem value="Array" label="Array">

```rust
use yew::{classes, html};

html! {
  <div class={classes!(["class-1", "class-2"])}></div>
};
```

  </TabItem>
</Tabs>

## クラスを受け入れるコンポーネント

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

#[derive(PartialEq, Properties)]
struct Props {
    #[prop_or_default]
    class: Classes,
    fill: bool,
    children: Html,
}

#[function_component]
fn MyComponent(props: &Props) -> Html {
    let Props {
        class,
        fill,
        children,
    } = props;
    html! {
        <div
            class={classes!(
                "my-container-class",
                fill.then(|| Some("my-fill-class")),
                class.clone(),
            )}
        >
            { children.clone() }
        </div>
    }
}
```
