記事一覧

Knockout.js のベストな使い方【決定版】




目次




MVVMライブラリ Knockout.js

ハロー、みなさん。エジソンです。

本日は、Knockout.jsをプロジェクトに導入する際の、より良い運用方法について語ります。

Knockout.jsは、MVVMライブラリの一つです。

Wikipedia - Model View ViewModel

Model View ViewModel(モデル・ビュー・ビューモデル;MVVM)は、独自のGUI(グラフィカルユーザーインターフェース)を持つアプリケーションソフトウェアを、以下に述べるようなModel-View-ViewModelの3つの部分に分割して設計・実装するソフトウェアアーキテクチャパターンである。…

MVVMライブラリ業界においては、今ではAngularJS、Backbone.js、Vue.jsなどの他のMVVMライブラリにシェアを奪われつつあり、Knockout.js自体の新鮮さ話題性が薄れ、Knockout.jsをあえて利用するという人々が減ってきているのではないかと推測します。

では、何故今 Knockout.js なのか?! それは、僕が Knockout.js しか知らないからです。

そのため、MVVMライブラリの中で最もこれが優れているという事に言及するものではありません。ただ、Knockout.jsを使うとしたら、このように使うとより良くなる!という事を訴えていきます。

MVVMの難しさ

そもそも、MVVMライブラリの使い方を完璧に把握し、作成するシステムにおいて、あらゆる画面のパターンを想定し、ナレッジを蓄積するというのは難しく、学習コストも高く付きます。

何より、JavaScriptという高難度な言語に対する理解も追いついてないと、MVVMライブラリの学習を途中で断念してしまうという可能性があります。



僕が、Knockout.jsを使い始めたのは、2015年初頭なので、かれこれ一年ほど使用したと言えます。そして、合計4つのプロジェクトに導入して得られたナレッジがある訳ですが、今思うと、初めて導入したプロジェクトにおける、Knockout.jsの使われ方は、酷いものであったように思います。

もちろん、正しく動作もしますし、使い方も問題ないのですが、ベストな使い方であるかと問われると、ベストには程遠いものであるという答えになります。

だから、MVVMライブラリに過度な期待な抱いている人、今からMVVMライブラリを勉強してプロジェクトに導入しようと考えている人は、十分気をつけてください。

中途半端な知識だけで、プロジェクトに導入しようものなら、酷い有様になることでしょう。

幸せになるには、十分な知識と正しい理解、そしてプロジェクトに適用した場合の効果(MVVMライブラリなしで実装する場合との比較)を見極めることです。

それが出来ないのならば、MVVMライブラリは窓から投げ捨てて、レガシーなJavaScriptで頑張るべきです。

ですが、それでもMVVMライブラリに対する飽くなき探究心、羨望を捨てきれないのならば、本記事があなたの手助けになるのではないかと思うわけです。

Knockout.js 事始め

Knockout.jsを知らない人は、簡単なサンプルソースを眺めることで、大まかなイメージができるのではないかと思います。

以下のような記述で、HTML部分にデータを埋め込むことができます。

JavaScript
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

HTML
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

上述したコードは、以下のチュートリアルから転載しています。

Knockout.js - 公式サイト(チュートリアル)

Knockout.js 導入の向き不向き

当たり前の話なんですが、ビューデータ部分をサーバーサイドでレンダリングする場面では、Knockout.jsの利用は向いていません。

と言うより、使いどころがありません。例えば以下のようなケースを想定してみましょう。

<?php
    $viewData = array(
        'text1' => 'Text Data1',
        'text2' => 'Text Data2',
    );
?>
<html>
    <body>
        <input type="text" name="text1" value="<?= $viewData['text1'] ?>" />
        <input type="text" name="text2" value="<?= $viewData['text2'] ?>" />        
    </body>
</html>

上記は、PHPのコードです。PHP(サーバーサイド)でビューを生成するため、Knockout.jsを使う必要性がありません。

では、どのような場面で利用するかというと、インタラクティブなユーザーインターフェースを実現する場合です。

インタラクティブであるということは、ユーザーの何らかの操作に反応するということなので、ユーザーの操作はイベントとして発生することになります。したがって、イベントを処理するために、JavaScriptを仲介しなくてはいけないということです。

イベントの中で、WebサーバーにAjaxで問い合わせを行いデータを取得して、取得したデータの内容に応じて、ビュー部分を変更するという処理の流れを考えた場合に、Knockout.jsが活用できます。

まとめると、ビューデータ部分をクライアントサイドでレンダリングする場合には、Knockout.jsが有効です。

ですが、ビューレンダリングに際して、サーバーサイドとクライアントサイドの比率を考えた場合に、サーバーサイドでの比率が圧倒的である場合には、Knockout.jsをあえて導入しても、学習コストや保守性を考えると、恩恵はあまり感じられないかもしれません。

しかしながら、サーバーサイドにおいてデータ部分のレンダリングを一切行わず、データの取得や更新はAjax経由で全て行うような フルAjax 方式を採用する場合には、Knockout.jsは、非常に便利なツールとして活躍してくれる事は間違いありません。

ベストな使い方

ようやく本題です。

別資料になって申し訳ないのですが、GitHubに運用方針の資料をコミットしています。こちらの、運用方針を一読してください。


読みましたか? はい。

このような方針で、プロジェクトに導入することで、より良く使えるのではないかと思います。

異論はもちろんあるかと思いますが、プロジェクトでは一貫性が何より重要です。あえて制約を掲げることで、エンジニアが読むべき行間を少なくするような、ルール付けが肝要です。

サンプル

GitHubにサンプルソースをコミットしました。

以下に示したサンプルが何より重要なものです。Knockout.jsを使いこなすには何かと慣れが必要ですし、独特の癖もあるためエラーに悩まされるという事も少なくありません。知りたいときに直ぐにでも、知識を取り出すためのスニペット(コードの断片)が重要であると言えるでしょう。

以下のソースで、Webアプリにおいて、どんな画面を作る場合においても必要になるエッセンスを、サンプルソースとして取りまとめられたのではないかと思います。


データバインドでは、テキストボックス、ラジオボタン、チェック、プルダウンリストなど、様々な種類のUIへのデータバインドの方法を示しました。

フロー制御では、ifやforなどの制御構文を紹介しています。

カスタムバインドでは、Knockout.jsの構文を拡張するための方法を紹介しています。

おわりに

ここで、示した方針を適用する事で、Knockout.jsのプロジェクト導入をより良いものにできるのではないかと考えています。本記事が、皆さんの役に立つ事になれば幸いです。

Knockout.js - 公式サイト
Knockout.js - 日本語訳サイト

関連記事

このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント

プロフィール

EZOLABブログへようこそ。
EZOLABは、札幌のソフトウェア会社です。

http://ezolab.co.jp