ASP.NET Core Blazor Server のサンプルアプリを作成するまでの導入手順

Visual Studio には、Community、Professional、Enterprise の３つのエディションがあります。
Community は無償、ProfessionalとEnterprise は有償です。
Community と Professional で使用できる機能に大きな違いはありません。
Community は５人以下での開発、及び売上が年間１００万ＵＳドル以下の場合に利用することができます。

1. 以下のリンクをクリックしてダウンロードページへアクセスしてください。
   Visual Studio Community
2. [ダウンロード]をクリックします。
   
   


3. 自分のパソコンのダウンロードフォルダに[VisualStudioSetup.exe]という名前のファイルがダウンロードされたことを確認してください。
   
   

1. [VisualStudioSetup.exe]をダブルクリックしてインストールを開始してください。
2. [続行]をクリックしてください。
   
   
   

1. ・[ASP.NET と WEB 開発]、[Azure と AI の開発]、[.NET デスクトップ開発] にチェックを入れてください。
   ・右側のメニューの [ASP.NET と WEB 開発] の項目を展開し、[.NET 10.0 WebAssembly Tools]、[.NET 8.0 WebAssembly Tools] にチェックを入れてください。
   
   


2. [インストール] をクリックしてください。
   
   
   


3. (任意) インストールが完了したら、自分のパソコンのウィンドウズマークをクリックし、続いて [インストールされているアプリ]をクリックしてください。
   
   
   
   


4. (任意) [すべて] の項目で [ビューカテゴリ] を展開して [一覧] をクリックしてください。
   
   


5. (任意) [V] のカテゴリにて [Visual Studio] を右クリックし、[スタートにピン留めする] をクリックしてください。
   
   


6. スタートにピン留めしておくと、これ以降、スタートアイコンのクリックで [ピン留め済み] に [Visual Studio] が表示されるようになります。
   
   

1. Visual Studio を起動し、[新しいプロジェクトの作成] をクリックしてください。
   
   


2. 画面上部の検索窓で [Blazor] を入力してください。
   一覧に表示された [Blazor Web アプリ] を選択して、[次へ] をクリックしてください。
   
   


3. (任意) Blazor Server アプリのソースファイルの格納場所を作成します。
   C ドライブ直下に任意の名前のフォルダを作成してください。例では [work] という名称のフォルダを作成しました。
   
   


4. 任意のプロジェクト名、ソースの配置場所を入力後、[次へ] をクリックしてください。
   例では先ほど作成した [C:\work\] に Blazor Server アプリのソースファイルの格納場所として指定しています。
   
   


5. ・フレームワークに [.NET 10.0 (長期的なサポート)] を選択してください。
   ・対話型レンダリングモードに [サーバー] を選択してください。[サーバー] 選択で Blazor Server アプリを作成することができます。
   ・公式サンプルコードでアプリを作成するので、[サンプルページを含める] にチェックをいれてください。
   ・最後に [作成] をクリックしてください。公式サンプルコードの Blazor Server が、Visual Studio で自動起動します。
   
   

Visual Studio の初期状態は、背景色が黒色で文字の色が白色です。
変更したい場合は、次に続く手順を実行してください。

1. 背景色の変更
   [ツール] タブをクリックし [オプション] を選択してください。
   
   


2. 背景色の変更
   [[環境] の項目にて [フォント及び色] をクリックします。
   
   


3. 背景色の変更
   [[ビジュアル エクスペリエンス] の [配色テーマ] をクリックすると背景色一覧が展開します。
   例ではシルキーピンクを選択しています。
   
   


4. テキストエディタの背景色と文字色の変更
   [環境] の項目にて [フォント及び色] をクリックしてください。
   
   


5. テキストエディタの背景色と文字色の変更
   ・[設定の表示] の項目にて [テキストエディタ] を選択してください。
   ・[前景色] [背景色] の項目にて任意の色を選択してください。
   ・最後に [OK] ボタンをクリックしてください。
   
   

拡張子が[slnx]であるファイルをクリックすると Visual Studio が起動します。

1. 作成した Blazor アプリを格納している Path へ移動します。 例では [C:\work\]を開いています。
   
   


2. Blazor アプリのフォルダの中に入ってください。
   拡張子が[slnx]であるファイルをクリックしてください。Visual Studio が起動します。