プロジェクト構造

典型的な Qwik プロジェクトは次のようになります。

qwik-app-demo
├── README.md
├── package.json
├── public
│   └── favicon.svg
├── src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── flower
│       │   ├── flower.css
│       │   └── index.tsx
│       ├── index.tsx
│       ├── layout.tsx
│       └── service-worker.ts
├── tsconfig.json
└── vite.config.ts

プロジェクトファイル

src/routes/

src/routes/ ディレクトリは、Qwik City がページを検索する特別なディレクトリです。このディレクトリ内のフォルダーとファイルは特別な意味を持ち、アプリの URL にマッピングされます。

• src/routes/index.tsx はアプリのホームページです。
• src/routes/layout.tsx はアプリのルートレイアウトです。すべてのページはこのレイアウト内でレンダリングされます。

詳細については、ルーティング セクションを参照してください。

src/components/

src/components/ という名前のディレクトリは、標準的な慣例に従っています。すべての Qwik スターターに存在し、必要に応じて名前を変更できます。src/components/ ディレクトリは、コンポーネント（つまり、複数の場所で再利用できるコードの部品）を配置する場所です。これらのコンポーネントはルートやレイアウトではありませんが、ルートまたはレイアウトコード内から参照できます。

たとえば、Button コンポーネントは src/components/button/button.tsx の中に配置する必要があります。

public/

public/ ディレクトリには、画像、フォント、アイコンなどの静的アセットが含まれています。アプリをビルドすると、これらのファイルは dist/ ディレクトリにコピーされ、ルートで提供されます。

詳細については、Vite の設定を参照してください。

src/entry.ssr.tsx

SSR エントリポイントは、アプリケーションがブラウザの外でレンダリングされるすべてのケースにおける共通のエントリポイントです。

• サーバー (express、cloudflare など...)
• npm run start
• npm run preview
• npm run build

src/root.tsx

src/root.tsx ファイルは、アプリケーションツリーのルートです。エントリポイントであり、最初にレンダリングされるコンポーネントです。

src/global.css

src/global.css ファイルはグローバル CSS ファイルです。アプリの複数の場所で使用する CSS を定義する必要がある場合は、ここで定義できます。

ルートコンポーネント (src/root.tsx) は、このファイルをデフォルトでインポートします。

tsconfig.json

tsconfig.json ファイルには、TypeScript コンパイラの構成が含まれています。TypeScript プロジェクトの標準です。

vite.config.ts

Qwik はプロジェクトのビルドに Vite を使用します。vite.config.ts ファイルには Vite の構成が含まれています。Vite プロジェクトの標準です。Vite のドキュメント を参照してください。

ユーティリティ

Qwik には、開発者が簡単に新しいコンポーネントとルートを作成できるnewというユーティリティコマンドがあります。

Buttonという新しいコンポーネントを作成したいとしましょう。その場合、次のコマンドを実行します。

pnpm qwik new Button

/contact ページの新しいルートを作成したいとします。そのためには、次のコマンドを使用できます。

pnpm qwik new /contact

次のコマンドは Qwik のディレクトリファイル構造と一致しており、コンポーネントをより迅速にスキャフォールディングできます。

ページ上部のqwik-app-demoと比較すると、追加の変更は次のようになります。

qwik-app-demo
├── README.md
├── package.json
├── public
│   └── favicon.svg
├── src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   │       Button
│   │       └── button.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── flower
│       │   ├── flower.css
│       │   └── index.tsx
│       ├── contact
│       │   └── index.tsx
│       ├── index.tsx
│       ├── layout.tsx
│       └── service-worker.ts
├── tsconfig.json
└── vite.config.ts

Button/index.tsxという名前付け規則でButtonコンポーネントを生成したい場合は、次のコマンドを使用できます。

pnpm qwik new --barrel Button

その場合、src/componentsフォルダーは次のようになります。

src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   │       Button
│   │       └── index.tsx

この機能は Qwik v1.2 で追加されたもので、旧バージョンを使用している場合はこの機能が表示されません。