Submit Search
Upload
いまさら聞けない!?Backbone.js 超入門
•
44 likes
•
21,263 views
Kohei Kadowaki
Follow
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
Read less
Read more
Devices & Hardware
Report
Share
Report
Share
1 of 91
Recommended
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
フロントエンド勉強会01資料
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
YAPC::Asia 2012
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
2015年度 GX/MF エンジニア合同新人研修 3日目
Learning jQuery
Learning jQuery
taiju higashi
デザイナ向け「はじめてのjQuery」 http://d.hatena.ne.jp/jdg/20081127/1227747020
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
Recommended
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
フロントエンドとJavaScript JavaScriptのMV*向けライブラリ BACKBONE.JSによるWebアプリケーション開発について 「オープンソースカンファレンス 2013 福岡」の HTML5と最近のフロントエンド事情で発表した資料です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
フロントエンド勉強会01資料
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
YAPC::Asia 2012
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
2015年度 GX/MF エンジニア合同新人研修 3日目
Learning jQuery
Learning jQuery
taiju higashi
デザイナ向け「はじめてのjQuery」 http://d.hatena.ne.jp/jdg/20081127/1227747020
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
SIROK技術勉強会 #1 「Reactってなんだ?」
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その二
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
春のJavaScript祭2015in GMO YoursでSeleniumとJavaScriptの話をしました。 キャプチャを取ったり、自働入力をしたり、ちょっと便利に楽をするためのSelenium活用についてです
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
2015.12.16 JS オジサン #6 二日目
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
JavaScriptこわい!なJava・Pythonの人が調べた古い書き方から脱却する話
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/431/room ーーーーーーーーーーーーーーーーーーーーーーー
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
gulp芸
gulp芸
Yuki Ishikawa
2015/10/28 Gotanda.js #1
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
2014/8/22 第二回 html5minutes LTのスライドです
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その三
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Tetsuya Tatsumi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
フレームワークを利用したシングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
YAPC::Asia 2013 2013/09/21 Yusuke Wada a.k.a. yusukebe
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Web制作勉強会第二回の資料 jQuery入門です。
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
Tom Hayakawa
OSC2013浜松
UnitTestのためのクラス設計
UnitTestのためのクラス設計
Takeshi Ishida
More Related Content
What's hot
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
SIROK技術勉強会 #1 「Reactってなんだ?」
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
春のJavaScript祭りで発表した資料です http://javascript-fes.doorkeeper.jp/events/14171
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その二
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
春のJavaScript祭2015in GMO YoursでSeleniumとJavaScriptの話をしました。 キャプチャを取ったり、自働入力をしたり、ちょっと便利に楽をするためのSelenium活用についてです
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
2015.12.16 JS オジサン #6 二日目
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
JavaScriptこわい!なJava・Pythonの人が調べた古い書き方から脱却する話
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/431/room ーーーーーーーーーーーーーーーーーーーーーーー
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
gulp芸
gulp芸
Yuki Ishikawa
2015/10/28 Gotanda.js #1
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
2014/8/22 第二回 html5minutes LTのスライドです
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その三
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Tetsuya Tatsumi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
フレームワークを利用したシングルページアプリケーションの制御 GMOインターネット次世代システム研究室の勉強会発表資料。 2015年12月作成。 案件対応期間は2015年4月-8月。
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
YAPC::Asia 2013 2013/09/21 Yusuke Wada a.k.a. yusukebe
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Web制作勉強会第二回の資料 jQuery入門です。
What's hot
(20)
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
HTML5 アプリ開発
HTML5 アプリ開発
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
React+fluxを導入した話
React+fluxを導入した話
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
gulp芸
gulp芸
AngularJSの高速化
AngularJSの高速化
HTML5 開発環境の紹介
HTML5 開発環境の紹介
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
React を導入したフロントエンド開発
React を導入したフロントエンド開発
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Web制作勉強会 #2
Web制作勉強会 #2
Viewers also liked
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
Tom Hayakawa
OSC2013浜松
UnitTestのためのクラス設計
UnitTestのためのクラス設計
Takeshi Ishida
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
2012/11/14に開催された「なんでもないただの先端技術勉強会(仮)」にて、Backbone.jsの概要説明に使ったスライドです。
Visual Studio Code 入門
Visual Studio Code 入門
Saki Homma
2017/03/04の『Geek になりたい人のためのミニカンファ』での、Visual Studio Codeのハンズオン用の資料です。
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
angular2についてangular1でいうアレがangular2でいうコレっていう形式で紹介したり
(旧版) オープンソースライセンスの基礎と実務
(旧版) オープンソースライセンスの基礎と実務
Yutaka Kachi
こちら古いバージョンです。著作権・ソフトウェアライセンスから始めて、各種オープンソースライセンスを平易に解説 >> 2018年版はこちら https://www.slideshare.net/YutakaKachi/ss-118947772
Viewers also liked
(6)
2013 02 09_osc2013_hamamatsu_osm
2013 02 09_osc2013_hamamatsu_osm
UnitTestのためのクラス設計
UnitTestのためのクラス設計
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Visual Studio Code 入門
Visual Studio Code 入門
angular1脳で見るangular2
angular1脳で見るangular2
(旧版) オープンソースライセンスの基礎と実務
(旧版) オープンソースライセンスの基礎と実務
Similar to いまさら聞けない!?Backbone.js 超入門
非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
Masakazu Muraoka
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
Masakazu Muraoka
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
Mitsuru Ogawa
2013/10/31 HTML5jえんぷら部主催 HALLOWEEN WEB NIGHT発表スライド
Kerasで可視化いろいろ
Kerasで可視化いろいろ
Masakazu Muraoka
Kerasで可視化いろいろ
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
Mitsuo Kawashima
HTML5 Conference 2015、ビギナー部のハンズオンセッション。 Webデザイナー、jQuery、html5API初心者向けのハンズオンセッション。クロスフェードスライドショーをhtml5APIも交えて作ります。実際に手を動かして体験して使えるようになろう! 作るものは2つ。jQueryのみでのクロルフェードスライドショーと、FileAPIを使って好きな画像をドラッグ&ドロップしてクロスフェードスライドショーを作ります。
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
Html5で変わるいろんなこと
Html5で変わるいろんなこと
Masakazu Muraoka
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
minoru nakanou
【HTML5飯】第2回 Webフロントエンジニア交流会 @横浜 #HTML5飯
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
three.jsの現行バージョン(r79)に基づいた表現周りをかいつまんで紹介
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordCamp Tokyo2015ハンズオンスライド(配布版)
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
Kensaku Komatsu
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
JavaScriptでHTTPリクエストをする普通のことをします。
Html5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
Masakazu Muraoka
Similar to いまさら聞けない!?Backbone.js 超入門
(20)
非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
Kerasで可視化いろいろ
Kerasで可視化いろいろ
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
_HTML5で組んでみた_
_HTML5で組んでみた_
Html5で変わるいろんなこと
Html5で変わるいろんなこと
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Html5 and Graphics
Html5 and Graphics
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Htmlのコトバ
Htmlのコトバ
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Html5でOpen Dataをやってみる
Html5でOpen Dataをやってみる
More from Kohei Kadowaki
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
2014/11/16に開催された「JSBoard勉強会東京#1」で発表した際に使用したスライドです。
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
2013/11/23 に開催された「関西Firefox OS勉強会 5th GIG」で使ったプレゼンスライドです。
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
2013/10/12 に大阪で開催された「第8回HTML5など勉強会」で利用した資料です
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
2013/8/10に大阪で開催された「まにまにフェスティバル(まにフェス)P2」で使用したプレゼン資料です
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
2013/03/23 大阪にて開催された「第6回 HTML5など勉強会」で使用したプレゼン資料です。
プログラマーのお仕事
プログラマーのお仕事
Kohei Kadowaki
2012年11月17日に開催された「mashtalk!! Osaka」で使ったプレゼンテーション資料です。 途中簡単なライブコーディングあり。
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
2012年10月6日に開催された神戸ITフェスティバル 2012におけるセミナー枠で使用したプレゼン資料です。 サンプルコードはこちら↓ https://github.com/kadoppe/kobe-it-fes-2012
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
Kohei Kadowaki
2012/9/15に開催された「パンダの会 その七」でのプレゼン資料です。
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
2012/7/21に大阪で開催された「第5回 HTML5など勉強会」でのプレゼン資料です。
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
Kohei Kadowaki
Firefox Developers Conference 2012 in Osakaのライトニングトークで使った発表資料です。
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
2011年10月22日に大阪で開催された「第3回 HTML5など勉強会」での発表に使ったプレゼン資料です。
SocketStream入門
SocketStream入門
Kohei Kadowaki
2011年9月24日に大阪にて開催された「第2回 HTML5など勉強会(仮)」で発表したときに使ったプレゼン資料です。
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
2011.8.28 京都の町家スタジオで開催された「第2回 プログラミング勉強会」で発表したときに使用したプレゼン資料です。
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
WebSocketことはじめ
WebSocketことはじめ
Kohei Kadowaki
2011.7.30に大阪で行われた、第一回「HTML5など勉強会」での発表資料です。
More from Kohei Kadowaki
(16)
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
プログラマーのお仕事
プログラマーのお仕事
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
SocketStream入門
SocketStream入門
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
AndroidでWebSocket
AndroidでWebSocket
WebSocketことはじめ
WebSocketことはじめ
いまさら聞けない!?Backbone.js 超入門
1.
いまさら聞けない!? Backbone.js 超入門 2013/6/8 第7回
HTML5など勉強会 - kadoppe
2.
自己紹介 名前:門脇 恒平 @kadoppe 職業:ソフトウェアエンジニア Backbone.js歴:1年半 所属: HTML5-West.jp
コアメンバ ShareWis Inc. CTO
3.
スライド: http://www.slideshare.net/kadoppe サンプルコード: https://github.com/kadoppe/html5etc-7
4.
おことわり
5.
今日の話は HTML5に 関係なし
6.
だって・・・
7.
HTML5など 勉強会
8.
今日の内容
9.
メイン: 5W1H おまけ: 問題と失敗談
10.
What: Backbone.jsってなんだ?
11.
Backbone.js
12.
クライアントサイド MVC フレームワーク
13.
時間がないので ひらたく言うと
14.
Webアプリの JavaScriptコードを 楽に・キレイに 書くための道具
15.
Where: どこで使われてるの?
16.
hulu
17.
Foursquare
18.
ShareWis
19.
その他活用事例多数
20.
Who: どんな人が使えばいいの?
21.
JavaScriptを たくさん書く人
22.
大規模な JavaScriptを 書く人
23.
フロントエンド エンジニア
24.
必要なスキル: JavaScript jQuery or Zepto.js
25.
Zepto.js jQuery互換の軽量ライブラリ
26.
あるといいスキル: Underscore.js
27.
Underscore.js 痒いところに手が届くJSライブラリ
28.
When: いつ使うの?
29.
今でしょ!
30.
Backbone.jsを 活用できる Webアプリ例
31.
例1: シングルページ アプリケーション
32.
ページ遷移せずに 画面をどんどん 切り替えたいときに
33.
例2: 大量のイベント処理・ DOM操作が発生する アプリケーション
34.
インタラクティブな Webアプリを つくりたいときに
35.
例2: データを扱う アプリケーション
36.
データをもとにして ページを動的に 組立てたいときに
37.
Why: なぜ使うの?
38.
Backbone.js を使うべき 5つの理由
39.
理由1: コードの見通しが良くなる
40.
プログラムを 複数のモジュールに 分割できる
41.
メンテナンス性向上!
42.
理由2: シングルページアプリ がつくりやすい
43.
Routerが便利!
44.
理由3: 様々な種類のデータ が扱いやすい
45.
Model・Collection が便利!
46.
理由4: イベント処理・DOM 操作関連のコードが カオスになりにくい
47.
Viewが便利!
48.
理由5: 類似フレームワークと 比べて軽量
49.
6.3 KB
50.
モバイル環境 でも使える
51.
How: どうやって使うの?
52.
その前に Backbone.jsの 構成要素を紹介
53.
4つの構成要素
54.
Router Model Collection View
55.
Router: アプリの状態を管理
56.
Model: データの管理や加工
57.
Collection: 複数のModelを扱う 配列みたいなもの
58.
View: イベント処理・DOM 操作・Model/ Collectionの管理
59.
View Collection Model 相関図 Router
60.
実際に何か つくってみる
61.
プチ ライブ コーディング
62.
つくるもの: ToDoリスト
63.
スタート!
64.
おさらい
65.
アプリケーションの構造 FormView TodoListView StatsView AppView Todos Collection Todo Model ControlsView View同士はCollectionのイベントを介して連携
66.
実際に つくってみて わかったこと
67.
1. 役割ごとに コードを分割できた
68.
2. 疎結合な コードが書けた
69.
疎結合= コード間の結びつきが 弱いこと
70.
Viewは 他のViewのことを 知らない
71.
メンテナンス性が 高いコードが書けた!
72.
ぜひ使おう
73.
でもちょっと 待って
74.
おまけ: 問題点と失敗談
75.
Backbone.jsの問題: 決まり事が少ない 自由度が高い
76.
うまく書かないと スパゲッティコードが 途端にできあがる
77.
失敗談1: Viewのコードが長く 複雑になる
78.
理由1: Viewが担当する ページ要素が広すぎる
79.
理由1: Viewの責任範囲をう まく分割できてない AppView ページ全体をひとつのViewで まかなおうとする → Viewのコードが長く、複雑に
80.
理由1: Viewの責任範囲をう まく分割できてない FormView TodoListView StatsView AppView ControlsView ページを複数要素に分割して 小さなViewを割り当てる → コードの役割分担が明確に!
81.
理由2: Viewに データ処理に関する コードを書いている
82.
View Collection Model Viewにデータ処理に関する コードがたくさん含まれる → Viewのコードが長く、複雑に データ処理 データ処理 データ処理 データ処理 データ処理 データ処理
83.
Model Collection View データ処理に関するコードは Model・Collectionへ → データ処理が再利用可能に データ処理 データ処理 データ処理 データ処理 View View
84.
失敗談2: View同士を連携させる ためのコードを たくさん書いてしまう
85.
理由: Model/Collection のイベントを うまく活用できてない
86.
View 各Viewが直接連携している → 連携のためのコードが増える → 各Viewが疎結合ではなくなる View View
View View
87.
View Modelのイベントを介して連携 → 連携のためのコードが減る → 各Viewが疎結合になる View View
View View Model
88.
他にも 考えることは たくさん!
89.
どんどん 情報共有 しましょー!
90.
Let s Try
!!
91.
おしまい