コードが複雑になりがちなWebアプリケーション設計の手助けとなるBackbone.js。このライブラリと併用し、さらに快適な開発を目指すライブラリBackbone.Marionetteを基礎から解説します。
2014年6月にMarionette.jsは1.xから2.xへのメジャーバージョンアップを行いました。この記事ではさまざまな変更点を概観し、2.xへのバージョンアップの注意点なども解説します。
これまでの記事で触れてこなかったMarionette.jsの便利機能や、執筆現在の最新版における機能の補足解説をします。これからMarionette.jsを使いこなすために役立つ情報です。
Marionette.Layoutは、Marionette.Regionをラップして機能を拡張したコンポーネントで、View表示の「枠」の役割を果たします。コードの記述方法を統一し、統一したい所作を記述することができます。
ItemViewをまとめて扱うことができるCollectionViewと、ItemViewとCollectionViewの特性を併せ持つCompositeViewを解説します。両者とも、親子関係のあるViewを扱うのに長けています。
Marionette.jsのView機能を解説します。今回は1つのModelを扱うことに適しているMarionette.ItemViewです。Backbone.jsでは煩雑だった実装が、比較的すっきりと行えます。
Marionette.ControllerはイベントやRouterのアクションを受けて、何らかの処理を仲介する役割を持っています。その仲介の方法の特徴を理解できるかどうかで、実装が大きく変わってきます。
Marionette.AppRouterは、URLによって処理を振り分けたりすることができます。たくさんのModelやViewが登場するアプリケーションでも、処理をうまく調整することができるようになります。
今回はモジュール同士が連携するときに、直接参照し合うような依存関係を低減する仕組みについて解説します。依存関係がなくなると、モジュールの変更や、メンテナンスの手間が少なくなります。
アプリケーションの初期化やモジュール化と、その管理を担当するMarionette.Applicationを解説します。Backbone.jsでは各自の書き方で行っている処理も、用意された機能を使って書くことができます。
第1回目はBackbone.Marionetteはどのようなものか、その特徴や機能を概観します。Backbone.jsを使う際に頻出する機能を補完するライブラリなので、Webアプリ開発の効率が上がります。