モダンJavaScript環境構築一歩目
•
102 likes•16,438 views
JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会
![AMD
各モジュールを非同期に読み込むための仕組み
依存ライブラリが超大量な場合に高速化が望める
一応CommonJSの一部
!
define(['jquery', 'underscore'], function ($, _) {
function a(){}; // public
function b(){}; // private
return a;
});](https://image.slidesharecdn.com/jsmodernfirststep-150205064503-conversion-gate02/85/JavaScript-36-320.jpg)
モダンJavaScript環境構築一歩目
- 2. JavaScript道 1. 必須の基礎知識 2. モダンJavaScript 初級編 3. JavaScript最新事情 4. 以後未定 ECMAScript 今日はここやります 修
- 5. strict mode "use strict"; // global ! function() { "use strict"; // innner only } エラーを出やすくする
- 6. 変数の巻き上げ (function () { console.log(a); var a = 'aaaa'; console.log(a); })(); (function () { var a; console.log(a); var a = 'aaaa'; console.log(a); })(); Before After
- 8. 関数宣言 と 関数式 // statement function hoge() {} ! // expression var hoge = function() {}; 宣言の方では宣言の巻き上げが発生する。 式では関数に名前が付かない（つけることも出来る）。 Function関数? なんですかそれ?
- 10. スコープ 超重要基礎 var globar = 'global desu'; ! function scope1() { var locar = 'local desu'; console.log(globar); // global desu function scope2() { var locarSecond = 'local mark2 desu'; console.log(locar); // local desu } console.log(locarSecond); // ReferenceError: locarSecond is not defined } console.log(locar); // ReferenceError: locar is not defined
- 12. クロージャの例 var incrementGenerator = function (start) { var inc = function () { start += 1; return start; } return inc; }; ! var inc1 = incrementGenerator(0); var inc2 = incrementGenerator(0); ! inc1(); // 1 inc2(); // 1 inc1(); // 2 inc2(); // 2
- 16. Modern JavaScript Dev The Beginners' Course Ecosystem Node, npm, glup…… jshint Lint, Style Format Modularize Rule StyleTool
- 17. Server-side JavaScript Processor Node.js (fork: io.js) and others PackageManager npm, bower BuildTool Grunt or Gulp Module DependencyManagement RequireJS, browserify, component,WebPack ecosystem on
- 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
- 24. TestTools Test Framework Jasmine, QUnit, Mocha, Chai HeadLess Browser PhantomJS and more Test Runner Karma ブラウザ環境のシミュレーターのせいでちょっと煩雑
- 27. JSHint •detect errors and potential problems •enforce your team's coding conventions •very flexible No check, No commit!
- 29. The History and Future そして、次のバージョンであるECMAScript6には 言語の機能そのものにモジュールの仕組みが……！ 当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった それを補うためにいくつかのツールやライブラリが考案された 代表的な仕様がCommonJSである CommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるもの その中でモジュールの仕様も策定された
- 30. Present day, Present time 未だ黎明期。 ライブラリやツールの力を借りつつ、きたるECMAScript6になるべく 移行しやすい方法をとるべき。
- 31. JavaScript Module Pattern • グローバルに投げ込む • jQueryプラグイン • フルセットツールキットによる独自実装 ◦ DojoToolkit ◦ Ext.js • CommonJS ◦ RequireJSとか先に紹介したやつら • AMD（Modules/AsynchronousDefinition） • TypeScript、Haxe、Scala.jsなどのモジュール機能 • ECMAScript6
- 32. 全部グローバルパターン (function(win, undefined) { ! function MyClass() { } ! MyClass.prototype.method = function(name) { console.log("Hello " + name); }; ! win.MyClass = MyClass; ! })(window); <script src="MyClass.js"></script> <script> new MyClass().method("JavaScriptModule"); </script> 昔使われてたやつ
- 35. CommonJS Node.js使ったことがある人は見覚えがあるはず var MyClass = require("./MyClass.js");
- 36. AMD 各モジュールを非同期に読み込むための仕組み 依存ライブラリが超大量な場合に高速化が望める 一応CommonJSの一部 ! define(['jquery', 'underscore'], function ($, _) { function a(){}; // public function b(){}; // private return a; });
- 37. AMDの問題点 • Node.js、WebWorkerで使いどころがない • クライアントサイドでの動的な依存性解決のコストが 無視できない • コードが複雑化する • ES6が実用化されれば出番はない 手間やデメリットの割にリターンが少ない
- 41. Why Webpack? ほぼ全てのモジュールシステムに対応 AMD, CommonJS, ES6 etcetc…… 複数ファイルでの出力を当初から考慮 Browserifyとの比較 一番新しいっぽい JS文化 Instagramが使ってくれてる 知見ありがとうございます
- 42. Installation ! $ npm install -g webpack ! $ touch entry.js index.html
- 43. Code module.exports = "BOO!"; content.js var MESSAGE = require('./content.js'); document.write(MESSAGE); entry.js とりあえずCommonJSスタイルでの例
- 44. Code index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"> </script> </body> </html>
- 45. Build ! $ webpack entry.js bundle.js ! $ open index.html
- 46. Dependency Resolution hello.js (function(global) { "use strict"; ! 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 Resolution greet.js var 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. 次回予告