BT

新しい あなたは、アーリーアダプター?それともイノベーター?そんな皆様に、InfoQの新機能をご案内しています。詳細はこちら

Ampersand.js - Backbone.jsに対抗する"フレームワークらしくない"フレームワーク

| 作者: Zef Hemel , 翻訳者 吉田 英人 投稿日 2014年7月16日. 推定読書時間: 1分未満 |

原文(投稿日:2014/06/27)へのリンク

&yetがリリースしたAmpersand.jsは,Backbone.jsに強くインスパイアされた,JavaScriptアプリケーション開発のための"フレームワークらしくない”フレームワークである。Backbone.jsとの大きな違いは,モジュール性の高さと,いくつかの新しい(自由に選択可能な)機能が加えられていることだ。

ブログでの発表記事には,同社がBackbone.jsに多大な投資をした後に,そこから離れて独自のフレームワークを開発するに至った経緯が説明されている。

&yetでBackbone.jsを使っていて,特に大規模なアプリケーション開発で問題になっていたことのひとつが,モデルが保持しているはずのプロパティをドキュメント化するためのまともな手段です。

Backboneモデルはもともと,特定の構造というものを持っていません。どのようなプロパティをストアするのか,どこかに宣言する必要がないのです。その結果として,あちらこちらのビューにある雑多なプロパティが,モデルにストアされ始める事態は避けられません。新しい開発者からすれば,プロジェクトのモデルを見て,どの状態がトラックされているかを正確に把握するための,適当な手がかりが存在しないことになります。

この問題を解決して,モデル構造を一定の枠にはめるために,"Human JavaScript"という本に取り上げられている思想に沿って,"HumanModel"という名の代替モデルを開発しました。今は"ampersand-model"に姿を変えたこのモデルには,ストアするプロパティの宣言が必須である,プロパティを継承宣言することができる,などの違いがあります。

最初はBackbone Collections内でこの代替モデルを使用していたのですが,そこでまた問題に突き当たりました。Backboneでは一般的に,Backboneにストアすることが前提です。一方,モデルはコレクションで構成されています。そのため,インスタンス化したモデルをコレクションに追加すると,それがすでにモデルであるため,実体化に失敗します。これを修正するためにパッチを書いたのですが,こ例外にも,もっとフレキシビリティの欲しい部分があったのです。

&yetがBackboneで発見した重要な問題は,機能のバンドリングである。同社のアプリケーションでは,機能のスワップインやスワップアウトが可能なフレキシビリティが必要だったのだ。そのためAmpersand.jsでは,すべての機能部分を,独自のCommonJSモジュールとして体系化している。モジュールの配布と管理には,node.jsのパッケージマネージャであるnpmを使用する。モジュールはBrowserifyを使用して,ブラウザ上で動作する単一の(可能な限り縮小化した)JavaScriptファイルに"コンパイル"される。これらによって,必要なモジュールのみを選択的に使用することが可能になると同時に,NPMから任意のモジュールを容易に組み合わせることができる。

現在のAmpersand.jsはGitHubで個別のリポジトリにホストされた,およそ2ダースのモジュールで構成されている。その中のひとつであるコマンドラインツールは,&yetが推奨する構造を持ったAmpersand.jsプロジェクトをセットアップして,フォームやビュー,コレクション,モデルの枠組みを生成する作業を簡単に行うツールである。

その他の重要な(そして最もよくドキュメント化されている)モジュールには次のものがある。

  • ampersand-state: Backbone.jsのモデルと似ているが,RESTfulサービスとはまったく結び付いていない点が異なる。この機能はampersandモデルに追加されたもので,状態クラスのプロパティへの型付けと,設定時の型検査を行うことができる。
  • ampersand-model: ampersand-stateを拡張して,サーバからのオブジェクトの読み込みと保存,同期を行うメソッドを追加したもの。
  • ampersand-collection: Backbone.jsのコレクションに相当するが,読み込みと保存の機能が省略されている。
  • ampersand-rest-collection: ampersand-collectionを拡張して,RESTfulサービスとの読み込みと保存を行うメソッドを追加したもの。
  • ampersand-view: Backbone.jsのビューと同じく,モデルをDOMにバインドするための機構。
  • ampersand-form-view: データバインディングを備えた固定フォームを簡単に開発可能なモジュール。
  • ampersand-router: ページを再ロードせずにブラウザのURLを更新するルータ。このモジュールのコードは大部分がBackbone.jsのコピーで,いくつか拡張されている。

Backbone.jsに慣れていれば,Ampersand.jsを使い始めるのは簡単なはずだ。Ampersand.jsはMITライセンスで,GithubあるいはNPMから入手することができる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT