SlideShare una empresa de Scribd logo
1 de 40
Descargar para leer sin conexión
忙しい人のためのBackbone.jsと
Angular.js入門
2014/03/20
なぜフレームワークが必要か
• (単純化した)良くあるJavaScriptアプリケーショ
ン
① クリックされると
② フォームの内容を取得し
て
③ Ajax送信し、
④ 結果を描画する
POST http://example.com/status
{"text" : "aaaa"}
----
{"text" : "hi! aaaa"}
jQueryで簡単に実装!
http://jsfiddle.net/EdXzC/
簡単ですね!
jQueryで簡単に実装!
• 何が問題か?
対象が複雑になったら・・・
• フォームの項目が大量になったら・・・
• 描画するHTMLが複雑になったら・・・
• AJAXの成功結果を受けて連動する処理が増
えたら・・・
• 監視するDOMイベントが増えたら・・・
フォームの項目が大量になったら・・・
ここが増える
描画するHTMLが複雑になったら・・・
ここが増える
AJAXの成功結果を受けて連動する処
理が増えたら・・・
ここが増える
監視するDOMイベントが増えたら・・・
ここが増える
対象が複雑になったら・・・
• ソースコードの見通しが悪くスパゲッティ化し、
あとからソースを見たときに解読が難しくなる。
• どこに修正を加えていいかわかりづらい
• 修正がどこに影響するかわかりづらい
保守性の大幅な低下!
どこが悪いのか?
どこが悪いのか?
DOMイベントハンドラの中
に
どこが悪いのか?
AJAXの処理が記述され、
どこが悪いのか?
Model(ここではデータ)をDOM
から値を取得して構築し、
どこが悪いのか?
• イベントハンドリング
• モデルの構築
• AJAX通信処理
• Viewの更新
•を1カ所に実装しているのが悪い。
改善その1 ~イベントハンドラの分離~
• http://jsfiddle.net/Y49kF/
改善その2 ~View更新処理の分離~
• http://jsfiddle.net/bL9R6/
改善その3 ~データとAjax通信の分離~
• http://jsfiddle.net/wF4tX/
改善その4 ~ModelからViewの分離~
• http://jsfiddle.net/zs4tx/
こういうアプリケーションの作り方を
フレームワーク化したい
• 注意: MVC云々は忘れましょう
– 頭の中のMVCモデルは捨ててください
Backbone.js
• http://jsfiddle.net/827eH/
Backbone.js
• http://jsfiddle.net/827eH/
Model情報
イベントマッピング
テンプレート
Ajax通信処理
Ajaxコールバック処理
Backbone.js
(よりBackboneらしい書き方)
• http://jsfiddle.net/A7qj3/
Backbone.js
(よりBackboneらしい書き方)
• http://jsfiddle.net/A7qj3/
コールバックを直接書かず
pub/subパターンで処理
イベントを購読
Backbone.js
(よりBackboneらしい書き方)
• http://jsfiddle.net/A7qj3/
this.collectionが“add”イベントを発行
this.collectionの“add”イベントが発
行されたら、this.addLineを実行する
Backbone.js
(さらにBackboneらしい書き方)
• http://jsfiddle.net/AST2V/
Backbone.js
(さらにBackboneらしい書き方)
• http://jsfiddle.net/AST2V/
意味のある(制御する)DOMの単位で
Viewを分割する
Viewの分割
Viewの分割
NewStatusView
StatusesView
StatusLineView
データバインディングを改善
jQueryのセレクタで値を一つ
一つ取得してModelに設定
jQueryのセレクタで一つ一つ
DOMを更新
• Backbone.stickitを導入
• http://jsfiddle.net/S66eE/
データバインディングを改善
• Backbone.stickitを導入
• http://jsfiddle.net/S66eE/
データバインディングを改善
DOMの要素とModel
の属性とのマッピング
定義
this.modelとthis.$el
のバインディング
フォームを更新すると勝手に
modelもアップデート
modelを更新するとフォームも
勝手にもアップデート
Backbone.jsのアーキテクチャ
準備中(してないけど)
Angular.js
• http://jsfiddle.net/nmCTY/
Angular.js (よりangularらしい書き方)
• http://jsfiddle.net/F3mAv/
Angular.js (よりangularらしい書き方)
• http://jsfiddle.net/F3mAv/
DI
Angular.js
• http://jsfiddle.net/HALKq/
Angular.jsは変数名でDIしてくれるが、
JavaScriptコード圧縮した場合、変数
名が変わってしまうため、明示的に
アノテートするのがベター。
Angular.js
• http://jsfiddle.net/HALKq/
自動化ツールあり
https://github.com/btford/ngmin
Angular.jsのアーキテクチャ
準備中(してないけど)
Backbone.js or Angular.js
• 今回のサンプルだと圧倒的にBackboneが不
利!

Más contenido relacionado

La actualidad más candente

今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)NTT DATA Technology & Innovation
 
失敗しない条件付きアクセスの実装
失敗しない条件付きアクセスの実装失敗しない条件付きアクセスの実装
失敗しない条件付きアクセスの実装Suguru Kunii
 
分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーションMasahito Zembutsu
 
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~apkiban
 
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方Masaru Ichikawa
 
Text and metadata extraction with Apache Tika
Text and metadata extraction with Apache TikaText and metadata extraction with Apache Tika
Text and metadata extraction with Apache TikaJukka Zitting
 
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
[cb22] Hayabusa  Threat Hunting and Fast Forensics in Windows environments fo...[cb22] Hayabusa  Threat Hunting and Fast Forensics in Windows environments fo...
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...CODE BLUE
 
Kubernetes 導入から始める DevOps について
Kubernetes 導入から始める DevOps についてKubernetes 導入から始める DevOps について
Kubernetes 導入から始める DevOps についてShigeru Tatsuta
 
WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browsermganeko
 
Java EE から Quarkus による開発への移行について
Java EE から Quarkus による開発への移行についてJava EE から Quarkus による開発への移行について
Java EE から Quarkus による開発への移行についてShigeru Tatsuta
 
できる!並列・並行プログラミング
できる!並列・並行プログラミングできる!並列・並行プログラミング
できる!並列・並行プログラミングPreferred Networks
 
自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例Teruchika Yamada
 
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢apkiban
 
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...Flink Forward
 
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
システム間連携を担うSpring Integrationのエンタープライズ開発での活用システム間連携を担うSpring Integrationのエンタープライズ開発での活用
システム間連携を担うSpring Integrationのエンタープライズ開発での活用apkiban
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るGo Miyasaka
 
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetupこれで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線MeetupMasatoshi Tada
 
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング MicroAd, Inc.(Engineer)
 

La actualidad más candente (20)

今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
 
失敗しない条件付きアクセスの実装
失敗しない条件付きアクセスの実装失敗しない条件付きアクセスの実装
失敗しない条件付きアクセスの実装
 
分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション分散環境におけるDocker とオーケストレーション
分散環境におけるDocker とオーケストレーション
 
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
 
CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方CoreDataでのsubqueryの使い方
CoreDataでのsubqueryの使い方
 
Text and metadata extraction with Apache Tika
Text and metadata extraction with Apache TikaText and metadata extraction with Apache Tika
Text and metadata extraction with Apache Tika
 
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
[cb22] Hayabusa  Threat Hunting and Fast Forensics in Windows environments fo...[cb22] Hayabusa  Threat Hunting and Fast Forensics in Windows environments fo...
[cb22] Hayabusa Threat Hunting and Fast Forensics in Windows environments fo...
 
Kubernetes 導入から始める DevOps について
Kubernetes 導入から始める DevOps についてKubernetes 導入から始める DevOps について
Kubernetes 導入から始める DevOps について
 
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
PHP版レガシーコード改善に役立つ新パターン #wewlc_jp
 
Log4j in 8 slides
Log4j in 8 slidesLog4j in 8 slides
Log4j in 8 slides
 
WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browser
 
Java EE から Quarkus による開発への移行について
Java EE から Quarkus による開発への移行についてJava EE から Quarkus による開発への移行について
Java EE から Quarkus による開発への移行について
 
できる!並列・並行プログラミング
できる!並列・並行プログラミングできる!並列・並行プログラミング
できる!並列・並行プログラミング
 
自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例
 
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
GraalVM の概要と、Native Image 化によるSpring Boot 爆速化の夢
 
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
Dynamically Scaling Data Streams across Multiple Kafka Clusters with Zero Fli...
 
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
システム間連携を担うSpring Integrationのエンタープライズ開発での活用システム間連携を担うSpring Integrationのエンタープライズ開発での活用
システム間連携を担うSpring Integrationのエンタープライズ開発での活用
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
 
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetupこれで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
これで怖くない!?コードリーディングで学ぶSpring Security #中央線Meetup
 
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
アドテクに携わって培った アプリをハイパフォーマンスに保つ設計とコーディング
 

Destacado

3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular jsShin Adachi
 
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubangular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubsilvers ofsilvers
 
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScriptYuta Matsumura
 
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Staffnet_Inc
 
デザイナーとの協業を本気で考える
デザイナーとの協業を本気で考えるデザイナーとの協業を本気で考える
デザイナーとの協業を本気で考えるkwatch
 
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)Mitsuru Ogawa
 
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化Toshio Ehara
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリアシアル株式会社
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!Yuji Nojima
 

Destacado (12)

3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular js
 
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubangular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
 
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
 
Angularを利用しよう
Angularを利用しようAngularを利用しよう
Angularを利用しよう
 
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
 
デザイナーとの協業を本気で考える
デザイナーとの協業を本気で考えるデザイナーとの協業を本気で考える
デザイナーとの協業を本気で考える
 
Alt01-LT
Alt01-LTAlt01-LT
Alt01-LT
 
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
 
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
TypeScriptで快適javascript
TypeScriptで快適javascriptTypeScriptで快適javascript
TypeScriptで快適javascript
 

Similar a 忙しい人のためのBackbone.jsとAngular.js入門

Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~Shinichi Tomita
 
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについてNobukazu Hanada
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiTomohiro Kumagai
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうHishikawa Takuro
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜Yuki Minakawa
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?Yosuke Onoue
 
Node.js勉強会 Framework Koa
Node.js勉強会 Framework KoaNode.js勉強会 Framework Koa
Node.js勉強会 Framework Koakamiyam .
 
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
覚醒JavaScript  -ES6で作るIsomophicアプリケーション-覚醒JavaScript  -ES6で作るIsomophicアプリケーション-
覚醒JavaScript -ES6で作るIsomophicアプリケーション-Oonishi Keitarou
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.jsHiroki Toyokawa
 
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScriptマークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScripteiji sekiya
 
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会yoshinori matsumoto
 
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話terurou
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 

Similar a 忙しい人のためのBackbone.jsとAngular.js入門 (20)

Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~Sales Force Episode VI ~ Return of Ajax Toolkit ~
Sales Force Episode VI ~ Return of Ajax Toolkit ~
 
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
Play jjug2012spring
Play jjug2012springPlay jjug2012spring
Play jjug2012spring
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
 
Node.js勉強会 Framework Koa
Node.js勉強会 Framework KoaNode.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
 
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
覚醒JavaScript  -ES6で作るIsomophicアプリケーション-覚醒JavaScript  -ES6で作るIsomophicアプリケーション-
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
はじめよう Backbone.js
はじめよう Backbone.jsはじめよう Backbone.js
はじめよう Backbone.js
 
JavaScript 研修
JavaScript 研修JavaScript 研修
JavaScript 研修
 
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScriptマークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
 
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
これからHTML5を書く人のためのセキュリティ - HTML5など勉強会
 
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 

Más de Toshiaki Maki

From Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsugFrom Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsugToshiaki Maki
 
Concourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyoConcourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyoToshiaki Maki
 
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1tServerless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1tToshiaki Maki
 
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1Toshiaki Maki
 
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1Toshiaki Maki
 
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & MicrometerSpring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & MicrometerToshiaki Maki
 
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjpOpen Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjpToshiaki Maki
 
Spring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsugSpring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsugToshiaki Maki
 
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1Toshiaki Maki
 
BOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyoBOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyoToshiaki Maki
 
Why PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring BootWhy PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring BootToshiaki Maki
 
Zipkin Components #zipkin_jp
Zipkin Components #zipkin_jpZipkin Components #zipkin_jp
Zipkin Components #zipkin_jpToshiaki Maki
 
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07Toshiaki Maki
 
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyoSpring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyoToshiaki Maki
 
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsugToshiaki Maki
 
Spring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjugSpring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjugToshiaki Maki
 
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3Toshiaki Maki
 
Managing your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CIManaging your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CIToshiaki Maki
 
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task,  and Data Flow #jsug #spri...Data Microservices with Spring Cloud Stream, Task,  and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...Toshiaki Maki
 
Short Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyoShort Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyoToshiaki Maki
 

Más de Toshiaki Maki (20)

From Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsugFrom Spring Boot 2.2 to Spring Boot 2.3 #jsug
From Spring Boot 2.2 to Spring Boot 2.3 #jsug
 
Concourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyoConcourse x Spinnaker #concourse_tokyo
Concourse x Spinnaker #concourse_tokyo
 
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1tServerless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
Serverless with Spring Cloud Function, Knative and riff #SpringOneTour #s1t
 
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
決済システムの内製化への旅 - SpringとPCFで作るクラウドネイティブなシステム開発 #jsug #sf_h1
 
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
Spring Boot Actuator 2.0 & Micrometer #jjug_ccc #ccc_a1
 
Spring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & MicrometerSpring Boot Actuator 2.0 & Micrometer
Spring Boot Actuator 2.0 & Micrometer
 
Open Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjpOpen Service Broker APIとKubernetes Service Catalog #k8sjp
Open Service Broker APIとKubernetes Service Catalog #k8sjp
 
Spring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsugSpring Cloud Function & Project riff #jsug
Spring Cloud Function & Project riff #jsug
 
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
 
BOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyoBOSH / CF Deployment in modern ways #cf_tokyo
BOSH / CF Deployment in modern ways #cf_tokyo
 
Why PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring BootWhy PCF is the best platform for Spring Boot
Why PCF is the best platform for Spring Boot
 
Zipkin Components #zipkin_jp
Zipkin Components #zipkin_jpZipkin Components #zipkin_jp
Zipkin Components #zipkin_jp
 
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
マイクロサービスに必要な技術要素はすべてSpring Cloudにある #DO07
 
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyoSpring Framework 5.0による Reactive Web Application #JavaDayTokyo
Spring Framework 5.0による Reactive Web Application #JavaDayTokyo
 
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug実例で学ぶ、明日から使えるSpring Boot Tips #jsug
実例で学ぶ、明日から使えるSpring Boot Tips #jsug
 
Spring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjugSpring ❤️ Kotlin #jjug
Spring ❤️ Kotlin #jjug
 
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
Event Driven Microservices with Spring Cloud Stream #jjug_ccc #ccc_ab3
 
Managing your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CIManaging your Docker image continuously with Concourse CI
Managing your Docker image continuously with Concourse CI
 
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task,  and Data Flow #jsug #spri...Data Microservices with Spring Cloud Stream, Task,  and Data Flow #jsug #spri...
Data Microservices with Spring Cloud Stream, Task, and Data Flow #jsug #spri...
 
Short Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyoShort Lived Tasks in Cloud Foundry #cfdtokyo
Short Lived Tasks in Cloud Foundry #cfdtokyo
 

Último

IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 

Último (12)

IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 

忙しい人のためのBackbone.jsとAngular.js入門