Go to Qiita Advent Calendar Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@lowgain(老害 おじさん)

Blazor Server (.NET 8) プロジェクト構成

Last updated at Posted at 2025-08-19

🔹 Blazor Server (.NET 8) プロジェクト構成

MyBlazorServerApp/
├── Program.cs
├── App.razor
├── Imports.razor
├── Pages/
│   ├── _Host.cshtml （※.NET7まで → .NET8では通常なし）
│   ├── Index.razor
│   ├── Counter.razor
│   ├── FetchData.razor
│   └── Error.razor
├── Shared/
│   ├── MainLayout.razor
│   ├── NavMenu.razor
│   └── SurveyPrompt.razor
├── Data/
│   ├── WeatherForecast.cs
│   └── WeatherForecastService.cs
├── wwwroot/
│   ├── css/
│   ├── js/
│   └── favicon.ico

📌 各ファイルの意味

🟢 アプリ全体の設定

  • Program.cs

    • エントリーポイント。
    • DIサービス登録（例：builder.Services.AddRazorComponents()）や
      Blazor Hub のマッピング（app.MapRazorComponents<App>()）が書かれている。

  • App.razor

    • アプリのルーター。
    • @rendermode で Blazor Server を使うか WASM を使うか切り替えられる（.NET 8 新機能）。
    • <Router> コンポーネントでページ遷移を制御。

  • Imports.razor

    • 名前空間の共通 using。
    • 例えば using Microsoft.AspNetCore.Components; をここに書けば、各 Razor ファイルで省略できる。

🟢 ページ

  • Pages/Index.razor

    • ルートページ（@page "/"）。

  • Pages/Counter.razor

    • カウンターサンプル（@page "/counter"）。

  • Pages/FetchData.razor

    • サンプルデータ表示（DI したサービス WeatherForecastService を使う）。

  • Pages/Error.razor

    • 例外時に表示されるページ。

🟢 レイアウト / 共通UI

  • Shared/MainLayout.razor

    • 全ページ共通の枠組み。
    • ナビバー (NavMenu) やフッターを書く場所。

  • Shared/NavMenu.razor

    • サイドナビゲーションメニューのコンポーネント。

  • Shared/SurveyPrompt.razor

    • サンプル用。不要なら削除してもOK。

🟢 データ

  • Data/WeatherForecast.cs

    • サンプルのデータモデル。

  • Data/WeatherForecastService.cs

    • サンプルのサービスクラス。DI で注入してデータ取得を模擬。

🟢 静的リソース

  • wwwroot/

    • 画像、CSS、JS を置く場所。
    • Blazor Server は HTML のエントリーポイントがサーバー側にあるので、
      WASM のような index.html はない。

🔹 .NET 7 と .NET 8 の違い

  • .NET 7 以前

    • Pages/_Host.cshtml が存在して、ここに <html><head><body> が書かれていた。

  • .NET 8

    • _Host.cshtml は削除され、Program.cs と App.razor でアプリを構成。
    • 必要なら自分で _Host.cshtml を追加可能だけど、推奨はされてない。

まとめ

  • Program.cs → アプリの入り口＆設定係
  • App.razor → 全体ルーター
  • MainLayout.razor → 共通UI（ナビ・フッター）
  • Pages/*.razor → ページ本体
  • wwwroot/ → 静的ファイル置き場

.NET 8 では _Host.cshtml が消えたから、
「UIの共通処理は MainLayout.razor」「script や css の参照は wwwroot & _Layout.cshtml」って整理するときれいに理解できるよ。

はい！Blazor Server (.NET 8) のプロジェクト構成と各ファイルの役割について、公式ドキュメントへのリンク付きで丁寧に整理しました。信頼性のある出典を活用しているので理解が深まると思います✨

出典元リンク一覧

  • Blazor プロジェクト構成の全体像
    Blazor アプリテンプレートが生成する主要なファイルとフォルダー構成を説明しています。
    (Microsoft Learn)

  • Blazor の基本（Fundamentals）
    Razor コンポーネント、レンダリングモデルなどの基盤知識が解説されています。
    (Microsoft Learn)

  • レイアウトコンポーネントの使い方
    MainLayout.razor のようなレイアウトコンポーネントがどのように設計されるかが解説されています。
    (Microsoft Learn)

  • _Host.cshtml に関する歴史的背景
    以前はレイアウトやアプリのエントリーポイントとして使われていた _Host.cshtml の存在と移り変わりについて言及があります。
    (Microsoft Learn)

例：各ファイルの役割と対応するドキュメント

ファイル・フォルダ 説明
Program.cs, App.razor, .razor ファイル群 Blazor サーバー プロジェクトで生成されるファイル構成を理解できます (Microsoft Learn)
レイアウト・共通コンポーネント（MainLayout.razor など） レイアウトの役割と配置場所について詳しく書かれています (Microsoft Learn)
_Host.cshtml の役割の説明 Blazor Server の旧テンプレートで使われていたファイルの背景や render モードについて説明されてます (Microsoft Learn)
Foundation（基本的な概念） Razor コンポーネントの基本、双方向バインディング、イベント処理などがまとまってます (Microsoft Learn)

まとめ

  • 🗂 ドキュメントにはテンプレート生成ファイルの構成と役割がバッチリ整理されてるよ！
  • 🛠 レイアウト処理 (.razor レイアウト＆旧 cshtml) の違いも公式が解説。
  • しっかり「どこに何を書くべきか」がそこかしこに書いてあるから、安心して設計できるね。

いい質問！ここは .NET 8 から Blazor Server を始める人がよく混乱するポイントなんだよね。🦑

追記

_Layout.cshtml がない場合（.NET 8 テンプレート）

  • .NET 7 以前の Blazor Server では
    Pages/_Layout.cshtml が存在して、ここに

    <!DOCTYPE html>
<html>
<head> … </head>
<body>
    @RenderBody()
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

    みたいに書かれていたんだ。

  • でも .NET 8 以降の Blazor Server テンプレートでは
    _Layout.cshtml は作られない。
    HTML の構造や <script> の読み込みは フレームワーク側が自動で用意してくれるようになった。

🔹 じゃあスクリプトや CSS をどこに置く？

  • JavaScript や CSS は wwwroot/ に配置。

  • 読み込みは App.razor や MainLayout.razor ではなく、
    Program.cs 経由で自動的に _framework/blazor.server.js が注入される。

  • 自分でカスタムスクリプトを使いたい場合は：

    1. wwwroot/js/site.js を作成
    2. Program.cs で特に指定不要（静的ファイルとして配信される）
    3. MainLayout.razor やページから JSInterop (IJSRuntime) を使って呼び出す

🔹 カスタム HTML レイアウトが必要な場合

「どうしても <head> に <meta> や <script> を直書きしたい」場合は、
自分で Pages/_Host.cshtml を追加することは可能。

ただし .NET 8 では 推奨は JSInterop 経由や HeadOutlet コンポーネントの利用。

例：App.razor に

<HeadOutlet />

を入れると、各ページから

@page "/"
<PageTitle>ホーム</PageTitle>

って書いたときに <title> が <head> に反映される。

まとめ

  • .NET 7 までは _Layout.cshtml があった
  • .NET 8 では存在しない（フレームワークが吸収）
  • スクリプトや CSS は wwwroot/ ＋ IJSRuntime／HeadOutlet で管理
  • どうしても直書きしたければ _Host.cshtml を自分で追加できる
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?