C#のSPAが10分で実現できる、マイクロソフトの便利機能

この記事を読むと以下の3つのことがわかります。
①C#でSPAを実現させた「Blazor WebAssembly 3.2.0」とは?
②初心者でもたった10分、Blazor WebAssemblyでSPAを作る方法
③拡張子razorのファイルとBlazor WebAssemblyのセキュリティー設定

C#でSPAを実現させた「Blazor WebAssembly 3.2.0」とは何?

2020年5月20日、IT企業の超大手である「マイクロソフト」は、これまで通常JavaScriptでしか動かすことができなかったWebブラウザでのアプリケーション実行について、C#でも.NET対応のWebアプリが動かせる新しい便利機能「Blazor WebAssembly 3.2.0」をリリースしました。

今回のリリースは長年開発してきたBlazor WebAssemblyチームの集大成と呼ばれており、不具合等の致命的な問題が起きない限り、今後次のバージョンがリリースされることはない最終版だと発表されています。*注1

この「Blazor WebAssembly 3.2.0」、一体何が便利機能なのかというと、これまでブラウザのGUI処理には不可欠な技術とされていたJavaScriptを使用しなくても直接C#でSPAが作れます。

Blazor WebAssemblyは処理に時間がかかっていたJavaScriptの弱点を克服、より高速に処理を実行できるようになりました。

初心者でもたった10分、Blazor WebAssemblyでSPAを作る方法

新しいソフトウェアがリリースされ興味を持ったとしても、どうやって始めたらいいのか?調べるのは面倒くさいし設定は複雑そう…ついそんな気持ちになってしまい、結局後回しにしてしまうことが多々あります。しかし今回のBlazor WebAssembly3.2.0は本当に簡単なのです。プログラムの知識がなくても、IT用語が分からなくても、ただ指示通りに手を動かすだけで終わります。これは試してみないと損かもしれません。

Blazor WebAssembly3.2.0でSPAを作ってみよう!

https://blazor.netにアクセスしてWebAssemblyをインストールします。

上の画面が表示されますので「Download」をクリックして下さい。(ファイルが大きいので時間が掛かります。)たったこれだけ完了するだけでも進捗度は30%です。

次にインストーラーを実行します。PCに.NETをインストールしましょう。

インストーラーが完了したら、windowsマーク+Rボタンをクリック。ファイル名にcmdと入力してokをクリック。コマンドプロンプトを開きます。dotnetと入力しenterをクリックして下さい。

上記が表示されたら成功です。.NETが正しくインストールされ使用できる状態になっていることが確認できました。次に3つのコマンドを一行ずつコマンドプロンプトで実行します。

① dotnet new blazorwasm -o BlazorApp1
② cd BlazorApp1
③ dotnet run

そしてhttps://localhost:5000を開いてみて下さい。

上の画面が表示されれば大成功。c#を使ってSPAが出来上がりました。
どうでしょうか?信じられないくらい簡単ではありませんか?

マイクロソフトの公式サイトのページには、10分間のチュートリアルが用意されています。もしも上記の手順でSAPが上手く出来なかったという方はより詳しい内容が記載されているこちらを参照してみて下さい。*注2
Blazor Tutorial – Build your first Blazor app

Visual Studio 2019に慣れた方はこちらからでも

Blazor WebAssembly 3.2.0はVisual Studio 2019をインストールして始める方法もあります。c#に慣れている人はVisual Studio 2019を起動後、新しいプロジェクトの作成でBlazorアプリを選択。プロジェクト名、作成場所の設定後、作成ボタンをクリックします。作成するアプリのタイプをBlazor WebAssemblyで選択。適当なブラウザを選んで、デバッグを開始すると、ブラウザが起動して下の『Hello,world!』の画面が表示されます。

さぁc#、Blazor WebAssemblyでSPAができました。次は少し細かい部分、各ページで利用するRazorファイルとセキュリティー設定について確認してみましょう。

拡張子razorファイルとBlazor WebAssemblyのセキュリティー設定

Blazor WebAssemblyを使う1番の醍醐味は「C#言語を用いてSPA(Single Page Application)を作ること」です。ページ遷移せずに必要に応じてコンテンツを書き換えられるため、慣れてしまえばまるでデスクトップのアイコンを操作しているかのような手軽さを味わえます。

「プログラミング、Webページを作る…できるようになればかっこいいと思うけれど、1から覚えるのは難しそうだし面倒くさい」「シンプルなものならできるけれど作り込みは無理」Blazor WebAssemblyはそんな風に思っていた工程を大幅に短縮しながら自分でwebサイトが管理できる便利機能です。使いやすくなったツールはもう目の前にあります。重い腰を上げるのは今かもしれません。

ただクリックするだけでインストールできるBlazor WebAssembly 3.2.0の仕組み

Blazor WebAssemblyは、ブラウザー内で.NETコードを実行します。バイナリコードが直接実行できるためプラグインは使いません。Blazor WebAssemblyをインストールし実行すると、.NETアセンブリとランタイムがブラウザにダウンロードされ、ブラウザ上で.NETアセンブリが実行される仕組みになっています。

詳しいことを理解していなくても、インストールからSPAの設定は非常に簡単です。公式サイトからBlazor WebAssembly 3.2.0をただクリックするだけでいいという手軽さがあります。

ここまではかなり優秀な仕様だといえるのですが、WebAssemblyには予めセキュリティー制限が組み込まれているため、直接ファイルを開いて実行することはできません。

サーバレス、ブラウザだけで動作するWebアプリが作れる

Blazor WebAssemblyはサーバサイドと違って、Webサーバーとブラウザとの常時接続は必須ではありません。サーバ側の環境や処理を意識することなく、ブラウザだけで動作する動的なWebアプリケーションを設計し開発できます。

ここで頭に入れておかなければならないのは、Blazor WebAssemblyは当然ブラウザの機能しか利用できないということです。

例えば、Blazor WebAssemblyでSPAを作った後にできるBlazorApp1フィルダーの中のPagesというフォルダにできる「FetchData.razor」というファイルがあります。

このファイルはweather.jsonというJSON形式のデータファイルを読み込み5日間の気温を表示するのですが、直接weather.jsonを読み込んで表示しているわけではありません。WebAssemblyのセキュリティの制限により、ローカルファイルを直接読み込むことはできないのでSystem.Net.Httpクラスを利用して、Httpでファイルを非同期で参照しています。こういった点は設計する際に注意しなければなりません。*注3

◆まとめ

Blazor WebAssembly3.2.0は今回が最終版なので一度覚えてしまえばまた次のバージョンを覚え直す必要はありません。今後長い間役に立つでしょう。マイクロソフトは既にこれからもBlazorファミリーを開発する予定だと告知しています。Blazor Server、Blazor PWA、Blazor Hybrid、Blazor Native。Blazor WebAssemblyと互換性のいいアプリケーションは続々とリリースされる予定です。今後益々.NETを用いたプログラミングのスキルを持つエンジニアは重宝されるようになるのではないでしょうか。




エンジニア募集中

株式会社キャパでは中途エンジニアの募集をしています。
私たちと一緒に働きませんか?
募集概要について詳しくは


■参考文献
注1
Blazor WebAssembly 3.2.0 now available
https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/
注2
Blazor Build client web apps with C# .NET
https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
注3
Blazor University
https://blazor-university.com/

関連記事一覧