QRL

QRL（Qwik URL）は、Qwikがコンテンツの遅延読み込みに使用する特定形式のURLです。

QRL

は、コードのハンドラーをどこから読み込むべきかをQwikに指示するために、HTMLの属性として残される、特別な形式のURLです。
遅延読み込みされるJavaScriptチャンクを指し示します。
チャンクから取得する必要があるシンボル名を含みます。
字句的にスコープされたオブジェクト参照を含む場合があります。（クロージャからのキャプチャされた変数）
相対パスを使用する場合は、解決のために`q:base`を使用します。

QRLエンコーディング

./path/to/chunk.js#SymbolName

最も単純な形式では、QRLには、ブラウザがリソースの遅延読み込みに使用できるURL（例：`./path/to/chunk.js`）と、遅延読み込みされたチャンクから取得する`SymbolName`が含まれています。

Qwikは、URLが相対パスの場合、`q:base`を使用してQRLを絶対URLに解決します。（`q:base`属性が存在しない場合、`document.baseURI`がベースとして使用されます。）

字句的にスコープされたキャプチャされた変数のエンコーディング

QRLは、字句的にスコープされた変数を復元することもできます。その場合、変数は`q:obj`属性へのインデックスの配列の形式で、QRLの最後にエンコードされます。

./path/to/chunk.js#SymbolName[0,1]

この配列は、`useLexicalScope()`によって変数の復元に使用されます。

例

QRLのすべての部分がどのように連携しているかの例を見てみましょう。

開発者は、単純なコンポーネントのコードを記述します。

export const Counter = component$((props: { step: number }) => {
  const count = useSignal(0);
 
  return <button onClick$={() => (count.value += props.step || 1)}>{count.value}</button>;
});

オプティマイザーは上記のコードを次のように分割します。

const Counter = component(qrl('./chunk-a.js', 'Counter_onMount'));

chunk-a.js

export const Counter_onMount = (props) => {
  const count = useSignal(0);
  return qrl('./chunk-b.js', 'Counter_onRender', [count, props]);
};

chunk-b.js

const Counter_onRender = () => {
  const [count, props] = useLexicalScope();
  return (
    <button onClick$={qrl('./chunk-c.js', 'Counter_onClick', [count, props])}>{count.value}</button>
  );
};

chunk-c.js

const Counter_onClick = () => {
  const [count, props] = useLexicalScope();
  return (count.value += props.step || 1);
};

レンダリングされたHTML

上記のコードが実行された後、このHTMLが生成されます。

仮定：`http://localhost/index.html`

<html>
  <body q:base="/build/">
    <button q:obj="456, 123" on:click="./chunk-c.js#Counter_onClick[0,1]">0</button>
    <script>
      /*Qwikloader script*/
    </script>
    <script type="qwik/json">
      {...json...}
    </script>
  </body>
</html>

最も重要なのは`on:click`属性です。この属性は、ユーザーがボタンをクリックしたときにQwikloaderによって読み取られます。

HTMLがブラウザに読み込まれ、Qwikloaderはグローバルな`click`リスナーを登録します。この時点では、他のJavaScriptは読み込まれ/実行されません。
ユーザーが`
Qwikloaderはイベントバブルパスを遡り、`
Qwikloaderは対応するチャンクの読み込みを試みます。そのためには、Qwikloaderは`./chunk-c.js`の相対パスを解決する必要があります。`

Qwikloaderは、`http://localhost/build/chunk-c.js`から`Counter_onClick`参照を取得して呼び出します。

const Counter_onClick = () => {
  const [count, props] = useLexicalScope();
  return (count.value += props.step || 1);
};

この時点で、実行はQwikloaderから遅延読み込みされたチャンクに引き渡されます。これは、QwikloaderがHTMLにインライン化されるため、できるだけ小さくできるようになっています。
`useLexicalScope`は`@builder.io/qwik`からインポートされ、`count`と`props`の取得を担当します。`const [count, props] = useLexicalScope();`
``JSONを解析し、`q:obj`属性ごとに逆シリアル化されたオブジェクトを配布します。私たちのケースでは
- `
  `はID`123`のオブジェクトを取得します。これは`Counter_onMount`関数で作成された`count`になります。
- `
`qwik/json`が逆シリアル化されると、`useLexicalScope`はQRLの`[0,1]`配列を使用して`q:obj="456, 123"`を調べ、ID`456`と`123`のオブジェクトを取得します。これらは`
`のプロパティと`Counter_onMount`関数の`store`です。

**注記：** パフォーマンス上の理由から、`q:obj`と`