JavaScript ライブラリーを使い倒そう #buildinsider
•
26 likes•8,859 views
2013/06/08 第1回Build Insider OFFLINE講演資料
Recommended
More Related Content
What's hot
What's hot (20)
Similar to JavaScript ライブラリーを使い倒そう #buildinsider
Similar to JavaScript ライブラリーを使い倒そう #buildinsider (20)
Recently uploaded
Recently uploaded (8)
JavaScript ライブラリーを使い倒そう #buildinsider
- 1. JavaScript ライブラリーを使い倒そう ~2013/06/08 第1回Build Insider OFFLINE講演資料~ Wingsプロジェクト 安西 剛 http://www.wings.msn.to/
- 3. 3 3
- 4. 4 質問 • A：デザイナ、マネージャ等 非エンジニア • B：主にサーバエンジニアで、たまにブラウザ のJSを書く • C：サーバサイドのJSを書いている • D：すべての機能をJSだけで書いている • E：10人以上のJavaScriptチームで一つのプロ ダクトを開発している
- 5. 5 セッションのゴール • JavaScriptのライブラリを知る • ライブラリからJavaScriptの動向を知る • 動向から今日の見所のセッションを知る JavaScriptがもっと書きたくなる！
- 6. 6 アジェンダ 1. JavaScriptが置かれた背景 2. 手間を省こう系 3. 言語特性補う系 4. フレームワーク 5. ゲーム系 6. サーバ系 7. 開発効率化系（JavaScriptのテスト） 8. まとめ
- 7. 7 7 まず前フリ
- 9. 9 かつてのWebはJavaScriptは邪魔者 • ブラウザのJavaScript仕様が違う • そもそもバグが… • ダイヤルアップ接続のため、多くのそして大きいファイルを ダウンロードすると重くなる ページはシンプルに JavaScriptはできるだけ使わない
- 12. 12 Webページも表現豊かに • GoogleMapsがきっかけにAjaxが注目 • 「非同期」通信 • JavaScriptをみんなが使い始めた • Webページがアプリケーションらしくなってきた やっていいんだ！
- 13. 13 13 時は進み
- 15. 15 15 その分
- 21. 21 21 (1)手間を省こう系
- 22. 22 手間を省こう系 1.jQuery、prototype.js 2.UI系 • 個別ライブラリ • jQueryUI 3.UIフレームワーク • TwitterBootstrap 4.ページ表示速度に気をつけよう
- 23. 23 手間を省こう系 1.jQuery、prototype.js 2.UI系 • 個別ライブラリ • jQueryUI 3.UIフレームワーク • TwitterBootstrap 4.ページ表示速度に気をつけよう
- 25. 25 手間を省こう系 1.jQuery、prototype.js 2.UI系 • 個別ライブラリ • jQueryUI 3.UIフレームワーク • TwitterBootstrap 4.ページ表示速度に気をつけよう
- 26. 26 UI系のライブラリ • JavaScript、CSS、HTMLをできるだけ書かないというコン セプト • JavaScriptファイルを読み込み、HTML及び少量の JavaScriptコードで機能を実現する • ピュアなJavaScriptのみで動作するライブラリやjQueryの プラグインとして動作するライブラリなどがある • 大量に存在する
- 27. 27 UI系のライブラリ • Chosen（かっこいいセレクトボックス） • 竹取JS（縦書） • FullCalendar（GoogleCalendarライクなカレンダー） • jqPlot（グラフを表現） など・・・
- 28. 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スタイルクラスの適用／解除にアニメーションを利用
- 30. 30 手間を省こう系 1.jQuery、prototype.js 2.UI系 • 個別ライブラリ • jQueryUI 3.UIフレームワーク • TwitterBootstrap 4.ページ表示速度に気をつけよう
- 31. 31 UIフレームワーク系 • JavaScriptもCSSも書かずに、HTMLだけでレイアウトや動 的なUI処理などを行い、開発を短縮 • JavaScriptが苦手な（例えばデザイナーさん）方も動的な UIが表現できる • デザインやCSSが苦手なエンジニアの方もHTMLを書くだけ で整ったデザインのサイトを作成することができる • CSSフレームワークとも呼ばれている • その代わり、デフォルトでは限定的なデザイン
- 32. 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分割されたグリッドレイアウト
- 34. 34 34 あとは
- 35. 35 35
- 36. 36 手間を省こう系 1.jQuery、prototype.js 2.UI系 • 個別ライブラリ • jQueryUI 3.UIフレームワーク • TwitterBootstrap 4.ページ表示速度に気をつけよう
- 38. 38 38 (2)言語特性補う系
- 40. 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著 オライリー社）より
- 41. 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著 オライリー社）より
- 42. 42 言語特性の特殊性 • プロトタイプベースのオブジェクト指向(プロトタイプ チェーン） • スコープチェーン • コールバック（関数をパラメータ渡せる、など） など…
- 44. 44 CoffeeScript • JavaScriptの言語特性のよくある「罠」を自動的に回避 • JavaScriptにコンパイルして実行する （node.jsでコンパイル可能なコマンドをインストール） • クラスベースのオブジェクト指向をサポート
- 45. 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);
- 46. 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
- 47. 47 その他 • Dart • Kotlin • Haxe • TypeScript
- 48. 48 48 (3)フレームワーク
- 49. 49 JavaScriptフレームワーク 背景 • JavaScriptソフトウェアの複雑化、大規模化 • 多くの人数での開発が必要になっている • 設計上サーバサイドとの役割分担が重要
- 50. 50 JavaScriptフレームワーク ポイント • HTMLとの関係性がポイント • サーバサイドと違い、マウスなどイベントがあるため、 MVCと言われているが、サーバサイドのMVCとは考え方が 違う • フレームワークによって、MVCの責務（そもそもMVCと言 えるか？も含め）に差異がある • ということで、デファクトと言い切れるライブラリが無い
- 52. 52 フレームワークの分類 • MVCフレームワーク • Backbone.js • MVVMフレームワーク • Knockout • CoffeScript対応MVCフレームワーク(クラスベースのOO） • Batman.js • Spine.js • ViewとModelのデータバインディング • Angular.js • Ember.js • イベント管理、非同期処理 • RxJS
- 53. 53 フレームワークの分類 • MVCフレームワーク • Backbone.js • MVVMフレームワーク • Knockout • CoffeScript対応MVCフレームワーク(クラスベースのOO） • Batman.js • Spine.js • ViewとModelのデータバインディング • Angular.js • Ember.js • イベント管理、非同期処理 • RxJS
- 54. 54 Ember.js • ビューとコントローラーを紐付け、HTMLDOM更新 部分を省略し、シンプルに記述することができるフ レームワーク（データバインディング） • DOMの更新は煩雑になりやすいため、ビューと JavaScriptコードが行うことを明確に分割でき、可読 性を上げることができる。 • テンプレートエンジンは、handlebars。
- 55. 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>
- 56. 56 フレームワークの分類 • MVCフレームワーク • Backbone.js • CoffeScript対応MVCフレームワーク(クラスベースのOO） • Batman.js • Spine.js • MVVMフレームワーク • Knockout • ViewとModelのデータバインディング • Angular.js • Ember.js • イベント管理、非同期処理 • RxJS
- 57. 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 [モデル名]」
- 58. 58 Spine.js アプリケーションの作成 • 関連ファイルのインストール 「cd [アプリケーション]」 「npm install .」 • CoffeeScriptコンパイル（ビルド）とサーバ起動 「hem build」 「hem server」
- 59. 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)
- 60. 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 } ] }
- 61. 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>
- 63. 63 63 (4)ゲーム系
- 64. 64 ゲーム系 • 単純ではあるが作りやすく、ハードルが低い • オブジェクト指向を採用している • プログラミング教育にも適している。キャラクターをオブ ジェクトと考えやすい。 • ゲームフレームワーク • Enchant.js • JAction（スマートフォン用） • Arctic.js（DeNA開発） など
- 65. 65 enchant.js • ゲームが作りやすいように最適化されたフレームワーク • オブジェクト指向 • イベントドリブンで、イベントは非同期処理 • プラグインによる拡張が可能 • サンプルだけでなく画像素材も提供されている • enchant.jsで作ったゲームを公開するサイト http://9leap.net/
- 66. 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(); } });
- 67. 67 67 (5)サーバ系
- 68. 68 サーバ系 • Node.jsとは サーバサイドJavaScript。実際は、Google Chrome 用に開発されたJavaScriptエンジンV8 が搭載されて おり、ファイルI/O やネットワーク関連など、サーバ サイドならではの基本的な機能を付加している。
- 69. 69 サーバ系 • 特徴 • イベントループ 実行する処理をイベントキューに一旦格納し、順番に実行する。 • ノンブロッキングI/O データの入出力において、データの送受信の完了を待たずに他の処 理を開始する方式 • このような特徴からWebSocketでの処理に有効 • あまり同期的な処理には向かない。書きにくい。 • Express、Flatiron.jsなどのフレームワークがある
- 70. 70 Express.js • Node.js向けのWebアプリケーションフレームワーク。 • サーバの作成、ルーティングやセッション管理など、Webアプリ ケーションに必要な最低限の機能を用意している。 • Node.jsのパフォーマンスを生かして軽量に動作する。 機能 概要 サーバーの作成 静的コンテンツの配信、Expressのアプリケーションが動作するhttp、httpsのサー バを立ち上げることができる ルーティング リクエストメソッド（POST、GET）及びURLによってどのような動作をするかを ルーティングハンドラとして処理を記述する ミドルウェア Basic認証、Cookie、ログなどの設定が可能なAPI。 例外処理 アプリケーション内で発生した例外を処理することができる テンプレートエンジン のサポート JadeやEJSなどのテンプレートエンジンをサポートし、ルーティングと組み合わせ ることで、Webページを表示する セッション・サポート HTTPセッション管理をサポートする
- 72. 72 72 (6)テスト系
- 73. 73 73 テストの考え方
- 76. 76http://www.flickr.com/photos/59937401@N07/5858004830/sizes/z/in/photostream/ リリース して検証 しないと わからない
- 78. 78 なぜテストを行うのか • テストコード＋自動テスト • テスト駆動開発 • 継続的インテグレーション • クロスブラウザのテスト 品質をあとで担保する 品質を作りこむ のではなく
- 79. 79 テストコードの記述・実行 • テスティングフレームワーク • Mocha • Qunit • Jasmine • アサートモジュール • chai.js • クロスブラウザ自動テスト • Buster.js • JSTestDriver
- 80. 80 テスティングフレームワーク Mocha • Node.jsでもブラウザでも動くテスティングフレームワーク • BDD（振る舞い駆動開発） • TDD（テスト駆動開発） • exportスタイル • jQueryをテストすることを目的としたテスティングフレームワー クQUnitの記述方法であるQUnitスタイル • テストの合否を判定するアサーションモジュールは含まれて いないため、chai.jsなど個別のアサーションモジュールを 使用する必要がある
- 81. 81
- 82. 82 クロスブラウザテスト JSTestDriver • さまざまなブラウザ環境で、JavaScriptのテストを行うこと を想定したテストモジュール。 • サーバプロセスを立ち上げ、各ブラウザでアクセスしておく だけで、テストを実行するとアクセスしたブラウザでテスト が実行さる。
- 85. 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); }); }); });
- 86. 86 コードの静的解析 • JSHint • 構文解析 • 関数の複雑度 • jscoverage • コードカバレッジ
- 88. 88 88 まとめ
- 94. 94 まとめ • プログラミング言語としてのJavaScript • 言語特性が他の言語と違う部分がある • テスト自動化（CIなど） • 複雑化によりフレームワークが台頭
- 97. 97 まとめ（今後） • HTML5の普及 • FFOS • 複雑化、大規模化はどんどん進む • すべてがJavaScriptで完結可能 • 一部の先進的な開発者だけでなく、エンタープライズも含め、 プログラミング言語として、本気で取り組む必要がある • そういう意味で、フレームワークやテストは必須 • より設計が重要となってくる • 今後は、もっとライブラリの重要度が増してくる
- 99. 99 99