javascript ライブラリーを使い倒そう #buildinsider
DESCRIPTION
2013/06/08 第1回Build Insider OFFLINE講演資料TRANSCRIPT
![Page 1: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/1.jpg)
JavaScript ライブラリーを使い倒そう ~2013/06/08 第1回Build Insider OFFLINE講演資料~
Wingsプロジェクト
安西 剛 http://www.wings.msn.to/
![Page 2: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/2.jpg)
2
自己紹介
安西 剛(やすにし つよし) @tsuyok
Wingsプロジェクト
NECビッグローブ在籍
マイブームはDDD
![Page 3: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/3.jpg)
3 3
![Page 4: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/4.jpg)
4
質問
• A:デザイナ、マネージャ等 非エンジニア
• B:主にサーバエンジニアで、たまにブラウザのJSを書く
• C:サーバサイドのJSを書いている
• D:すべての機能をJSだけで書いている
• E:10人以上のJavaScriptチームで一つのプロダクトを開発している
![Page 5: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/5.jpg)
5
セッションのゴール
• JavaScriptのライブラリを知る
• ライブラリからJavaScriptの動向を知る
• 動向から今日の見所のセッションを知る
JavaScriptがもっと書きたくなる!
![Page 6: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/6.jpg)
6
アジェンダ
1. JavaScriptが置かれた背景
2. 手間を省こう系
3. 言語特性補う系
4. フレームワーク
5. ゲーム系
6. サーバ系
7. 開発効率化系(JavaScriptのテスト)
8. まとめ
![Page 7: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/7.jpg)
7 7
まず前フリ
![Page 8: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/8.jpg)
8 8 http://www.flickr.com/photos/mujitra/3556469060/
かつてのWeb
![Page 9: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/9.jpg)
9
かつてのWebはJavaScriptは邪魔者
• ブラウザのJavaScript仕様が違う
• そもそもバグが…
• ダイヤルアップ接続のため、多くのそして大きいファイルをダウンロードすると重くなる
ページはシンプルに
JavaScriptはできるだけ使わない
![Page 10: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/10.jpg)
10 10 http://www.flickr.com/photos/moneyblognewz/5300999179/
そこで登場
![Page 11: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/11.jpg)
11 11 https://maps.google.co.jp/
「Ajax」登場
![Page 12: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/12.jpg)
12
Webページも表現豊かに
• GoogleMapsがきっかけにAjaxが注目
• 「非同期」通信
• JavaScriptをみんなが使い始めた
• Webページがアプリケーションらしくなってきた
やっていいんだ!
![Page 13: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/13.jpg)
13 13
時は進み
![Page 14: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/14.jpg)
14 14
http://commons.wikimedia.org/wiki/User:Zach_Vega http://developer.android.com/distribute/googleplay/promote/brand.html http://windows.microsoft.com/ja-jp/windows-8/meet http://www.w3.org/html/logo/index.html http://nodejs.org/logos/ http://www.mozilla.jp/firefoxos/
JavaScript天国がやってきた!
![Page 15: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/15.jpg)
15 15
その分
![Page 16: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/16.jpg)
16 16 http://www.flickr.com/photos/robellisphotography/6057722540/
大量なコード
![Page 17: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/17.jpg)
17 17 http://www.flickr.com/photos/bitterjug/7670055210/
複雑化
![Page 18: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/18.jpg)
18 18 http://www.flickr.com/photos/xlordashx/2942697333
しんどい
![Page 19: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/19.jpg)
19 19 http://www.flickr.com/photos/paul_lowry/2266388742/
ライブラリが重要!
![Page 20: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/20.jpg)
20
今日お話するライブラリ
1.手間を省こう系
2.言語特性補う系
3.フレームワーク
4.ゲーム系
5.サーバ系
6.開発効率化系
![Page 21: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/21.jpg)
21 21
(1)手間を省こう系
![Page 22: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/22.jpg)
22
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
![Page 23: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/23.jpg)
23
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
![Page 24: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/24.jpg)
24
jQuery、prototype.js
• JavaScriptとHTMLの相互作用を強化するJavaScriptライブラリ。
• クロスブラウザでも同様の記述方法で処理が可能
![Page 25: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/25.jpg)
25
手間を省こう系
1.jQuery、prototype.js
2.UI系
•個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
![Page 26: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/26.jpg)
26
UI系のライブラリ
• JavaScript、CSS、HTMLをできるだけ書かないというコンセプト
• JavaScriptファイルを読み込み、HTML及び少量のJavaScriptコードで機能を実現する
• ピュアなJavaScriptのみで動作するライブラリやjQueryのプラグインとして動作するライブラリなどがある
• 大量に存在する
![Page 27: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/27.jpg)
27
UI系のライブラリ
• Chosen(かっこいいセレクトボックス)
• 竹取JS(縦書)
• FullCalendar(GoogleCalendarライクなカレンダー)
• jqPlot(グラフを表現)
など・・・
![Page 28: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/28.jpg)
28
jQueryUI
• jQuery UIは、jQueryを拡張するプラグインの一種で、ユーザインターフェイス(UI)に関わる機能を多く提供
分類 機能名 概要
Interactions
Draggable 要素をドラッグ可能にする
Droppable 要素をドロップ可能にする
Resizable 要素をサイズ変更できるようにする
Selectable 要素をマウス操作で選択できるようにする
Sortable 要素の並べ替えを可能にする
Widgets
Accordion アコーディオンパネル
Autocomplete オートコンプリート機能
Button ボタン
Datepicker 日付入力ボックス
Dialog ダイアログ
Menu メニュー
Progressbar プログレス(進捗)バー
Slider スライダー
Spinner スピナー
Tabs タブパネル
Tooltip ツールチップ
Effects
Effect 基本的なアニメーション
Color Animation 色を変化させるアニメーション
Toggle/Hide/Show 要素の表示/非表示にアニメーションを利用
Toggle Class/Add Class/Remove Class/Switch Classスタイルクラスの適用/解除にアニメーションを利用
![Page 29: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/29.jpg)
29
jQueryUI
• jQueryUIのサイトでデザインのカスタマイズが可能
http://jqueryui.com/themeroller/
![Page 30: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/30.jpg)
30
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
![Page 31: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/31.jpg)
31
UIフレームワーク系
• JavaScriptもCSSも書かずに、HTMLだけでレイアウトや動的なUI処理などを行い、開発を短縮
• JavaScriptが苦手な(例えばデザイナーさん)方も動的なUIが表現できる
• デザインやCSSが苦手なエンジニアの方もHTMLを書くだけで整ったデザインのサイトを作成することができる
• CSSフレームワークとも呼ばれている
• その代わり、デフォルトでは限定的なデザイン
![Page 32: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/32.jpg)
32
TwitterBootstrap
• Twitter社が開発しているフレームワーク
• 定義されているClassをHTMLに指定するだけで、グリッドレイアウトや動的なUIコンポーネントを表現できる
1 1 1 1 1 1 1 1 1 1 1 1
2 2 2 2 2 2
4 5 3
4 8
4 5 + offset3
12分割されたグリッドレイアウト
![Page 33: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/33.jpg)
33
その他
jQueryMobile
![Page 34: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/34.jpg)
34 34
あとは
![Page 35: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/35.jpg)
35 35
![Page 36: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/36.jpg)
36
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
![Page 37: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/37.jpg)
37
ページ表示速度に注意!
基礎的なページ表示速度のポイント(コーディングではない)
![Page 38: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/38.jpg)
38 38
(2)言語特性補う系
![Page 39: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/39.jpg)
39 39
JavaScriptの特性
![Page 40: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/40.jpg)
40
この答えは?
var foo = function(){
var a = 3, b = 5;
var bar = function() {
var b = 7, c = 11;
a += b + c;
}
bar();
// a と b はどうなっている?
} JavaScript The Good Parts(Douglas Crockford著 オライリー社)より
![Page 41: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/41.jpg)
41
これはなんという?
var myObject = (function() {
var value = 0;
return {
increment : function (inc) {
value += typeof inc === ‘number’ ? inc : 1;
},
getValue : function() {
return value;
}
}());
JavaScript The Good Parts(Douglas Crockford著 オライリー社)より
![Page 42: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/42.jpg)
42
言語特性の特殊性
• プロトタイプベースのオブジェクト指向(プロトタイプチェーン)
• スコープチェーン
• コールバック(関数をパラメータ渡せる、など)
など…
![Page 43: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/43.jpg)
43 43
CoffeeScript
![Page 44: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/44.jpg)
44
CoffeeScript
• JavaScriptの言語特性のよくある「罠」を自動的に回避
• JavaScriptにコンパイルして実行する (node.jsでコンパイル可能なコマンドをインストール)
• クラスベースのオブジェクト指向をサポート
![Page 45: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/45.jpg)
45
CoffeeScript(罠回避) ###
複数行に渡るコメント
###
# 単行のコメント
# セミコロンは不要
x = 1
# 演算子(==ではなくis)の違い
if x is 1
# ブロック(JavaScriptでいう「{...}」)はインデントで表現
# 関数の実行はカッコがあっても無くても良い
alert("Hello World!")
alert "Hello World!"
// Generated by CoffeeScript 1.4.0
/*
複数行に渡るコメント
*/
(function() {
var x;
x = 1;
if (x === 1) {
alert("Hello World!");
alert("Hello World!");
}
}).call(this);
![Page 46: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/46.jpg)
46
CoffeeScript(クラスベースのOO) ###
クラス型オブジェクト指向
###
# クラス宣言
class Member
# 変数の宣言
yasunishi: 'Hello' # publicなインスタンス変数
@yamada: 'Hello' # publicなstatic変数
takano = 'Hello' # privateなstatic変数
# コンストラクタ(@を付けることで引数をインスタンス変数に格納)
constructor: (@yasunishi) ->
# メンバ関数
func: ->
@yasunishi # publicなインスタンス変数へアクセス
Member.yamada # publicなstatic変数へアクセス
takano # privateなstatic変数へアクセス
Member = (function() {
var takano;
Member.prototype.yasunishi = 'Hello';
Member.yamada = 'Hello';
takano = 'Hello';
function Member(yasunishi) {
this.yasunishi = yasunishi;
}
Member.prototype.func = function() {
this.yasunishi;
Member.yamada;
return takano;
};
Member.staticfunc = function() {
return this.yamada;
};
return Member;
})();
(下の続き)
# staticなメンバ関数
@staticfunc: ->
# staticな関数からstaticなプロパティへは@でアクセスできる
@yamada
![Page 47: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/47.jpg)
47
その他
• Dart
• Kotlin
• Haxe
• TypeScript
![Page 48: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/48.jpg)
48 48
(3)フレームワーク
![Page 49: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/49.jpg)
49
JavaScriptフレームワーク
背景
• JavaScriptソフトウェアの複雑化、大規模化
• 多くの人数での開発が必要になっている
• 設計上サーバサイドとの役割分担が重要
![Page 50: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/50.jpg)
50
JavaScriptフレームワーク
ポイント
• HTMLとの関係性がポイント
• サーバサイドと違い、マウスなどイベントがあるため、MVCと言われているが、サーバサイドのMVCとは考え方が違う
• フレームワークによって、MVCの責務(そもそもMVCと言えるか?も含め)に差異がある
• ということで、デファクトと言い切れるライブラリが無い
![Page 51: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/51.jpg)
51
JavaScriptフレームワーク
http://caliper.io/blog/2013/Javascript-Framework-Popularity/
![Page 52: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/52.jpg)
52
フレームワークの分類
• MVCフレームワーク
• Backbone.js
• MVVMフレームワーク • Knockout
• CoffeScript対応MVCフレームワーク(クラスベースのOO)
• Batman.js
• Spine.js
• ViewとModelのデータバインディング
• Angular.js
• Ember.js
• イベント管理、非同期処理
• RxJS
![Page 53: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/53.jpg)
53
フレームワークの分類
• MVCフレームワーク
• Backbone.js
• MVVMフレームワーク • Knockout
• CoffeScript対応MVCフレームワーク(クラスベースのOO)
• Batman.js
• Spine.js
• ViewとModelのデータバインディング
• Angular.js
• Ember.js • イベント管理、非同期処理
• RxJS
![Page 54: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/54.jpg)
54
Ember.js
• ビューとコントローラーを紐付け、HTMLDOM更新部分を省略し、シンプルに記述することができるフレームワーク(データバインディング)
• DOMの更新は煩雑になりやすいため、ビューとJavaScriptコードが行うことを明確に分割でき、可読性を上げることができる。
• テンプレートエンジンは、handlebars。
![Page 55: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/55.jpg)
55
Ember.js 簡単なサンプル
var App = Ember.Application.create();
App.ApplicationController = Ember.ArrayController.create();
// どのテンプレートに適用するかを指定
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.ApplicationController.set('content', [{
name: 'アプリを作ろう! Android入門 ~ゼロから学ぶアプリの作成から公開まで',price : 1995
},
{
name: 'TECHNICAL MASTER はじめてのJSP&サーブレット Eclipse 3.7 Indigo+Tomcat 7対応版', price : 2730
},
{
name: 'Windows Azure Platform開発入門', price : 3990
}]);
// 表示処理開始
App.initialize();
<script type="text/x-handlebars" data-template-name="application">
<h1>書籍一覧</h1>
<div>
<table border="1">
<tr>
<td>名称</td>
<td>価格</td>
</tr>
<!-- ループを行い、本を表示する -->
{{#each App.ApplicationController}}
<tr>
<td>{{name}}</td>
<td>定価{{price}}円</td>
</tr>
{{/each}}
</table>
</div>
</script>
![Page 56: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/56.jpg)
56
フレームワークの分類
• MVCフレームワーク
• Backbone.js
• CoffeScript対応MVCフレームワーク(クラスベースのOO)
• Batman.js
• Spine.js • MVVMフレームワーク
• Knockout
• ViewとModelのデータバインディング
• Angular.js
• Ember.js
• イベント管理、非同期処理
• RxJS
![Page 57: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/57.jpg)
57
[app名]/css [app名]/css/mixin.styl [app名]/css/index.styl
[app名]/slug.json [app名]/package.json [app名]/Procfile [app名]/.npmignore
[app名]/app [app名]/app/index.coffee [app名]/app/lib [app名]/app/lib/setup.coffee [app名]/app/controllers [app名]/app/models [app名]/app/views
[app名]/test [app名]/test/specs [app名]/test/specs/.gitkeep [app名]/test/public [app名]/test/public/lib [app名]/test/public/lib/jasmine.css [app名]/test/public/lib/jasmine.js [app名]/test/public/lib/jasmine.html.js [app名]/test/public/index.html
[app名]/public [app名]/public/favicon.ico [app名]/public/index.html
設定ファイル
CSSファイル
Spineアプリケーション テストファイル
Webサーバで公開される ドキュメントルート
Appクラス
ライブラリディレクトリ
コントローラーディレクトリ
モデルディレクトリ
ビューディレクトリ
Spine.js アプリケーションの作成
• Node.jsでインストール 「npm install -g spine.app hem」
• コマンドでアプリケーションファイル作成 「spine app [アプリケーション名]」 「spine model [モデル名]」
![Page 58: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/58.jpg)
58
Spine.js アプリケーションの作成
• 関連ファイルのインストール 「cd [アプリケーション]」 「npm install .」
• CoffeeScriptコンパイル(ビルド)とサーバ起動 「hem build」 「hem server」
![Page 59: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/59.jpg)
59
Spine.js Controllerのサンプル class Books extends Spine.Controller
constructor: ->
super
# URLが/listで、表示された時点でデータを取得する
@routes
'/list': ->
@getBookList()
# 本の一覧を取得し、描画する
getBookList: ->
Book.fetch()
# データが取得された時の処理
Book.bind "refresh", (data) =>
# 取得した本のデータをitemsに設定
@items = data[0]
# 本の一覧を描画する
@render()
# 本の一覧を描画する (6)
render: ->
@html require('views/books')(@items)
![Page 60: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/60.jpg)
60
Spine.js Modelのサンプル
Spine = require('spine')
class Book extends Spine.Model
# モデルが持つデータを定義する。本は名前と価格を持つ
@configure 'name', "price"
# データをJSONから取得するため、Ajaxのクラスを継承する
@extend Spine.Model.Ajax
# 取得するJSONのURLを指定。このサンプルでは、ファイルはpublic/dataに作成。
@url: "/data/books.json"
module.exports = Book
{
"books": [
{
"name" : "アプリを作ろう! Android入門 ~ゼロから学ぶアプリの作成から公開まで",
"price": 1995
},
{
"name" : "TECHNICAL MASTER はじめてのJSP&サーブレット Eclipse 3.7 Indigo+Tomcat 7対応版",
"price": 2730
},
{
"name" : "Windows Azure Platform開発入門",
"price": 3990
}
]
}
![Page 61: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/61.jpg)
61
Spine.js テンプレートサンプル
<table border="1">
<tr>
<td>名前</td>
<td>価格</td>
</tr>
<% for book in @books: %>
<tr>
<td><%= book.name %></td>
<td>定価<%= book.price %>円</td>
</tr>
<% end %>
</table>
<link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
<script src="/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQuery = require("jqueryify");
var exports = this;
jQuery(function(){
var App = require("index");
exports.app = new App({el: $("body")});
});
</script>
</head>
<body>
<h1>書籍一覧</h1>
<!-- ここに本の一覧を表示する -->
<div id="booklist"></div>
</body>
</html>
![Page 62: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/62.jpg)
62
Spine.js テンプレートサンプル
![Page 63: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/63.jpg)
63 63
(4)ゲーム系
![Page 64: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/64.jpg)
64
ゲーム系
• 単純ではあるが作りやすく、ハードルが低い
• オブジェクト指向を採用している
• プログラミング教育にも適している。キャラクターをオブジェクトと考えやすい。
• ゲームフレームワーク
• Enchant.js
• JAction(スマートフォン用)
• Arctic.js(DeNA開発)
など
![Page 65: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/65.jpg)
65
enchant.js
• ゲームが作りやすいように最適化されたフレームワーク
• オブジェクト指向
• イベントドリブンで、イベントは非同期処理
• プラグインによる拡張が可能
• サンプルだけでなく画像素材も提供されている
• enchant.jsで作ったゲームを公開するサイトhttp://9leap.net/
![Page 66: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/66.jpg)
66
enchant.js // ミサイルClass
var Missile = enchant.Class.create(enchant.Sprite, {
initialize: function(x, y, speed){
enchant.Sprite.call(this);
// ミサイルの画像と座標を指定する
this.x = x; this.y = y;
this.image = game.assets['img/bar.png'];
this.width = 3; this.height = 16;
// ミサイルの進むスピード
this.vy = speed;
// ミサイルを動かす
this.addEventListener('enterframe', function(){
this.y -= this.vy;
// 画面外に出たら削除
if(this.y > 320 || this.x > 320){
this.remove();
}
});
![Page 67: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/67.jpg)
67 67
(5)サーバ系
![Page 68: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/68.jpg)
68
サーバ系
• Node.jsとは サーバサイドJavaScript。実際は、Google Chrome 用に開発されたJavaScriptエンジンV8 が搭載されており、ファイルI/O やネットワーク関連など、サーバサイドならではの基本的な機能を付加している。
![Page 69: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/69.jpg)
69
サーバ系
• 特徴
• イベントループ 実行する処理をイベントキューに一旦格納し、順番に実行する。
• ノンブロッキングI/O データの入出力において、データの送受信の完了を待たずに他の処理を開始する方式
• このような特徴からWebSocketでの処理に有効
• あまり同期的な処理には向かない。書きにくい。
• Express、Flatiron.jsなどのフレームワークがある
![Page 70: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/70.jpg)
70
Express.js
• Node.js向けのWebアプリケーションフレームワーク。
• サーバの作成、ルーティングやセッション管理など、Webアプリケーションに必要な最低限の機能を用意している。
• Node.jsのパフォーマンスを生かして軽量に動作する。
機能 概要
サーバーの作成 静的コンテンツの配信、Expressのアプリケーションが動作するhttp、httpsのサーバを立ち上げることができる
ルーティング リクエストメソッド(POST、GET)及びURLによってどのような動作をするかをルーティングハンドラとして処理を記述する
ミドルウェア Basic認証、Cookie、ログなどの設定が可能なAPI。
例外処理 アプリケーション内で発生した例外を処理することができる
テンプレートエンジンのサポート
JadeやEJSなどのテンプレートエンジンをサポートし、ルーティングと組み合わせることで、Webページを表示する
セッション・サポート HTTPセッション管理をサポートする
![Page 71: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/71.jpg)
71
Route (ルーティングメソッド)
View (テンプレートエンジン)
app.js
node.jsサーバプロセス
クライアント
リクエスト
URLごとに分配
データと合わせてHTMLを生成
リクエストオブジェクト生成
HTML
レスポンスオブジェクトを使用し レスポンス命令
レスポンス
サーバプロセス起動時に 初期処理を行い常駐する
Express.js
![Page 72: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/72.jpg)
72 72
(6)テスト系
![Page 73: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/73.jpg)
73 73
テストの考え方
![Page 74: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/74.jpg)
74
要件
リリース
見積 要件定義
基本 設計
詳細設計 実装
結合 テスト
総合 テスト
受入 テスト
基本的なテストの考え方
単体 テスト
品質をあとで担保する
![Page 75: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/75.jpg)
75 http://www.flickr.com/photos/carbonnyc/4740025131/sizes/l/in/photostream/
市場の変化 ~スピード加速へ~
![Page 76: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/76.jpg)
76 http://www.flickr.com/photos/59937401@N07/5858004830/sizes/z/in/photostream/
リリース
して検証
しないと
わからない
![Page 77: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/77.jpg)
77 http://www.flickr.com/photos/59937401@N07/5858004830/sizes/z/in/photostream/
頻繁な
リリース
が必要
![Page 78: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/78.jpg)
78
なぜテストを行うのか
• テストコード+自動テスト
• テスト駆動開発
• 継続的インテグレーション
• クロスブラウザのテスト
品質をあとで担保する
品質を作りこむ
のではなく
![Page 79: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/79.jpg)
79
テストコードの記述・実行
• テスティングフレームワーク
• Mocha
• Qunit
• Jasmine
• アサートモジュール
• chai.js
• クロスブラウザ自動テスト
• Buster.js
• JSTestDriver
![Page 80: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/80.jpg)
80
テスティングフレームワーク Mocha
• Node.jsでもブラウザでも動くテスティングフレームワーク
• BDD(振る舞い駆動開発)
• TDD(テスト駆動開発)
• exportスタイル
• jQueryをテストすることを目的としたテスティングフレームワークQUnitの記述方法であるQUnitスタイル
• テストの合否を判定するアサーションモジュールは含まれていないため、chai.jsなど個別のアサーションモジュールを使用する必要がある
![Page 81: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/81.jpg)
81
![Page 82: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/82.jpg)
82
クロスブラウザテスト JSTestDriver
• さまざまなブラウザ環境で、JavaScriptのテストを行うことを想定したテストモジュール。
• サーバプロセスを立ち上げ、各ブラウザでアクセスしておくだけで、テストを実行するとアクセスしたブラウザでテストが実行さる。
![Page 83: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/83.jpg)
83
クロスブラウザテスト JSTestDriver
JSTestDriverサーバ
接続
テスト実行 →各ブラウザで実行
![Page 84: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/84.jpg)
84
モック、スタブなどテストダブル
• JavaScriptでテストを行う場合、Ajax通信やコールバックの扱いなど、単純にテストが難しい場合がある。Ajaxやテスト対象のオブジェクトなどをスタブに置き換えてテストを行う方法がテストダブル
• Sinon.jsやJsMockitoというライブラリがある
![Page 85: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/85.jpg)
85
テストダブル sinon.js /**
* Ajax通信を偽装してテストをする場合
*/
var getBooks = function(callback) {
jQuery.ajax({
url: "booksdata.json",
success: function (data) {
callback(data);
}
});
};
// テストコード
suite('Ajax通信を偽装してテストを行う', function(){
var xhr, requests;
setup(function(){
// ajax処理の偽装
xhr = sinon.useFakeXMLHttpRequest();
requests = [];
xhr.onCreate = function (req) { requests.push(req); };
});
teardown(function() {
xhr.restore();
});
suite('#getBooks()', function(){
test('テストデータでの確認', function(){
// Ajaxのレスポンスを指定してテストを行う
var callback = sinon.spy();
getBooks(callback);
// レスポンスの偽装
requests[0].respond(200, {"Content-Type": "application/json"}, '[{"books":[{"name": "test"}]}]');
// レスポンスのJSONが想定通りに来ているか確認
expect(callback.calledWith([{"books":[{"name": "test"}]}])).to.eql(true);
});
});
});
![Page 86: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/86.jpg)
86
コードの静的解析
• JSHint
• 構文解析
• 関数の複雑度
• jscoverage
• コードカバレッジ
![Page 87: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/87.jpg)
87
Jenkins CI環境
Jenkins
Linux
PHP
テスト
Windows
Android
テスト
Web
テスト
Linux
Node.js
テスト
Mac
iPhone
テスト
Linux
CI環境を構築
JSTestDriver
GitLab
Chef
Server
![Page 88: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/88.jpg)
88 88
まとめ
![Page 89: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/89.jpg)
89
今日お話したライブラリ
1.手間を省こう系
2.言語特性補う系
3.フレームワーク
4.ゲーム系
5.サーバ系
6.開発効率化系
![Page 90: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/90.jpg)
90 90 http://www.flickr.com/photos/mujitra/3556469060/
かつてのWeb
![Page 91: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/91.jpg)
91 91
http://commons.wikimedia.org/wiki/User:Zach_Vega http://developer.android.com/distribute/googleplay/promote/brand.html http://windows.microsoft.com/ja-jp/windows-8/meet http://www.w3.org/html/logo/index.html http://nodejs.org/logos/ http://www.mozilla.jp/firefoxos/
![Page 92: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/92.jpg)
92 92 http://www.flickr.com/photos/robellisphotography/6057722540/
大量なコード
![Page 93: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/93.jpg)
93 93 http://www.flickr.com/photos/bitterjug/7670055210/
複雑化
![Page 94: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/94.jpg)
94
まとめ
• プログラミング言語としてのJavaScript
• 言語特性が他の言語と違う部分がある
• テスト自動化(CIなど)
• 複雑化によりフレームワークが台頭
![Page 95: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/95.jpg)
95 http://www.flickr.com/photos/22290288@N03/5865032805/
![Page 96: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/96.jpg)
96
http://www.flickr.com/photos/codepo8/8692028483/
![Page 97: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/97.jpg)
97
まとめ(今後)
• HTML5の普及
• FFOS
• 複雑化、大規模化はどんどん進む
• すべてがJavaScriptで完結可能
• 一部の先進的な開発者だけでなく、エンタープライズも含め、プログラミング言語として、本気で取り組む必要がある
• そういう意味で、フレームワークやテストは必須
• より設計が重要となってくる
• 今後は、もっとライブラリの重要度が増してくる
![Page 98: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/98.jpg)
98 98
http://commons.wikimedia.org/wiki/User:Zach_Vega http://developer.android.com/distribute/googleplay/promote/brand.html http://windows.microsoft.com/ja-jp/windows-8/meet http://www.w3.org/html/logo/index.html http://nodejs.org/logos/ http://www.mozilla.jp/firefoxos/
JavaScript天国がやってきた!
![Page 99: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/99.jpg)
99 99
![Page 100: JavaScript ライブラリーを使い倒そう #buildinsider](https://reader033.vdocuments.mx/reader033/viewer/2022052901/55660b6fd8b42aa6628b50f4/html5/thumbnails/100.jpg)