Blazorはじめてみる【環境構築】

こんちは。てちこまです。

お仕事で今後C#を触る可能性が高いということでそろそろC#の勉強はじめようと思っていたところ
「Blazor」とかいうのが今、アツいらしいのでそれでなんか作ってみようと思います。

とりあえず環境構築から。

Blazorってなんだろう？

ざっくり言うと「C#でWebアプリケーション、SPAが作れるようになりました」って話らしいです。

WebAssemblyという技術、仕様によりモダンなブラウザでは今、従来のJavaScript以外にC言語やC++、C#、TypeScriptをコンパイルしたバイナリコードをクライアント側で実行できるようになってます。全然知らなかった。

メリットとして

• インタプリタ型であるJavaScriptより実行速度が早い。
• バイナリコードのやり取りであるためセキュリティ性が高い。

などがあります。

この正式版がつい先日発表されたので早速触っていきましょう。

環境

Windows 10
.NET Core 3.1

環境構築手順

1. .NET Core 3.1をインストールしましょう

こちらからダウンロードできます。
自分のOSにあったものを選択してください。

2. テンプレートを追加するコマンドを実行しましょう

ターミナルを開いて以下のコマンドを実行します。

バージョンが変わっているかもしれないので公式サイトも参考にして適切なバージョンをいれてください。

3. VSCodeに拡張機能を入れよう

まずC#の拡張機能とJavascriptDebugger拡張機能を入れてください。

またVSCodeの設定(ショートカットキー[Ctrl+,]で開きます)からExtensions>JavascriptDebugging>Use Previewの項目をtrueに設定しましょう。

settings.jsonに追記する場合は以下

以上終わりましたらVSCodeを再起動しましょう。

4. アプリケーションを作成します

アプリケーションを作成したいディレクトリに移動しましょう。
そこで以下のコマンドを実行します。

※hogehogeの部分は自分のアプリ名をいれてください。
先ほど移動したディレクトリ直下にアプリ名のディレクトリが出来ているので移動してください。

サンプルファイルやディレクトリが作成されています。
VSCodeでファイルを触る場合は上のディレクトリで開きましょう。

おそらくVSCode画面右下に以下のダイアログが出現しますのでYesを選択してください。
※モザイク部分は先ほど設定されたアプリ名です。

5. サンプルを実行してみましょう

以下のコマンドでローカルサーバが立ち上がります。

6. ブラウザでサンプル画面を開きましょう

http://localhost:5000にアクセスすると以下の画面が表示されるはずです！

感想

環境用意するのはめちゃくちゃ簡単でした。

後はVScodeかVisualStudioでちゃきちゃきコーティングしていけば自分なりのアプリケーションを作れそうですね。

この勢いでルーティング、ユーザ認証やりたいんですけど.NET Coreのバックエンド知識がないんで実装方法調べてみます。

(個人的にAndroidアプリから開発始めた関係で普通のWebサービスとSPAだったらSPAに親近感湧きます笑)