LoginSignup
7

More than 3 years have passed since last update.

5 分で Hello World できる Blazor WebAssembly (C#)

Last updated at Posted at 2020-08-26

SPA 開発となると、そのフレームワーク/ライブラリの選択肢の多くは Angular、React、Vue と言った JS のフレームワーク/ライブラリが一般的かと思います。

今回はそれ以外の選択肢である Blazor を利用して C# で書ける SPA 開発を紹介します。

とりあえず動かしたい!!って人は以下の概要を読み飛ばして、Hello World のハンズオンに飛んでください!
macOS でも Linux でも Windows でもクロスプラットフォームで開発でき、動きます。

ASP.NET Core Blazor

  • JavaScript ではなく C# (.NET) で書ける SPA (Single Page Application) 向けのフロントエンドフレームワーク
  • Blazor WebAssembly (上) と Blazor Server (下) の 2 種類がある
    • Blazor WebAssembly : 完全な SPAで、wasm で書いた .NET ランタイム上で C# のコードが動く
    • Blazor Server : ASP.NET Core SignalR の技術を利用して疑似的に SPA を実現しているイメージ (ただし動的生成したHTMLを返すような従来の View の機構を持ったバックエンドフレームワークとは異なる)
  • いずれもコンポーネント指向で、Razor コンポーネントで各コンポーネントを記述
  • クロスプラットフォーム動作の .NET を前提にしてるので、Mac でも Linux でも開発可能

参考 : Blazor - 概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1

Blazor WebAssembly

  • wasm で書いた .NET Runtime 上で C# がブラウザで動く!
  • JavaScript interop という機能で JS を介してブラウザの全機能にアクセス可能
  • 最近出た Azure Static Web Apps (Preview) にホストも可能

参考 : Blazor WebAssembly
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly

Blazor WebAssembly で Hello World

0. 前提

  • OS : macOS, Linux, Windows 何でも
  • 最新の .NET Core SDK をインストールし、インストール後に以下を実行し、無事インストールされていることを確認
dotnet --version

1. テンプレートを生成、動かす

dotnet CLI で Blazor WebAssembly のテンプレートを生成

任意のディレクトリで以下を実行

dotnet new blazorwasm -o HelloWorld

HelloWorld プロジェクト内に移動し、watch モードでアプリを起動

cd HelloWorld
dotnet watch run

起動後に https://localhost:5001 もしくは http://localhost:5000 にアクセスし、以下の画面が出ていれば成功

image.png

2. ちょっとだけ変更

ちょっとコード変更

Pages/Index.razor の中を以下に変更

@page "/"

<h1>Changed Hello</h1>

変更反映の確認

ブラウザ画面をリロードし、変更の反映を確認。

image.png

最後に

今日は Hello World だけですが、ASP.NET Core SignalR との組み合わせのチュートリアル等もありますので、興味があれば色々触っていただければと思います。

参考 : ASP.NET Core SignalR を Blazor WebAssembly と共に使用する
https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/signalr-blazor-webassembly?view=aspnetcore-3.1&tabs=visual-studio

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7