プロジェクト構造 / Learch

プロジェクト構造

Remix プロジェクトの構造を理解することは、効率的にアプリケーションを開発し、保守するために非常に重要です。このセクションでは、Remix プロジェクトの主要なディレクトリとファイルについて、具体例を用いて説明します。

新しい Remix プロジェクトを作成すると、以下のようなディレクトリ構造が生成されます。

あなたのプロジェクト/
├── app/
│   ├── routes/
│   │   └── index.jsx
│   ├── styles/
│   └── entry.client.jsx
├── public/
├── remix.config.js
└── package.json

app/: このディレクトリには、アプリケーションの主要なロジックとコンポーネントが含まれます。
- routes/: このディレクトリは、アプリケーションのルーティングとページコンポーネントを格納します。index.jsxはアプリケーションのエントリーポイントであり、初期ページを定義します。
- styles/: CSS ファイルや他のスタイルシートがこのディレクトリに格納されます。
- entry.client.jsx: クライアントサイドのエントリーポイントを定義し、ブラウザでのアプリケーションの初期化を担当します。
public/: 静的ファイル（画像、フォント、favicon.icoなど）がこのディレクトリに格納されます。ブラウザから直接アクセス可能です。
remix.config.js: Remix プロジェクトの設定を定義するファイルです。ルートディレクトリやプラグインの設定など、プロジェクトのカスタマイズに使用します。
package.json: 依存関係やスクリプトなど、プロジェクトのメタデータを管理するファイルです。

以下は、ブログプラットフォームを作成する際のroutes/ディレクトリ内の構成例です。

app/
└── routes/
    ├── posts/
    │   ├── $postId.jsx  // 個々のブログ記事を表示
    │   └── index.jsx    // ブログ記事のリストを表示
    └── index.jsx        // ホームページ

posts/index.jsx: すべてのブログ記事をリストアップするページのコンポーネントを定義します。
posts/$postId.jsx: 動的な URL パラメータを使用して、特定のブログ記事を表示するページのコンポーネントを定義します。$は動的セグメントを意味します。