Qwikに入門する前にプロジェクト初期化コマンドの動作確認をしてみた
こんにちは。クラウド事業本部の桑野です。
今回はフロントエンドの技術スタックについて触れようと思います。
なんか新しいフロントエンドのフレームワークが登場していないかな〜とwikipediaを眺めていました。
するとQwikというのが比較的新そうだったので、触ってみることに決めました。（触ったタイミングでは、latestがv1.17.2でした）
とりあえず新しいプロジェクトの作成をしてみましたが、セットアップコマンドの解説をしてそうなドキュメントが見当たらなかったので、手探りで確認してみました。
Qwikとは
Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.
上記の文からQwikはアプリケーションの複雑さに関わらず、最速のページ読み込み時間を実現することを目的として開発されていると読み取れます。
高速化にはJavaScriptをほとんど使用せずに、「サーバーが中断したところから読み込みを再開する」ことで、実現を可能としているようです。
ユーザーがサイトを操作する場合、操作に必要な部分だけがオンデマンドで読み込まれるという、遅延読み込みを活用しているということですね。
作成されるプロジェクトの拡張子にはtsxがついていたりと、React開発者でも馴染みのある感じとなっていました。
前提
前回の記事同様、下記の条件で検証しています。
- OS：macOS Sequoia バージョン 15.6.1
- チップ：Apple M4
- Docker Client：28.4.0
- Docker Server：28.3.3
- Colima：0.8.4
- docker compose：2.39.3
Colimaを使ったDocker環境の構築手順については以下の記事をご参照ください。
「手順」と「実践編」の1の手順を実施し、docker環境とdocker composeが使えるようになっていれば準備OKです。
実践編
Qwikのセットアップを試してみます。
ベースとなるコンテナの定義は以下のリポジトリに載せています。
qwik-study/
├── .git/
├── .vscode/
│ ├── settings.json
│ └── extensions.json
├── docker-compose.yaml
├── dockerfiles/
│ └── frontend/
│ └── Dockerfile
└── frontend/
├── .devcontainer/
│ └── devcontainer.json
├── .gitignore
├── .vscode/
│ └── settings.json
└── typescript/ <-今回はこの中でQwikプロジェクトを作成します。
1. コンテナへのアクセス
リポジトリルートで以下のコマンドを実行します。
docker compose up -d
コンテナが起動したら、Dev Containerを使ってfrontendというコンテナにアクセスします。
2. セットアップコマンドの実行
以下のコマンドを実行していきます。
cd /typescript
pnpm create qwik@latest
ウィザードに従って入力していきます。
Where would you like to create your new project? (Use '.' or './' for current directory)
プロジェクトをどこに作成するかを指示します。
現在のディレクトリに作成したければ、.を入力します。
それよりも下の階層に作成したければ、./sampleといった形で入力します。
もしもディレクトリが空ではない場合、何もせずに終了するか、ディレクトリの中身をクリーンアップ（削除）してから、Qwikプロジェクトを作成します。
┌ Let's create a Qwik App ✨ (v1.17.2)
│
◇ Where would you like to create your new project? (Use '.' or './' for current directory)
│ .
│
● Creating new project in /frontend/typescript ... 🐇
│
◇ Directory "./" already exists and is not empty. What would you like to do?
│ Do not overwrite this directory and exit
└ Operation cancelled.
プロジェクトを作成するディレクトリが決定したら次の質問です。
Select a starter
どのように始めるかを選択します。
選択肢は以下の通りです。順に触れていきます。
◆ Select a starter
│ ● E2e Library
│ ○ Empty App (Qwik City + Qwik)
│ ○ Library (Qwik)
│ ○ Playground App (Qwik City + Qwik)
└
E2e Library
E2Eテスト用のライブラリ・・・？
というのもREADMEは後述のEmpty Appと同一なのと、playwrightといったE2Eテストライブラリが依存関係に含まれていないためです。
entry.dev.tsxやentry.ssr.tsxに以下の記述がありますが、実態となるroot.ts(tsx)が存在していないという不完全な状態となっています。
import Root from "./root";
現状こちらを選ぶ理由は薄いかもしれません。
Empty App (Qwik City + Qwik)
ルーティングが含まれた空のプロジェクトを作成します。
通常のWebアプリケーション開発を行いたい場合に選択すれば良さそうです。
Library (Qwik)
Qwikのライブラリを作成します。
npmパッケージとして公開するライブラリの開発を行う際に選択すると良さそうです。
この中では一番dependenciesのインストールに時間がかかりました。
Playground App (Qwik City + Qwik)
サンプルルート付きのデモアプリを作成します。
サンプルコードが充実しているため、Qwikを学習する場合に選択すると良さそうです。
開始方法が決まったら、さらに2つ質問があります。
Would you like to install pnpm dependencies?
依存関係をインストールするか選択します。
Initialize a new git repository?
新しいgitリポジトリを作成するか選択します。
Qwikのサンプル作成後にgit initを行ってくれます。
ちなみにgitリポジトリの作成に失敗しても、QWIKアプリ自体は問題なく作成されます。
■ spawn git ENOENT
│
│
│
■ spawn git ENOENT
│
│
│
■ spawn git ENOENT
│
│
◇ Git failed to initialize
│
■ Git failed to initialize. You can do this manually by running: git init
「git initを手動で実行できるよ」って教えてくれていますね。
余談
開始方法でE2E Library、もしくはLibrary (Qwik)を選んだ場合のみ、ウィザードの一番最後に以下の質問が追加されます。
Finishing the install. Wanna hear a joke?
Yesを選択すると以下のようなメッセージが表示されました。
「インストールが終わるまでの間、ジョークを聴きたいかい？」って感じでしょうか。
開発者のユーモアが感じられる仕掛けですね。非常に面白いです。
◇ 🙈 ──────────────────────────────────────────────╮
│ │
│ What's the best thing about a Boolean? │
│ Even if you're wrong, you're only off by a bit. │
│ │
├───────────────────────────────────────────────────╯
◇ 🙈 ─────────────────────────────────────────────╮
│ │
│ Why did the functions stop calling each other? │
│ Because they had constant arguments. │
│ │
├──────────────────────────────────────────────────╯
◇ 🙈 ─────────────────────────╮
│ │
│ How do you help JS errors? │
│ You `console` them! │
│ │
├──────────────────────────────╯
以上で新しいQwikプロジェクトのセットアップが完了しました。
お疲れ様です。
まとめ
いかがだったでしょうか？
新しいフレームワークを触っていく場合、そもそもプロジェクトの作成から戸惑うことはよくあることかなと思います。
これからQwikに触っていきたいという方が自信を持ってセットアップするために、本記事を活用いただければ嬉しいです。
執筆時点ではまだまだQwikの技術記事が乏しいように思ったので、これを機にキャッチアップとアウトプットを進めていければなと考えています。
最後までご覧いただきありがとうございました。
参考
