ASP.NETフロントエンド タスク入門

2016/12/17

ASP.NET SPA ビギナー&ステップアップ : ATND

矢後 比呂加

@miso_soup3

自己紹介• 矢後 比呂加

• twitter: @miso_soup3

• blog: http://miso-soup3.hateblo.jp/

• 開発: ASP.NET, C#, Microsoft Azure

• 業務アプリやサーバーサイドが中心

きっかけ• それまで：npm・Gulp・webpack あたりを何となく知ってい

た程度だった

• 2016 年はフロントサイドを勉強しよう

• GrapeCity 製品「SpreadJS」の記事のため、小さいサンプルをいくつか作る

TypeScript で実装しよう…

jQuery を使わない方法で試してみよう…

superagent や webpack を導入しよう…

なんとなく導入して つまずいた ASP.NET MVCとSpreadJSで業務Webアプリケーションモダン化計画連載一覧：CodeZine（コードジン）https://codezine.jp/article/corner/660

この発表について• 対象者

• ASP.NET で、フロントサイドを勉強し始めようとしている方

• Gulp・Grunt って何？ ちょっと触ったことがある方

• 内容• ASP.NET 開発者視点でフロントサイドのタスクについて説明

• ASP.NET との関連

• ゴール• なぜ、Gulp 等が必要なのか分かる

• フロントサイドを学ぶときに、

• 気をつける点がわかる

• 学ぶための必要な情報がわかる

目次• タスクランナーの役割は？

• なぜ複雑になるのか

• 学ぶときに気を付けること

• ASP.NET との関係

Gulp とか Grunt とか webpack とかって？

• フロントサイドのライブラリに関する必要なタスクをビルド・自動化・管理するツール• タスクランナーツールと呼ばれる

• タスクって何？• コンパイルや、圧縮や、結合や、テスト等

• なぜ必要なのだろう？• 目的があり、ツールを利用した方が便利だから、使う

• 例えば、なんのために、どんなことを行うのだろう？

サイズを小さくするminify （縮小）

compress（圧縮）

• データ容量を減らし、Web サイトの表示を高速化するテクニックの１つ

• 画像・HTML・JavaScript・CSS を縮小・圧縮する

サイズを小さくする

• HTML・CSS・JavaScript にて、空白や改行を削除し、変数名を短くし、ファイルサイズを減らす

Bundling and Minification | The ASP.NET Site https://www.asp.net/mvc/overview/performance/bundling-and-minification

minify （縮小）

サイズを小さくする

gzip

• 圧縮のためのエンコーディングフォーマット

• HTML・CSS・JavaScript などのテキストファイルを対象とする

• クライアント：Accept-Encoding: gzip

• サーバー：Content-Encoding: gzip

ASP.NET だと、IIS で設定するのが一般的

（Gulp “gulp-gzip” という方法もある）

IIS - URL 圧縮 https://technet.microsoft.com/ja-jp/library/ee431664.aspx

compress （圧縮）

リクエスト数を減らす

• Web リソースの数を減らす＝リクエスト数を減らす

bundle（束ねる）, concatenate（つなぐ）

Bundling and Minification | The ASP.NET Site https://www.asp.net/mvc/overview/performance/bundling-and-minification

コンパイルする• 効率よく開発するために、LESS や TypeScript などで記述した

い• →そのままでは、ブラウザで実行できない

• →実行できる CSS や JavaScript にコンパイルする

SASS・LESS → CSS

TypeScript・CoffeeScript・Dart → JavaScript

複雑になっていくのはなぜ？• 順番がある

• コンパイルしてから→連結→縮小

• 連結の順番は、A→B→C の順番で

• どのファイルを対象にする？

• 環境ごとに分けたい• Dev では、圧縮や連結はしなくてもよい

• 自動化したい• コマンド１つですべて行いたい

• CI に対応したい

• コンパイル：言語のバージョンが違う

• 依存関係

タスクランナーの導入• Gulp

• Grunt

• webpack

• Rollup

Using Gulp | Microsoft Docs https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp

コンパイル：言語のバージョン• JavaScript

• ECMAScript とは、言語の仕様のこと• ECMAScript 5 2009年頃

• ECMAScript 6（ES2015, ES6） 2015年

例：

• TypeScript から JavaScript にコンパイルするときに、どのバージョンでコンパイルするか？

• ECMAScript 6 で書いた JavaScript を、特定のブラウザでも動くように ECMAScript 5 に変換する

ECMAScript - Wikipedia https://ja.wikipedia.org/wiki/ECMAScript

依存関係の解決• 部品化された JavaScript をどのように参照するか？

肥大化する

→部品化する

→依存関係が生まれる

→参照する仕組みができてくる

C# では、「using System.Collections.Generic;」＆ dll 参照

JavaScript では、言語仕様として決まっていなかった（ECMAScript 6 で策定）

依存関係の解決今までは上から順番：<script src="file1.js"></script>

<script src="file2.js"></script>

<script src=“file3.js”></script>

CommonJS Module や、AMD の仕組みが登場する。

そして、ECMAScript6にて、仕様に依存関係が含まれる。

依存関係の解決CommonJS Module

module.exports = jQuery;

var hoge = require(“jQuery”);

• Node.js で動作

• ⇔このままでは、ブラウザでは動作しない• Browserify により、ブラウザで動作するようにする

• 例：あらかじめ2つの部品をビルドし「output.js」を生成する

依存関係の解決AMD（Asynchronous Module Definition）

define(function() { … };); //person.js

defint([“person”], function(person) {…});

• このままでは、ブラウザでは動作しない• RequireJS により、実行時に依存関係を解決する

• 例：「b.js」にて「a.js」に依存していたので、RequireJS により、非同期で「a.js」をロードする

依存関係の解決ブラウザで：

CommonJS で書くには「Browserify」ライブラリが、

AMD で書くには「RequireJS」ライブラリが、

必要。（「webpack」ライブラリは、両方に対応）

圧縮・連結に組み込むには、タスクランナーにて

これらのライブラリが動作しなければいけない。

TypeScript 変換オプション：・モジュール管理の指定："commonjs", "amd", "system", "umd"・コンパイル出力のECMAScriptのバージョンを指定："es3", "es5", "es6"

タスクランナーで設定する例：superagent ライブラリを TypeScript で利用したい…

パッケージnpm, bower

npm, bower は、“ソース“で取り込む。

NuGet は、コンパイル済みの“.dll”を取り込む。

必要なファイルだけを、wwwroot 配下に配置

しなければいけない。

バージョンや、依存関係の仕組みは？

学ぶときに気を付けること• 依存関係の仕組みが AMD ・CommonJS・EC6それぞれで違う

• パッケージでは、ソースごと取り込む

• 使用したいライブラリは、どのような記述で書かれているか？• 依存関係、バージョン、TypeScript の型ファイルの方は？

• ぐぐって参照しているサイトは、サーバーサイドのことなのか？フロントサイドのことなのか？

フロントサイドと ASP.NET• 基本的には分離している

• ASP.NET では～との組み合わせでないと使えない、ということはない

• ASP.NET プロジェクトテンプレート• 歴代、プロジェクトテンプレートに含まれている、フロントサイドの

ライブラリは違う（knockout.js だったり bower だったり）

• サンプルの一種ととらえる

• ASP.NET では、OSS で活発なフロントサイドのエコシステムを活用できる• ツール Visual Studio だったり、

• アーキテクチャ（HTML 出力方法等）だったり

ASP.NET 4.5 Bundle Minify

• ASP.NET が縮小・連結を行う ライブラリ

• ASP.NET MVC、WebForms 等の ASP.NET 4.5 で使うことができる

• ASP.NET Core では、後継といえる機能はない• → ASP.NET Coreでは、「Bundle & Minifier」「Tag Helper」に。

この後のスライドにて説明

• 環境ごとの圧縮する／しない

• CDN

Bundling and Minification | The ASP.NET Site https://www.asp.net/mvc/overview/performance/bundling-and-minification

Visual Studio - Bundle & Minifier• 圧縮・連結を行う Visual Studio の拡張機能

• 「bundleconfig.json」に設定する

• Visual Studio 2015, 2017 用のツール

• ツールなので、今までの ASP.NET、ASP.NET Core 両方で使える

• Gulp から設定を参照したり、Gulp 形式に変換できる

• CI サポート• NuGet「BuildBundlerMinifier 」 で、MSBuild Task として

BundlerMinifier/README.md at master · madskristensen/BundlerMinifierhttps://github.com/madskristensen/BundlerMinifier/blob/master/README.mdUnbundling scripts for debugging · madskristensen/BundlerMinifier Wiki https://github.com/madskristensen/BundlerMinifier/wiki/Unbundling-scripts-for-debugging

必須といっても過言ではない拡張機能• Web Extension Pack 2015 - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebExtensionPack

• Web Extension Pack 2017 - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebExtensionPack2017

タスクランナーエクスプローラー

（Visual Studio 2015, 2017 標準搭載）

※Web Essentials の一部の機能は分割されました

ASP.NET Core - TagHelper

A Complete Guide to the MVC 6 Tag Helpers – Canadian Developer Connection https://blogs.msdn.microsoft.com/cdndevs/2015/08/06/a-complete-guide-to-the-mvc-6-tag-helpers/

まとめ• タスクランナーで圧縮・連結・コンパイルなどのタスクを行う

• .NET との JavaScript のバージョン・依存関係・パッケージの仕組みに気を付ける

• ASP.NET とフロントサイド開発を一緒に行うための、便利なツールがある

• フロントサイドとサーバーサイドのビルドは紐づけられる

• Gulp 等のツール以外でも、往来の ASP.NET の仕組みや、Visual Studio のツールを利用できる