BlazorでのWebアプリケーション開発手法１【C#】A03_プロジェクトの作成

それでは、実際にBlazorのプロジェクトを作成していきましょう。Visual Studioがすでに起動している場合は、「ファイル」メニューから「新規作成」→「プロジェクト」を選択してください。まだ起動していない場合は、Visual Studio 2022を立ち上げ、スタート画面に表示される「新しいプロジェクトの作成」から始めます。

図1　Visual Studio 2022 起動直後の画面

「新しいプロジェクトの作成」画面が開いたら、右上のテンプレート検索ボックスに「Blazor」と入力して絞り込みます。

図2　新しいプロジェクトの作成画面

「Blazor」で検索すると、「Blazor Web App」「Blazor Server アプリ」「Blazor WebAssembly スタンドアロン アプリ」など、似たような名前のテンプレートがいくつも表示されます。ここで選び間違えないように注意してください。

図3　「blazor」で絞り込んだテンプレート一覧

今回使用するのは、一番上に表示されている「Blazor Web App」です。こちらを選択して「次へ」をクリックします。

図4　「Blazor Web App」テンプレートを選択

続いて「新しいプロジェクトを構成します」画面が表示されます。プロジェクト名はそのままで構いません。保存先の「場所」は、お好きなフォルダーを指定してください。ソリューション名も自動的にプロジェクト名と同じものが設定されます。入力できたら「次へ」をクリックします。

図5　プロジェクト名と保存先の指定

次に「追加情報」画面が表示されます。ここではいくつか重要な設定を行います。まず「フレームワーク」は、現在.NET 9.0が利用できるようになっているので、「.NET 9.0」を選択します。

次に「Interactive render mode」という項目があります。これは、アプリをServer側で動かすか、WebAssemblyとしてクライアント側で動かすか、あるいはその両方を使うかを選択する設定です。ここでは「Server」を選んでください。Serverを使うと、データベースなどに接続する際に、通常のデスクトップアプリケーションでSQL Serverなどに接続するのと同じような感覚で開発できるため、扱いやすいという特徴があります。

続いて「Interactivity location」という項目があります。これは、画面をページ単位で更新するか、アプリ全体でまとめて更新するかを決める設定で、レンダリングモードに関わるものです。「Per page/component」を選ぶと、更新が必要なページだけを個別に設定できるため、通信の負荷を抑えることができます。一方「Global」を選ぶと、アプリ全体が常時接続された状態になります。負荷を軽減したい場合は、ページ単位で設定できる「Per page/component」を選んでおくのがおすすめです。なお、この設定によって実際のコードにどのような違いが生まれるかについては、後のレクチャーで詳しく解説します。今回は「Per page/component」を選択してください。

「Include sample pages」はチェックを入れたままにしておきます。最後に「Do not use top-level statements」という項目がありますが、これはC# 9から使えるようになった、Mainメソッドを書かずに直接コードを記述できる書き方を使うかどうかの設定です。チェックを入れないままにしておくと、この簡略化された書き方（トップレベルステートメント）が使われます。逆にMainメソッドをきちんと書きたい場合は、ここにチェックを入れます。どちらでも問題はありませんが、今回はチェックを入れずに進めます。

図6　追加情報画面（フレームワーク・レンダリングモードの設定）

すべての設定ができたら、「作成」ボタンをクリックします。しばらく待つと、プロジェクトが作成されます。ソリューションエクスプローラーに、Componentsフォルダーやappsettings.json、Program.csなどのファイルが表示されていれば成功です。

図7　作成されたBlazorプロジェクト