SlideShare a Scribd company logo
JavaScript ライブラリーを使い倒そう
~2013/06/08 第1回Build Insider OFFLINE講演資料~
Wingsプロジェクト
安西 剛
http://www.wings.msn.to/
2
自己紹介
安西 剛(やすにし つよし)
@tsuyok
Wingsプロジェクト
NECビッグローブ在籍
マイブームはDDD
3 3
4
質問
• A:デザイナ、マネージャ等 非エンジニア
• B:主にサーバエンジニアで、たまにブラウザ
のJSを書く
• C:サーバサイドのJSを書いている
• D:すべての機能をJSだけで書いている
• E:10人以上のJavaScriptチームで一つのプロ
ダクトを開発している
5
セッションのゴール
• JavaScriptのライブラリを知る
• ライブラリからJavaScriptの動向を知る
• 動向から今日の見所のセッションを知る
JavaScriptがもっと書きたくなる!
6
アジェンダ
1. JavaScriptが置かれた背景
2. 手間を省こう系
3. 言語特性補う系
4. フレームワーク
5. ゲーム系
6. サーバ系
7. 開発効率化系(JavaScriptのテスト)
8. まとめ
7 7
まず前フリ
8 8http://www.flickr.com/photos/mujitra/3556469060/
かつてのWeb
9
かつてのWebはJavaScriptは邪魔者
• ブラウザのJavaScript仕様が違う
• そもそもバグが…
• ダイヤルアップ接続のため、多くのそして大きいファイルを
ダウンロードすると重くなる
ページはシンプルに
JavaScriptはできるだけ使わない
10 10http://www.flickr.com/photos/moneyblognewz/5300999179/
そこで登場
11 11https://maps.google.co.jp/
「Ajax」登場
12
Webページも表現豊かに
• GoogleMapsがきっかけにAjaxが注目
• 「非同期」通信
• JavaScriptをみんなが使い始めた
• Webページがアプリケーションらしくなってきた
やっていいんだ!
13 13
時は進み
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天国がやってきた!
15 15
その分
16 16
http://www.flickr.com/photos/robellisphotography/6057722540/
大量なコード
17 17
http://www.flickr.com/photos/bitterjug/7670055210/
複雑化
18 18
http://www.flickr.com/photos/xlordashx/2942697333
しんどい
19 19
http://www.flickr.com/photos/paul_lowry/2266388742/
ライブラリが重要!
20
今日お話するライブラリ
1.手間を省こう系
2.言語特性補う系
3.フレームワーク
4.ゲーム系
5.サーバ系
6.開発効率化系
21 21
(1)手間を省こう系
22
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
23
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
24
jQuery、prototype.js
• JavaScriptとHTMLの相互作用を
強化するJavaScriptライブラリ。
• クロスブラウザでも同様の記述方
法で処理が可能
25
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
26
UI系のライブラリ
• JavaScript、CSS、HTMLをできるだけ書かないというコン
セプト
• JavaScriptファイルを読み込み、HTML及び少量の
JavaScriptコードで機能を実現する
• ピュアなJavaScriptのみで動作するライブラリやjQueryの
プラグインとして動作するライブラリなどがある
• 大量に存在する
27
UI系のライブラリ
• Chosen(かっこいいセレクトボックス)
• 竹取JS(縦書)
• FullCalendar(GoogleCalendarライクなカレンダー)
• jqPlot(グラフを表現)
など・・・
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スタイルクラスの適用/解除にアニメーションを利用
29
jQueryUI
• jQueryUIのサイトでデザインのカスタマイズが可能
http://jqueryui.com/themeroller/
30
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
31
UIフレームワーク系
• JavaScriptもCSSも書かずに、HTMLだけでレイアウトや動
的なUI処理などを行い、開発を短縮
• JavaScriptが苦手な(例えばデザイナーさん)方も動的な
UIが表現できる
• デザインやCSSが苦手なエンジニアの方もHTMLを書くだけ
で整ったデザインのサイトを作成することができる
• CSSフレームワークとも呼ばれている
• その代わり、デフォルトでは限定的なデザイン
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分割されたグリッドレイアウト
33
その他
jQueryMobile
34 34
あとは
35 35
36
手間を省こう系
1.jQuery、prototype.js
2.UI系
• 個別ライブラリ
• jQueryUI
3.UIフレームワーク
• TwitterBootstrap
4.ページ表示速度に気をつけよう
37
ページ表示速度に注意!
基礎的なページ表示速度のポイント(コーディングではない)
38 38
(2)言語特性補う系
39 39
JavaScriptの特性
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
これはなんという?
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
言語特性の特殊性
• プロトタイプベースのオブジェクト指向(プロトタイプ
チェーン)
• スコープチェーン
• コールバック(関数をパラメータ渡せる、など)
など…
43 43
CoffeeScript
44
CoffeeScript
• JavaScriptの言語特性のよくある「罠」を自動的に回避
• JavaScriptにコンパイルして実行する
(node.jsでコンパイル可能なコマンドをインストール)
• クラスベースのオブジェクト指向をサポート
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
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
その他
• Dart
• Kotlin
• Haxe
• TypeScript
48 48
(3)フレームワーク
49
JavaScriptフレームワーク
背景
• JavaScriptソフトウェアの複雑化、大規模化
• 多くの人数での開発が必要になっている
• 設計上サーバサイドとの役割分担が重要
50
JavaScriptフレームワーク
ポイント
• HTMLとの関係性がポイント
• サーバサイドと違い、マウスなどイベントがあるため、
MVCと言われているが、サーバサイドのMVCとは考え方が
違う
• フレームワークによって、MVCの責務(そもそもMVCと言
えるか?も含め)に差異がある
• ということで、デファクトと言い切れるライブラリが無い
51
JavaScriptフレームワーク
http://caliper.io/blog/2013/Javascript-Framework-Popularity/
52
フレームワークの分類
• MVCフレームワーク
• Backbone.js
• MVVMフレームワーク
• Knockout
• CoffeScript対応MVCフレームワーク(クラスベースのOO)
• Batman.js
• Spine.js
• ViewとModelのデータバインディング
• Angular.js
• Ember.js
• イベント管理、非同期処理
• RxJS
53
フレームワークの分類
• MVCフレームワーク
• Backbone.js
• MVVMフレームワーク
• Knockout
• CoffeScript対応MVCフレームワーク(クラスベースのOO)
• Batman.js
• Spine.js
• ViewとModelのデータバインディング
• Angular.js
• Ember.js
• イベント管理、非同期処理
• RxJS
54
Ember.js
• ビューとコントローラーを紐付け、HTMLDOM更新
部分を省略し、シンプルに記述することができるフ
レームワーク(データバインディング)
• DOMの更新は煩雑になりやすいため、ビューと
JavaScriptコードが行うことを明確に分割でき、可読
性を上げることができる。
• テンプレートエンジンは、handlebars。
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
フレームワークの分類
• MVCフレームワーク
• Backbone.js
• CoffeScript対応MVCフレームワーク(クラスベースのOO)
• Batman.js
• Spine.js
• MVVMフレームワーク
• Knockout
• ViewとModelのデータバインディング
• Angular.js
• Ember.js
• イベント管理、非同期処理
• RxJS
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
Spine.js アプリケーションの作成
• 関連ファイルのインストール
「cd [アプリケーション]」
「npm install .」
• CoffeeScriptコンパイル(ビルド)とサーバ起動
「hem build」
「hem server」
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
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
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>
62
Spine.js テンプレートサンプル
63 63
(4)ゲーム系
64
ゲーム系
• 単純ではあるが作りやすく、ハードルが低い
• オブジェクト指向を採用している
• プログラミング教育にも適している。キャラクターをオブ
ジェクトと考えやすい。
• ゲームフレームワーク
• Enchant.js
• JAction(スマートフォン用)
• Arctic.js(DeNA開発)
など
65
enchant.js
• ゲームが作りやすいように最適化されたフレームワーク
• オブジェクト指向
• イベントドリブンで、イベントは非同期処理
• プラグインによる拡張が可能
• サンプルだけでなく画像素材も提供されている
• enchant.jsで作ったゲームを公開するサイト
http://9leap.net/
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
(5)サーバ系
68
サーバ系
• Node.jsとは
サーバサイドJavaScript。実際は、Google Chrome
用に開発されたJavaScriptエンジンV8 が搭載されて
おり、ファイルI/O やネットワーク関連など、サーバ
サイドならではの基本的な機能を付加している。
69
サーバ系
• 特徴
• イベントループ
実行する処理をイベントキューに一旦格納し、順番に実行する。
• ノンブロッキングI/O
データの入出力において、データの送受信の完了を待たずに他の処
理を開始する方式
• このような特徴からWebSocketでの処理に有効
• あまり同期的な処理には向かない。書きにくい。
• Express、Flatiron.jsなどのフレームワークがある
70
Express.js
• Node.js向けのWebアプリケーションフレームワーク。
• サーバの作成、ルーティングやセッション管理など、Webアプリ
ケーションに必要な最低限の機能を用意している。
• Node.jsのパフォーマンスを生かして軽量に動作する。
機能 概要
サーバーの作成 静的コンテンツの配信、Expressのアプリケーションが動作するhttp、httpsのサー
バを立ち上げることができる
ルーティング リクエストメソッド(POST、GET)及びURLによってどのような動作をするかを
ルーティングハンドラとして処理を記述する
ミドルウェア Basic認証、Cookie、ログなどの設定が可能なAPI。
例外処理 アプリケーション内で発生した例外を処理することができる
テンプレートエンジン
のサポート
JadeやEJSなどのテンプレートエンジンをサポートし、ルーティングと組み合わせ
ることで、Webページを表示する
セッション・サポート HTTPセッション管理をサポートする
71
Route
(ルーティングメソッド)
View
(テンプレートエンジン)
app.js
node.jsサーバプロセス
クライアント
リクエスト
URLごとに分配
データと合わせてHTMLを生成
リクエストオブジェクト生成
HTML
レスポンスオブジェクトを使用し
レスポンス命令
レスポンス
サーバプロセス起動時に
初期処理を行い常駐する
Express.js
72 72
(6)テスト系
73 73
テストの考え方
74
要件
リリース
見積
要件定義
基本
設計
詳細設計 実装
結合
テスト
総合
テスト
受入
テスト
基本的なテストの考え方
単体
テスト
品質をあとで担保する
75 http://www.flickr.com/photos/carbonnyc/4740025131/sizes/l/in/photostream/
市場の変化
~スピード加速へ~
76http://www.flickr.com/photos/59937401@N07/5858004830/sizes/z/in/photostream/
リリース
して検証
しないと
わからない
77http://www.flickr.com/photos/59937401@N07/5858004830/sizes/z/in/photostream/
頻繁な
リリース
が必要
78
なぜテストを行うのか
• テストコード+自動テスト
• テスト駆動開発
• 継続的インテグレーション
• クロスブラウザのテスト
品質をあとで担保する
品質を作りこむ
のではなく
79
テストコードの記述・実行
• テスティングフレームワーク
• Mocha
• Qunit
• Jasmine
• アサートモジュール
• chai.js
• クロスブラウザ自動テスト
• Buster.js
• JSTestDriver
80
テスティングフレームワーク Mocha
• Node.jsでもブラウザでも動くテスティングフレームワーク
• BDD(振る舞い駆動開発)
• TDD(テスト駆動開発)
• exportスタイル
• jQueryをテストすることを目的としたテスティングフレームワー
クQUnitの記述方法であるQUnitスタイル
• テストの合否を判定するアサーションモジュールは含まれて
いないため、chai.jsなど個別のアサーションモジュールを
使用する必要がある
81
82
クロスブラウザテスト JSTestDriver
• さまざまなブラウザ環境で、JavaScriptのテストを行うこと
を想定したテストモジュール。
• サーバプロセスを立ち上げ、各ブラウザでアクセスしておく
だけで、テストを実行するとアクセスしたブラウザでテスト
が実行さる。
83
クロスブラウザテスト JSTestDriver
JSTestDriverサーバ
接続
テスト実行
→各ブラウザで実行
84
モック、スタブなどテストダブル
• JavaScriptでテストを行う場合、Ajax通信やコールバック
の扱いなど、単純にテストが難しい場合がある。Ajaxやテ
スト対象のオブジェクトなどをスタブに置き換えてテストを
行う方法がテストダブル
• Sinon.jsやJsMockitoというライブラリがある
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
コードの静的解析
• JSHint
• 構文解析
• 関数の複雑度
• jscoverage
• コードカバレッジ
87
Jenkins CI環境
Jenkins
Linux
PHP
テスト
Windows
Android
テスト
Web
テスト
Linux
Node.js
テスト
Mac
iPhone
テスト
Linux
CI環境を構築
JSTestDriver
GitLab
Chef
Server
88 88
まとめ
89
今日お話したライブラリ
1.手間を省こう系
2.言語特性補う系
3.フレームワーク
4.ゲーム系
5.サーバ系
6.開発効率化系
90 90http://www.flickr.com/photos/mujitra/3556469060/
かつてのWeb
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/
92 92
http://www.flickr.com/photos/robellisphotography/6057722540/
大量なコード
93 93
http://www.flickr.com/photos/bitterjug/7670055210/
複雑化
94
まとめ
• プログラミング言語としてのJavaScript
• 言語特性が他の言語と違う部分がある
• テスト自動化(CIなど)
• 複雑化によりフレームワークが台頭
95http://www.flickr.com/photos/22290288@N03/5865032805/
96
http://www.flickr.com/photos/codepo8/8692028483/
97
まとめ(今後)
• HTML5の普及
• FFOS
• 複雑化、大規模化はどんどん進む
• すべてがJavaScriptで完結可能
• 一部の先進的な開発者だけでなく、エンタープライズも含め、
プログラミング言語として、本気で取り組む必要がある
• そういう意味で、フレームワークやテストは必須
• より設計が重要となってくる
• 今後は、もっとライブラリの重要度が増してくる
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天国がやってきた!
99 99
JavaScript ライブラリーを使い倒そう #buildinsider

More Related Content

What's hot

JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
Yusuke Hirao
 
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
Ken Muryoi
 
ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)
ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)
ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)
Osamu Takiya
 
自己紹介LT「俺の迷走っぷり」
自己紹介LT「俺の迷走っぷり」自己紹介LT「俺の迷走っぷり」
自己紹介LT「俺の迷走っぷり」
Ken Muryoi
 
20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)
20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)
20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)
kunst1080
 
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
 
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
Daichi Koike
 
.NET Compiler Platform
.NET Compiler Platform.NET Compiler Platform
.NET Compiler Platform
信之 岩永
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
 
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Satoshi Nagayasu
 
JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説
賢次 海老原
 
リソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarbリソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarb
Toru Kawamura
 
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-JavaライブラリAndroidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
Yukiya Nakagawa
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
Alisue Lambda
 
Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法Ian Lewis
 
Java による Web アプリケーションのプロトタイプのために最近使っている構成
Java による Web アプリケーションのプロトタイプのために最近使っている構成Java による Web アプリケーションのプロトタイプのために最近使っている構成
Java による Web アプリケーションのプロトタイプのために最近使っている構成
Yu Nobuoka
 
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
takezoe
 

What's hot (20)

JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
 
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
 
ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)
ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)
ポケ森のフレンド登録が面倒だったので gem を作った話(アキバエンジニア懇親会 2018/03/01)
 
自己紹介LT「俺の迷走っぷり」
自己紹介LT「俺の迷走っぷり」自己紹介LT「俺の迷走っぷり」
自己紹介LT「俺の迷走っぷり」
 
20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)
20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)
20170708 Ebeanのご紹介(O/Rマッパー勉強会 in 大都会)
 
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
 
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
 
.NET Compiler Platform
.NET Compiler Platform.NET Compiler Platform
.NET Compiler Platform
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
Django/Celeyを用いたデータ分析Webアプリケーションにおける非同期処理の設計と実装
 
JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説JavaScriptおよびXPages Vote技術解説
JavaScriptおよびXPages Vote技術解説
 
リソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarbリソースモデリングパターンの提案 #sendagayarb
リソースモデリングパターンの提案 #sendagayarb
 
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-JavaライブラリAndroidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
 
Djangoのススメ
DjangoのススメDjangoのススメ
Djangoのススメ
 
Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法Djangoアプリの実践的設計手法
Djangoアプリの実践的設計手法
 
Java による Web アプリケーションのプロトタイプのために最近使っている構成
Java による Web アプリケーションのプロトタイプのために最近使っている構成Java による Web アプリケーションのプロトタイプのために最近使っている構成
Java による Web アプリケーションのプロトタイプのために最近使っている構成
 
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
 

Similar to JavaScript ライブラリーを使い倒そう #buildinsider

laravel x モバイルアプリ
laravel x モバイルアプリlaravel x モバイルアプリ
laravel x モバイルアプリ
Masaki Oshikawa
 
Rx java x retrofit
Rx java x retrofitRx java x retrofit
Rx java x retrofit
Shun Nakahara
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
 
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
normalian
 
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
Kentaro Yoshida
 
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
Masahiro Nagano
 
意図を表現するプログラミング
意図を表現するプログラミング意図を表現するプログラミング
意図を表現するプログラミングAtsuhiro Kubo
 
Sbtのマルチプロジェクトはいいぞ
SbtのマルチプロジェクトはいいぞSbtのマルチプロジェクトはいいぞ
Sbtのマルチプロジェクトはいいぞ
Yoshitaka Fujii
 
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発emasaka
 
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
Fumihiko Shiroyama
 
RESTful Webサービス
RESTful WebサービスRESTful Webサービス
RESTful Webサービス
Kentaro Inomata
 
R5 3 type annotation
R5 3 type annotationR5 3 type annotation
R5 3 type annotationEIICHI KIMURA
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
Takafumi Ikeda
 
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
Yuto Suzuki
 
Hello Java
Hello JavaHello Java
Hello Java
Chihiro Ito
 
Ext.direct
Ext.directExt.direct
Ext.direct
Shuhei Aoyama
 
ScalaMatsuri 2016
ScalaMatsuri 2016ScalaMatsuri 2016
ScalaMatsuri 2016
Yoshitaka Fujii
 
めんどくさくない Scala #kwkni_scala
めんどくさくない Scala #kwkni_scalaめんどくさくない Scala #kwkni_scala
めんどくさくない Scala #kwkni_scala
Kazuhiro Sera
 

Similar to JavaScript ライブラリーを使い倒そう #buildinsider (20)

laravel x モバイルアプリ
laravel x モバイルアプリlaravel x モバイルアプリ
laravel x モバイルアプリ
 
Rx java x retrofit
Rx java x retrofitRx java x retrofit
Rx java x retrofit
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
 
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
 
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
MySQLと組み合わせて始める全文検索プロダクト"elasticsearch"
 
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
 
意図を表現するプログラミング
意図を表現するプログラミング意図を表現するプログラミング
意図を表現するプログラミング
 
Sbtのマルチプロジェクトはいいぞ
SbtのマルチプロジェクトはいいぞSbtのマルチプロジェクトはいいぞ
Sbtのマルチプロジェクトはいいぞ
 
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
 
Haikara
HaikaraHaikara
Haikara
 
絶対落ちないアプリの作り方
絶対落ちないアプリの作り方絶対落ちないアプリの作り方
絶対落ちないアプリの作り方
 
RESTful Webサービス
RESTful WebサービスRESTful Webサービス
RESTful Webサービス
 
JSDoc ToolKit
JSDoc ToolKitJSDoc ToolKit
JSDoc ToolKit
 
R5 3 type annotation
R5 3 type annotationR5 3 type annotation
R5 3 type annotation
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
 
【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js【LT】 怖くない恐怖のScala.js
【LT】 怖くない恐怖のScala.js
 
Hello Java
Hello JavaHello Java
Hello Java
 
Ext.direct
Ext.directExt.direct
Ext.direct
 
ScalaMatsuri 2016
ScalaMatsuri 2016ScalaMatsuri 2016
ScalaMatsuri 2016
 
めんどくさくない Scala #kwkni_scala
めんどくさくない Scala #kwkni_scalaめんどくさくない Scala #kwkni_scala
めんどくさくない Scala #kwkni_scala
 

Recently uploaded

ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 

Recently uploaded (8)

ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 

JavaScript ライブラリーを使い倒そう #buildinsider