Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Knockout を用いた
大規模 JavaScript 開発
iizukak

HTML Conference 2013 LT大会
突然ですが
最近のフロントエンド開発
複雑化・大規模化してますよね?
大規模化するフロントエンド開発
を描いた16世紀の絵画
バベルの塔
by ブリューゲル
HTML5の塔
by ブリューゲル

疲れ果てたプログラマ達
「バベルの塔は完成しない」
by 聖書
バベルの塔
現在

: 1563 年
: 2013 年
5世紀に渡る
フロントエンド開発技術の飛躍的進歩により
バベルの塔の実装が比較的楽になってきた
16世紀にはなかった技術の一例
MV* フレームワーク
MV* フレームワーク

✤

✤

デザインパターンに従ってコードを良いかんじに書くためのサポート
をしてくれるフレームワーク
デザインパターンはいろいろあり、フレームワーク自体もいろいろ種
類がある

Backbone

MVC

: Mo...
場面は転換し、
とあるフロントエンド開発現場…
スマホゲームの UI 開発を
WebView でやることに
UI の八割方を WebView で実装

✤

数百の HTML ファイル

✤

数千行の SCSS

✤

ユーザーとのインタラクションが非常に多い

✤

数万行の JavaScript
Q: なにがネックになったか?
A: データバインドの記述
ユーザーとのインタラクション
✤

最近はユーザがアプリを操作することによって変化したモデルの状態
をリアルタイムにビューに反映することが必須

①つぶやき投稿

ユーザー

②イベント通知
③モデルの
 状態が変化

JS
④ビューに反映
ユーザーとのインタラクション

✤

モデルとビューのデータの結びつき =「データバインド」

✤

データバインドを自力で書くのは割と面倒
✤

同じようなコードを何度も書かなければならない

✤

コードの総量も増えがち
どうすれば簡単に
データバインドを書けるか
MV* フレームワーク
MV* フレームワーク

✤

MV* フレームワークの多くが、データバインド機能を提供
✤

Angular : デフォルトである

✤

Knockout : デフォルトである

✤

Backbone : Epoxy.js とか使ってやる
MV* フレームワークは、データバインド機能を中心に、
コードを構造化する手助けをするライブラリなのかなと思ったり
そんなわけで、ゲームUI開発に
Knockout 使っています
Knockout について
特徴
特徴

✤

1, データバインドが読みやすい

✤

2, データバインドが書きやすい

✤

3, 組み込みデータバインドでけっこういけている

✤

4, 拡張が用意

✤

5, 公式チュートリアルがいけている
1/5
データバインドが読みやすい
データバインドが読みやすい
Knockout の data-bind の例
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <stro...
「コードは書く10倍読まれる」
ぱっと見でのわかりやすさ重要
2, データバインドが書きやすい
データバインドが書きやすい
✤

Knockout ではデータバインドは、かんじで記述
ビュー
<開始タグ data-bind="データバインドの種類: 適用する変数名"></終了タグ>

JavaScript
function コンストラクタ...
3/5
組み込みのデータバインドが
けっこういけている
様々な種類のデータバインドが
あらかじめ組み込まれている

click binding

クリックイベントをハンドリング

css binding

CSS を適用

visible binding 表示・非表示切り替え
if binding
...
4/5
拡張が容易
カスタムバインディング

✤

✤

組み込みのデータバインドで物足りなくなったら、容易にデータバイ
ンドの種類を増やせる
スマホゲーム案件では、20個以上の拡張データバインドを実装
5/5
公式チュートリアルがいけている
対話形式でサクサク学べる
興味を持ったら
まずは公式チュートリアル
まとめ
Knockout を使ったら
いいかんじに大規模JS開発できました
21世紀のプログラマでよかった
めでたしめでたし
自己紹介
@iizukak on Github, Twitter
Upcoming SlideShare
Loading in …5
×

of

Knockout を用いた大規模 JavaScript 開発 Slide 1 Knockout を用いた大規模 JavaScript 開発 Slide 2 Knockout を用いた大規模 JavaScript 開発 Slide 3 Knockout を用いた大規模 JavaScript 開発 Slide 4 Knockout を用いた大規模 JavaScript 開発 Slide 5 Knockout を用いた大規模 JavaScript 開発 Slide 6 Knockout を用いた大規模 JavaScript 開発 Slide 7 Knockout を用いた大規模 JavaScript 開発 Slide 8 Knockout を用いた大規模 JavaScript 開発 Slide 9 Knockout を用いた大規模 JavaScript 開発 Slide 10 Knockout を用いた大規模 JavaScript 開発 Slide 11 Knockout を用いた大規模 JavaScript 開発 Slide 12 Knockout を用いた大規模 JavaScript 開発 Slide 13 Knockout を用いた大規模 JavaScript 開発 Slide 14 Knockout を用いた大規模 JavaScript 開発 Slide 15 Knockout を用いた大規模 JavaScript 開発 Slide 16 Knockout を用いた大規模 JavaScript 開発 Slide 17 Knockout を用いた大規模 JavaScript 開発 Slide 18 Knockout を用いた大規模 JavaScript 開発 Slide 19 Knockout を用いた大規模 JavaScript 開発 Slide 20 Knockout を用いた大規模 JavaScript 開発 Slide 21 Knockout を用いた大規模 JavaScript 開発 Slide 22 Knockout を用いた大規模 JavaScript 開発 Slide 23 Knockout を用いた大規模 JavaScript 開発 Slide 24 Knockout を用いた大規模 JavaScript 開発 Slide 25 Knockout を用いた大規模 JavaScript 開発 Slide 26 Knockout を用いた大規模 JavaScript 開発 Slide 27 Knockout を用いた大規模 JavaScript 開発 Slide 28 Knockout を用いた大規模 JavaScript 開発 Slide 29 Knockout を用いた大規模 JavaScript 開発 Slide 30 Knockout を用いた大規模 JavaScript 開発 Slide 31 Knockout を用いた大規模 JavaScript 開発 Slide 32 Knockout を用いた大規模 JavaScript 開発 Slide 33 Knockout を用いた大規模 JavaScript 開発 Slide 34 Knockout を用いた大規模 JavaScript 開発 Slide 35 Knockout を用いた大規模 JavaScript 開発 Slide 36 Knockout を用いた大規模 JavaScript 開発 Slide 37 Knockout を用いた大規模 JavaScript 開発 Slide 38 Knockout を用いた大規模 JavaScript 開発 Slide 39 Knockout を用いた大規模 JavaScript 開発 Slide 40 Knockout を用いた大規模 JavaScript 開発 Slide 41 Knockout を用いた大規模 JavaScript 開発 Slide 42 Knockout を用いた大規模 JavaScript 開発 Slide 43 Knockout を用いた大規模 JavaScript 開発 Slide 44 Knockout を用いた大規模 JavaScript 開発 Slide 45 Knockout を用いた大規模 JavaScript 開発 Slide 46 Knockout を用いた大規模 JavaScript 開発 Slide 47 Knockout を用いた大規模 JavaScript 開発 Slide 48
Upcoming SlideShare
HTML5 conference 2013
Next
Download to read offline and view in fullscreen.

25 Likes

Share

Download to read offline

Knockout を用いた大規模 JavaScript 開発

Download to read offline

HTML5 Conference 2013 において発表したスライドです。
Knockout.js について簡単に説明しています。

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Knockout を用いた大規模 JavaScript 開発

  1. 1. Knockout を用いた 大規模 JavaScript 開発 iizukak HTML Conference 2013 LT大会
  2. 2. 突然ですが
  3. 3. 最近のフロントエンド開発
  4. 4. 複雑化・大規模化してますよね?
  5. 5. 大規模化するフロントエンド開発 を描いた16世紀の絵画
  6. 6. バベルの塔 by ブリューゲル
  7. 7. HTML5の塔 by ブリューゲル 疲れ果てたプログラマ達
  8. 8. 「バベルの塔は完成しない」 by 聖書
  9. 9. バベルの塔 現在 : 1563 年 : 2013 年
  10. 10. 5世紀に渡る フロントエンド開発技術の飛躍的進歩により バベルの塔の実装が比較的楽になってきた
  11. 11. 16世紀にはなかった技術の一例
  12. 12. MV* フレームワーク
  13. 13. MV* フレームワーク ✤ ✤ デザインパターンに従ってコードを良いかんじに書くためのサポート をしてくれるフレームワーク デザインパターンはいろいろあり、フレームワーク自体もいろいろ種 類がある Backbone MVC : Model-View-Controller Knockout MVVM : Model-View-ViewModel Angular MVW : Model-View-Whatever デザインパターンの例
  14. 14. 場面は転換し、
  15. 15. とあるフロントエンド開発現場…
  16. 16. スマホゲームの UI 開発を WebView でやることに
  17. 17. UI の八割方を WebView で実装 ✤ 数百の HTML ファイル ✤ 数千行の SCSS ✤ ユーザーとのインタラクションが非常に多い ✤ 数万行の JavaScript
  18. 18. Q: なにがネックになったか?
  19. 19. A: データバインドの記述
  20. 20. ユーザーとのインタラクション ✤ 最近はユーザがアプリを操作することによって変化したモデルの状態 をリアルタイムにビューに反映することが必須 ①つぶやき投稿 ユーザー ②イベント通知 ③モデルの  状態が変化 JS ④ビューに反映
  21. 21. ユーザーとのインタラクション ✤ モデルとビューのデータの結びつき =「データバインド」 ✤ データバインドを自力で書くのは割と面倒 ✤ 同じようなコードを何度も書かなければならない ✤ コードの総量も増えがち
  22. 22. どうすれば簡単に データバインドを書けるか
  23. 23. MV* フレームワーク
  24. 24. MV* フレームワーク ✤ MV* フレームワークの多くが、データバインド機能を提供 ✤ Angular : デフォルトである ✤ Knockout : デフォルトである ✤ Backbone : Epoxy.js とか使ってやる
  25. 25. MV* フレームワークは、データバインド機能を中心に、 コードを構造化する手助けをするライブラリなのかなと思ったり
  26. 26. そんなわけで、ゲームUI開発に Knockout 使っています
  27. 27. Knockout について
  28. 28. 特徴
  29. 29. 特徴 ✤ 1, データバインドが読みやすい ✤ 2, データバインドが書きやすい ✤ 3, 組み込みデータバインドでけっこういけている ✤ 4, 拡張が用意 ✤ 5, 公式チュートリアルがいけている
  30. 30. 1/5 データバインドが読みやすい
  31. 31. データバインドが読みやすい Knockout の data-bind の例 <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> ✤ ✤ HTML を見ればどこの要素が Knockout で操作されるか一目瞭然 data-* 属性は正当な HTML 属性のため、実装した HTML が validな HTML になり、気分がよい
  32. 32. 「コードは書く10倍読まれる」
  33. 33. ぱっと見でのわかりやすさ重要
  34. 34. 2, データバインドが書きやすい
  35. 35. データバインドが書きやすい ✤ Knockout ではデータバインドは、かんじで記述 ビュー <開始タグ data-bind="データバインドの種類: 適用する変数名"></終了タグ> JavaScript function コンストラクタ() { this.適用する変数 = ko.observable(); } ko.applyBindings(new コンストラクタ());
  36. 36. 3/5 組み込みのデータバインドが けっこういけている
  37. 37. 様々な種類のデータバインドが あらかじめ組み込まれている click binding クリックイベントをハンドリング css binding CSS を適用 visible binding 表示・非表示切り替え if binding if 文による分岐
  38. 38. 4/5 拡張が容易
  39. 39. カスタムバインディング ✤ ✤ 組み込みのデータバインドで物足りなくなったら、容易にデータバイ ンドの種類を増やせる スマホゲーム案件では、20個以上の拡張データバインドを実装
  40. 40. 5/5 公式チュートリアルがいけている
  41. 41. 対話形式でサクサク学べる
  42. 42. 興味を持ったら まずは公式チュートリアル
  43. 43. まとめ
  44. 44. Knockout を使ったら いいかんじに大規模JS開発できました
  45. 45. 21世紀のプログラマでよかった
  46. 46. めでたしめでたし
  47. 47. 自己紹介
  48. 48. @iizukak on Github, Twitter
  • makyos

    Dec. 1, 2014
  • porinsan

    Oct. 31, 2014
  • tmhk_m

    Sep. 3, 2014
  • nobuakiy

    Mar. 30, 2014
  • munenoritakei

    Mar. 12, 2014
  • ShunyaShishido

    Mar. 3, 2014
  • ShujiOchi

    Feb. 28, 2014
  • skomatsu.comutt

    Dec. 21, 2013
  • hideakiishii1204

    Dec. 10, 2013
  • nk.naoki

    Dec. 7, 2013
  • Musicianstlas

    Dec. 6, 2013
  • TakeshiWatanabe2

    Dec. 5, 2013
  • vivianegribeiro

    Dec. 4, 2013
  • tomosmith

    Dec. 1, 2013
  • hiromitsuuuuu

    Dec. 1, 2013
  • unsolublesugar

    Dec. 1, 2013
  • fumichika

    Dec. 1, 2013
  • hironaos

    Dec. 1, 2013
  • katapad

    Dec. 1, 2013
  • kazp3

    Dec. 1, 2013

HTML5 Conference 2013 において発表したスライドです。 Knockout.js について簡単に説明しています。

Views

Total views

10,244

On Slideshare

0

From embeds

0

Number of embeds

3,787

Actions

Downloads

43

Shares

0

Comments

0

Likes

25

×