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 を使える環境を整えてみたいと思います。

参考カテゴリ

オススメ記事

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

新しいぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

WebAPI

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

Nginx

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

PHP / Laravel

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

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

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

セキュリティ / Nginx / SSL

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

Web全般 / WebAPI

>>記事を確認する

AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

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

>>記事を確認する

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

MySQLでテーブル定義を取得

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

データベース / MySQL

>>記事を確認する

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

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

Windows / ツール

>>記事を確認する