![依存関係の解決
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)
More Related Content
What's hot (20)
Similar to 2016/12/17 ASP.NET フロントエンドタスク入門 (20)
Recently uploaded (6)
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 にて、空白や改行を削除し、 変数名を短くし、ファイルサイズを減らす Bundling and 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=/slideshow/20161217-aspnet/78109698/"file1.js"></script> <script src="file2.js"></script> <script src=“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. タスクランナーで設定する 例：superagent ライブラリを TypeScript で利用したい…
- 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 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
- 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 Extension Pack 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 のツールを利用できる