Drupal 7 で Underscore.js を使う方法

本日は JavaScript の便利ライブラリ Underscore.js を Drupal 7 で使う方法をご紹介したいと思います。

本原稿執筆時点の Drupal 次期メジャーリリースである Drupal 8 の場合は Underscore.js は Backbone.js といっしょにコアに組み込みとなる予定とのことですが、 Drupal 7 では Underscore.js はコアには組み込まれていないため使いたい場合は自身で別途セットアップする必要があります。

もちろん、手作業で Underscore.js のソースをダウンロードしてきてカスタムモジュールを書いてセットアップすることも可能です。 ただ、 Drupal の例にたがわず Undersocore.js においても専用のコントリビュートモジュールを作ってくれている方がいますので、そちらを使わせてもらうと非常にかんたん・スピーディにセットアップすることができます。

Underscore.js のセットアップと利用

では実際に Underscore.js を Drupal 7 にインストールして使ってみましょう。

今回ご紹介するのは Drush ベースの方法ですので、 Drush がマシンに入っていない方はまず最初に Drush をインストールしてから読み進めていただくとよろしいかと思います。 Drush は手作業で入れることもできますが Mac の場合は Homebrew 、その他の場合は Composer で入れる方法がかんたんです。 その他 Drush については以下の記事などがご参考になるかもしれません。こちらもよろしければ。

• MacでHomebrew + Drush + Drupalの開発環境を整える
• Drush コマンドでオートコンプリーション（補完）機能を使う方法

以下の 4 ステップで見ていきます。

1. Underscore.js モジュールを有効化
2. Underscore.js をインストール
3. カスタムモジュール内で Underscore.js を有効化
4. 実際に JavaScript コードで利用する

1. Underscore.js モジュールを有効化

まずは Underscore.js モジュール（ Underscore.js 本体と区別するため以下「 US モジュール」とします）をダウンロードして有効化しましょう。 そのための Drush コマンドは次のとおりです。

$ cd （ Underscore.js をインストールしたい Drupal プロジェクトのディレクトリ）
$ drush dl underscore
$ drush en underscore

途中確認を求めるプロンプトが出てきたらすべて y(yes) で返しましょう。

2. Underscore.js をインストール

無事に US モジュールがダウンロード / 有効化できたら、つづいて Underscore.js のコード本体をダウンロードしてきます。 こちらは US モジュールが提供する Drush サブコマンドで一発です。

$ drush underscore-download

無事に Underscore.js がダウンロードされてきた場合は sites/all/libraries/underscore/underscore.js にソースファイルが配置されているはずです。 念のために確認してみてください。

3. カスタムモジュール内で Underscore.js を有効化

US モジュールの 7.x-2.x では、 Underscore.js は自動的に読み込まれるのではなく、開発者が自分で読み込む形になっています。

カスタムモジュールを作成してその中にフック関数 hook_init() を実装し、次の 2 行を追加しましょう。

libraries_load('underscore');
drupal_add_library('underscore', 'underscore');

仮にカスタムモジュールのマシン名が「 umi 」だとすると、 umi.module の中身は次のようなコードになるはずです。

<?php /**
 * Implements hook_init().
 */
function umi_init() {
  libraries_load('underscore');
  drupal_add_library('underscore', 'underscore');
}

4. 実際に JavaScript コードで利用する

これで Underscore.js を使える準備は整ったので、実際に JavaScript コードの中で利用してみましょう。

カスタムモジュールのスクリプトファイルの中に、たとえば次のようなコードを書きます。

(function($) {

Drupal.behaviors.umiUnderscore = {};
Drupal.behaviors.umiUnderscore.attach = function(context, settings) {
  // Underscore.js のテストのための配列と関数を定義します
  var myArray = [1, 3, 5, 9];
  var multiply = function(coeff) {
    return function (x) {
      return coeff * x;
    };

  };

  // Underscore.js を試しに使ってみます
  console.log(_.map(myArray, multiply(5)));  // => [5, 15, 25, 45]
  console.log(_.map(myArray, multiply(100)));  // => [100, 300, 500, 900]
};

})(jQuery);

すると Chrome や Firefox などのブラウザのインスペクタ上に次のような出力が現れるはずです。

[5, 15, 25, 45]
[100, 300, 500, 900]

以上です。 いかがだったでしょうか？

Underscore.js を Drupal 7 で使う方法を見てみました。 ステップ 3 4 あたりは Underscore.js を利用するところになるので、実際のセットアップ手順は 1 と 2 まででしょうか。 利用前にパッとイメージするよりもずっとかんたんに Underscore.js を利用することができたのではないかと思います。

こんなところにもコントリビュートモジュール。 便利ですね。

?>