メインコンテンツまでスキップ
Version: Next

HTML

html! マクロを使用すると、宣言的に HTML および SVG コードを記述できます。これは、JavaScript で HTML に似たコードを記述できる拡張機能である JSX に似ています。

重要な注意点

  1. html! {} マクロは 1 つのルート HTML ノードしか受け入れません（これを回避するには、fragments または iterators を使用できます）
  2. 空の html! {} 呼び出しは有効で、何もレンダリングしません
  3. リテラルは常に引用符で囲み、中括弧で囲む必要があります：html! { <p>{ "Hello, World" }</p> }
  4. html! マクロはすべてのタグ名を小文字に変換します。大文字の文字（特定の SVG 要素に必要な文字）を使用するには、動的タグ名 を使用してください：html! { <@{"myTag"}></@> }
note

html! マクロはコンパイラのデフォルトの再帰制限に達する可能性があります。コンパイル エラーが発生した場合は、クレートのルートに #![recursion_limit="1024"] のような属性を追加して問題を解決してください。

タグ (Tags) 構造​

タグ (Tags) は HTML タグに基づいています。コンポーネント、要素、およびリストはすべてこのタグ構文に基づいています。

タグは自己閉鎖 <... /> であるか、開始タグごとに対応する終了タグが必要です。

use yew::prelude::*;

html! {
  <div id="my_div"></div>
};
use yew::prelude::*;

html! {
  <input id="my_input" />
};
tip

便利のために、通常は閉じタグが必要な要素も自己閉じが許可されています。例えば、html! { <div class="placeholder" /> } と記述することができます。

複雑なネストされた HTML および SVG レイアウトを作成するのは依然として簡単です：

use yew::prelude::*;

html! {
    <div>
        <div data-key="abc"></div>
        <div class="parent">
            <span class="child" value="anything"></span>
            <label for="first-name">{ "First Name" }</label>
            <input type="text" id="first-name" value="placeholder" />
            <input type="checkbox" checked=true />
            <textarea value="write a story" />
            <select name="status">
                <option selected=true disabled=false value="">{ "Selected" }</option>
                <option selected=false disabled=true value="">{ "Unselected" }</option>
            </select>
        </div>
    </div>
};

Lints​

もし、Rust コンパイラの開発者バージョンを使用して Yew をコンパイルする場合、マクロは一般的な落とし穴について警告します。もちろん、安定版コンパイラを使用してリリースビルドを行う必要があるかもしれません（例えば、組織のポリシーでそうする必要がある場合など）。しかし、安定版ツールチェーンを使用している場合でも、cargo +nightly check を実行すると、HTML コードを改善する方法がいくつか示されるかもしれません。

現在、これらのリントは主にアクセシビリティに関連しています。リントに関するアイデアがあれば、この問題に自由にコメントしてください。

属性とプロパティの指定​

属性は通常の HTML と同じ方法で要素に設定されます：

use yew::prelude::*;

let value = "something";
html! { <div attribute={value} /> };

属性は要素名の前に ~ を使用して指定されます：

use yew::prelude::*;

html! { <my-element ~property="abc" /> };
tip

値がリテラルの場合、値を囲む中括弧は省略できます。

リテラルとは

リテラルは、Rust のすべての有効なリテラル式です。注意してください、負の数はリテラルではありません、したがって中括弧で囲む必要があります {-6}。

コンポーネント属性

コンポーネント属性は Rust オブジェクトとして渡され、ここで説明されている要素のパラメータ (Attributes) / 属性 (Properties) とは異なります。 コンポーネント属性で詳細を確認してください。

特殊属性​

いくつかの特殊な属性があり、これらは直接 DOM に影響を与えるのではなく、Yew 仮想 DOM の指示として機能します。現在、2 つの特殊な属性があります：ref と key。

ref は、基礎となる DOM ノードに直接アクセスして操作することを可能にします。詳細については、Refsを参照してください。

一方、key は要素に一意の識別子を提供し、Yew が最適化のために使用できます。

info

詳細はこちら

条件付きレンダリング​

Rust の条件構造を使用して、条件付きでマークアップをレンダリングできます。現在、if と if let のみがサポートされています。

use yew::prelude::*;

html! {
  if true {
      <p>{ "True case" }</p>
  }
};
info

条件付きレンダリングの詳細については、条件付きレンダリングのセクションを参照してください。