先生と生徒の会話形式で理解しよう

生徒

「ASP.NET Blazorって最近よく聞くんですが、どうやってプロジェクトを作るんですか？」

先生

「BlazorはASP.NETの中でも新しい仕組みで、WebアプリをC#だけで作れます。まずはプロジェクトの作り方を覚えるところから始めましょう。」

生徒

「パソコン操作も不安なんですが、それでも大丈夫ですか？」

先生

「大丈夫です。画面の流れを一つずつ確認しながら進めれば、初めてでも問題ありません。」

1. ASP.NETとBlazorの関係を知ろう

ASP.NETは、マイクロソフトが提供しているWebアプリケーション開発用の仕組みです。昔はWebForms、次にMVC、そして現在主流になっているのがASP.NET Coreです。Blazorは、このASP.NET Coreの上で動く比較的新しい技術です。

Blazorの最大の特徴は、JavaScriptを書かずにC#だけで画面を作れる点です。これは、外国語を何種類も覚えなくても、日本語一つで会話できるような感覚に近いです。初心者にとって、学ぶ内容が減るのは大きな安心材料になります。

2. Blazorプロジェクトを作る前の準備

Blazorプロジェクトを作成するには、まずVisual Studioという開発用ソフトが必要です。これは、文章を書くためのワープロソフトのような存在で、プログラムを書く、保存する、実行する、という作業をまとめて行えます。

また、内部では.NET SDKという部品セットが使われています。SDKとは、料理でいう調理器具と調味料が一式そろったセットのようなものです。Visual Studioをインストールすると、通常は一緒に準備されるので、初心者が個別に意識する必要はあまりありません。

Visual Studioを起動したら、最初の画面で「新しいプロジェクトの作成」をクリックします。次に表示される画面では、たくさんのテンプレートが並びますが、ここで「Blazor」と検索すると候補が絞られます。

ここで選ぶのがBlazor Web Appです。テンプレートとは、最初から形が整ったひな型のことです。真っ白なノートではなく、あらかじめ見出しが書いてあるノートを選ぶイメージです。

プロジェクト作成の途中で、「Blazor Server」と「Blazor WebAssembly」の選択画面が出てきます。これはアプリの動き方の違いを表しています。

Blazor Serverは、処理の多くをサーバー側で行います。電話でオペレーターに都度聞きながら進めるような仕組みです。一方、Blazor WebAssemblyは、最初に必要なものをまとめてダウンロードし、ブラウザ側で動きます。こちらは説明書を最初にもらって自分で進める感覚に近いです。

プロジェクトが作成されると、左側にたくさんのフォルダやファイルが表示されます。これをプロジェクト構成と呼びます。最初は難しく見えますが、家の間取り図のようなものだと考えると分かりやすいです。

例えば「Pages」フォルダには画面に表示される部品が入っています。「Program.cs」はアプリ全体の開始地点です。今は細かく覚えなくても、こういう役割分担があると知るだけで十分です。

Blazorプロジェクトには、最初から動くサンプルが入っています。例えば、簡単なカウンター画面です。これはボタンを押すと数字が増えるだけの仕組みですが、Blazorの基本が詰まっています。


int count = 0;

void IncrementCount()
{
    count++;
}

このコードでは、変数という箱に数字を入れて、ボタン操作でその数字を増やしています。変数とは、数字や文字を一時的に入れておく箱のことです。

Visual Studioの上部にある再生ボタンを押すと、アプリが起動します。すると、自動的にWebブラウザが立ち上がり、作成したBlazorアプリが表示されます。

これは、書いたプログラムが正しく動いているかを確認する実行という作業です。料理でいえば、完成した料理を実際に食べて味を確かめる工程にあたります。


現在のカウント: 1

初心者がよく戸惑うのが、テンプレート選択や保存場所です。保存場所は、机の引き出しのようなものなので、自分が後で見つけやすい場所を選べば問題ありません。

また、エラーが出た場合でも、ほとんどは設定ミスや選択肢の違いです。パソコンが壊れたわけではないので、落ち着いて画面のメッセージを読むことが大切です。


Console.WriteLine("Blazorプロジェクトが正常に起動しました");