Drupal 8でtwigやJavaScriptに変数を渡す方法

Drupal Cafe Vol.52 で「Drupal 8でtwigやJavascriptに変数を追加するのはどうやるの？」という話が出たので、基本的な方法をご紹介します。

（関連記事：「CMS機能比較 DrupalかWordPressか？- 最適なWebプラットフォームを選択する方法」）

twigに変数を渡す方法

これはDrupal 7から大きな変更はありません。
{theme_name}.theme (これはDrupal 7での template.php に相当します) に hook_preprocess_HOOK(&$variables) という関数を作り、この関数に渡される $variable という引数に値を追加していくことで、twigに任意の値を渡すことができます。

「hook」の部分はテーマの名前、「HOOK」の部分は変数を渡すリージョンやフィールドの名前になります。
例えばテーマの名前が「foo」で page.html.twig で使える変数を設定したい場合、 foo_preprocess_page(&$variables) という関数を以下のように作成します。

function foo_preprocess_page(&$variables) {
  $variables['my_variable'] = 'Hello drupal 8 themeing!';
}

変数 $variable は配列になっており、配列のキーがtwigでの変数名となります。
上記のサンプルの場合だと、page.html.twig に <h1>{{ my_variable }}</h1> のように書くと、 <h1>Hello drupal 8 themeing!</h1> のように変換されてHTMLとして出力されます。

Javascriptに変数を渡す方法

こちらはDrupal 7から若干変わっています。
Drupal 7の場合 drupal_add_js を使い、

drupal_add_js(array('foo' => array('my_variable' => 'Hello drupal 7 themeing')), 'setting');

のように書くと、Javascript側で

(function ($) {
  Drupal.behaviors.foo = {
    attach: function(context, settings) {
      console.log(settings.foo.my_variable); // "Hello drupal 7 themeing" がログに出力される。
    }
  }
})(jQuery);

のように変数を参照することができました。

それに対してDrupal 8では hook_page_attachments を使います。
例えばテーマの名前が「foo」の場合、foo.theme に

function foo_page_attachments(array &$attachments) {
  $attachments['#attached']['drupalSettings']['foo']['my_variable'] = 'Hello drupal 8 themeing';
}

のように書いておくと、Javascript側では、

console.log(drupalSettings.foo.my_variable); // "Hello drupal 8 themeing" がログに出力される。

のように参照することができます。

Drupal.org により詳しい情報がまとまっていますので、詳細は以下を参照してください。

• https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-a…
• https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheet…