はじめに - "C# で SPA を作る Blazor とは?"
「C# で SPA が作れるって、どういうこと?」
「C# で SPA が作れたら何がうれしいの?」
「Blazor って、クライアントサイド版とサーバーサイド版があるって聞いたんだけど」
そんな話題については、下記スライドなどが参考になろうかと思います。
改めて - C# で SPA を作る Blazor の、開発環境の作り方 - CLI 編
Blazor アプリを開発する環境を構築するには、Windows 上で行なう場合は、Visual Studio 2019 をインストールする方法もあります。
ですが今回は、CLI (コマンドラインインターフェース) を使った、OS の違いに左右されない開発環境の構築手順について記していきます。
CLI ベースでの Blazor アプリ開発環境の構築手順は、大きく分けて 3 つです。
- 手順1. .NET Core SDK のインストール
- 手順2. プロジェクトテンプレートのインストール
- 手順3. エディタを用意する
以下、順番に解説していきます。
手順1. .NET Core SDK をインストールする
実のところ、Blazor アプリの開発に必要最低限の環境は、.NET Core SDK だけです。
このあと URL 記載しますが、公式サイトのガイドに従って、各種 Linux ディストリビューション、macOS、Windows それぞれお使いの OS 環境に合わせて .NET Core SDK をインストールします。
クライアントサイド Blazor アプリを作るなら、プレビュー版をインストール (現在時点)
但し、インストールする .NET Core SDK のバージョンにだけはご注意下さい。
本稿執筆時点では Blazor WebAssembly アプリ (クライアントサイド Blazor) は未だプレビュー版です。
そのため、Blazor WebAssembly アプリ作成のためには .NET Core SDK 3.1 プレビュー 3 が必要です。
.NET Core SDK 3.1 プレビュー版のインストール手順やインストーラの入手については、下記リンクを参照下さい。
例えば Windows の場合ですと、上記リンクから .NET Core SDK のインストーラファイル (.exe) をダウンロード (下図赤丸)、実行し、起動したインストーラの画面で次へと進めていくだけで完了します。
(※インストーラのファイルサイズは 120MB 程のようです)
インストールが完了しましたら、ターミナル (コマンドプロンプト、PowerShell) にて下記のように dotnet コマンドを試しに実行し、使えること、およびバージョンを確認しておきましょう。
> dotnet --version
3.1.100-preview3-014645
なお、Blazor サーバーアプリ (サーバーサイド Blazor) は、安定リリース版の .NET Core SDK 3.0 以降がインストールしてあればよいです.
また、.NET Core SDK は、同一 PC・OS 内に複数の異なるバージョンをインストール可能です。
そのため、安定リリース版とプレビュー版、それぞれの .NET Core SDK をインストールして Blazor アプリ開発を楽しむことができます。
手順2. Blazor のプロジェクトテンプレートをインストールする
サーバーサイド Blazor 用のプロジェクトテンプレートは既に用意されている
.NET Core SDK さえインストールできれば、Blazor アプリの開発は可能です。
とくにサーバーサイド Blazor アプリについては、下記のように dotnet new コマンドを、プロジェクトテンプレート名として blazorserver を指定して実行することで、サーバーサイド Blazor アプリの新規プロジェクトを作成できます。
> dotnet new blazorserver -o FooBar
上記コマンドを実行すると、カレントディレクトリの下に "FooBar" というサブフォルダを作成して、その "FooBar" サブフォルダ内に、プロジェクト名 "FooBar" で、サーバーサイド Blazor アプリのプロジェクト一式が生成されます。
クライアントサイド Blazor 用のプロジェクトテンプレートは自分でインストール
いっぽう、クライアントサイド Blazor については現時点で未だプレビュー版ということもあり、.NET Core SDK をインストールしただけでは、クライアントサイド Blazor のプロジェクトテンプレートは既定では用意されていません。
もっとも、プロジェクトテンプレートがなくても、スクラッチでクライアントサイド Blazor アプリのプロジェクトファイル一式を新規に書き起こすこともいちおう可能です。
可能ではある、のですが、やはり少々手間ではあります。
そのため、クライアントサイド Blazor 用のプロジェクトテンプレートを別途インストールしておくのがよいでしょう。
.NET Core SDK 用のプロジェクトテンプレートは、nuget.org でも配布されており、クライアントサイド Blazor のプロジェクトテンプレートも nuget.org 経由でインストールされます。
nuget.org をブラウザで開き、"Blazor Templates" などで検索すると、検索結果に Microsoft.AspNetCore.Blazor.Templates パッケージが見つかります。
これを開くと、このプロジェクトテンプレートのパッケージをインストールする方法が書いてあります。
現時点では、下記のように dotnet コマンドを実行すればよいです。
> dotnet new --install Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2
ひとたびプロジェクトテンプレートのインストールが完了しましたら、dotnet new コマンドにて、プロジェクトテンプレート名として blazorwasm を指定して実行することで、クライアントサイド Blazor アプリの新規プロジェクトを作成できます。
> dotnet new blazorwasm -o FooBar
上記コマンドを実行すると、カレントディレクトリの下に "FooBar" というサブフォルダを作成して、その "FooBar" サブフォルダ内に、プロジェクト名 "FooBar" で、クライアントサイド Blazor アプリのプロジェクト一式が生成されます。
なお、上記コマンドでは、純粋にクライアントサイド Web アプリケーションとしてのみのプロジェクト構成が生成されます。
これに加えて、サーバー側実装として ASP.NET Core Web アプリケーションを配したプロジェクト構成も生成可能です。
そのためには、下記のように --hosted スイッチを付けて dotnet new コマンドを実行します。
> dotnet new blazorwasm -o FooBar --hosted
補足1: 実行方法
Blazor アプリのプロジェクトのビルド、および、実行方法は、カレントディレクトリをプロジェクトがあるフォルダに移動して、dotnet run コマンドを実行します。
> cd ./FooBar
> dotnet run
こうすると自動的にプロジェクトがビルドされ、Web サーバーが起動し、ブラウザで開くことができるようになります。
詳しくは dotnet コマンドについての公式サイトの解説 (下記リンク) を参照するとよいでしょう。
- .NET Core コマンドライン インターフェイス (CLI) ツール | Microsoft Docs
- Windows/Linux/macOS の .NET Core でのコマンド ラインの使用に関する概要 | Microsoft Docs
補足2: よりシンプルなプロジェクトテンプレート
上記で導入した、クライアントサイド Blazor のプロジェクトテンプレートですが、このプロジェクトテンプレートから作成したプロジェクトには Bootstrap によるデザインが仕込まれていたりなどなど、はじめから色々な実装が乗っています。
そうではなく、本当にまっさらな、必要最小限の実装しかされていない、クライアントサイド Blazor アプリのプロジェクトを新規作成したい場合は、そのような用途のプロジェクトテンプレートを追加しておくとよいでしょう。
必要最小限の実装だけを吐き出す、クライアントサイド Blazor のプロジェクトテンプレートは、下記を実行することでインストールされます。
> dotnet new --install Toolbelt.AspNetCore.Blazor.Minimum.Templates::3.1.0-preview3.19555.2
なお、バージョン (コロン2つ以降の "3.1.0-preview3.19555.2") は本稿執筆時点のものですので、適宜読み替えてください。
上記コマンドを実行してプロジェクトテンプレートのインストールが終わると、blazorwasmmin および blazorwasmhostedmin という 2 つのプロジェクトテンプレート名が追加・使えるようになります。
まっさらなクライアントサイド Blazor アプリのプロジェクトを新規作成するには下記のようにします。
> dotnet new blazorwasmmin -o FooBar
まっさらなクライアントサイド Blazor アプリの、サーバー側に ASP.NET Core による Web サーバー実装をもつプロジェクトを新規作成するには、下記のようにします。
> dotnet new blazorwasmhostedmin -o FooBar
手順3. エディタを用意する
あとはお好みのエディタで、C# のソースコードファイル (.cs) や、Blazor のコンポーネントファイル (.razor) を編集、コーディングしていけばよいです。
とくにこだわりのエディタがない場合、Blazor アプリ開発という観点では、とりあえず Visual Studio Code が無難でお勧めです。
Visual Studio Code についての詳細、および、インストーラの入手などは、下記リンクを参照ください。
C# 拡張がインストールされている状態であれば、コードの色分けやコード補完などなどの強力な開発支援が得られ、快適にコーディングすることができるでしょう。
以上!
以上で、CLI ベースでの Blazor アプリ開発環境の構築は完成です。
Happy Coding :)