Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

モダンJavaScript環境構築一歩目

15,413 views

Published on

JavaScriptの現状を支えるエコシステム群を軽く紹介して、モジュールについて少し掘り下げた勉強会

Published in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

モダンJavaScript環境構築一歩目

  1. 1. 第二回 JavaScript勉強会 小倉 大樹
  2. 2. JavaScript道 1. 必須の基礎知識 2. モダンJavaScript 初級編 3. JavaScript最新事情 4. 以後未定 ECMAScript 今日はここやります 修
  3. 3. JavaScriptの基礎知識 jQuery その前に 前回のあらすじ
  4. 4. strict mode 変数宣言 関数定義 スコープ クロージャ プロトタイプ指向 Courses JavaScriptの基礎知識
  5. 5. strict mode "use strict"; // global ! function() { "use strict"; // innner only } エラーを出やすくする
  6. 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. 7. 変数宣言のルール 変数の宣言は全部関数の先頭で ダサいけど、そういう言語だから諦める
  8. 8. 関数宣言 と 関数式 // statement function hoge() {} ! // expression var hoge = function() {}; 宣言の方では宣言の巻き上げが発生する。 式では関数に名前が付かない(つけることも出来る)。 Function関数? なんですかそれ?
  9. 9. 関数の定義方法 巻き上げによる意図せぬ動作の防止 基本は関数式! この辺は今後説明します 関数宣言 nameプロパティが必要になる、オブジェ クトのコンストラクターとか
  10. 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. 11. 必須知識です 関数閉包はプログラミング言語における関数オ ブジェクトの一種。いくつかの言語ではラムダ 式や無名関数で実現している。引数以外の変数 を実行時の環境ではなく、自身が定義された環 境(静的スコープ)において解決することを特 徴とする。関数とそれを評価する環境のペア であるともいえる。この概念は少なくとも 1960年代のSECDマシンまで ること ができる。 from wikipedia クロージャとは
  12. 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. 13. プロトタイプ指向 クラスとは違うのだよ
  14. 14. JavaScriptは オブジェクト指向言語ここまでやりました
  15. 15. 次回の予定 オブザーバーパターン jshint Promise モジュール化いろいろ でしたが
  16. 16. Modern JavaScript Dev The Beginners' Course Ecosystem Node, npm, glup…… jshint Lint, Style Format Modularize Rule StyleTool
  17. 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. 18. 乱立しすぎww 挙げた以外にも色々あって、とても説明しきれない 説明してもどうせすぐ陳腐化する 名前と概要だけ出して流していきます!
  19. 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. 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. 21. bower フロント向けのパッケージマネージャー CSSとかも入ってる npmよりもフロント向けライブラリが充実してる なので両方使わざるを得ないことがあったりしてつらい
  22. 22. Grunt & Gulp ビルドツール。Rakeみたいなもの ファイル監視&やることの多いJavaScriptの強い味方 AltJSのコンパイル、依存性の管理、ファイルの結合、圧縮テスト…… Gulpの方が新しく、使いやすい(らしい)
  23. 23. RequireJS…etc JavaScriptにモジュールシステムを組み込むツール いくつかの仕様、ツールが入り乱れていてヤバい 結合、圧縮、依存性管理もやったりするので複雑 RequireJSが最初(筆者の知る限り) 最近また増えてきた 一番新しいのはWebPack とてもつらい
  24. 24. TestTools Test Framework Jasmine, QUnit, Mocha, Chai HeadLess Browser PhantomJS and more Test Runner Karma ブラウザ環境のシミュレーターのせいでちょっと煩雑
  25. 25. 複雑、乱立、陳腐化 JavaScriptで実現することに対する要求が高まった ! 学習コストの高まり でも中規模以上なら使わないと破綻する ! トレードオフを考慮した設計、チームビルディングが必要 UXを意識した モダンなJavaScriptは もはや片手間で扱えるものではなくなったっぽい
  26. 26. 文化 JavaScriptのツール周りは、枯れているかよりも 現在どれだけ開発が活発かで判断したほうが良さそう。 ! 枯れていると廃れつつあるがほぼイコールになりかねない印象
  27. 27. JSHint •detect errors and potential problems •enforce your team's coding conventions •very flexible No check, No commit!
  28. 28. たいへんなのでじっくりせつめいします
  29. 29. The History and Future そして、次のバージョンであるECMAScript6には
 言語の機能そのものにモジュールの仕組みが……! 当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった それを補うためにいくつかのツールやライブラリが考案された 代表的な仕様がCommonJSである CommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるもの その中でモジュールの仕様も策定された
  30. 30. Present day, Present time 未だ黎明期。 ライブラリやツールの力を借りつつ、きたるECMAScript6になるべく 移行しやすい方法をとるべき。
  31. 31. JavaScript Module Pattern • グローバルに投げ込む • jQueryプラグイン • フルセットツールキットによる独自実装 ◦ DojoToolkit ◦ Ext.js • CommonJS ◦ RequireJSとか先に紹介したやつら • AMD(Modules/AsynchronousDefinition) • TypeScript、Haxe、Scala.jsなどのモジュール機能 • ECMAScript6
  32. 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. 33. 全部グローバルパターン どこがダメだったか グローバル汚染を起こしているので名前が衝突する可能性がある モジュール化とは言えない ブラウザでしか動作しない(NodeやWebWorkerが考慮されていない) undefinedの上書きはuse strictで防げるのでダサい
  34. 34. jQueryPlugin 全部グローバルとだいたい同じ問題を抱える
  35. 35. CommonJS Node.js使ったことがある人は見覚えがあるはず var MyClass = require("./MyClass.js");
  36. 36. AMD 各モジュールを非同期に読み込むための仕組み 依存ライブラリが超大量な場合に高速化が望める 一応CommonJSの一部 ! define(['jquery', 'underscore'], function ($, _) { function a(){}; // public function b(){}; // private return a; });
  37. 37. AMDの問題点 • Node.js、WebWorkerで使いどころがない • クライアントサイドでの動的な依存性解決のコストが 無視できない • コードが複雑化する • ES6が実用化されれば出番はない 手間やデメリットの割にリターンが少ない
  38. 38. AltJS 言語ごとに違うが、相互運用性やロックインに注意すれば十分に選択肢 相互運用性で言えばTypeScriptが最良かもしれない
  39. 39. Demonstration CommonJS ! Webpack ! Gulp WebpackによるCommonJSスタイルのモジュール化
  40. 40. Webpack 今あるツールで一番新しく、万能だとおもわれる
  41. 41. Why Webpack? ほぼ全てのモジュールシステムに対応 AMD, CommonJS, ES6 etcetc…… 複数ファイルでの出力を当初から考慮 Browserifyとの比較 一番新しいっぽい JS文化 Instagramが使ってくれてる 知見ありがとうございます
  42. 42. Installation ! $ npm install -g webpack ! $ touch entry.js index.html
  43. 43. Code module.exports = "BOO!"; content.js var MESSAGE = require('./content.js'); document.write(MESSAGE); entry.js とりあえずCommonJSスタイルでの例
  44. 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. 45. Build ! $ webpack entry.js bundle.js ! $ open index.html
  46. 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. 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. 48. Webpackまとめ • 割と簡単にブラウザにモジュール機能を導入出来た • CommonJS以外の書き方にも対応してる • 複数ファイルへの出力、CSSや画像への依存関係などにも対応 • webpack.config.jsで複雑なモジュールのビルドの設定を行える • Gulpとの連携も考慮しておく 様々なモジュールシステム、ブラウザ以外の環境、ClojureCompilerへの対応…… などを考えるとモジュール化の書き方はもっともっと洗練する必要がある。 が、それはまたの機会に。
  49. 49. JavaScript Moduleまとめ • ES6が標準化するまでの辛抱(IE?) • 中規模以上ならモジュール化は必須、小規模でも必須 • 規模感や求めるクオリティが標準程度なら学習コストはペイする(はず) • 複数環境や高圧縮Minifierに耐えるコードを書く場合はさらに大変 • もっとよく知りたい人はgithubのリポジトリやuupa氏のドキュメントを読む
  50. 50. 次回予告
  51. 51. アーキテクチャ MMVM 入門 MVC モ ナ ド の 価 値 Promiseパターン Shadow DOM Observer リアクティブプログラミング

×