本文へ移動
バージョン: 0.21

低レベルライブラリ内部

html! マクロの内部動作

html! マクロは、カスタムHTMLライクな構文で記述されたコードを有効なRustコードに変換します。Yewアプリケーションの開発にこのマクロは必須ではありませんが、推奨されます。このマクロによって生成されたコードは、必要に応じて直接使用できる公開YewライブラリAPIを使用しています。意図的に文書化されていないメソッドもいくつかあります。これは誤った使用を避けるためです。yew-macroの各アップデートごとに、生成されるコードはより効率的になり、html!構文への変更はほとんど(または全く)必要なく、破壊的な変更に対処します。

html! マクロを使用すると宣言的なスタイルでコードを記述できるため、UIレイアウトコードはページに生成されるHTMLとほぼ一致するようになります。これは、アプリケーションがよりインタラクティブになり、コードベースが大きくなるにつれて、ますます有用になります。DOMを手動で操作するためのすべてのコードを手動で記述する代わりに、マクロがそれを処理します。

html! マクロの使用は非常に魔法のように感じるかもしれませんが、隠すものはありません。その動作原理に興味がある場合は、プログラム内のhtml!マクロ呼び出しを展開してみてください。Rustマクロの展開を確認できるcargo expandという便利なコマンドがあります。cargo expandはデフォルトではcargoに含まれていないため、まだインストールしていない場合はcargo install cargo-expandでインストールする必要があります。Rust-Analyzerも、IDE内からマクロの出力を取得するメカニズムを提供しています。

html! マクロからの出力は、多くの場合非常に簡潔です!これは機能です。マシン生成コードは、アプリケーション内の他のコードと衝突することがあります。問題を回避するために、proc_macroの「衛生」が遵守されています。いくつかの例を以下に示します。

  1. yew::を使用する代わりに、マクロは::yew::を生成して、Yewパッケージが正しく参照されていることを確認します。これが、Vec::new()ではなく::alloc::vec::Vec::new()が呼び出される理由でもあります。
  2. 潜在的なトレイトメソッド名の衝突のため、を使用して、正しいトレイトのメンバーを使用していることを確認しています。

仮想DOMとは?

DOM(「ドキュメントオブジェクトモデル」)は、Webページのブラウザによって管理されるHTMLコンテンツの表現です。「仮想」DOMは、アプリケーションメモリに保持されているDOMのコピーにすぎません。仮想DOMを管理すると、メモリオーバーヘッドは高くなりますが、ブラウザAPIの使用を回避または遅延させることで、バッチ処理と高速読み取りが可能になります。

メモリにDOMのコピーを持つことは、宣言型UIの使用を促進するライブラリにとって役立つ場合があります。ユーザーイベントに応答してDOMをどのように変更すべきかを記述する特定のコードが必要になるのではなく、ライブラリはDOM「差分」を使用した一般的なアプローチを使用できます。Yewコンポーネントが更新され、レンダリング方法を変更する場合、Yewライブラリは仮想DOMの2番目のコピーを作成し、現在画面に表示されているものとミラーリングする仮想DOMと直接比較します。2つの間の「差分」(または違い)は、増分更新に分割され、ブラウザAPIを使用してバッチで適用できます。更新が適用されると、古い仮想DOMのコピーは破棄され、新しいコピーが将来の差分チェックのために保存されます。

この「差分」アルゴリズムは、時間とともに最適化して、複雑なアプリケーションのパフォーマンスを向上させることができます。YewアプリケーションはWebAssemblyで実行されるため、Yewは将来、より高度なアルゴリズムを採用する上で競争上の優位性があると信じています。

Yew仮想DOMは、ブラウザDOMと完全に1対1に対応しているわけではありません。DOM要素を整理するための「リスト」と「コンポーネント」も含まれています。リストは単なる要素の順序付きリストですが、はるかに強力になる可能性もあります。各リスト要素に「キー」を注釈付けることで、アプリケーション開発者は、リストが変更されたときに差分更新を計算するために必要な作業が最小限になるように、Yewが追加の最適化を行うのに役立てることができます。同様に、コンポーネントは、パフォーマンスを向上させるために再レンダリングが必要かどうかを示すカスタムロジックを提供します。

Yewスケジューラとコンポーネントスコープイベントループ

ドキュメントへの貢献 – yew::scheduleryew::html::scopeの動作を詳細に説明してください

参考資料