Download to read offline
![依存関係の解決
AMD（Asynchronous Module Definition）
define(function() { … };); //person.js
defint([“person”], function(person) {…});
• このままでは、ブラウザでは動作しない
• RequireJS により、実行時に依存関係を解決する
• 例：「b.js」にて「a.js」に依存していたので、
RequireJS により、非同期で「a.js」をロードする](https://image.slidesharecdn.com/201612webfront-170721043932/85/2016-12-17-ASP-NET-18-320.jpg)
2016/12/17 ASP.NET フロントエンドタスク入門
- 1. ASP.NET フロントエンド タスク入門 2016/12/17 ASP.NET SPAビギナー&ステップアップ : ATND 矢後 比呂加 @miso_soup3
- 2. 自己紹介 • 矢後 比呂加 •twitter: @miso_soup3 • blog: http://miso-soup3.hateblo.jp/ • 開発: ASP.NET, C#, Microsoft Azure • 業務アプリやサーバーサイドが中心
- 3. きっかけ • それまで：npm・Gulp・webpack あたりを何となく知ってい た程度だった •2016 年はフロントサイドを勉強しよう • GrapeCity 製品「SpreadJS」の記事のため、小さいサンプルを いくつか作る TypeScript で実装しよう… jQuery を使わない方法で試してみよう… superagent や webpack を導入しよう… なんとなく導入して つまずいた ASP.NET MVCとSpreadJSで業務Webアプ リケーションモダン化計画連載一覧： CodeZine（コードジン） https://codezine.jp/article/corner/660
- 4. この発表について • 対象者 • ASP.NETで、フロントサイドを勉強し始めようとしている方 • Gulp・Grunt って何？ ちょっと触ったことがある方 • 内容 • ASP.NET 開発者視点でフロントサイドのタスクについて説明 • ASP.NET との関連 • ゴール • なぜ、Gulp 等が必要なのか分かる • フロントサイドを学ぶときに、 • 気をつける点がわかる • 学ぶための必要な情報がわかる
- 5. 目次 • タスクランナーの役割は？ • なぜ複雑になるのか •学ぶときに気を付けること • ASP.NET との関係
- 6. Gulp とか Gruntとか webpack とかって？ • フロントサイドのライブラリに関する 必要なタスクをビルド・自動化・管理するツール • タスクランナーツールと呼ばれる • タスクって何？ • コンパイルや、圧縮や、結合や、テスト等 • なぜ必要なのだろう？ • 目的があり、ツールを利用した方が便利だから、使う • 例えば、なんのために、どんなことを行うのだろう？
- 7. サイズを小さくする minify （縮小） compress（圧縮） • データ容量を減らし、Webサイトの表示を高速化する テクニックの１つ • 画像・HTML・JavaScript・CSS を縮小・圧縮する
- 8. サイズを小さくする • HTML・CSS・JavaScript にて、空白や改行を削除し、 変数名を短くし、ファイルサイズを減らす Bundlingand Minification | The ASP.NET Site https://www.asp.net/mvc/overview/performance/bundling-and-minification minify （縮小）
- 9. サイズを小さくする 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 （圧縮）
- 10. リクエスト数を減らす • Web リソースの数を減らす＝リクエスト数を減らす bundle（束ねる）,concatenate（つなぐ） Bundling and Minification | The ASP.NET Site https://www.asp.net/mvc/overview/performance/bundling-and-minification
- 11. コンパイルする • 効率よく開発するために、LESS やTypeScript などで記述した い • →そのままでは、ブラウザで実行できない • →実行できる CSS や JavaScript にコンパイルする SASS・LESS → CSS TypeScript・CoffeeScript・Dart → JavaScript
- 12. 複雑になっていくのはなぜ？ • 順番がある • コンパイルしてから→連結→縮小 •連結の順番は、A→B→C の順番で • どのファイルを対象にする？ • 環境ごとに分けたい • Dev では、圧縮や連結はしなくてもよい • 自動化したい • コマンド１つですべて行いたい • CI に対応したい • コンパイル：言語のバージョンが違う • 依存関係
- 13. タスクランナーの導入 • Gulp • Grunt •webpack • Rollup Using Gulp | Microsoft Docs https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp
- 14. コンパイル：言語のバージョン • 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
- 15. 依存関係の解決 • 部品化された JavaScriptをどのように参照するか？ 肥大化する →部品化する →依存関係が生まれる →参照する仕組みができてくる C# では、「using System.Collections.Generic;」＆ dll 参照 JavaScript では、言語仕様として決まっていなかった （ECMAScript 6 で策定）
- 16. 依存関係の解決 今までは上から順番： <script src="file1.js"></script> <script src="file2.js"></script> <scriptsrc=“file3.js”></script> CommonJS Module や、AMD の仕組みが登場する。 そして、ECMAScript6にて、仕様に依存関係が含まれる。
- 17. 依存関係の解決 CommonJS Module module.exports =jQuery; var hoge = require(“jQuery”); • Node.js で動作 • ⇔このままでは、ブラウザでは動作しない • Browserify により、ブラウザで動作するようにする • 例：あらかじめ2つの部品をビルドし「output.js」を生成する
- 18. 依存関係の解決 AMD（Asynchronous Module Definition） define(function(){ … };); //person.js defint([“person”], function(person) {…}); • このままでは、ブラウザでは動作しない • RequireJS により、実行時に依存関係を解決する • 例：「b.js」にて「a.js」に依存していたので、 RequireJS により、非同期で「a.js」をロードする
- 19. 依存関係の解決 ブラウザで： CommonJS で書くには「Browserify」ライブラリが、 AMD で書くには「RequireJS」ライブラリが、 必要。（「webpack」ライブラリは、両方に対応） 圧縮・連結に組み込むには、タスクランナーにて これらのライブラリが動作しなければいけない。 TypeScript変換オプション： ・モジュール管理の指定："commonjs", "amd", "system", "umd" ・コンパイル出力のECMAScriptのバージョンを指定："es3", "es5", "es6"
- 20.
- 21. パッケージ npm, bower npm, bowerは、“ソース“で取り込む。 NuGet は、コンパイル済みの“.dll”を取り込む。 必要なファイルだけを、wwwroot 配下に配置 しなければいけない。 バージョンや、依存関係の仕組みは？
- 22. 学ぶときに気を付けること • 依存関係の仕組みが AMD・CommonJS・EC6それぞれで違う • パッケージでは、ソースごと取り込む • 使用したいライブラリは、どのような記述で書かれているか？ • 依存関係、バージョン、TypeScript の型ファイルの方は？ • ぐぐって参照しているサイトは、 サーバーサイドのことなのか？ フロントサイドのことなのか？
- 23. フロントサイドと ASP.NET • 基本的には分離している •ASP.NET では～との組み合わせでないと使えない、ということはない • ASP.NET プロジェクトテンプレート • 歴代、プロジェクトテンプレートに含まれている、フロントサイドの ライブラリは違う（knockout.js だったり bower だったり） • サンプルの一種ととらえる • ASP.NET では、OSS で活発なフロントサイドのエコシステム を活用できる • ツール Visual Studio だったり、 • アーキテクチャ（HTML 出力方法等）だったり
- 24. ASP.NET 4.5 BundleMinify • 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
- 25. 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/BundlerMinifier https://github.com/madskristensen/BundlerMinifier/blob/master/README.md Unbundling scripts for debugging · madskristensen/BundlerMinifier Wiki https://github.com/madskristensen/BundlerMinifier/wiki/Unbundling-scripts-for- debugging
- 26. 必須といっても過言ではない拡張機能 • Web ExtensionPack 2015 - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=MadsKristens en.WebExtensionPack • Web Extension Pack 2017 - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=MadsKristens en.WebExtensionPack2017 タスクランナーエクスプローラー （Visual Studio 2015, 2017 標準搭載） ※Web Essentials の一部の機能は分割されました
- 27. 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/
- 28. まとめ • タスクランナーで圧縮・連結・コンパイルなどのタスクを行う • .NETとの JavaScript のバージョン・依存関係・パッケージの 仕組みに気を付ける • ASP.NET とフロントサイド開発を一緒に行うための、 便利なツールがある • フロントサイドとサーバーサイドのビルドは紐づけられる • Gulp 等のツール以外でも、往来の ASP.NET の仕組みや、 Visual Studio のツールを利用できる