0
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
×

Knockout を用いた大規模 JavaScript 開発

7,988

Published on

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

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

No Downloads
Views
Total Views
7,988
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
34
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×