はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Qwik に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Qwik に少しでも興味のある方は、ぜひご覧ください。

フロントエンドの世界 2024 について

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

もくじ

はじめに
フロントエンドの世界 2024 について
もくじ
Qwik とは?
QwikCity とは?
Qwik の Hello World
Qwik のメリット・デメリット
参考
おわりに

Qwik とは?

Qwik は、従来の SSR 後に必要とされるハイドレーションを回避し、Resumable（再開可能性）という概念を採用した WEB アプリケーション構築用フレームワークです。

1. Resumable
Qwik の最大の特徴は、「Resumable（再開可能性）」と呼ばれる概念です。

これは、サーバーサイドでレンダリングされたアプリケーションの状態とイベントハンドラをシリアライズし、クライアントに送ることで、追加のハイドレーションなしに直接インタラクティブにできる仕組みです。

従来のフレームワークでは、クライアント側で全てのコンポーネントを再初期化する必要がありましたが、Qwik はコンポーネントの状態と構造をシリアライズし、必要な部分だけを自動で遅延ロードします。

(参考: Resumable vs. Hydration)

2. 遅延ロード
Qwik は、従来のフレームワークで一般的だった大量の JavaScript の初期ロードを避け、必要な時に必要なコードのみをロードする遅延ロードをデフォルトで適応します。

従来の SPA では数百キロバイトの JavaScript を初期ロードする必要がありましたが、Qwik では、初期ロード時の JavaScript サイズを最小限に抑えることが可能です。

3. React との類似性
Qwik は、React に近い構文やコンポーネントモデルを採用しているため、React や JSX の経験がある開発者にとって学習しやすいフレームワークです。Qwik のコンポーネントは関数ベースで作成され、JSX 構文を使用します。

基本的な Qwik コンポーネントの例

Qwikコンポーネント

import { component$ } from "@builder.io/qwik";

export const MyComponent = component$(({ name }) => {
  return <h1>Hello, {name}!</h1>;
});

基本的な React コンポーネントの例

Reactコンポーネント

import React from 'react';

export const MyComponent = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

React との類似点

JSX 構文を用いたコンポーネントの UI 記述
コンポーネントを関数として定義し、再利用可能な UI パーツを作成
親コンポーネントから子コンポーネントへ Props を渡してのデータ共有

QwikCity とは?

QwikCity は、Qwik のためのメタフレームワークで、ルーティング、レイアウト、エンドポイントなど、フルスタックのウェブアプリケーションを構築するために必要な機能を提供します。

Next.js や Remix と同様の役割を果たし、サーバーサイドレンダリング（SSR）やプリレンダリングをサポートしています。

Qwik の Hello World

1. プロジェクトのセットアップ

Qwik で Hello World を表示するミニマムなコード例です。

npm create qwik@latest your-qwik-project
cd your-qwik-project
npm install

2. src/routes/index.tsx の編集

src/routes/index.tsx

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  const name = "Qwik"

  return (
    <div>
      <h1>Hello {name}!</h1>
    </div>
  );
});

3. 結果の確認

ブラウザで http://localhost:5173/ を開くと、Hello Qwik! と表示されます。

Qwik のメリット・デメリット

メリット

1.高速な初期ロード
Resumability の概念により、ハイドレーションのオーバーヘッドがなく、非常に高速な初期ロードを実現します。

2. ハイパフォーマンス
Qwik は、コンポーネントの遅延ロードや Resumability によって、JavaScript の実行を最小限に抑えます。

これにより、ページ遷移やインタラクション時に必要なコードのみがロード・実行されるため、パフォーマンスを常に最適化できます。

さらに、Qwik はゼロオーバーヘッドを目指した設計となっており、大規模なアプリケーションでも高いパフォーマンスを維持することが可能です。

3. サーバーサイドレンダリング
デフォルトで SSR をサポートし、SEO や初期表示パフォーマンスを向上させます。

デメリット

1. 学習コスト
Resumability という新しい概念は、既存のフレームワークとは異なるアプローチを取るため、学習に時間がかかる可能性があります。

また Qwik の Resumability 概念を活用し、最大限のパフォーマンスを引き出すには、コンポーネントの設計やコードの分割に関する深い理解が求められます。最適化が不十分だと、期待したパフォーマンス向上が得られない可能性があります。

2. エコシステムの制限
Qwik は比較的新しいフレームワークであるため、React や Vue.js のような成熟したエコシステムと比較すると、開発に必要なツールやライブラリが不足している可能性があります。

3. 企業採用率
今のところは Next.js に比べると企業での採用実績は少なく、Qwik を活かした転職・就職の場が限定されてしまう可能性があります。

※ 筆者による採用媒体調査の結果なので事実と異なる可能性はあります。

参考

おわりに

Resumable の概念は少し理解に時間がかかりそうです。

もし使いこなせたら軽量でハイパフォーマンスのアプリケーションを構築できるんだろうなと思いつつ、意外に学習コストはかかりそうな印象です。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

この記事はフロントエンドの世界 Advent Calendar 2024の 18 記事目です。
次の記事はこちら Qwik(City)の世界: プロジェクトのセットアップ #2