SlideShare a Scribd company logo

Js mvc

•Download as KEY, PDF•
•
Net Kanayan
Net Kanayan
Technology
1 of 36
javascript の MVC @kanayannet
JS の MVC の話題の前に...
ちょっと JS の歴史を振り返ってみる
出会ったのは、199x年
「何か、ブラウザ内で動的に動く ものがあるぞ？なんだ∼？」
こういうのとか
個人的に非常に 懐かしいですねw
1996年、 IE 3.0 に搭載されたそうです。 by wikipedia
しかし、いけない事 やる人も出てきたね
ちなみに、これは、 OKボタンを何回押しても alert メッセージが出ます＞＜
中には、javascript をウィルスと同じ 扱いにしてしまう人も... (ブラウザの javascript 無効 etc..)
2000∼2004 は javascript暗黒の時代?
救世主 現る
2005年 Ajax の登場！
Asynchronous + JavaScript + XML その名の通り、 JS なしでは動きません！
HTTP通信を行うためのJavaScript組み 込みクラスによる非同期通信を利用 し、通信結果に応じて動的にページの 一部を書き換える事が出来る
例えばこんな事が可能になる ユーザのマウス操作に反応して 地図画像を画面遷移せずに ダウンロードして表示する ↓↓↓↓
JSON の登場
JavaScript Object Notation テキストベースのデータフォーマット ↓↓↓ [{“name”: “hiroaki kanazawa”, “status”:”real name”}, {“name”:”kanayannet”, “status”:”handle name”}]
今日では Ajax で request を投げて、 JSON データを受け取り、 JS でView を生成する方法が増えてきた
そろそろ、本題に入ります。
今から二つのコードをお見せします。
一つの関数の中でデータの受け取り とView の作成を行ってます。
データ受け取りと、View の作成を 分けています。
とはいえ、View の関数が同じ空間にいるので もうちょっと、分離出来ないかな∼？
「Javascript の MVC フレームワーク あるよ∼。」
@tatsuoSakurai 株式会社 万葉 「backbone.js」 っていって最近注目する 企業も増えてきたよ∼。
そんな訳で早速、使ってみた。
自分の好きな食べ物をランダムに追加表示する アプリの作成を目指します
こっちはちなみに View に関わる部分です。
HTMLファイルからこんな感じに実行
試しにデモを見せます
感想 最低限必要なコードが大きくなりやすいので ちょっとしたJSアプリには向かないかも？ しかし、(View とModelを)分離しないと 後でコードを修正する時に 大変だな∼と思う場合には便利です。
重要 この手のライブラリを使ってコードを書くと 「あ∼なるほど、こういう粒で切っていくのも 手だな∼」という良い勉強になりますw
今後ともチャレンジしますw
ご清聴ありがとうございました

Recommended

Nodejs
NodejsNodejs
Nodejs和樹 川端
 
Js frameworkの紹介
Js frameworkの紹介Js frameworkの紹介
Js frameworkの紹介Ryo Shimada
 
OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -roamer7038
 
JS開発環境を晒す。
JS開発環境を晒す。JS開発環境を晒す。
JS開発環境を晒す。Eiji Kuroda
 
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発Yoichi Toyota
 
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するEWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するKiyoshi Sawada
 
10回目nodejs
10回目nodejs10回目nodejs
10回目nodejsTakuya Shishido
 
XSSの傾向と対策
XSSの傾向と対策XSSの傾向と対策
XSSの傾向と対策Yusuke Sangenya
 

Recommended

Nodejs
NodejsNodejs
Nodejs和樹 川端
 
Js frameworkの紹介
Js frameworkの紹介Js frameworkの紹介
Js frameworkの紹介Ryo Shimada
 
OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -OSC 2016 Nagoya - MineOSのすすめ -
OSC 2016 Nagoya - MineOSのすすめ -roamer7038
 
JS開発環境を晒す。
JS開発環境を晒す。JS開発環境を晒す。
JS開発環境を晒す。Eiji Kuroda
 
JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発JasmineによるJavascriptテスト駆動開発
JasmineによるJavascriptテスト駆動開発Yoichi Toyota
 
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するEWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するKiyoshi Sawada
 
10回目nodejs
10回目nodejs10回目nodejs
10回目nodejsTakuya Shishido
 
XSSの傾向と対策
XSSの傾向と対策XSSの傾向と対策
XSSの傾向と対策Yusuke Sangenya
 
Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバke-m kamekoopa
 
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するEWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するKiyoshi Sawada
 
WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会Kei Nomura
 
Javaで最強のfizz buzz
Javaで最強のfizz buzzJavaで最強のfizz buzz
Javaで最強のfizz buzzyy yank
 
Html5 nagoya 07
Html5 nagoya 07Html5 nagoya 07
Html5 nagoya 07Yoshiaki Sugimoto
 
Android mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそうAndroid mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそうnaoyuki miyata
 
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~Yuki Hirano
 
20150523
20150523 20150523
20150523Toshihiro Suzuki
 
WordBench大阪18th
WordBench大阪18thWordBench大阪18th
WordBench大阪18thGo Imai
 
Vim ＝ VM
Vim ＝ VMVim ＝ VM
Vim ＝ VMShougo
 
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)stmkza
 
20090121 J QueryからはじめるJava Script～初級編～
20090121 J QueryからはじめるJava Script～初級編～20090121 J QueryからはじめるJava Script～初級編～
20090121 J QueryからはじめるJava Script～初級編～Hiromu Shioya
 
Javascript を使ってみよう!!
Javascript を使ってみよう!!Javascript を使ってみよう!!
Javascript を使ってみよう!!誠 小林
 
Mqttの通信を見てみよう
Mqttの通信を見てみようMqttの通信を見てみよう
Mqttの通信を見てみようSuemasu Takashi
 
GroovyでJSON2014
GroovyでJSON2014GroovyでJSON2014
GroovyでJSON2014Yasuharu Hayami
 
Traffix Jam インストール方法
Traffix Jam インストール方法Traffix Jam インストール方法
Traffix Jam インストール方法kohiharu
 
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有zaru sakuraba
 
node.js
node.jsnode.js
node.jsMasataka Ohara
 
EmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたEmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたkyon mm
 
Unite vim
Unite vim Unite vim
Unite vim Shougo
 
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server sildeNet Kanayan
 
Nseg jquery mobile
Nseg jquery mobileNseg jquery mobile
Nseg jquery mobileNet Kanayan
 

More Related Content

What's hot

Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバke-m kamekoopa
 
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するEWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するKiyoshi Sawada
 
WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会Kei Nomura
 
Javaで最強のfizz buzz
Javaで最強のfizz buzzJavaで最強のfizz buzz
Javaで最強のfizz buzzyy yank
 
Android mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそうAndroid mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそうnaoyuki miyata
 
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~Yuki Hirano
 
WordBench大阪18th
WordBench大阪18thWordBench大阪18th
WordBench大阪18thGo Imai
 
Vim ＝ VM
Vim ＝ VMVim ＝ VM
Vim ＝ VMShougo
 
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)stmkza
 
20090121 J QueryからはじめるJava Script～初級編～
20090121 J QueryからはじめるJava Script～初級編～20090121 J QueryからはじめるJava Script～初級編～
20090121 J QueryからはじめるJava Script～初級編～Hiromu Shioya
 
Javascript を使ってみよう!!
Javascript を使ってみよう!!Javascript を使ってみよう!!
Javascript を使ってみよう!!誠 小林
 
Mqttの通信を見てみよう
Mqttの通信を見てみようMqttの通信を見てみよう
Mqttの通信を見てみようSuemasu Takashi
 
Traffix Jam インストール方法
Traffix Jam インストール方法Traffix Jam インストール方法
Traffix Jam インストール方法kohiharu
 
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有zaru sakuraba
 
EmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたEmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたkyon mm
 
Unite vim
Unite vim Unite vim
Unite vim Shougo
 

What's hot (20)

Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバ
 
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するEWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
 
WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会WordBench Nagoya 2015年3月勉強会
WordBench Nagoya 2015年3月勉強会
 
Javaで最強のfizz buzz
Javaで最強のfizz buzzJavaで最強のfizz buzz
Javaで最強のfizz buzz
 
Html5 nagoya 07
Html5 nagoya 07Html5 nagoya 07
Html5 nagoya 07
 
Android mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそうAndroid mvc-frameworkが凄くて泣きそう
Android mvc-frameworkが凄くて泣きそう
 
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
 
20150523
20150523 20150523
20150523
 
WordBench大阪18th
WordBench大阪18thWordBench大阪18th
WordBench大阪18th
 
Vim ＝ VM
Vim ＝ VMVim ＝ VM
Vim ＝ VM
 
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)
 
20090121 J QueryからはじめるJava Script～初級編～
20090121 J QueryからはじめるJava Script～初級編～20090121 J QueryからはじめるJava Script～初級編～
20090121 J QueryからはじめるJava Script～初級編～
 
Javascript を使ってみよう!!
Javascript を使ってみよう!!Javascript を使ってみよう!!
Javascript を使ってみよう!!
 
Mqttの通信を見てみよう
Mqttの通信を見てみようMqttの通信を見てみよう
Mqttの通信を見てみよう
 
GroovyでJSON2014
GroovyでJSON2014GroovyでJSON2014
GroovyでJSON2014
 
Traffix Jam インストール方法
Traffix Jam インストール方法Traffix Jam インストール方法
Traffix Jam インストール方法
 
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有
 
node.js
node.jsnode.js
node.js
 
EmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたEmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べた
 
Unite vim
Unite vim Unite vim
Unite vim
 

Viewers also liked

FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server sildeNet Kanayan
 
Nseg jquery mobile
Nseg jquery mobileNseg jquery mobile
Nseg jquery mobileNet Kanayan
 
Windows store app html
Windows store app htmlWindows store app html
Windows store app htmlNet Kanayan
 

Viewers also liked (8)

FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server silde
 
Nseg jquery mobile
Nseg jquery mobileNseg jquery mobile
Nseg jquery mobile
 
Ll xcode
Ll xcodeLl xcode
Ll xcode
 
Windows store app html
Windows store app htmlWindows store app html
Windows store app html
 
Gunma ruby
Gunma rubyGunma ruby
Gunma ruby
 
Ssl
SslSsl
Ssl
 
Fxos lt
Fxos ltFxos lt
Fxos lt
 
Tdd&peapro
Tdd&peaproTdd&peapro
Tdd&peapro
 

More from Net Kanayan

Http2入門の入門
Http2入門の入門Http2入門の入門
Http2入門の入門Net Kanayan
 
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめましたNet Kanayan
 
Browser push notifications
Browser push notificationsBrowser push notifications
Browser push notificationsNet Kanayan
 
Basic vulnerability
Basic vulnerabilityBasic vulnerability
Basic vulnerabilityNet Kanayan
 
Smart phone gunma.web
Smart phone gunma.webSmart phone gunma.web
Smart phone gunma.webNet Kanayan
 
Html5 css3 websocket
Html5 css3 websocketHtml5 css3 websocket
Html5 css3 websocketNet Kanayan
 

More from Net Kanayan (20)

Osc16gm
Osc16gmOsc16gm
Osc16gm
 
Open source
Open sourceOpen source
Open source
 
Http2入門の入門
Http2入門の入門Http2入門の入門
Http2入門の入門
 
Es6 cognition
Es6 cognitionEs6 cognition
Es6 cognition
 
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめました
 
Image convert
Image convertImage convert
Image convert
 
Blueberrypi
BlueberrypiBlueberrypi
Blueberrypi
 
Browser push notifications
Browser push notificationsBrowser push notifications
Browser push notifications
 
Http
HttpHttp
Http
 
Basic vulnerability
Basic vulnerabilityBasic vulnerability
Basic vulnerability
 
Js kusen
Js kusenJs kusen
Js kusen
 
Sass less
Sass lessSass less
Sass less
 
Web creed
Web creedWeb creed
Web creed
 
J S Smartphone
J S SmartphoneJ S Smartphone
J S Smartphone
 
Smart phone gunma.web
Smart phone gunma.webSmart phone gunma.web
Smart phone gunma.web
 
Smart phone
Smart phoneSmart phone
Smart phone
 
2010 12gunmaweb
2010 12gunmaweb2010 12gunmaweb
2010 12gunmaweb
 
Html5 css3 websocket
Html5 css3 websocketHtml5 css3 websocket
Html5 css3 websocket
 
Gunmaweb
GunmawebGunmaweb
Gunmaweb
 
CgiSecure
CgiSecureCgiSecure
CgiSecure
 

Recently uploaded

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 

Recently uploaded (8)

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その１2024/04/12の勉強会で発表されたものです。
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 

Js mvc

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n