書籍転載：JavaScriptライブラリ実践活用［厳選111］
［Sammy.js］URLによって処理を分割する
書籍転載の6本目（書籍内の番号は「77」）。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
Sammy.jsは、URLによって処理を分割することに着目したフレームワークです。URLの「#」以降を指定し、それぞれのコールバック関数を記述することで、処理が整理されたコードを記述することができるようになります。
- 名称： Sammy.js
- 分類： フレームワーク
- URL： http://sammyjs.org/
- 関連ファイル： sammy-latest.min.js
URLによって処理を定義すると、どんな利点があるのでしょうか。図077-01は、サーバサイドのフレームワークとSammy.jsとの比較です。一般的なサーバサイドのフレームワークは、URLごとにコントローラクラスのメソッドが定義されており、画面でやりたいこととコーディングする処理が組み合わせになり、自ずと処理が整理されます。
Sammy.jsは、JavaScriptでも同じことができます。通常、URLを変更するとサーバにリクエストが飛びますが、「#」以降の変更は、ページ内のアンカーにスクロールする処理が行われるのみで、リクエストが行われません。そのアンカーの変更により処理を分けることができるのがSammy.jsです。
アンカーで制御する利点は、別のページからそのURLに遷移したとしても、最初に指定された処理が実行されることです。そのため、サーバ側の処理を変更せずに、JavaScriptだけの処理でブックマークや他ページからのリンクを作成することができます。
一般的に、このようなURLごとに処理を変更することを、ルーティングと呼んでいます。
Summy.jsの書き方
では、サンプルを例にSammy.jsの処理を見ていきましょう。リンクをクリック（URLを変更する）ごとに表示する書籍一覧を変更するサンプルです。リスト077-01はHTML、リスト077-02はSammy.jsを使ったJavaScriptの処理です。
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>書籍紹介</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<!--sammy.jsをインポート-->
<script src="js/sammy-latest.min.js"></script>
</head>
<body>
<div id="container">
<h1>書籍一覧</h1>
<ul id="link">
<li><a href="Sammy.js.html">トップページ</a></li>
<li><a href="#/page1">1ページ目</a></li> 2
<li><a href="#/page2">2ページ目</a></li> 2
<li><a href="#/page/page1">リダイレクト1ページ目</a></li> 3
<li><a href="#/page/page2">リダイレクト2ページ目</a></li> 3
</ul>
<!-- 動的に表示する部分 -->
<div id="main"></div> 1
</div>
</body>
|
※jQuery1.9以降では、jQuery Migrateが必要です。
|
<script type="text/javascript">
<!--
// 1 id=main要素に対して処理を行う部分を定義
var app = $.sammy('#main', function() {
// 2 URL/#/で動作する処理の定義。文字を表示する
this.get('#/', function() {
this.app.swap('本の一覧ページです。');
});
// 2 URL/#/page1で動作する処理の定義。books1.htmlを読み込む
this.get('#/page1', function() {
this.partial('books1.html');
});
// 2 URL/#/page2で動作する処理の定義。books1.htmlを読み込む
this.get('#/page2', function() {
this.partial('books2.html');
});
// 3 URLのパラメータがごとに動的にリダイレクト
this.get('#/page/:page', function() {
this.redirect('#', this.params['page']);
});
});
$(function() {
// 4 ページ読み込み時に処理をする。初期表示は「#/」としてURLを変更する
app.run('#/');
});
-->
</script>
|
1は $.sammyメソッドでルーティングを定義しています。$.sammyメソッドの第1引数は、表示を変更する対象の要素を指定します。第2引数は、具体的な処理を記述するコールバック関数です。
2 以降が、URLごとに変更する処理です。this.get関数は、第1引数に対象のURLと処理を記述するコールバック関数を定義します。this.app.swapメソッドを呼び出し、#main要素のHTMLを「本の一覧ページです。」という文言に変更しています。
2は、#/page1、#/page2のURLで動作する処理です。this.partialメソッドは、サーバサイドから取得した情報を、そのまま#mainに流し込みます。ここではHTMLを取得し、そのまま流し込んでいます。#/page1、#/page2で別々のHTMLを読み込み、表示結果を変更しています。その間、ページのリロードは行われません。
3は、URLをパラメータとして取得し、動的にリダイレクトを行なっています。getメソッドの第1引数で指定している#/page/:pageの:pageの部分が動的パラメータです。パラメータは this.params['page']で取得することができます。ここでは、その値をthis.redirectでリダイレクト先のURLに指定しています。#/page/page1が指定されると、#/page1にリダイレクトされるということになります。
4は、ページ遷移時（DOMがすべて読み込まれたタイミング）で描画処理を行うように記述しています。ここでは、runメソッドで初期遷移時には「#/」にURLを変更し、1の状態を初期表示にしています。
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
4. Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する
書籍転載の4本目（書籍内の番号は「71」）。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。
5. ［AngularJS］HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目（書籍内の番号は「70」）。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。
6. 【現在、表示中】≫ ［Sammy.js］URLによって処理を分割する
書籍転載の6本目（書籍内の番号は「77」）。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。
7. ［Knockout］MVVMパターンでアプリケーションを構築する
書籍転載の7本目（書籍内の番号は「89」）。MVVM（Model-View-ViewModel）パターンをサポートするJavaScriptライブラリである「Knockout」の基礎と、基本的な使い方を解説。
8. ［QUnit］テストコードを実行し、ブラウザで結果を確認する
書籍転載の8本目（書籍内の番号は「111」）。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。
