Qwik(City)の世界: プロジェクトのセットアップ #2


## はじめに

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

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

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

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

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

- [はじめに](#はじめに)
- [フロントエンドの世界 2024 について](#フロントエンドの世界-2024-について)
- [もくじ](#もくじ)
- [前提](#前提)
- [Qwik の導入](#qwik-の導入)
- [Qwik プロジェクトの立ち上げ](#qwik-プロジェクトの立ち上げ)
- [ブラウザで確認](#ブラウザで確認)
- [おわりに](#おわりに)

## 前提

本シリーズでは [`Turborepo`](https://turbo.build/) によるモノレポ管理を行っています。

単体で `Qwik` を導入する場合は適宜プロジェクト作成先パスを変更して下さい。

## Qwik の導入

`apps`配下に`Qwik`のプロジェクトを作成します。

### プロジェクトのセットアップ

```shell
pnpm create qwik@latest
```

### 対話型プロジェクトセットアップ

**プロジェクトの作成先の選択**
今回は ./apps/qwik-client にプロジェクトを作成します。

```shell
Where would you like to create your new project? (Use '.' or './' for current directory)
> ./apps/qwik-client
```

**スターターの選択**
今回は Qwik City + Qwik のスターターを選択します。

```shell
Select a starter
> ● Empty App (Qwik City + Qwik) (Blank project with routing included)
  ○ Library (Qwik)
  ○ Playground App (Qwik City + Qwik)
```

**パッケージをインストールするかどうか**
今回は `Turborepo` で管理するので `pnpm` でインストールします。
※ お好みで選んでください。

```shell
Would you like to install pnpm dependencies?
> ● Yes / ○ No
```

**git リポジトリの初期化**
今回は初期化を行います。
※ お好みで選んでください。

```shell
Initialize a new git repository?
> ● Yes / ○ No
```

:::note alert
今回 セットアップ実行次の pnpm install でなぜかエラーが出たので、セットアップ完了後に手動でインストールを行いました。
:::

```shell:実行ログ全文
┌  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`という名前でミニマムテンプレートのプロジェクトを作成しました。

https://qwik.dev/docs/getting-started/

### package 名の変更

今回は `Turborepo` で管理しやすいように package の名前を`qwik-client`に変更します。(任意)

```diff_json:package.json
{
- "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` でインストールします。
※ お好みで選んでください。

```shell
# Turborepoの場合 (ルートで実行)
pnpm --filter qwik-client install
```

```shell
# 単体の場合
cd apps/qwik-client
npm install
```

## Qwik プロジェクトの立ち上げ

dev コマンドでローカル環境の立ち上げます。

```shell
# モノレポの場合 (ルートで実行)
pnpm --filter qwik-client dev
```

```shell
# 単体の場合
npm run dev
```

:::note warn
↑ のコマンドで立ち上がらない場合は package.json の `name`フィールド が `qwik-client` に設定されているか確認して下さい。
:::

## ブラウザで確認

ブラウザで http://localhost:5173 を開くと、"Hi 👋" と表示されます。

![スクリーンショット 2024-12-17 22.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/9dc439b1-ee75-095d-f294-c479cc31f0da.png)

## おわりに

セットアップの途中で pnpm install がエラーになったり等ありましたが、無事に Qwik プロジェクトを立ち上げることができました。

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

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 19 記事目です。
次の記事はこちら [Qwik(City)の世界: UI 構築とトランジション #3](https://qiita.com/nuinteedev/items/fcf8b378addfdfd1ac9c)