106
103

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript - Client Side -Advent Calendar 2013

Day 11

KnockoutJSの長所/短所とAngularJSとの比較

Posted at

KnockoutJSを使った開発を1年ほど前に行っていました。
元々はプロトタイピングだけに使う予定でしたが、使い勝手が良かったのでそのまま本開発に取り込みました。

最近、少しAngularについても調査をしていたので、Knockoutと比較できる部分も書きだしてみました。
KnockoutJSの長所/短所、そしてAngularJSとの比較となります。

長所:双方向のデータバインディング

Knockoutの最大の長所は、間違いなく強力な双方向のデータバインディングと言えます。
この凄さを試したければ本家サイトのExample各種を試すと良いかもしれません(参考URL)。
あるいは自分自身でサンプル・アプリケーションを作るといいでしょう。
すぐに虜になるはずです。

DOMとJSのモデルを紐付けて、整合性をとる処理を全てフレームワーク側が吸収してくれます。
JS側の記述がシンプルになるので、アプリケーション全体を把握しやすくなります。

長所:学習コストの低さ

Knockoutはシンプルです。
AngularだけでなくBackboneと比べても、Knockoutはすぐに身につきました。
元々のシンプルさに加えて、公式のチュートリアルがとてもわかりやすくて素晴らしいのです。
問題をインタラクティブに解くことができるので、素早く理解を深めることが可能です。
(このチュートリアルはあらゆるサービスが目指すべきものだと思いました!)

ただし、学習コストが低いには低いなりの理由があって、Angularほど凝ったことができないから、というのがあります。
Angularと云えばディレクティブですが、このような強力な機能はKnockoutには存在しません。
まあ無くてもとくに困らなかったのですが。

長所:柔軟性

KnockoutのViewModel内で、データバインディングを無視してjQueryでDOMを直接処理することに何の規制もありません。自由です。
Knockoutの規則といえばデータバインディングの部分くらいなもので、あとは何しようが勝手です。
AngularではDOMをいじりにくい、みたいな話を聞いたことがありますが、Knockoutではそんなことは無いと思います。やりたい放題です。

また、他のライブラリと組み合わせることでRouterやHistory機能を追加することも可能です。
自分が担当した業務ではjQueryUIをぶち込んで動かしました。
こうした柔軟性はKnockoutの武器と言えそうです。

短所:テスタビリティ

Angularでは、DIによるデータの受け渡し、テストを考慮した機能(ngMock)があることからテスタビリティが高いと言われています。
それに比べてKnockoutにはテストを考慮した機能は一切有りません。
自分が業務でKnockoutを利用していたときは、ほとんどKnockoutとは関係無いJSのみをテスト対象としていました。
何かいい方法があるとは思うのですけど、僕は考えることを放棄しました。
誰かベストプラクティスを生み出してください。

短所:複数人開発

Angularには、どうもスタイルガイドがあるようです。公式ではなさそうですが・・・。
Knockoutには公式のどこを探しても、規模が大きくなったときどうすべきか、という指針がありません。
自分で考えろということでしょうが、そもそもの目的から外れているのかもしれません。

自分が携わった開発ではフロントエンドは自分一人だったのですが、コードが大きくなるに連れて一人なのに混乱してきました。主にKnockoutが保有していない機能を組み込んでいくところでコードが肥大していき、本来Knockoutが持っているシンプルな記述までもが汚染されてしまったのです。
仮に複数人で行っていたらもっと悲惨なことになっていたかもしれません(あるいはマシになっていたかも)。
指針、スタイルガイド、パターンといったベストプラクティスがまだまだ不足している状態です。

まとめ

単純な機構としてのKnockoutは素晴らしいです。
シンプルで、強力で、見通しが良い。
Rubyのフレームワークで例えると、以下のような印象を受けます。

  • Rails ≒ Angular
  • Sinatra ≒ Knockout

どちらかを選択するかはアプリの規模によります。
おそらくKnockoutJSが得意とするのは以下の様な形態です。

  • 小規模のSingle Page Application
  • jQueryだけで扱うには複雑になってしまう機能(複雑なコンタクトフォームなど)
  • コードを書くのは基本1人で十分な規模のもの
  • プロトタイピング

逆に以下のパターンは苦手という印象。

  • 中規模以上のWebアプリケーション
  • 複数人での連携した開発
  • TDDやBDDを基礎とした開発

ついでに、上記はAngularが得意としている領域です。

終わりに

Knockoutは学習コストが低く、手軽です。
AngularやBackboneほどJSプログラミングの知識を必要としません。
それでいて簡単なWebアプリケーションを作成することができます。
この特性はプロトタイピングにも威力を発揮します。
なので、デザイナーやマークアップエンジニアの方がKnockoutを扱えるようになると、できることが格段に増えるのではないかと思うのです。
是非この機会に挑戦してみるのはいかがでしょうか。

106
103
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
106
103

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?