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
リアクティブプログラミング