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”...
今日では Ajax で request を投げて、     JSON データを受け取り、JS でView を生成する方法が増えてきた
そろそろ、本題に入ります。
今から二つのコードをお見せします。
一つの関数の中でデータの受け取り とView の作成を行ってます。
データ受け取りと、View の作成を    分けています。
とはいえ、View の関数が同じ空間にいるので  もうちょっと、分離出来ないかな∼?
「Javascript の MVC フレームワーク          あるよ∼。」
@tatsuoSakurai         株式会社 万葉「backbone.js」 っていって最近注目する      企業も増えてきたよ∼。
そんな訳で早速、使ってみた。
自分の好きな食べ物をランダムに追加表示する    アプリの作成を目指します
こっちはちなみに View に関わる部分です。
HTMLファイルからこんな感じに実行
試しにデモを見せます
感想最低限必要なコードが大きくなりやすいのでちょっとしたJSアプリには向かないかも?しかし、(View とModelを)分離しないと後でコードを修正する時に大変だな∼と思う場合には便利です。
重要この手のライブラリを使ってコードを書くと「あ∼なるほど、こういう粒で切っていくのも  手だな∼」という良い勉強になりますw
今後ともチャレンジしますw
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Js mvc

1,105 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,105
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Js mvc

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

    ×