Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angular5 + ASP.NET Core2 事始め

More than 3 years have passed since last update.

この記事は Silbird Advent Calendar 2017 の12日目の記事です。

はじめに

2017/8月にASP.NET Core2がリリースされ、2017/11月には、Angular5がリリースされましたね!今年は、C#とASP.NETにお世話になった年でした。備忘録も兼ねて、環境構築事始め記事を書きたいと思います。ついでに、Chrome60(2017/7月下旬頃)からAuditsにLighthouseが組み込まれましたので、タイトルとは全く関係ないですが試したいので試します!

ASP.NET + Angular

Release Note / Change Log

ASP.NET:
https://github.com/aspnet/Home/releases

Angular:
https://github.com/angular/angular/blob/master/CHANGELOG.md
https://medium.com/angular-japan-user-group/version-5-0-0-of-angular-now-available-9746ef966c7d

開発環境

環境構築

1.テンプレートをインストールする
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
1.jpg

下記のテンプレートも準備されている模様
- Aurelia
- Knockout.js
- Vue.js
- React.js

2.Angular用のソリューションを生成/必要なパッケージを落としてくる
dotnet new angular
npm install
dotnet restore
2.jpg

3.実行
dotnet run
VSからデバッグ実行でも同様に起動できます
move.mov.gif

ファイル構成

4.jpg

ClientApp配下にコンポーネントが設置されてます。
Karma/Jasmineといった単体テストのライブラリもデフォルトで入ってました。

Macの場合、package.jsonを確認すると、Angular4系になっていたので、この状態から、5系にアップデートをする場合は、こちらを参考に(そもそも、ver指定で落とせる気がするが、、、)。

Windowsの場合は、「ファイル -> 新しいプロジェクト」から、検索をかけるとテンプレートがヒットするので、そちらからインストール出来ます。
image.png

Audits

Chrome60からAuditsにLighthouseが組み込まれました。Lighthouseは、Googleが提供しているWebサイトのパフォーマンス計測ツールで、それ以外にもProgressive Web Apps(PWA)への準拠や、アクセシビリティ対応の計測なども出来ます。もともとは、Node.jsで実行可能なツールで、Chromeの拡張機能としてインストールしなければなりませんでした。
5.jpg

画像より、PWA/パフォーマンス/アクセシビリティ/ベストプラクティスの4分類からスコアを表示してくれます。

個人的には、DOMツリーやCSSOMツリーの観点から、クリティカルレンダリングパス(ユーザー操作に関連するコンテンツ表示の優先順位付け)やレンダリング処理(FPS処理軽減やGPUの活用)を意識することが多いので、First Meaningful Paint(ユーザに意味のある表示になるまで)の項目まわりが気になるところでした。

Audits/Lighthouse リファレンス:
https://developers.google.com/web/tools/lighthouse/

おまけ

6.jpg

参考

https://stackoverflow.com/questions/44831899/creating-a-new-angular-project-on-mac-with-visual-studio
http://www.c-sharpcorner.com/article/getting-started-with-angular5-and-asp-net-core/

minoru03
silbird
Webサービスの自社開発・運営を行うスタートアップ
http://silbird.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away