Backbone.jsを使ってみる(入門編)

Backbone.jsを使ってみる(入門編)

記事一覧Backbone.jsを使ってみる(入門編)

サーバサイドのプログラムやサーバインフラをメインに担当していた私としては、JavaScript はちょっとしたエレメントの操作や、Ajax を使った非同期プログラムでしか活用する場はありませんでした。Backbone.js や AngularJS、Knockout.js などの、JS フレームワークがあるよと数年前に聞かされていましたが、フロントエンドでそこまでするの?っと興味はありませんでした。

そんな中、手伝っていたプロジェクトで、Backbone.js のような JS のオリジナルフレームワークを使っていて、しかもそのフレームワークを作った人が既に退職してしまっているとのこと。ソースを見ていても特殊だし、html のタグの id 属性などが JS の発火条件になっているなど、すごくカルチャーショックを受けたのを覚えています。

JSフレームワークとの再会

そして 1 年振りに、また JS フレームワークを触る機会が出てきたので、少しくらいは JS に興味を持って Backbone.js や Marionette.js、Underscore.js などの基本構成や TIPS などをまとめていきたいと思います。

Backbone.js
Marionette.js
Underscore.js

Backbone.jsの基本概念

Backbone.js の基本概念として覚えておきたいのは、Backbone.Model、Backbone.View、Backbone.Router、Backbone.Collection の 4 つ。Model(モデル)と Collection(コレクション)は密接な関係にあり、Collection は Model のグループで、Model は 1 つのオブジェクトに該当する。

View(ビュー)はその名の通りといきたいところですが、実際のレンダリングは html で処理されるので、ここで言う View は Model の情報を html として伝える部分の担当となる。Router(ルーター)は、URL を機能にマッピングするだけになるが、若干、コントローラ的な役割に近い。しかし、実際には View もコントローラ的な役割を担う部分もあるので、明確にコントローラがどこに該当するかは曖昧。

実際にブラウザの画面を見たり操作したりするユーザーにとっては、相手が html になり、その html の中のイベントが呼び出されると、Backbone.View に処理が移譲され、View が Backbone.Model とデータのやりとりをして、最後にユーザーのブラウザ画面を書き換える。この辺は、実際にプログラムを書いて動作させた方がわかりやすいですが、ざっくりとしたイメージはこんな感じ。

ユーザー ⇒ html(イベント発生) ⇒ Backbone.View(更新) ⇒ Backbone.Model(処理)
Backbone.Model(通知) ⇒ Backbone.View(更新) ⇒ html

と言うことで、次回は実際に Backbone.js を使える環境を整えてみたいと思います。

参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

標準出力と標準エラー出力をパイプに渡す

よく、標準出力先をファイルにリダイレクトすることはありますが、意外に標準エラー出力は使う機会がありません。しかし、やはりツールやパッケージ製品になると標準エラー出力も活用されているようです。でも、...

Linux(FreeBSD)

>>記事を確認する

主要無料ブログ5つに対する自動投稿PHPプログラム

アメブロへ楽天APIなどの情報を自動で投稿する の反響が良かったので、どうせならアメブロ以外の無料ブログの XML-RPC を使った自動投稿も紹介したいと思います。これには FC2BlogManager.php というライブ...

PHP

>>記事を確認する

snmpでデバイスの情報を取得

snmpでデバイスの情報を取得するコマンドです。これを元に、ディスクIOなどのMIB値を探します。 $ snmpwalk -v 2c -c {SNMPGROUPNAME} localhost 1.3.6.1.4.1.2021.13.15.1.1.2 (結果の一部) UCD-DIS...

Linux(FreeBSD)

>>記事を確認する

awkで指定したカラム以降をprint表示する

前回、awk で最後のカラム以外を表示してみましたが、今回は指定したカラム以降のカラムを全部表示したいと思います。 例えば、7 個の文字列がカンマで区切られているファイルがあるとしたら、3 番目のカラム...

awk / シェル

>>記事を確認する

CentOSでRedisサーバを使う

冗長化した Web サーバなどで、セッションの管理や、セッションや特定のユーザーに紐付く一時データを管理するのに memcache を使う場面は多いと思います。 その memcache の中でも主流なのが memcached です...

Linux(FreeBSD) / CentOS / Redis

>>記事を確認する

ドメイン取るなら低価格で楽々管理

バリュードメインは、GMO デジロック社の低価格ドメイン総合サービスです。

このサイト含め、私もこれまでに 100 個以上のドメインを取得して管理してきましたが、WHOIS の代理公開も可能なので、無料 SSL 証明書の Let's Encrypt と組み合わせれば、かなりの低価格で SSL サイトも運営できます。

年単位で領収証発行もしてくれるので、たくさんサイトを抱えているアフィリエイターや個人事業主にもオススメです。

AWSの無料利用枠内で複数サイトをサクサクと運営する方法

MySQLでテーブル定義を取得

似たような構成のテーブルを作る時に、今までは mysqldump コマンドで -d オプションを付けて実行していました。 これでも十分に要件は満たせるのですが、MySQL のコンソールからサクっと出したい場合もある...

データベース / MySQL

>>記事を確認する

Poderosa5の登場と文字色と背景色

新しい PC を購入したので、久し振りに Poderosa のインストールをしたのですが、Poderosa-Terminal として最新バージョンの 5 が 2016 年に登場していました。 これ、職場でもインストールしてみたのですが...

Windows / ツール

>>記事を確認する

Laravel5.1からLaravel5.5へアップデートする

LTS だった Laravel5.1 のバグフィックスサポートが 2017 年の 6 月で終わり、セキュリティサポートも 2018 年の 6 月で終了となります。 このタイミングで、兼ねてから発表のあった、次期 LTS の Laravel5.5...

PHP / PHPフレームワーク / Laravel

>>記事を確認する

VagrantでCentOS6.9のイメージを使う

CentOS7 が既に 7.3 まで出ていますが、AmazonLinux がまだ 6 の構成と似ていることから、なかなか 7 系に移行できません。 そこで、Vagrant のイメージも 6 系の最新版を使うと思ったのですが、下記の BOX ...

Linux(FreeBSD) / CentOS / Vagrant

>>記事を確認する