イベントの監視

あらゆるフレームワークの重要な機能は、ユーザーイベントを簡単に監視できるようにすることです。

Qwikでは、対応するブラウザイベントをサブスクライブする要素にon<Eventname>$属性を配置することで、さまざまなイベントを監視できます。

あなたのタスクは、<button>要素にclickイベントハンドラーを追加することです。まず、onClick$プロパティを追加し、alert('Hello World!')を呼び出す関数にバインドします。

ランタイムの理解

ここまでは通常のフレームワークの動作のように見えるかもしれませんが、Qwikは他のフレームワークとはまったく異なる方法で動作します。

$を見るたびに、「ここで遅延ロードが発生する」と考えるべきです。

ブラウザの開発者ツールを開くと、ボタンをクリックするまでJavaScriptがロードされないことに気づくでしょう。

ブラウザイベントをサブスクライブするためにJavaScriptが必要な場合、QwikはJavaScriptをロードせずにこのインタラクションをどのように実現するのでしょうか？

以下のアプリケーションの簡略化されたHTMLを考えてみましょう。

ヒント：サーバーによって生成された実際のHTMLを表示するには、HTMLタブをクリックしてください。

<html>
  <body>
    <button on:click="chunk-abc.js#App_onClick">
      Click Me
    </button>
    <script id="Qwikloader">....</script>
  </body>
</html>

APIには$が含まれているため、Qwikオプティマイザーは遅延ロードのためにコードを変換できます。

$は、オプティマイザーに遅延ロードのためにコードを抽出するよう指示する信号です。
$は、この時点で遅延ロードの「魔法」が発生することを示す信号です。
TypeScriptのルールにより、$が表示されるべき場所をスキップしないことが保証されます。

オプティマイザーは$を探し、$でラップされた関数を別の遅延ロード可能なチャンクに抽出します。
サーバーがページをレンダリングすると、JSXが実行され、クリックリスナーがあることに気づきます。クリックリスナーは、<button>要素にon:click属性としてシリアライズされます。その後、Qwikはクライアントでこのイベントをどのようにフックするかを知っています。
QwikloaderスクリプトはHTMLにインライン化されます。Qwikloaderスクリプトは、ブラウザのすべてのイベントに対してグローバルリスナーを設定します。Qwikloaderは約1kbで、約1msで実行されます。
ユーザーがボタンをクリックすると、Qwikloaderがイベントをインターセプトし、on:click属性を持つ要素を探します。
on:click属性には、次のものが含まれています。
- 関連するコードをダウンロードするためのURL。
  - クリックと実行の間の遅延を避けるために、Qwikは指定されたコンポーネントに関連するコードをプリフェッチします。
- 実行する必要がある関数を含むダウンロードされたチャンクによってエクスポートされるシンボル。
コードがダウンロードされると、関数が実行されます。

上記の動作は、コードを積極的にダウンロードして実行したり、コストのかかるハイドレーションを実行したりせずに、Qwikアプリケーションに瞬時のオンプロパティ（再開可能性）を与えるものです。

注：ユーザーアクションと応答の間の遅延を避けるために、Qwikはバックグラウンドでコードをプリフェッチします。

次へドキュメント/ウィンドウの監視

チュートリアルの編集