LoginSignup
5
1

More than 3 years have passed since last update.

.NET Core 3.1 SDKをMacにインストールして「Blazor WebAssembly App (3.2.0)」を試してみる。

Last updated at Posted at 2020-06-06

インストーラーをダウンロード

下記URLより、SDKのインストーラーをダウンロード
https://dotnet.microsoft.com/download/dotnet-core/thank-you/sdk-3.1.300-macos-x64-installer

インストーラを実行

スクリーンショット 2020-06-07 2.08.11.png

「続ける」を押下

スクリーンショット 2020-06-07 2.08.24.png

「続ける」を押下

スクリーンショット 2020-06-07 2.08.34.png

「インストール」を押下

スクリーンショット 2020-06-07 2.09.09.png

待機

スクリーンショット 2020-06-07 2.09.22.png

「閉じる」を押下

dotnetコマンドの確認

/usr/local/share/dotnet/dotnet --version
3.1.300

パスを通す

.bash_profile を編集

vi ~/.bash_profile 

以下の内容を、.bash_profile に追加。

/usr/local/share/dotnet/

.bash_profile を読み込み直す。

source ~/.bash_profile

パスが通ったか確認

dotnet --version
3.1.300

ASP.NET Core Blazor WebAssembly のテンプレートプロジェクトをインストール

dotnet new --install Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0

ASP.NET Core Blazor WebAssemblyのプロジェクト作成

dotnet new blazorwasm -o example

結果

The template "Blazor WebAssembly App" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on /Users/mitsugi/example/example.csproj...
  復元対象のプロジェクトを決定しています...
  /Users/mitsugi/example/example.csproj を復元しました (2.97 sec)。

Restore succeeded.

作成したプロジェクトに移動

cd example

とりあえず、実行してみる。

dotnet run
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /Users/mitsugi/example

localhost:5001 にアクセスしてみる

スクリーンショット 2020-06-07 2.30.17.png

プロジェクトをVisual Studio for Macで開いてみる。

スクリーンショット 2020-06-07 2.34.27.png

clickイベントでC#で書いたコードが動く。不思議な感じです。

スクリーンショット 2020-06-07 2.37.52.png

画面内での遷移はSPAと同じような動きで、HistoryAPIを使った作りと同じような動きになってます。

(※初回起動後、の画面遷移ではWEBへのアクセスはなかった。)

jsonファイルをダウンロードして一覧表示するサンプル

fetchdataというページでは、jsonファイルをwebから取得して、一覧表示していました。

スクリーンショット 2020-06-07 2.42.43.png

↓ダウンロードするjsonファイル
スクリーンショット 2020-06-07 2.42.47.png

ブラウザで表示した結果。

スクリーンショット 2020-06-07 2.42.54.png

参考

5
1
0

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
5
1