Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:JavaScriptライブラリ実践活用[厳選111]

書籍転載:JavaScriptライブラリ実践活用[厳選111]

[Sammy.js]URLによって処理を分割する

2013年5月23日

書籍転載の6本目(書籍内の番号は「77」)。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。

WINGSプロジェクト 安西 剛
  • このエントリーをはてなブックマークに追加

書籍転載について

 本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用[厳選111]』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

Sammy.jsは、URLによって処理を分割することに着目したフレームワークです。URLの「#」以降を指定し、それぞれのコールバック関数を記述することで、処理が整理されたコードを記述することができるようになります。

  • 名称: Sammy.js
  • 分類: フレームワーク
  • URL: http://sammyjs.org/
  • 関連ファイル: sammy-latest.min.js
リンクを押すごとに一覧が変更される
リンクを押すごとに一覧が変更される

 URLによって処理を定義すると、どんな利点があるのでしょうか。図077-01は、サーバサイドのフレームワークとSammy.jsとの比較です。一般的なサーバサイドのフレームワークは、URLごとにコントローラクラスのメソッドが定義されており、画面でやりたいこととコーディングする処理が組み合わせになり、自ずと処理が整理されます。

図077-01 サーバサイドのフレームワークとの比較
図077-01 サーバサイドのフレームワークとの比較

 Sammy.jsは、JavaScriptでも同じことができます。通常、URLを変更するとサーバにリクエストが飛びますが、「#」以降の変更は、ページ内のアンカーにスクロールする処理が行われるのみで、リクエストが行われません。そのアンカーの変更により処理を分けることができるのがSammy.jsです。

 アンカーで制御する利点は、別のページからそのURLに遷移したとしても、最初に指定された処理が実行されることです。そのため、サーバ側の処理を変更せずに、JavaScriptだけの処理でブックマークや他ページからのリンクを作成することができます。

 一般的に、このようなURLごとに処理を変更することを、ルーティングと呼んでいます。

Summy.jsの書き方

 では、サンプルを例にSammy.jsの処理を見ていきましょう。リンクをクリック(URLを変更する)ごとに表示する書籍一覧を変更するサンプルです。リスト077-01はHTML、リスト077-02はSammy.jsを使ったJavaScriptの処理です。

HTML
<!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>
リスト077-01 Sammy.js.html

※jQuery1.9以降では、jQuery Migrateが必要です。

JavaScript
<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>
リスト077-02 Sammy.js.html

 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]を参照してください。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
4. Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する

書籍転載の4本目(書籍内の番号は「71」)。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
5. [AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する

書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
6. 【現在、表示中】≫ [Sammy.js]URLによって処理を分割する

書籍転載の6本目(書籍内の番号は「77」)。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
7. [Knockout]MVVMパターンでアプリケーションを構築する

書籍転載の7本目(書籍内の番号は「89」)。MVVM(Model-View-ViewModel)パターンをサポートするJavaScriptライブラリである「Knockout」の基礎と、基本的な使い方を解説。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
8. [QUnit]テストコードを実行し、ブラウザで結果を確認する

書籍転載の8本目(書籍内の番号は「111」)。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。

サイトからのお知らせ

Twitterでつぶやこう!