Blazor をゼロから: 第2章 — 最初の Blazor アプリ

Blazor をゼロから第2章へようこそ。第1章をまだ読んでいない場合は、先に読むことをおすすめします。

この章では、新しい Blazor アプリを作成し、ローカルで実行し、主要ファイルの役割を理解します。

ステップ1: プロジェクトを作成する

ターミナルで実行:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

これで .NET 9 の Blazor Web App が既定の構成で作成されます。

ツールが対話モデルを尋ねる場合は、まず Interactive Server を選びましょう。

ステップ2: ローカルで実行する

アプリを起動:

dotnet watch

ターミナルに表示された URL（通常は https://localhost:5xxx）を開きます。Home、Counter、Weather ページが表示されれば成功です。

ここまで動けば、開発環境は準備完了です。

ステップ3: プロジェクト構成を理解する

最初に覚えるべき主なファイル/フォルダーは次のとおりです。

• Program.cs — サービス登録と HTTP パイプライン構成。
• Components/App.razor — アプリのルートコンポーネント。
• Components/Routes.razor — ページのルーティング定義。
• Components/Pages/ — Home、Counter などのルート付きページ。
• Components/Layout/ — 共通レイアウト（MainLayout.razor、メニュー）。
• wwwroot/ — 静的アセット（CSS、画像、favicon）。
• appsettings.json — 設定値。

この段階では全ファイルを深く理解する必要はありません。UI の場所と起動設定の場所を把握できれば十分です。

ステップ4: 最初の変更を加える

Components/Pages/Home.razor を開き、内容を次に置き換えてください。

@page "/"

<PageTitle>Blazor をゼロから</PageTitle>

<h1>Blazor をゼロから</h1>
<p>第2章のアプリがローカルで動作しています。</p>

保存してブラウザーを更新します。dotnet watch を使っていればすぐ反映されます。

この小さな変更で、編集 -> ビルド -> 表示 の流れを確認できます。

ステップ5: Program.cs を一度読む

暗記は不要ですが、次の行は認識しておきましょう。

• AddRazorComponents() Razor コンポーネントを有効化。
• AddInteractiveServerComponents() サーバー対話型コンポーネントを有効化。
• MapRazorComponents<App>() ルートコンポーネントをエンドポイントにマップ。

これらの行で、アプリの起動方法と有効なレンダリング機能が分かります。

よくある問題

うまくいかない場合、主な原因は次のとおりです。

• SDK が古い: dotnet --version で .NET 9 を確認。
• HTTPS 証明書の警告: dotnet dev-certs https --trust を実行。
• ポート競合: 古い dotnet プロセスを停止して再実行。

次回

第3章では コンポーネント を深掘りします。パラメーター、コンポジション、再利用しやすい UI 構成を扱います。