新規Blazorプロジェクトの作成（Server/WASM）｜ASP.NET×Blazor入門 2.2

2.2 新規Blazorプロジェクトの作成（Server / WASM 両方）

開発環境が整ったら、いよいよBlazorアプリの作成に取りかかりましょう。
ここでは、Blazorの2つの主要なテンプレート（Blazor Server / Blazor WebAssembly）を使って、最初のプロジェクトを立ち上げる手順を解説します。
シンプルな“Hello World”レベルの構成ではありますが、C#でWeb UIを動かすという体験は、今後の理解を深める大きな第一歩になるはずです。

Blazorには以下の2つの実行モデルがあります。仕組みや用途は異なりますが、どちらも.NETの開発者にとって扱いやすい構成です。

• Blazor Server： サーバーでUIロジックを実行し、SignalRでブラウザとリアルタイム通信を行う構成
• Blazor WebAssembly： アプリ全体をブラウザに配信し、WASMとしてクライアント側で動作する構成

Visual Studio を使ったプロジェクトの作成

1. Visual Studio を起動し、[新しいプロジェクトの作成]を選択
2. 検索欄に「Blazor」と入力し、Blazor Server App または Blazor WebAssembly App を選択
3. プロジェクト名と保存先を指定し、「作成」をクリック
4. 使用する .NET バージョンや認証の有無を確認し、設定を確定

プロジェクト作成後に F5 キーを押せば、ブラウザが起動し、初期状態のBlazorアプリが表示されます。
この動作こそが、あなたのPC上でBlazorが動き出した証です。

CLI（コマンドライン）を使ったプロジェクト作成

コマンドラインでも簡単にBlazorアプリを作成できます。以下のコマンドを使用して試してみましょう。

# Blazor Server アプリの作成
dotnet new blazorserver -o MyBlazorServerApp

# Blazor WebAssembly アプリの作成
dotnet new blazorwasm -o MyBlazorWasmApp

それぞれのフォルダに移動し、次のコマンドでアプリを起動します。

cd MyBlazorServerApp
dotnet run

ブラウザが開き、カウンターやデータ取得のサンプル画面が表示されていれば、セットアップは成功です。

Blazor Server と WASM の違い（基本比較）

どちらのテンプレートを選んでもUIや機能の基本構成は似ていますが、動作モデルは根本的に異なります。以下に、主な違いを整理した比較表を示します。

現時点では、どちらの方式を選んでも問題ありません。重要なのは、まずは自分の手でプロジェクトを作成し、実際に動かしてみることです。
小さな達成が、Blazor開発の理解とモチベーションを大きく前進させてくれるはずです。

次のセクション 「2.3 フォルダ構成とプロジェクト構造の理解」では、今作成したBlazorプロジェクトの内部構成を詳しく見ていきます。どのファイルが何を担当しているのかを整理し、今後の開発に向けた土台をしっかりと固めていきましょう。