---
title: 'リテラルと式'
---

## リテラル

式が `Display` を実装する型に解決される場合、それらは文字列に変換され、[Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) ノードとしてDOMに挿入されます。

:::note
文字列リテラルは `Text` ノードを作成し、ブラウザはそれを文字列として扱います。そのため、式に `<script>` タグが含まれていても、式を `<script>` ブロックでラップしない限り、XSS などのセキュリティ問題に遭遇することはありません。
:::

すべての表示テキストは式と見なされるため、`{}` ブロックで囲む必要があります。これは、Yew と通常の HTML 構文の最大の違いです。

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

let text = "lorem ipsum";
html!{
    <div>{text}</div>
    <div>{"dolor sit"}</div>
    <span>{42}</span>
};
```

## 式

`{}` ブロックを使用して、HTML 内に式を挿入できます。それらが `Html` に解決される限り：

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

let name = "Yew";
html! {
  <div>{ format!("Hello, {name}!") }</div>
};
```

条件付きレンダリングには、式ブロック内でネストされた `html!` 呼び出しを使用するのではなく、`html!` 内で直接 `if`/`else` と `match` を使用してください：

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

let show_link = true;

html! {
  <div>
    if show_link {
      <a href="https://example.com">{"Link"}</a>
    }
  </div>
};
```

通常、複雑なロジックを関数やクロージャに抽出することが有意義です：

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

let show_link = true;
let maybe_display_link = move || -> Html {
  if show_link {
    html! {
      <a href="https://example.com">{"Link"}</a>
    }
  } else {
    html! {}
  }
};

html! {
     <div>{maybe_display_link()}</div>
};
```
