Knockout を用いた大規模 JavaScript 開発

HTML Conference 2013 LT大会

Knockout を用いた大規模 JavaScript 開発iizukak

突然ですが

最近のフロントエンド開発

複雑化・大規模化してますよね？

大規模化するフロントエンド開発を描いた16世紀の絵画

バベルの塔by ブリューゲル

HTML5の塔by ブリューゲル

疲れ果てたプログラマ達

「バベルの塔は完成しない」by 聖書

バベルの塔 : 1563 年現在 : 2013 年

5世紀に渡るフロントエンド開発技術の飛躍的進歩によりバベルの塔の実装が比較的楽になってきた

16世紀にはなかった技術の一例

MV* フレームワーク


✤ デザインパターンに従ってコードを良いかんじに書くためのサポートをしてくれるフレームワーク

✤ デザインパターンはいろいろあり、フレームワーク自体もいろいろ種類がある

Backbone MVC : Model-View-Controller Knockout MVVM : Model-View-ViewModelAngular MVW : Model-View-Whatever

デザインパターンの例

場面は転換し、

とあるフロントエンド開発現場…

スマホゲームの UI 開発をWebView でやることに

UI の八割方を WebView で実装

✤ 数百の HTML ファイル

✤ 数千行の SCSS

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

✤ 数万行の JavaScript

Q: なにがネックになったか？

A: データバインドの記述

ユーザーとのインタラクション

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

ユーザー

JS

①つぶやき投稿

③モデルの　状態が変化

②イベント通知

④ビューに反映

ユーザーとのインタラクション

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

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

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

✤ コードの総量も増えがち

どうすれば簡単にデータバインドを書けるか



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

✤ Angular : デフォルトである

✤ Knockout : デフォルトである

✤ Backbone : Epoxy.js とか使ってやる

MV* フレームワークは、データバインド機能を中心に、

コードを構造化する手助けをするライブラリなのかなと思ったり

そんなわけで、ゲームUI開発に Knockout 使っています

Knockout について

特徴

特徴

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

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

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

✤ 4, 拡張が用意

✤ 5, 公式チュートリアルがいけている

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

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

✤ HTML を見ればどこの要素が Knockout で操作されるか一目瞭然

✤ data-* 属性は正当な HTML 属性のため、実装した HTML が validな HTML になり、気分がよい

First name: Last name: 

First name: <input data-bind="value: firstName" />Last name: <input data-bind="value: lastName" />

Knockout の data-bind の例

「コードは書く10倍読まれる」

ぱっと見でのわかりやすさ重要

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

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

✤ Knockout ではデータバインドは、かんじで記述

<開始タグ data-bind="データバインドの種類: 適用する変数名"></終了タグ>

function コンストラクタ() {

this.適用する変数 = ko.observable();}ko.applyBindings(new コンストラクタ());

ビュー

JavaScript

3/5組み込みのデータバインドがけっこういけている

様々な種類のデータバインドがあらかじめ組み込まれている

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

css binding CSS を適用

visible binding 表示・非表示切り替え

if binding if 文による分岐

4/5拡張が容易

カスタムバインディング

✤ 組み込みのデータバインドで物足りなくなったら、容易にデータバインドの種類を増やせる

✤ スマホゲーム案件では、20個以上の拡張データバインドを実装

5/5公式チュートリアルがいけている

対話形式でサクサク学べる

興味を持ったらまずは公式チュートリアル

まとめ

Knockout を使ったらいいかんじに大規模JS開発できました

21世紀のプログラマでよかった

めでたしめでたし

自己紹介

@iizukak on Github, Twitter

Technology

Knockout を用いた大規模 JavaScript 開発