Download as PDF, PPTX
![AMD各モジュールを非同期に読み込むための仕組み依存ライブラリが超大量な場合に高速化が望める一応CommonJSの一部!define(['jquery', 'underscore'], function ($, _) {function a(){}; // publicfunction b(){}; // privatereturn a;});](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fjsmodernfirststep-150205064503-conversion-gate02%2f75%2fJavaScript-36-2048.jpg&f=jpg&w=240)
Uploaded by大樹 小倉
PDF, PPTX16,453 views
モダンJavaScript環境構築一歩目
JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会
Recommended
More Related Content
What's hot
Similar to モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
- 1.
- 2.JavaScript道1. 必須の基礎知識2. モダンJavaScript初級編3. JavaScript最新事情4. 以後未定ECMAScript今日はここやります修
- 3.
- 4.
- 5.strict mode"use strict";// global!function() {"use strict"; // innner only}エラーを出やすくする
- 6.変数の巻き上げ(function () {console.log(a);vara = 'aaaa';console.log(a);})();(function () {var a;console.log(a);var a = 'aaaa';console.log(a);})();BeforeAfter
- 7.
- 8.関数宣言と関数式// statementfunction hoge(){}!// expressionvar hoge = function() {};宣言の方では宣言の巻き上げが発生する。式では関数に名前が付かない（つけることも出来る）。Function関数? なんですかそれ?
- 9.
- 10.スコープ超重要基礎var globar ='global desu';!function scope1() {var locar = 'local desu';console.log(globar); // global desufunction scope2() {var locarSecond = 'local mark2 desu';console.log(locar); // local desu}console.log(locarSecond); // ReferenceError: locarSecondis not defined}console.log(locar); // ReferenceError: locar is notdefined
- 11.
- 12.クロージャの例var incrementGenerator =function (start) {var inc = function () {start += 1;return start;}return inc;};!var inc1 = incrementGenerator(0);var inc2 = incrementGenerator(0);!inc1(); // 1inc2(); // 1inc1(); // 2inc2(); // 2
- 13.
- 14.
- 15.
- 16.ModernJavaScript DevThe Beginners'CourseEcosystem Node, npm, glup……jshint Lint, Style FormatModularize Rule StyleTool
- 17.Server-side JavaScriptProcessorNode.js (fork:io.js) and othersPackageManager npm, bowerBuildTool Grunt or GulpModule DependencyManagement RequireJS, browserify, component,WebPackecosystemon
- 18.
- 19.Node.js## install nodebrew$curl -L git.io/nodebrew | perl - setup!## set $PATH$ export PATH=$HOME/.nodebrew/current/bin:$PATH## install stable version as binary$ nodebrew install-binary stable
- 20.npm## install globally$npm install -g hogehoge!## install locally and save package.json$ npm install --save-dev hogehoge!## install from package.json$ npm install
- 21.
- 22.
- 23.
- 24.TestToolsTest Framework Jasmine,QUnit, Mocha, ChaiHeadLess Browser PhantomJS and moreTest Runner Karmaブラウザ環境のシミュレーターのせいでちょっと煩雑
- 25.
- 26.
- 27.JSHint•detect errors andpotential problems•enforce your team's coding conventions•very flexibleNo check, No commit!
- 28.
- 29.The History andFutureそして、次のバージョンであるECMAScript6には 言語の機能そのものにモジュールの仕組みが……！当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかったそれを補うためにいくつかのツールやライブラリが考案された代表的な仕様がCommonJSであるCommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるものその中でモジュールの仕様も策定された
- 30.Present day, Presenttime未だ黎明期。ライブラリやツールの力を借りつつ、きたるECMAScript6になるべく移行しやすい方法をとるべき。
- 31.JavaScript Module Pattern•グローバルに投げ込む• jQueryプラグイン• フルセットツールキットによる独自実装 ◦DojoToolkit ◦Ext.js• CommonJS ◦RequireJSとか先に紹介したやつら• AMD（Modules/AsynchronousDefinition）• TypeScript、Haxe、Scala.jsなどのモジュール機能• ECMAScript6
- 32.全部グローバルパターン(function(win, undefined) {!functionMyClass() {}!MyClass.prototype.method = function(name) {console.log("Hello " + name);};!win.MyClass = MyClass;!})(window);<script src="MyClass.js"></script><script>new MyClass().method("JavaScriptModule");</script>昔使われてたやつ
- 33.
- 34.
- 35.CommonJSNode.js使ったことがある人は見覚えがあるはずvar MyClass =require("./MyClass.js");
- 36.AMD各モジュールを非同期に読み込むための仕組み依存ライブラリが超大量な場合に高速化が望める一応CommonJSの一部!define(['jquery', 'underscore'], function($, _) {function a(){}; // publicfunction b(){}; // privatereturn a;});
- 37.AMDの問題点• Node.js、WebWorkerで使いどころがない• クライアントサイドでの動的な依存性解決のコストが無視できない•コードが複雑化する• ES6が実用化されれば出番はない手間やデメリットの割にリターンが少ない
- 38.
- 39.
- 40.
- 41.Why Webpack?ほぼ全てのモジュールシステムに対応 AMD,CommonJS, ES6 etcetc……複数ファイルでの出力を当初から考慮 Browserifyとの比較一番新しいっぽい JS文化Instagramが使ってくれてる 知見ありがとうございます
- 42.Installation!$ npm install-g webpack!$ touch entry.js index.html
- 43.Codemodule.exports = "BOO!";content.jsvarMESSAGE = require('./content.js');document.write(MESSAGE);entry.jsとりあえずCommonJSスタイルでの例
- 44.Codeindex.html<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8"><title></title></head><body><script type="text/javascript" src="bundle.js" charset="utf-8"></script></body></html>
- 45.Build!$ webpack entry.jsbundle.js!$ open index.html
- 46.Dependency Resolutionhello.js(function(global) {"usestrict";!var Greeter = (function () {function Greeter(message) {this.greeting = message;}Greeter.prototype.greet = function () {return "Hello, " + this.greeting;};return Greeter;})();!if (typeof module !== "undefined") {module.exports = Greeter;}!})((this || 0).self || global);
- 47.Dependency Resolutiongreet.jsvar MESSAGE= require('./content.js');var Greeter = require('./hello.js');var g = new Greeter(MESSAGE);!module.exports = g;document.write(require('./greet.js').greet());entry.js
- 48.Webpackまとめ• 割と簡単にブラウザにモジュール機能を導入出来た• CommonJS以外の書き方にも対応してる•複数ファイルへの出力、CSSや画像への依存関係などにも対応• webpack.config.jsで複雑なモジュールのビルドの設定を行える• Gulpとの連携も考慮しておく様々なモジュールシステム、ブラウザ以外の環境、ClojureCompilerへの対応……などを考えるとモジュール化の書き方はもっともっと洗練する必要がある。が、それはまたの機会に。
- 49.JavaScript Moduleまとめ• ES6が標準化するまでの辛抱（IE？）•中規模以上ならモジュール化は必須、小規模でも必須• 規模感や求めるクオリティが標準程度なら学習コストはペイする（はず）• 複数環境や高圧縮Minifierに耐えるコードを書く場合はさらに大変• もっとよく知りたい人はgithubのリポジトリやuupa氏のドキュメントを読む
- 50.
- 51.