Qwik 2025 - Resumabilityで実現するゼロハイドレーション

Qwikとは - ハイドレーションの終焉

Qwikは、Builder.io社が開発した次世代JavaScriptフレームワークです。従来のフレームワークが抱えていたハイドレーション問題を根本から解決する「Resumability（再開可能性）」という革新的なアーキテクチャを採用しています。2025年現在、Qwikは本番環境での採用が急速に進み、特にパフォーマンスクリティカルなアプリケーションで注目を集めています。

flowchart TB
    subgraph Traditional["従来のフレームワーク"]
        direction TB
        T1["HTMLダウンロード"]
        T2["JSバンドル全体をダウンロード"]
        T3["JSを解析・実行"]
        T4["DOMを再構築（ハイドレーション）"]
        T5["インタラクティブ"]

        T1 --> T2 --> T3 --> T4 --> T5
    end

    subgraph Qwik["Qwik (Resumability)"]
        direction TB
        Q1["HTMLダウンロード"]
        Q2["即座にインタラクティブ"]
        Q3["必要なJSのみ遅延ロード"]

        Q1 --> Q2
        Q2 -.-> Q3
    end

Resumability vs Hydration - 根本的な違い

ハイドレーションの問題点

従来のReactやVue、Svelteなどのフレームワークでは、サーバーサイドレンダリング（SSR）後にクライアント側で「ハイドレーション」と呼ばれるプロセスが必要です。これは以下の問題を引き起こします。

// 従来のフレームワークでのハイドレーション
// 1. サーバーでHTMLを生成
// 2. クライアントでJSバンドル全体をダウンロード
// 3. アプリケーション全体を再実行してイベントリスナーを登録
// 4. 状態を復元

// 問題: アプリが大きくなるほどTTI（Time to Interactive）が遅延
// 例: 500KBのJSバンドル → 数秒のハイドレーション時間

Resumabilityの仕組み

Qwikの Resumabilityは、サーバーで生成された状態をそのまま「再開」できる仕組みです。

// Qwikのアプローチ
// 1. サーバーでHTMLを生成（状態とイベント情報をシリアライズ）
// 2. クライアントでHTMLを表示 → 即座にインタラクティブ
// 3. ユーザーインタラクション時に必要なコードのみをロード

// QwikがHTMLに埋め込む情報の例
/*
<button on:click="./chunk-abc.js#handleClick[0]">
  クリック
</button>
*/
// イベントハンドラの場所がHTML属性として埋め込まれる

flowchart LR
    subgraph Server["サーバー"]
        S1["コンポーネント実行"]
        S2["状態のシリアライズ"]
        S3["HTML生成"]

        S1 --> S2 --> S3
    end

    subgraph HTML["生成されるHTML"]
        H1["DOM構造"]
        H2["シリアライズされた状態"]
        H3["イベントハンドラ参照"]
    end

    subgraph Client["クライアント"]
        C1["HTML表示"]
        C2["ユーザー操作"]
        C3["必要なコードのみロード"]
        C4["状態を復元して実行"]
    end

    S3 --> H1 & H2 & H3
    H1 & H2 & H3 --> C1
    C1 --> C2
    C2 --> C3 --> C4

Qwikの$記法 - 遅延ロードの境界

Qwikの最も特徴的な機能の一つが「$」記法です。これはコードの遅延ロード境界を明示的に定義します。

component$

// src/components/Counter.tsx
import { component$, useSignal } from '@builder.io/qwik';

// component$ は遅延ロード可能なコンポーネントを定義
export const Counter = component$(() => {
  // useSignalはQwikのリアクティブ状態管理
  const count = useSignal(0);

  return (
    <div class="counter">
      <p>カウント: {count.value}</p>
      <button onClick$={() => count.value++}>
        増加
      </button>
      <button onClick$={() => count.value--}>
        減少
      </button>
    </div>
  );
});

// このコンポーネントは以下のように分割される:
// - コンポーネントの構造（HTML生成用）
// - onClick$ハンドラ（クリック時にのみロード）
// - useSignalのリアクティブ更新ロジック

useTask$ と useVisibleTask$

import { component$, useSignal, useTask$, useVisibleTask$ } from '@builder.io/qwik';

export const DataFetcher = component$(() => {
  const data = useSignal<string[]>([]);
  const isLoading = useSignal(true);
  const isVisible = useSignal(false);

  // useTask$: サーバーとクライアント両方で実行可能
  // track() で依存関係を追跡
  useTask$(async ({ track }) => {
    track(() => isVisible.value);

    if (isVisible.value) {
      const response = await fetch('/api/data');
      data.value = await response.json();
      isLoading.value = false;
    }
  });

  // useVisibleTask$: クライアントでのみ実行
  // コンポーネントが表示された時に実行
  useVisibleTask$(() => {
    // ブラウザAPIにアクセス可能
    isVisible.value = true;

    // クリーンアップ関数を返すことも可能
    return () => {
      console.log('コンポーネントがアンマウントされました');
    };
  });

  return (
    <div>
      {isLoading.value ? (
        <p>読み込み中...</p>
      ) : (
        <ul>
          {data.value.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
});

$によるコード分割の可視化

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

export const EventHandlers = component$(() => {
  // $() で任意の関数を遅延ロード可能にする
  const handleComplexOperation = $(async () => {
    // この関数は呼び出された時にのみロードされる
    const { processData } = await import('./heavy-processor');
    return processData();
  });

  const handleMouseEnter = $(() => {
    console.log('マウスが入りました');
  });

  const handleMouseLeave = $(() => {
    console.log('マウスが出ました');
  });

  return (
    <div
      onMouseEnter$={handleMouseEnter}
      onMouseLeave$={handleMouseLeave}
    >
      <button onClick$={handleComplexOperation}>
        重い処理を実行
      </button>
    </div>
  );
});

Qwik City - フルスタックフレームワーク

Qwik Cityは、QwikのためのフルスタックメタフレームワークでNext.jsやNuxtに相当します。

ファイルベースルーティング

src/routes/
├── index.tsx              # /
├── about/
│   └── index.tsx          # /about
├── blog/
│   ├── index.tsx          # /blog
│   └── [slug]/
│       └── index.tsx      # /blog/:slug
├── api/
│   └── posts/
│       └── index.ts       # API: /api/posts
└── layout.tsx             # 共通レイアウト

ページコンポーネントとローダー

// src/routes/blog/[slug]/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';

// routeLoader$: サーバーサイドデータフェッチ
export const usePost = routeLoader$(async ({ params, status }) => {
  const response = await fetch(`https://api.example.com/posts/${params.slug}`);

  if (!response.ok) {
    status(404);
    return null;
  }

  return response.json() as Promise<{
    title: string;
    content: string;
    author: string;
    publishedAt: string;
  }>;
});

export default component$(() => {
  // ローダーのデータを取得（型安全）
  const post = usePost();

  if (!post.value) {
    return <div>記事が見つかりません</div>;
  }

  return (
    <article>
      <h1>{post.value.title}</h1>
      <p class="author">著者: {post.value.author}</p>
      <time>{post.value.publishedAt}</time>
      <div innerHTML={post.value.content} />
    </article>
  );
});

// SEO用のhead設定
export const head: DocumentHead = ({ resolveValue }) => {
  const post = resolveValue(usePost);

  return {
    title: post?.title ?? 'ブログ',
    meta: [
      {
        name: 'description',
        content: post?.content.slice(0, 160) ?? '',
      },
    ],
  };
};

routeAction$ - フォーム処理

// src/routes/contact/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeAction$, Form, zod$, z } from '@builder.io/qwik-city';

// Zodによるバリデーション
export const useContactAction = routeAction$(
  async (data, { fail }) => {
    // サーバーサイドでのフォーム処理
    try {
      await sendEmail({
        to: 'contact@example.com',
        subject: `お問い合わせ: ${data.subject}`,
        body: `
          名前: ${data.name}
          メール: ${data.email}
          メッセージ: ${data.message}
        `,
      });

      return {
        success: true,
        message: 'お問い合わせを受け付けました',
      };
    } catch (error) {
      return fail(500, {
        message: '送信に失敗しました。後でもう一度お試しください。',
      });
    }
  },
  zod$({
    name: z.string().min(1, '名前を入力してください'),
    email: z.string().email('有効なメールアドレスを入力してください'),
    subject: z.string().min(1, '件名を入力してください'),
    message: z.string().min(10, 'メッセージは10文字以上で入力してください'),
  })
);

export default component$(() => {
  const action = useContactAction();

  return (
    <div class="contact-form">
      <h1>お問い合わせ</h1>

      {action.value?.success && (
        <div class="success-message">
          {action.value.message}
        </div>
      )}

      <Form action={action}>
        <div class="form-group">
          <label for="name">名前</label>
          <input type="text" id="name" name="name" required />
          {action.value?.fieldErrors?.name && (
            <span class="error">{action.value.fieldErrors.name}</span>
          )}
        </div>

        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" id="email" name="email" required />
          {action.value?.fieldErrors?.email && (
            <span class="error">{action.value.fieldErrors.email}</span>
          )}
        </div>

        <div class="form-group">
          <label for="subject">件名</label>
          <input type="text" id="subject" name="subject" required />
        </div>

        <div class="form-group">
          <label for="message">メッセージ</label>
          <textarea id="message" name="message" rows={5} required />
          {action.value?.fieldErrors?.message && (
            <span class="error">{action.value.fieldErrors.message}</span>
          )}
        </div>

        <button type="submit" disabled={action.isRunning}>
          {action.isRunning ? '送信中...' : '送信'}
        </button>
      </Form>
    </div>
  );
});

ミドルウェアと認証

// src/routes/layout.tsx
import { component$, Slot } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const useUser = routeLoader$(async ({ cookie, redirect }) => {
  const sessionToken = cookie.get('session')?.value;

  if (!sessionToken) {
    return null;
  }

  const user = await validateSession(sessionToken);
  return user;
});

export default component$(() => {
  const user = useUser();

  return (
    <>
      <header>
        <nav>
          <a href="/">ホーム</a>
          <a href="/blog">ブログ</a>
          {user.value ? (
            <>
              <span>こんにちは、{user.value.name}さん</span>
              <a href="/logout">ログアウト</a>
            </>
          ) : (
            <a href="/login">ログイン</a>
          )}
        </nav>
      </header>
      <main>
        <Slot />
      </main>
      <footer>
        <p>&copy; 2025 My Qwik App</p>
      </footer>
    </>
  );
});

// src/routes/dashboard/layout.tsx (保護されたルート)
import { component$, Slot } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const onRequest = async ({ cookie, redirect }) => {
  const session = cookie.get('session');

  if (!session) {
    throw redirect(302, '/login?redirect=/dashboard');
  }
};

export default component$(() => {
  return (
    <div class="dashboard-layout">
      <aside>
        <nav>
          <a href="/dashboard">概要</a>
          <a href="/dashboard/settings">設定</a>
        </nav>
      </aside>
      <div class="content">
        <Slot />
      </div>
    </div>
  );
});

React/Next.js との比較

パフォーマンス比較

flowchart TB
    subgraph Metrics["主要メトリクス比較"]
        direction LR
        subgraph NextJS["Next.js 15"]
            N1["初期JS: 80-150KB"]
            N2["TTI: 2-4秒"]
            N3["ハイドレーション: あり"]
        end

        subgraph Qwik["Qwik 2025"]
            Q1["初期JS: <1KB"]
            Q2["TTI: <0.5秒"]
            Q3["ハイドレーション: なし"]
        end
    end

コード比較: カウンターコンポーネント

// React (Next.js)
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>増加</button>
    </div>
  );
}
// 問題: このコンポーネント全体がクライアントバンドルに含まれる

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

export const Counter = component$(() => {
  const count = useSignal(0);

  return (
    <div>
      <p>カウント: {count.value}</p>
      <button onClick$={() => count.value++}>増加</button>
    </div>
  );
});
// onClick$ハンドラはクリック時にのみロードされる

データフェッチの比較

// Next.js 15 App Router
// app/posts/[id]/page.tsx
async function getPost(id: string) {
  const res = await fetch(`/api/posts/${id}`);
  return res.json();
}

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

// Qwik City
// src/routes/posts/[id]/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const usePost = routeLoader$(async ({ params }) => {
  const res = await fetch(`/api/posts/${params.id}`);
  return res.json();
});

export default component$(() => {
  const post = usePost();

  return (
    <article>
      <h1>{post.value.title}</h1>
      <div>{post.value.content}</div>
    </article>
  );
});

2025年の採用状況とユースケース

採用が進む分野

Qwikは2025年現在、以下の分野で特に採用が進んでいます。

pie title Qwik採用分野（2025年）
    "Eコマース" : 35
    "メディア・ニュースサイト" : 25
    "マーケティングサイト" : 20
    "ダッシュボード" : 12
    "その他" : 8

実際の採用事例

本番導入のベストプラクティス

// qwik.config.ts - 本番環境最適化
import { defineConfig } from '@builder.io/qwik/optimizer';

export default defineConfig({
  // プリフェッチ戦略
  prefetch: {
    implementation: {
      // リンクホバー時にプリフェッチ
      linkInsert: 'html-append',
      // Service Workerでキャッシュ
      workerFetchInsert: 'always',
      prefetchEvent: 'always',
    },
  },

  // チャンク分割の最適化
  manualChunks: (id) => {
    if (id.includes('node_modules')) {
      return 'vendor';
    }
  },
});

プリフェッチ戦略

// src/components/ProductList.tsx
import { component$ } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';

interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
}

export const ProductList = component$<{ products: Product[] }>(({ products }) => {
  return (
    <div class="product-grid">
      {products.map((product) => (
        <Link
          key={product.id}
          href={`/products/${product.id}`}
          prefetch  // ホバー時に次のページをプリフェッチ
          class="product-card"
        >
          <img src={product.image} alt={product.name} loading="lazy" />
          <h3>{product.name}</h3>
          <p class="price">{product.price.toLocaleString()}円</p>
        </Link>
      ))}
    </div>
  );
});

Qwikの将来展望

2025年以降のロードマップ

Qwikチームは以下の機能強化を予定しています。

1. Qwik React - 既存のReactコンポーネントをQwikアプリで使用可能に
2. パーシャルハイドレーション互換 - 他フレームワークからの段階的移行をサポート
3. エッジランタイム最適化 - CloudflareWorkers、Vercel Edge、Deno Deployへの最適化
4. AIコード分割 - 機械学習によるユーザー行動予測に基づく最適なプリフェッチ

コミュニティの成長

flowchart LR
    subgraph Growth["Qwikエコシステムの成長"]
        G1["GitHub Stars: 20K+"]
        G2["npm週間DL: 50K+"]
        G3["Discord: 15K+メンバー"]
        G4["公式プラグイン: 100+"]
    end

まとめ

Qwikは、Webパフォーマンスの根本的な課題であるハイドレーションを解決する革新的なフレームワークです。2025年現在、以下のようなプロジェクトに特に適しています。

• パフォーマンスクリティカルなアプリケーション: ECサイト、メディアサイト
• モバイルファーストのプロジェクト: 低スペックデバイスでも高速動作
• SEO重視のサイト: 完全なSSRとゼロJSの初期ロード
• 大規模アプリケーション: 自動コード分割により、アプリサイズに関係なく高速

ただし、以下の点には注意が必要です。

• 学習コスト: $記法やSignalなど、独自の概念の習得が必要
• エコシステム: ReactやVueに比べてライブラリやコンポーネントが限定的
• チーム経験: 新しいパラダイムのため、チーム全体での理解が重要

Resumabilityという新しいアプローチは、今後のWebフレームワーク設計に大きな影響を与えることが予想されます。パフォーマンスを最優先するプロジェクトでは、Qwikの採用を積極的に検討する価値があるでしょう。

参考リンク

• Qwik 公式ドキュメント
• Qwik City ガイド
• Builder.io - Qwik開発元
• Qwik GitHub リポジトリ
• Resumability vs Hydration 解説