つばろぐ

福岡のエンジニアによる技術的な備忘録です。

.NET Core 2.1のロードマップが公開されたようです

Twitterで「.NET Core 2.1」というフレーズをたくさん見かけたので、なんだなんだと思ったらロードマップが公開されたようです。
ロードマップは下記のブログに詳細が記載されています。今回はそれを読んでまとめてみたいと思います。
なお私の英語力にはあまり期待しないでください。

blogs.msdn.microsoft.com


まとめ

  1. ビルド性能の改善 (Build-time Performance)
  2. .NET Coreのグローバルツール (.NET Core Global Tools)
  3. 新しい型の導入 (Span, Memory and friends)
  4. HttpClientのパフォーマンス (HttpClient Performance)
  5. マイナーバージョンのロールフォワード (Minor Version Roll-forward)
  6. Windows互換パック (Windows Compatibility Pack)
  7. 可用性 (Availability)

ビルド性能の改善 (Build-time Performance)

dotnet buildコマンドやVisual Studioでのビルドのパフォーマンスが改善されたようです。
理由としてはCLIツールやMSBuildが改善されたからだ、ということです。

ビルドにかかる時間など、パフォーマンスを気にする人って多いんでしょうか?
私自身あまり気にしたこと無いんですよね。まぁ速くなることは良いことですね。

.NET Coreのグローバルツール (.NET Core Global Tools)

Node.jsのグローバルツール (npm install -g) のような、ツールが.NET Coreにも導入されるようです。
こういったツールはNuGetパッケージとして提供されるようです。
ツールの導入のためにdotnet toolコマンドが新しくできるということです。

dotnet tool install -g awesome-tool
awesome-tool

どういったツールが提供されるんでしょうかね?

新しい型の導入 (Span, Memory and friends)

C# 7.2で導入されるSpan<T>Memory<T>が使えるようになります。
新しい型についてはこちらの記事が参考になると思います。

ufcpp.net

ufcpp.net

ただ、Memory<T>の情報を見かけたことがないので、どういった型か把握していません。

HttpClientのパフォーマンス (HttpClient Performance)

C#のHTTPクライアントのパフォーマンスが改善されたとのこと。
また、機能が追加されたHttpClientFactoryも含まれます。先日のふくてんもくもく会でもテーマにした方がいました。

github.com

マイナーバージョンのロールフォワード (Minor Version Roll-forward)

ここでいう「ロールフォワード」は後方互換性という意味と、私は理解しました。

For example, you will be able to run .NET Core 2.0 applications on .NET Core 2.1 or .NET Core 2.1 applications on .NET Core 2.5 (if we ever ship such a version).

.NET Core 2.5の環境で、.NET Core 2.1のアプリケーションを、.NET Core 2.0として実行することができるという感じでしょうか。

Windows互換パック (Windows Compatibility Pack)

.NET Frameworkから.NET Coreに移行する際、新しいWindows互換機能パックが利用できるようになります。
これまでもWindows互換機能パックは利用できましたが、新しくなったということですね。

docs.microsoft.com

可用性 (Availability)

.NET Core 2.1を2018年前半の正式リリースを目指して、毎月プレビュー版を提供する予定とのこと。


翻訳間違ってるよとかありましたら指摘して頂けますと幸いです。

Fukuoka.NET もくもく会 #1を開催しました #fukuten

2018年最初のFukuoka.NET(ふくてん)を開催しました。
今回のふくてんは初の試みとして「もくもく会」を行いました。

fukuten.connpass.com

今回の勉強会は募集10名に対して、申込み10名(俺込み)で参加も10名(俺込み)という歩留まり最高な会でした。
ご参加頂きました皆様本当にありがとうございました。

この記事は帰りに寄ったジョイフルで書いてます。たまーにやる一人ファミレス。

もくもく会の目的

私はもくもく会なるものに参加したことないですが、.NETテクノロジーを気軽に集まって勉強できる場を作ってみたいなーという思いで企画しました。

タイムテーブル

時間 内容
19:00~ 自己紹介&もくもくネタの発表
~20:30 もくもく
~21:00 もくもく成果の発表

こんな感じで進めたので、もくもくする時間は概ね1時間ほどでした。

もくもくしたテーマ

参加者それぞれに共有してもらったテーマはこちら。

私はASP.NET CoreでVue.jsを使ったWebアプリケーションに触れてみるということをテーマにしました。

成果物

1時間という限られた時間のなかで、何かしら成果発表する内容を作るって難しいですね。
とりあえず成果物としてこちらのリポジトリを作りました。

github.com

元々はMLBのデータが提供されているAPIから取得できるデータをVue.jsで表示したかったですが、C#からデータがうまく取得できなかったので、べた書きAPIのデータを表示するように方針転換しました。
変にこだわって時間切れになるより、無理やりでも形にして成果発表につなげるようにしました。
昨年のハックフェスト並みに急いでコーディングしました。

alterbooth.hateblo.jp

反省点

平日の夜だからとはいえ、作業する時間が1時間しか作れなかったので、かなり慌ただしかったです。
あともう30分でもあれば皆さん余裕が出たでしょうね。

もくもく会#1 の雰囲気を知りたい方は #fukuten をご覧ください。お疲れ様でした。

twitter.com

Vue.jsを使用したASP.NET Coreのテンプレートを用意する

やっぱりASP.NET CoreでもJavaScriptフレームワークを使ってSPAをしたいということで、公式ドキュメントにSPAをやるためのページが用意されています。

docs.microsoft.com

ただしこのページで取り上げているJSフレームワークは、AngularJSとReactです。
基本はバックエンドエンジニアな私としては、AngularJSとReactは難しいため、Vue.jsを好んで使っています。
しかしASP.NET CoreでVue.jsを使うための手順がドキュメントにないため、下記のリポジトリを参考にしました。

github.com

と思ったが一通り試してみると、もうこのリポジトリの手順ではうまくいかなかったので、下記の方法でやるとよいです。

SPAテンプレートのインストール

こちらのページにあるコマンドを実行することで、SPAのためのテンプレートがインストールされます。

docs.microsoft.com

PS E:\src\vueapp> dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final
  Restoring packages for C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\restore.csproj...
  Installing Microsoft.DotNet.Web.Spa.ProjectTemplates 2.0.0-preview1-final.
  Generating MSBuild file C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\obj\restore.csproj.nuget.g.props.
  Generating MSBuild file C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\obj\restore.csproj.nuget.g.targets.
  Restore completed in 371.04 ms for C:\Users\tsubaki\.templateengine\dotnetcli\v2.1.3\scratch\restore.csproj.


テンプレート                                            短い名前             言語                タグ
--------------------------------------------------------------------------------------------------------
Console Application                               console          [C#], F#, VB      Common/Console
Class library                                     classlib         [C#], F#, VB      Common/Library
Unit Test Project                                 mstest           [C#], F#, VB      Test/MSTest
xUnit Test Project                                xunit            [C#], F#, VB      Test/xUnit
ASP.NET Core Empty                                web              [C#], F#          Web/Empty
ASP.NET Core Web App (Model-View-Controller)      mvc              [C#], F#          Web/MVC
ASP.NET Core Web App                              razor            [C#]              Web/MVC/Razor Pages
ASP.NET Core with Angular                         angular          [C#]              Web/MVC/SPA
ASP.NET Core with React.js                        react            [C#]              Web/MVC/SPA
ASP.NET Core with React.js and Redux              reactredux       [C#]              Web/MVC/SPA
ASP.NET Core Web API                              webapi           [C#], F#          Web/WebAPI
global.json file                                  globaljson                         Config
NuGet Config                                      nugetconfig                        Config
Web Config                                        webconfig                          Config
Solution File                                     sln                                Solution
Razor Page                                        page                               Web/ASP.NET
MVC ViewImports                                   viewimports                        Web/ASP.NET
MVC ViewStart                                     viewstart                          Web/ASP.NET


Examples:
    dotnet new mvc --auth Individual
    dotnet new xunit
    dotnet new --help

コマンドの出力にあるように、AngularJSやReactはコマンドが用意されていますが、Vue.jsはありません。

プロジェクトで使用するSDKのバージョンを指定する

結論から言うと、.NET Core SDK 2.0.xでなければVue.jsのテンプレートを利用することができません。
そのためglobal.jsonというファイルを作成し、SDKのバージョンを指定する必要があります。

{
    "sdk": {
        "version": "2.0.3"
    }
}

.NET Core SDKの2.0系の最新は2.0.3になります。

github.com

global.jsonについてはこちらのページに説明があります。

docs.microsoft.com

テンプレートの種類を確認する

2.0系のSDKを指定したうえで、再度作成できるテンプレートの種類を確認します。

PS E:\src\vueapp> dotnet new -l
使用法: new [options]

オプション:
  -h, --help          このコマンドのヘルプを表示します。
  -l, --list          指定された名前を含むテンプレートを一覧表示します。名前を指定しない場合は、すべてのテンプレートが一覧表示さ れます。
  -n, --name          作成する出力の名前。名前を指定しない場合は、現在のディレクトリの名前が使用されます。
  -o, --output        生成する出力を配置する場所。
  -i, --install       ソースまたはテンプレート パックをインストールします。
  -u, --uninstall     ソースまたはテンプレート パックをアンインストールします。
  --type              使用可能な種類に基づいてテンプレートをフィルター処理します。定義済みの値は、"project"、"item"、"other" です。
  --force             既存のファイルが変更されるとしても、強制的にコンテンツを生成します。
  -lang, --language   作成するテンプレートの言語を指定します。


テンプレート                                            短い名前             言語                タグ
--------------------------------------------------------------------------------------------------------
Console Application                               console          [C#], F#, VB      Common/Console
Class library                                     classlib         [C#], F#, VB      Common/Library
Unit Test Project                                 mstest           [C#], F#, VB      Test/MSTest
xUnit Test Project                                xunit            [C#], F#, VB      Test/xUnit
ASP.NET Core Empty                                web              [C#], F#          Web/Empty
ASP.NET Core Web App (Model-View-Controller)      mvc              [C#], F#          Web/MVC
ASP.NET Core Web App                              razor            [C#]              Web/MVC/Razor Pages
ASP.NET Core with Angular                         angular          [C#]              Web/MVC/SPA
ASP.NET Core with React.js                        react            [C#]              Web/MVC/SPA
ASP.NET Core with React.js and Redux              reactredux       [C#]              Web/MVC/SPA
ASP.NET Core with Aurelia                         aurelia          [C#]              Web/MVC/SPA
ASP.NET Core with Knockout.js                     knockout         [C#]              Web/MVC/SPA
ASP.NET Core with Vue.js                          vue              [C#]              Web/MVC/SPA
ASP.NET Core Web API                              webapi           [C#], F#          Web/WebAPI
global.json file                                  globaljson                         Config
Nuget Config                                      nugetconfig                        Config
Web Config                                        webconfig                          Config
Solution File                                     sln                                Solution
Razor Page                                        page                               Web/ASP.NET
MVC ViewImports                                   viewimports                        Web/ASP.NET
MVC ViewStart                                     viewstart                          Web/ASP.NET

するとVue.jsのテンプレートも表示され、使えるようになりました。

ASP.NET Core with Vue.jsのプロジェクトを作成する

あとはいつものようにdotnet newコマンドでプロジェクトを作ればよいです。

PS E:\src\vueapp> dotnet new vue
テンプレート "ASP.NET Core with Vue.js" が正常に作成されました。

作成後のアクションを処理しています...
'dotnet restore' を E:\src\vueapp\vueapp.csproj で実行しています...
  Restoring packages for E:\src\vueapp\vueapp.csproj...
  Restore completed in 46.83 ms for E:\src\vueapp\vueapp.csproj.
  Generating MSBuild file E:\src\vueapp\obj\vueapp.csproj.nuget.g.props.
  Generating MSBuild file E:\src\vueapp\obj\vueapp.csproj.nuget.g.targets.
  Restore completed in 1.43 sec for E:\src\vueapp\vueapp.csproj.


正常に復元されました。

説明:

-------------------------------------------------------------------
IMPORTANT: Before running this project on the command line,
           you must restore NPM packages by running "npm install"
-------------------------------------------------------------------

手動の操作手順: Run "npm install"

実行してみる

プロジェクトを作成した段階で簡単なアプリケーションとなっており、実行するとサンプルを確認することができます。

npm install
dotnet run

これでVue.jsを使ったASP.NET Coreのプロジェクトを作成することができました。