🧪 開発ツール

段階: プロトタイピング

これは最終的に、アプリケーションをより適切にデバッグするためのブラウザの開発ツールになります。現在は、アプリケーションの状態をより理解するためのユーティリティのコレクションです。

qwik/json

Qwikはアプリケーションの状態を<script type="qwik/json">タグにシリアライズします。これにより、DOMを見てアプリケーションの状態を検査できます。残念ながら、このフォーマットは人間が読める形式ではありません。以下の手順では、JSONをより読みやすい形式に解析する方法について説明します。

1. ブラウザの開発ツールを開きます。
2. コンソールで、次のJavaScriptを実行します

import("https://qwik.dokyumento.jp/devtools/json/");

3. このスクリプトはqwik/jsonを解析し、人間がより読める形式を返します。

結果の出力のほとんどは自明であるはずです。ただし、方向性を示すために、ここでいくつかの重要なポイントを示します。（これは、出力の完全なドキュメントではありません。）

• objs: これらは、シリアライズされたシステム内のオブジェクトです。
• ctx: QContextオブジェクトのセットです。
• refs: QRefオブジェクトのセットです。
• sub: QSubscriptionオブジェクトのセットです。
• QContext: Qwikが特定のコンポーネントのためにシリアライズする必要があった状態を表します。これには、コンポーネントのpropsと、コンポーネントが実行する必要がある可能性のあるTaskオブジェクトのセットが含まれます。
• QRef: 要素にリスナーがある場合、QRefはリスナーと、リスナーがキャプチャした可能性のあるオブジェクトを収集します。

Qwikのシリアライゼーションの考え方は、Qwikは最小限の情報のみをシリアライズすることです。このため、QContextまたはQRefから到達可能なオブジェクトのみをシリアライズします。これは、これらの2つから到達できないオブジェクトがある場合、そのオブジェクトはシリアライズされないことを意味します。これは良いことで、Qwikがアプリケーションの状態全体をシリアライズするのではなく、レンダリングされているコンポーネントから到達可能な状態のみをシリアライズすることを意味します。

反対に、オブジェクトがシリアライズされているのに、シリアライズされるべきではないと思われる場合は、そのオブジェクトを逆方向にたどって、シリアライズされている理由を確認できます。この目的のために、すべてのオブジェクトには、オブジェクトが保持される原因となっているオブジェクトを指す__backRefプロパティが含まれています。オブジェクト参照をそのルート（QContextまたはQRefである必要があります）まで逆方向にたどることによって、特定のオブジェクトがなぜシリアライズされているのかを判断できます。同様に、コードをリファクタリングして、当該オブジェクトのシリアライゼーションを防ぐことができるかどうかを確認することもできます。