アイキャッチ画像: デスクの上でパソコンを使用している

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

Underscore.js

本原稿執筆時点の 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 については以下の記事などがご参考になるかもしれません。こちらもよろしければ。

以下の 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 などのブラウザのインスペクタ上に次のような出力が現れるはずです。

Drupal での Underscore.js の利用結果

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

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

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

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

?>


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。