モダンJavaScript環境構築一歩目

Transcript

• 1. 第二回 JavaScript勉強会 小倉 大樹
• 2. JavaScript道 1. 必須の基礎知識 2. モダンJavaScript 初級編 3. JavaScript最新事情 4. 以後未定 ECMAScript 今日はここやります 修
• 3. JavaScriptの基礎知識 jQuery その前に 前回のあらすじ
• 4. strict mode 変数宣言 関数定義 スコープ クロージャ プロトタイプ指向 Courses JavaScriptの基礎知識
• 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
• 7. 変数宣言のルール 変数の宣言は全部関数の先頭で ダサいけど、そういう言語だから諦める
• 8. 関数宣言 と 関数式 // statement function hoge() {} ! // expression var hoge = function() {}; 宣言の方では宣言の巻き上げが発生する。 式では関数に名前が付かない（つけることも出来る）。 Function関数? なんですかそれ?
• 9. 関数の定義方法 巻き上げによる意図せぬ動作の防止 基本は関数式！ この辺は今後説明します 関数宣言 nameプロパティが必要になる、オブジェ クトのコンストラクターとか
• 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
• 11. 必須知識です 関数閉包はプログラミング言語における関数オ ブジェクトの一種。いくつかの言語ではラムダ 式や無名関数で実現している。引数以外の変数 を実行時の環境ではなく、自身が定義された環 境（静的スコープ）において解決することを特 徴とする。関数とそれを評価する環境のペア であるともいえる。この概念は少なくとも 1960年代のSECDマシンまで ること ができる。 from wikipedia クロージャとは
• 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
• 13. プロトタイプ指向 クラスとは違うのだよ
• 14. JavaScriptは オブジェクト指向言語ここまでやりました
• 15. 次回の予定 オブザーバーパターン jshint Promise モジュール化いろいろ でしたが
• 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
• 18. 乱立しすぎww 挙げた以外にも色々あって、とても説明しきれない 説明してもどうせすぐ陳腐化する 名前と概要だけ出して流していきます！
• 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. bower フロント向けのパッケージマネージャー CSSとかも入ってる npmよりもフロント向けライブラリが充実してる なので両方使わざるを得ないことがあったりしてつらい
• 22. Grunt & Gulp ビルドツール。Rakeみたいなもの ファイル監視&やることの多いJavaScriptの強い味方 AltJSのコンパイル、依存性の管理、ファイルの結合、圧縮テスト…… Gulpの方が新しく、使いやすい（らしい）
• 23. RequireJS…etc JavaScriptにモジュールシステムを組み込むツール いくつかの仕様、ツールが入り乱れていてヤバい 結合、圧縮、依存性管理もやったりするので複雑 RequireJSが最初（筆者の知る限り） 最近また増えてきた 一番新しいのはWebPack とてもつらい
• 24. TestTools Test Framework Jasmine, QUnit, Mocha, Chai HeadLess Browser PhantomJS and more Test Runner Karma ブラウザ環境のシミュレーターのせいでちょっと煩雑
• 25. 複雑、乱立、陳腐化 JavaScriptで実現することに対する要求が高まった ! 学習コストの高まり でも中規模以上なら使わないと破綻する ! トレードオフを考慮した設計、チームビルディングが必要 UXを意識した モダンなJavaScriptは もはや片手間で扱えるものではなくなったっぽい
• 26. 文化 JavaScriptのツール周りは、枯れているかよりも 現在どれだけ開発が活発かで判断したほうが良さそう。 ! 枯れていると廃れつつあるがほぼイコールになりかねない印象
• 27. JSHint •detect errors and potential problems •enforce your team's coding conventions •very flexible No check, No commit!
• 28. たいへんなのでじっくりせつめいします
• 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> 昔使われてたやつ
• 33. 全部グローバルパターン どこがダメだったか グローバル汚染を起こしているので名前が衝突する可能性がある モジュール化とは言えない ブラウザでしか動作しない（NodeやWebWorkerが考慮されていない） undefinedの上書きはuse strictで防げるのでダサい
• 34. jQueryPlugin 全部グローバルとだいたい同じ問題を抱える
• 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が実用化されれば出番はない 手間やデメリットの割にリターンが少ない
• 38. AltJS 言語ごとに違うが、相互運用性やロックインに注意すれば十分に選択肢 相互運用性で言えばTypeScriptが最良かもしれない
• 39. Demonstration CommonJS ! Webpack ! Gulp WebpackによるCommonJSスタイルのモジュール化
• 40. Webpack 今あるツールで一番新しく、万能だとおもわれる
• 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. 次回予告
• 51. アーキテクチャ MMVM 入門 MVC モ ナ ド の 価 値 Promiseパターン Shadow DOM Observer リアクティブプログラミング