フォルダ構成とプロジェクト構造の理解｜ASP.NET×Blazor入門 2.3

2.3 フォルダ構成とプロジェクト構造の理解

Blazorでプロジェクトを作成すると、プロジェクトフォルダの中には多くのファイルやディレクトリが自動生成されます。
初めて目にする方にとっては、その構造が何を意味しているのか、何から手をつければよいのかが分かりづらく感じられるかもしれません。ですが、安心してください。これはBlazor開発を始めるうえでごく自然な感覚です。

このセクションでは、各フォルダやファイルが果たす役割を1つずつ丁寧に確認しながら、Blazorアプリの構造を頭の中で“地図”として描けるようになることを目指します。

プロジェクト直下の主要ファイル

• Program.cs：アプリケーションのエントリーポイント。DI（依存性注入）の設定やルーティングの初期化など、全体の起動に関する処理が記述されます。
• App.razor：Blazorアプリ全体のルートコンポーネントであり、ルーティングやレイアウトの制御を担う中核的な存在です。
• _Imports.razor：共通して使う名前空間（usingディレクティブ）を一元管理できる便利なファイル。複数のRazorファイルで重複記述を避けられます。
• wwwroot/：CSSや画像、JavaScriptなどの静的ファイルを配置する専用フォルダ。公開URLで直接アクセスされるパスのルートに相当します。

Pages フォルダの役割

Pagesフォルダには、画面ごとのRazorコンポーネント（.razorファイル）が格納されています。これらはURLルーティングに対応しており、ブラウザで特定のパスにアクセスしたときに対応する画面を表示する役割を果たします。

• Index.razor：トップページとして最初に表示される画面
• Counter.razor：カウントアップのサンプル機能を備えたコンポーネント
• FetchData.razor：サーバーからのデータ取得を模したテーブル表示

なお、これらはチュートリアル用のサンプルですので削除しても構いませんが、少なくとも1つは @page ディレクティブ付きのコンポーネントが必要です。これがルーティングの入り口になります。

Shared フォルダの役割

Sharedフォルダは、複数ページにまたがって共通利用されるUI部品を配置するための場所です。ナビゲーションバーやレイアウト構成要素などが該当します。

• MainLayout.razor：アプリ全体に適用されるレイアウト構成を定義するファイル。通常はこの中にNavMenuを含めてページ構造を組み立てます。
• NavMenu.razor：左側に表示されるサイドメニュー。Blazorアプリの主要なナビゲーションUIとして利用されます。

各ページの内容はこのレイアウトの一部として読み込まれるため、画面遷移時もページ全体がリロードされず、SPA（Single Page Application）としてスムーズに動作します。

wwwroot フォルダと CSS

wwwrootフォルダは、CSSファイル・画像・JavaScriptファイルなど、クライアントから直接アクセスされる静的リソースを格納するためのフォルダです。

デフォルトでは css/app.css や favicon.ico など、基本的なリソースがすでに用意されています。これらは必要に応じて上書きしたり、自作ファイルを追加したりできます。

開発におけるフォルダ構成のカスタマイズ例

プロジェクトが成長するにつれて、コンポーネントやサービス、モデルなどが増えていきます。その際は、以下のように独自の構成に整理していくことで、可読性と保守性を高めることができます。

• Components/：ボタンや入力フォームなど、再利用可能なUI部品を格納
• Services/：外部API呼び出し、データ取得、状態管理などのビジネスロジック
• Models/：データ構造やDTO、入力バリデーションに関するクラスを定義
• Pages/：ルーティングに対応したユーザー画面コンポーネント

フォルダやクラスの整理は、チーム開発の効率を大きく左右します。Blazorでは、自由度が高く、必要に応じて自分に合った設計を柔軟に取り入れることができます。

ここまでで、Blazorアプリのファイル構成や各フォルダの役割についての基本を理解できました。
次のセクション 「3.0 Razor構文とコンポーネントの書き方」では、実際のコンポーネント定義やRazor構文を用いたUIの記述方法に進んでいきます。