はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった Qwik に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
Qwik に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
前提
本シリーズでは Turborepo によるモノレポ管理を行っています。
単体で Qwik を導入する場合は適宜プロジェクト作成先パスを変更して下さい。
Qwik の導入
apps配下にQwikのプロジェクトを作成します。
プロジェクトのセットアップ
pnpm create qwik@latest
対話型プロジェクトセットアップ
プロジェクトの作成先の選択
今回は ./apps/qwik-client にプロジェクトを作成します。
Where would you like to create your new project? (Use '.' or './' for current directory)
> ./apps/qwik-client
スターターの選択
今回は Qwik City + Qwik のスターターを選択します。
Select a starter
> ● Empty App (Qwik City + Qwik) (Blank project with routing included)
○ Library (Qwik)
○ Playground App (Qwik City + Qwik)
パッケージをインストールするかどうか
今回は Turborepo で管理するので pnpm でインストールします。
※ お好みで選んでください。
Would you like to install pnpm dependencies?
> ● Yes / ○ No
git リポジトリの初期化
今回は初期化を行います。
※ お好みで選んでください。
Initialize a new git repository?
> ● Yes / ○ No
今回 セットアップ実行次の pnpm install でなぜかエラーが出たので、セットアップ完了後に手動でインストールを行いました。
┌ Let's create a Qwik App ✨ (v1.11.0)
│
◇ Where would you like to create your new project? (Use '.' or './' for current directory)
│ ./apps/qwik-client
│
● Creating new project in ***/apps/qwik-client ... 🐇
│
◇ Select a starter
│ Empty App (Qwik City + Qwik)
│
◇ Would you like to install pnpm dependencies?
│ Yes
│
◇ Initialize a new git repository?
│ Yes
│
◇ App Created 🐰
│
◇ Git initialized 🎲
│
│
■ ENOENT: no such file or directory, rename '**/apps/.create-qwik-2fva4c84mkj/node_modules' -> '**/apps/qwik-client/node_modules'
│
│
│
■ pnpm install failed
│ You might need to run "pnpm install" manually inside the root of the project.
│
│
◇ Failed to install pnpm dependencies 📋
│
◇ Result ────────────────────────────────────────────────────────╮
│ │
│ 🦄 Success! Project created in apps/qwik-client directory │
│ │
│ 🤍 Integrations? Add Netlify, Cloudflare, Tailwind... │
│ pnpm qwik add │
│ │
│ 📄 Relevant docs: │
│ https://qwik.dev/docs/getting-started/ │
│ │
│ 💬 Questions? Start the conversation at: │
│ https://qwik.dev/chat │
│ https://twitter.com/QwikDev │
│ │
│ 👀 Presentations, Podcasts and Videos: │
│ https://qwik.dev/media/ │
│ │
│ 🐰 Next steps: │
│ cd apps/qwik-client │
│ pnpm install │
│ pnpm start │
│ │
│ │
├─────────────────────────────────────────────────────────────────╯
│
└ Happy coding! 🎉
今回はモノレポで管理しているのでapps配下にqwik-clientという名前でミニマムテンプレートのプロジェクトを作成しました。
package 名の変更
今回は Turborepo で管理しやすいように package の名前をqwik-clientに変更します。(任意)
{
- "name": "my-qwik-empty-starter",
+ "name": "qwik-client",
"description": "Blank project with routing included",
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
"engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
"private": true,
"trustedDependencies": [
"sharp"
],
"trustedDependencies-annotation": "Needed for bun to allow running install scripts",
"type": "module",
"scripts": {
"build": "qwik build",
"build.client": "vite build",
"build.preview": "vite build --ssr src/entry.preview.tsx",
"build.types": "tsc --incremental --noEmit",
"deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
"dev": "vite --mode ssr",
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
"fmt": "prettier --write .",
"fmt.check": "prettier --check .",
"lint": "eslint \"src/**/*.ts*\"",
"preview": "qwik build preview && vite preview --open",
"start": "vite --open --mode ssr",
"qwik": "qwik"
},
"devDependencies": {
"@builder.io/qwik": "^1.11.0",
"@builder.io/qwik-city": "^1.11.0",
"@types/eslint": "8.56.10",
"@types/node": "20.14.11",
"@typescript-eslint/eslint-plugin": "7.16.1",
"@typescript-eslint/parser": "7.16.1",
"eslint": "8.57.0",
"eslint-plugin-qwik": "^1.11.0",
"prettier": "3.3.3",
"typescript": "5.4.5",
"undici": "*",
"vite": "5.3.5",
"vite-tsconfig-paths": "^4.2.1"
}
}
パッケージのインストール
今回は Turborepo で管理するので pnpm でインストールします。
※ お好みで選んでください。
# Turborepoの場合 (ルートで実行)
pnpm --filter qwik-client install
# 単体の場合
cd apps/qwik-client
npm install
Qwik プロジェクトの立ち上げ
dev コマンドでローカル環境の立ち上げます。
# モノレポの場合 (ルートで実行)
pnpm --filter qwik-client dev
# 単体の場合
npm run dev
↑ のコマンドで立ち上がらない場合は package.json の nameフィールド が qwik-client に設定されているか確認して下さい。
ブラウザで確認
ブラウザで http://localhost:5173 を開くと、"Hi 👋" と表示されます。
おわりに
セットアップの途中で pnpm install がエラーになったり等ありましたが、無事に Qwik プロジェクトを立ち上げることができました。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 19 記事目です。
次の記事はこちら Qwik(City)の世界: UI 構築とトランジション #3