EY-Office ブログ

今回はQwikの解説編です。

まずは前回の復習ですが、

• Qwikは高速なWebアプリを構築できるフレームワークです
• QwikはReactの技術（JSX, Props, State, Hooks）が使われていて移行が容易そうです
• Qwikのコードには$の付く特殊な関数が使われています

SPAの欠点

ReactやVueのようなSPA(Single Page Application)はインタラクティブなWebアプリの構築では一般化していますが、問題点もあります。

それは、アクセスしてから最初の画面が表示されるまで時間がかかる事です。下の画像のようにブラウザーからサーバ−にリクエストが送られると

1. （小さなHTML片と）大きなJavaScriptファイルがダウンロードされます
2. 全てのJavaScriptが受信されるとJavaScriptが実行されます。SPAではJavaScriptで表示データ(DOM)を作成し、画面が表示されます

クリックすると大きな画像が表示できます

ただしWi-Fiや5Gで接続された最新のスマフォや社内システムのように、

• サーバーと端末の間は高速なネットワークで接続されている
• ブラウザーの動いているスマフォ/PCは十分な性能をもっている

の場合は、あまり問題にならないと思います。

しかし4G(3G)接続の旧式なスマフォでアクセスする場合には、

• 状態の良くないモバイル通信速度が出ない
• スマフォの性能が低くJavaScriptの実行に時間がかかる

などから、アプリが表示されるまで待たされる事になります。

また、SPAはSEO（検索エンジン最適化）的にも少し不利です。昔と違いGoogle等のクローラーはJavaScriptも解釈するので通常のサービスでは問題ありませんが、SPAサイトのクロールは優先順位が下がるので、ニュースサイトのようにいち早くGoogle等にクロールしてほしいサービスではSPAは不利になります。

解決策の1つSSR

このようなSPAの欠点を解決する方法として利用されているのが、SSR(Server Side Rendering)です。SSRを実現するフレームワークとしてはNext.jsが有名ですね。

クリックすると大きな画像が表示できます

SSRでは

1. サーバー側でページ（HTML）を生成し、ブラウザーにはHTMLを送信します
   • したがって、画面が早めに表示できます、またSEOにも有利ななります
   • ただしボタン等を押しても、JavaScriptがないので反応はできません
   • ReactやVueにはサーバー上のNode.jsでページ生成を行なう機能があるので、SPAのプログラムはわずかな変更で使えます
   • サーバー側で生成したページやその一部をキャッシュするような機構を追加する事で、ページ生成の速度を上げる事が可能です
2. 1.と平行に本来のSPAのJavaScriptファイルも平行して送信します
3. 全JavaScriptが受信された後ですが、ボタン等のイベントハンドラー等をDOMに設定します
   • すでに1.で表示データ(DOM)を作られているので、イベントハンドラー等を設定するだけで済みます
   • この処理はHydrationと呼ばれています
   • とうぜん表示データ作成に比べると高速です

SPAに比べると早めに画面が表示されるので、心理的にはかなり高速化された印象を与えると思います。しかし、ボタン等に反応できるようになるまでは、少し待たされる事になります。

そしてQwik

やっとQwikの解説です。QwikもServer Side Renderingです。
ただし、最初にブラウザーに送られるのはHTMLに加えて小さなQwikランタイムのJavaScriptファイルが送られます。

クリックすると大きな画像が表示できます

ブラウザーに画面が表示されボタン等が押されると、

1. 小さなQwikランタイムが動き、ボタンのイベントに対応したJavaScriptコードをサーバーにリクエストします
2. サーバーからイベント処理の小さなJavaScriptコードが読み込まれる
3. 読み込まれたJavaScriptを実行する

1度読み込まれたJavaScriptコードはブラウザー内に常駐されるので、次回のボタンの処理では1.2.は必要ありません。

このような仕組みを実現するために、React等とは違いQwikでは小さなJavaScriptの集まりにする必要がありますが、このために$の付く特殊な関数が使われています。
component$()や$()で定義された関数やコンポーネントの小さなJavaScriptのコード片は、本当に必要になった時点でブラウザーにダウンロードされ実行されます。

ただし、サーバーとの通信が多いとネット接続が遅い場合には不利になるので、本番用にビルドすると適度な大きさにまとめたJavaScriptファイルが作られ、適宜に読み込みキャッシュするようになっています。

まとめ

このようにQwikはJavaScriptを小さなコード片に分け、必要になるまでブラウザーに送らない事により、アプリが利用可能になるまでの時間を最短にできます。たまボタンクリック等で送られるJavaScriptコード片も小さいので、レスポンス時間も短くできる新しいフレームワークです。

また、現在ひろく使われているReactのコードから容易に移行できるもの素晴らしいと思います。

おまけ

BingのAIチャットさんのQwikの回答

Qwikは、フロントエンドのフレームワークで、インタラクティブなアプリケーションを構築するためのものです。Qwikの特徴は、ユーザーがトリガーしたアクションに必要なコードだけをダウンロードして実行するということです。これにより、モバイルデバイスでも瞬時に起動するアプリケーションを実現できます。

は正解でしたね。😁