Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Qwik

最終更新 Markdown で表示Agent セットアップ

Qwik ↗ は、オープンソースの DOM 中心で再開可能な Web アプリケーションフレームワークです。再開可能性（resumability） ↗、HTML のサーバーサイドレンダリング、きめ細かい遅延読み込み ↗ に注力し、操作可能になるまでの時間（Time to Interactive）を最短にすることを目指しています。

このガイドでは、Qwik City ↗（Qwik のメタフレームワーク）で新しい Qwik アプリケーションを作成し、Cloudflare Pages でデプロイします。

新しいプロジェクトを作成する

create-cloudflare ↗ CLI（C3）で新しいプロジェクトを作成します。C3 は新しいプロジェクトディレクトリを作成し、Qwik の公式セットアップツールを起動し、すぐにデプロイするかどうかを選べます。

create-cloudflare で新しい Qwik プロジェクトを作成するには、次のコマンドを実行します。

npm create cloudflare@latest -- my-qwik-app --framework=qwik --platform=pages

create-cloudflare は、Wrangler CLI と必要な adapter を含む追加の依存関係をインストールし、セットアップの質問を表示します。

cloudflare-pages adapter のインストールの一環として、functions/[[path]].ts ファイルが作成されます。[[path]] というファイル名は、このファイルがすべての受信 URL へのリクエストを処理することを示します。詳細は パスセグメント を参照してください。

サーバーのオプションを選んだら、プロジェクトのディレクトリに移動し、次のコマンドでプロジェクトを表示します。

npm start

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pages でデプロイする

create-cloudflare CLI（C3）でデプロイする

create-cloudflare（C3） ↗ で新しい Qwik プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。

Cloudflare ダッシュボードからデプロイする

サイトを Pages にデプロイするには、次の手順を実行します。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定項目値
本番ブランチmain
ビルドコマンドnpm run build
ビルドディレクトリdist

サイトの設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages が npm とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Qwik サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も使えます。本番に出す前に、変更後のサイトの見た目を確認できます。

Qwik アプリケーションでバインディングを使う

バインディング を使うと、アプリケーションから KV、Durable Object、R2、D1 ↗ などの Cloudflare の開発者向けプロダクトと連携できます。

QwikCity では、routeLoaders ↗ と actions ↗ でサーバーサイドのコードを追加します。フレームワークが提供する platform オブジェクト経由で、アプリケーションに設定したバインディングにアクセスします。

次のコードは、QwikCity で KV 名前空間にアクセスする例です。

// ...

export const useGetServerTime = routeLoader$(({ platform }) => {
  // the type `KVNamespace` comes from runtime types generated by running `wrangler types`
  const { MY_KV } = (platform.env as { MY_KV: KVNamespace }));

  return {
    // ....
  }
});

さらに学ぶ

このガイドを完了すると、Qwik サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？