SlideShare a Scribd company logo
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
ご清聴ありがとうございました

More Related Content

PDF
PDF
Js frameworkの紹介
PDF
OSC 2016 Nagoya - MineOSのすすめ -
PDF
JS開発環境を晒す。
PDF
JasmineによるJavascriptテスト駆動開発
PPTX
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
PPT
10回目nodejs
PDF
XSSの傾向と対策
Js frameworkの紹介
OSC 2016 Nagoya - MineOSのすすめ -
JS開発環境を晒す。
JasmineによるJavascriptテスト駆動開発
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
10回目nodejs
XSSの傾向と対策

What's hot (20)

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

Viewers also liked (8)

PDF
FileReader and canvas and server silde
PDF
Nseg jquery mobile
KEY
Ll xcode
ODP
Windows store app html
PDF
Gunma ruby
PDF
PDF
Fxos lt
KEY
Tdd&peapro
FileReader and canvas and server silde
Nseg jquery mobile
Ll xcode
Windows store app html
Gunma ruby
Fxos lt
Tdd&peapro
Ad

More from Net Kanayan (20)

PDF
Osc16gm
PDF
Open source
PDF
Http2入門の入門
PDF
Es6 cognition
PDF
ES6 はじめました
PDF
Image convert
PDF
Blueberrypi
PDF
Browser push notifications
PDF
PDF
Basic vulnerability
PDF
Js kusen
KEY
Sass less
KEY
Web creed
KEY
J S Smartphone
KEY
Smart phone gunma.web
PDF
Smart phone
PDF
2010 12gunmaweb
PDF
Html5 css3 websocket
PDF
Gunmaweb
PDF
CgiSecure
Osc16gm
Open source
Http2入門の入門
Es6 cognition
ES6 はじめました
Image convert
Blueberrypi
Browser push notifications
Basic vulnerability
Js kusen
Sass less
Web creed
J S Smartphone
Smart phone gunma.web
Smart phone
2010 12gunmaweb
Html5 css3 websocket
Gunmaweb
CgiSecure

Js mvc

Editor's Notes