---
title: 'リスト'
---

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

## イテレータ

Yew は、イテレータから HTML を構築するための 2 つの異なる構文をサポートしています。

<Tabs>
  <TabItem value="Syntax type 1" label="Syntax type 1">

最初の方法は、イテレータの最終変換で `collect::<Html>()` を呼び出すことで、Yew が表示できるリストを返します。

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

let items = (1..=10).collect::<Vec<_>>();

html! {
    <ul class="item-list">
        { items.iter().collect::<Html>() }
    </ul>
};
```

  </TabItem>
  <TabItem value="Syntax type 2" label="Syntax type 2">

もう一つの方法は、`for` キーワードを使用することです。これはネイティブの Rust 構文ではなく、HTML マクロによってイテレータを表示するために必要なコードを出力します。

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

let items = (1..=10).collect::<Vec<_>>();

html! {
    <ul class="item-list">
        { for items.iter() }
    </ul>
};
```

  </TabItem>
</Tabs>

## キー付きリスト

キー付きリストは、すべての子要素にキーがある最適化されたリストです。
`key` は Yew が提供する特別な属性で、HTML 要素やコンポーネントに一意の識別子を与え、Yew 内部での最適化に使用されます。

:::caution
キーは各リスト内で一意である必要があり、HTML の `id` のようにグローバルに一意である必要はありません。リストの順序に依存してはいけません。
:::

リストにキーを追加することを常にお勧めします。

一意の `String`、`str`、または整数を特別な `key` 属性に渡すことでキーを追加できます。

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

let names = vec!["Sam","Bob","Ray"]

html! {
    <div id="introductions">
        {
            names.into_iter().map(|name| {
                html!{<div key={name}>{ format!("Hello, I'am {}!",name) }</div>}
            }).collect::<Html>()
        }
    </div>
};

```

### パフォーマンスの最適化

キー付きリストのパフォーマンス向上をテストするための[例](https://github.com/yewstack/yew/tree/master/examples/keyed_list)があります。以下は簡単なテスト手順です：

1. [オンラインデモ](https://examples.yew.rs/keyed_list)にアクセスします。
2. 500個の要素を追加します。
3. キーを無効にします。
4. リストを反転します。
5. "最後のレンダリングにかかった時間 Xms" を確認します（この記事の執筆時点では約60ms）。
6. キーを有効にします。
7. 再度リストを反転します。
8. "最後のレンダリングにかかった時間 Xms" を確認します（この記事の執筆時点では約30ms）。

この記事の執筆時点では、500個のコンポーネントに対して速度が2倍に向上しました。

### 原理の説明

通常、リストを反復処理する際には、各リスト項目にキーを追加するだけで済みます。データの順序が変わる可能性があるためです。
リストを再レンダリングする際に、キーは調整プロセスを高速化するために使用されます。

キーがない場合、例えば `["bob", "sam", "rob"]` を反復処理すると、最終的に以下のようなHTMLが生成されます：

```html
<div id="bob">My name is Bob</div>
<div id="sam">My name is Sam</div>
<div id="rob">My name is rob</div>
```

次のレンダリングでリストが `["bob", "rob"]` に変更された場合、Yew は id="rob" の要素を削除し、id="sam" を id="rob" に更新できます。

各要素にキーを追加すると、初期の HTML は変わりませんが、変更後のリスト `["bob", "rob"]` をレンダリングすると、Yew は2番目の HTML 要素のみを削除し、他の要素はそのまま残ります。キーを使用して要素を関連付けることができるためです。

コンポーネントから別のコンポーネントに切り替える際に、両方に最高レンダリング要素として div がある場合にバグ/"機能" に遭遇した場合。
Yew はこれらの状況で最適化として既にレンダリングされた HTML div を再利用します。
その div を再利用せずに再作成する必要がある場合は、異なるキーを追加することで再利用されなくなります。

## さらなる読み物

-   [TodoMVC の例](https://github.com/yewstack/yew/tree/master/examples/todomvc)
-   [キー付きリストの例](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
-   [ルーティングの例](https://github.com/yewstack/yew/tree/master/examples/router)
