0から始めるWebアプリ Blazor 始めました①

はじめに

今日はBlazorに触れてみたいと思ったので記事を書いてみようと思います。
この記事では筆者が調べたWebアプリについての簡単な情報とRiderを使ってBlazorアプリケーションを起動するまでです。

筆者のスキル

業務でC#を利用している
デスクトップアプリの開発経験のみ
ウェブアプリに関する知識は0

経緯

時代はどんどんWeb化していっておりデスクトップアプリだけのスキルセットだと将来不安なので勉強してみたいと思ったのが経緯です。

なぜ Blazor?

勝手なイメージですがwebと言えば javascriptなイメージです。
BlazorはC# なので比較的取り組みやすいと思いました。

Webアプリについての情報を集める

Webアプリの知識が無さすぎて、いろいろ調べます。

Webアプリの一般的な仕組み

どうやらウェブアプリはフロントエンドとバックエンドの分かれるらしい。

フロントエンドがいわゆるhtmlでレンダリングを行う層でバックエンドと呼ばれるのがアプリケーションの実行機能が格納される本体側のプログラムです。

フロントエンド

ブラウザー上で動作する
基本的に機能を持たず、入力をサーバーに送信、サーバーからの結果を画面に表示するだけ
それぞれのブラウザ(chrome,opera,ie,firefox...)事に若干挙動が違う事がある
SPA(SinglePageApplication)とMPA(MultiPageApplication)2種類がある

バックエンド

アプリケーションの実処理を行う
フロントエンドとネットワークでデータをやり取りする
セキュリティに注意を払う必要あり
OSがフロントエンドと違うケースもある(Linuxが多い?)
フロントエンドとは言語が違う場合がある。
最近はコンテナと呼ばれるの仮想ホストの上に乗せたりする

最近はWebAssemblyというブラウザー上でネイティブ言語(C++等)を動かせるようになる仕組みが整ってきているみたいです。BlazorでもWebAssemblyを利用できます。

プロジェクトの作成＆アプリの実行まで

今回はRider から作成しますVisualStudioでも大丈夫です。
今回はWebAssemblyで作ってみます。

f:id:at12k313:20201219185340p:plain

ASP.NET Core WebApplicatonを選択し、以下のように設定します。

SDK	5.0.101
Type	Blazor WebAssemblyApp (Blazor ServerApp と選択)
.NET	.NET5
Laungage	C#

※VisualStudioの場合は Blazorで検索してテンプレートから選びます。
f:id:at12k313:20201219191925p:plain

プロジェクトが開いたら実行プロジェクトを作成したアプリケーションに変更し、デバッグ実行します。
f:id:at12k313:20201219194404p:plain

ブラウザーが立ち上がり以下のような画面が出れば成功です。 f:id:at12k313:20201219191659p:plain

トラブルシュート

ビルドが通らなかったりうまく動かない場合は以下を確認してみて下さい。

最低限必要な依存パッケージは次のようになっているのでnugetから正しく取得できている確認します。

Microsoft.AspNetCore.Components.WebAssembly
Microsoft.AspNetCore.Components.WebAssembly.DevServer
System.Net.Http.Json

csproj

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.1"/>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.1" PrivateAssets="all"/>
        <PackageReference Include="System.Net.Http.Json" Version="5.0.0"/>
    </ItemGroup>

</Project>

また、正しく参照できている且つ対応する.NETのランタイムバージョンとマッチしているかを調べます。

powershellから以下のコマンドでインストールされているランタイムを確認できます。

 PS > dotnet --list-runtimes

筆者の環境で実行するとこんな感じ。

Microsoft.AspNetCore.All 2.1.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.All 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.3-servicing-26724-03 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 2.1.23 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

参考

SPAとMPA - マイクロソフト系技術情報 Wiki
コンテナってなんだろう― 「コンテナ」の概要を知る | Think IT（シンクイット）
【とりあえず動かしたい超初心者向け】はじめての Blazor WebAssembly 環境構築 - Qiita

まめ - たんたんめん

備忘録　C# / WPF 多め