はじめに
C# のモダンフレームワーク周りに関する知見がほとんどない人に Blazor WebAssembly の環境構築をレクチャーする機会... はなかったのですが、こちらの Qiita 記事「【とりあえず動かしたい超初心者向け】はじめてのVue.js環境構築」のコンセプトが興味深く、この記事の丸パクリ Blazor WebAssembly 版クローンを書きたくなり、@LAGALIN さんに相談してみたところ承諾をもらったので、この機に構築手順をまとめてみます。
30分1時間で最低限のツールと手順を把握しつつ環境構築することを目指したため、全体的に雑さが目立ちますがご了承ください。
前提
コマンドラインツール (コマンドプロンプトとかターミナル) が使える
Blazor WebAssembly の開発には、Visual Studio などの統合開発環境を使うこともでき、コマンドラインツール (コマンドプロンプトとかターミナル) を開かずに開発を進めることもできます。
ですが今回はコマンドラインツールを使った開発手順を想定して環境構築することにします。
よくわからない方はこちらから基本を学びましょう。
https://tutorial.djangogirls.org/ja/intro_to_command_line/
筆者の実行環境 (参考までに)
.NET SDK: 5.0.100
Blazor WebAssembly (ぶれいざー うぇぶあせんぶり)
Blazor WebAssembly とは
- プログラミング言語「C# (しーしゃーぷ)」のフレームワーク (フロントコーディングの処理の一部を自動化したり簡略化してくれるツール) の 1 つ
- 単一のページ (要は 1 つの html ファイル) でコンテンツを切り替えるシングルページアプリケーション (SPA) を実現できる
- 基本は C# だが、フレームワーク独自の書き方やルールが存在する
- 他のモダンフレームワークとしては Vue.js, Angular, React などが有名だが、これらと比べると C# で実装するところが特徴で、一例としてはサーバー側も C# で作られているプロジェクトだとさらに強みを発揮できる
.NET (どっとねっと)
.NET とは
※ JavaScript 界における Node.js に相当します。
- プログラミング言語「C#」や「F# (えふしゃーぷ)」、「VB (びじゅあるべーしっく、ぶいびー)」などの対応する言語で書かれたプログラムの実行環境
- およびそれらプログラミング言語での開発環境を .NET "SDK" (えすでぃーけー、Software Development Kit の頭文字) という
- 詳細は割愛します
.NET SDK のインストール
こちらを参照
https://dotnet.microsoft.com/download
Windows
上記、公式の .NET 関連のダウンロードサイトから、Windows 用の .NET SDK のインストーラーをダウンロードし、実行。
macOS
上記、公式の .NET 関連のダウンロードサイトから、macOS 用の .NET SDK のインストーラーをダウンロードし、実行。
Linux
基本的に、各ディストリビューションのパッケージマネージャに、.NET のリポジトリを追加登録した上で、パッケージマネージャを使ってインストール。
具体的な、ディストリビューションごとのインストール手順は下記。
https://docs.microsoft.com/ja-jp/dotnet/core/install/linux
バージョンについて
2020/12/4 現在、.NET は v5.0 が最新バージョン。
NuGet (ぬげっと)
※ JavaScript 界における npm に相当します。
- NuGet は、.NET SDK に含まれるパッケージ管理の仕組みや機能
- パッケージ (.NET のモジュールやライブラリ) をダウンロードからインストールまでよしなにやってくれる上に、依存関係 (他にもこのライブラリがないと正常に動作しないよ、みたいな関係のもの) もいい感じにインストールして解決して読み込んで使える状態にしてくれる優れもの
- 現代のモダンフレームワークを用いた開発は大半がこれ（系）を使ってライブラリを管理している。
- .NET SDK をインストールした時点で NuGet によるパッケージ管理の機能もインストールされているため (普通は後述の「dotnet」コマンドを介して使う)、特に追加操作はなし
dotnet CLI (どっとねっと しーえるあい)
dotnet CLI とは
- Blazor WebAssembly をはじめ .NET 用プログラミング言語での開発を手早く進めるためのコマンドラインツール
- コマンド 1 つで、いい感じのスタートアップ環境が作れる便利ツール
- .NET SDK をインストールした時点でインストールされているため、特に追加操作はなし
プロジェクトの作成
カレントディレクトリにプロジェクトディレクトリが作成されるため、まずは場所を用意してください。
dotnet new blazorwasm -n blazor-sample-project
しばらくするとプロジェクト作成が完了するので、プロジェクトディレクトリに移動しましょう。
cd blazor-sample-project
ローカルで実行
dotnet watch run
成功すると、デフォルトでは https://localhost:5001/ (および http://localhost:5000/) にサーバが立ち上がり、自動でブラウザが起動してこの URL が開きます。
自動でブラウザが開かなかったりした場合は、自分でブラウザからアクセスしてください。
ここで、ページ左の Counter を押してみましょう。
実行前
実行後
あたかも別のページに遷移したかのように見えたかと思いますが、同じページ (html ファイル) の中で C# を使って内容を切り替えています。これを、ルーティングといいます。
これにより、ページ全体を読み込み直す必要がないため動作が軽くなると共に、ヘッダやフッタといった共通部品をより簡単に定義できるようになります。
発行
dotnet publish -c:Release
成功すると、ルートディレクトリ直下に bin/Release/net5.0/wwwroot というフォルダが作成され、中にプロジェクトデータが出力されます。
この bin/Release/net5.0/wwwroot フォルダに出力されたファイル群を、任意の Web サーバー (例: Firebase や GitHub Pages などなど) 上に配置することで一般公開可能です。
最低限知っておくべきディレクトリ構成
wwwroot
Blazor WebAssembly システムによっていい感じに包括処理されない、外側のエリア。
発行時にそのまま出力される。
image とか sound みたいなアセットもここに配置する。
index.html もここにある。
Shared
全体のレイアウトのような、共通のコンポーネントを配置する。
Pages
単一ページのコンポーネントを配置する。
ルーティングにより切り替えられるページがここに定義される。
先ほど体験した、Counter 押下時に表示されるページがどれか、というルーティング設定は、各コンポーネント内に記載されている。
App.razor
エントリーポイントとなる大元のコンポーネント。
大雑把な各コンポーネント構成のイメージは以下
Program.cs
エントリーポイントとなる C# プログラムファイル。
{プロジェクト名}.csproj
※ JavaScript 界の package.json に相当します。
使用する NuGet パッケージの情報や、その他プログラムをビルドしたり発行したりするときのオプション指定を記載する。
最後に
擦られまくったネタな上にとんでもなく駆け足でしたが、以上になります。
この記事ではとりあえずプロジェクトをセットアップしてとにかく動かす所まで実施しましたが、細かい動作原理、コーディングにおける Blazor WebAssembly の作法等には一切触れていないため、このまま開発に移るのは難しいと思います。
Blazor WebAssembly は公式ドキュメントがかなり親切 (しかも日本語対応) です。Qiita をはじめとするリファレンスもかなり充実して...いない...かな? 😅
ハマりどころもよく見たら公式に書いてあったりすることが結構あるので、まずは公式を見てみて、よく分からなければ Qiita とかで分かりやすい解説記事を探してみる、を繰り返していくことで、きっとツールの魅力に気付いていけるようになると思います。
いざ、Blazor WebAssembly のせかいへ！レッツゴー！