Drupal8が採用したテンプレート・エンジン「Twig（ツイッグ）」とは？

公開日
更新日

テンプレート・エンジンって？

こんにちは、ジェネロの東 百合（あずま ゆり）です。前回の"ヘッドレス"に続き、今回は、Drupal 8のTwig（ツイッグ）についてご紹介します。

ウェブデザイナーやシステムエンジニアのみなさん、現在はどのような体制で制作・開発をされていますでしょうか？一昔前だと、フロントエンドもバックエンドも同じ方が制作・開発するということが当たり前でした。私はどちらかと言うと、バックエンド寄りで、htmlとかデザインとか得意ではなかったのですが、当時はそれでもなんとか回せてしまえる案件も多かったんですよね。

ただ、ウェブ・アプリケーションはどんどん複雑になってきていて、フロントエンドと、バックエンドの開発が別々で行われることが当たり前になってきていると思います。
ウェブサイトの同じ部分の開発作業を、フロントエンドの開発者とバックエンドの開発者が同じタイミングで行っていると、お互いの開発中のコードを確認し合う必要があったりして大変ですよね。

そこで、フロントエンドとバックエンドを、しっかりと分離することが必要となり、「テンプレート・エンジン」というものが登場しました。

このテンプレート・エンジンというものを使うと、フロントエンド開発者は簡潔な構文を使って、バックエンド開発者が用意してくれたデータを簡単に表示することができます。
また、どちらか片方（フロントエンド or バックエンド）に改修が入っても、もう片方はそれをあまり気にせず作業をすすめることができるようになります。

Drupalはどうなのか？というお話しをしますと、御存知のとおりDrupalはCMS（コンテンツ・マネジメント・システム）ですから、生まれたときからテンプレート・エンジンの分離メカニズムを持っていました。特に2006年にリリースされたDrupal 4.7からDrupalのコアにデフォルトで入っている、Drupalコミュニティ内製のPHPTemplateエンジンが有名です。

PHPTemplateエンジンを使うと、DrupalのAPI（アプリケーション・プログラム・インタフェース）を介して情報や機能にアクセスすることが容易にできるようになります。

確かにPHPTemplateエンジンは開発者にとって非常に便利で柔軟性も高いのですが、実はもろ刃の剣の面もあります。例えば、テンプレートに脆弱性があると、ウェブサイト全体のセキュリティが危険にさらされてしまうことがあります。

そういった側面もあったため、最終的にDrupalコアのチームはPHPTemplateエンジンを手放して、Drupalの世界に新しいテンプレート・エンジンであるTwig（ツイッグ）を導入することにしました。セキュリティ的な危険を回避するためでもありますが、実はそれ以外にもTwig（ツイッグ）には素晴らしいメリットがあったため採用されたと言われています。

「ツイッグ」・・・聞きなれない言葉ですよね～。ツイッ、トゥイッ、ツィグ・・・下を噛みそうです(-_-;)
Twigの意味を辞書で調べると「小枝」となっています。これは「これから大きな枝に育つ・成長する」といった意味が込められているようです。
ロゴは「草」なんですけどね。。。まあそのあたりの細かいことは気にしておらず、どちらにしても「これから育つ、成長する」という願いがこめられているようです。

さあ、ここから「ツ・イッ・グ」についてご紹介していきます。

ツイッグとは？

Twig（ツイッグ）は、SensioLabsというフランスの会社が開発したウェブデザイナー向けのテンプレート・エンジンです。Twig（ツイッグ）の開発メンバーは後に同社でSymfony2という高度なPHPフレームワークを開発しました。Symfony2はダイナミックで、柔軟で、速くて、安全なテンプレート・エンジンとして知られています。

SensioLabs

Drupal 8は、Symfonyのコンポーネントを取り込んだことで、Drupalの世界を大きく変えると言われています。SymfonyのコンポーネントはPHPのライブラリーで、PHPのアプリケーションの中でも最良のものが集められています。Symfonyフレームワークの中から必要なコンポーネントを取り出して、アプリケーション（Drupalもアプリケーションです）の中で使うことができます。

Symfonyによって、これまで手続き型プログラミングのフレームワークだったDrupalは、オブジェクト志向プログラミングのフレームワークになり、アプリケーション開発と維持管理が容易になりました。Drupalにサードパーティーの作ったアプリケーションを統合する作業もスムーズに行えるようになったのです。

Twig（ツイッグ）とSymfony2の開発者は同じで、Symfony2はもともとTwigをサポートしてますから、以前のPHPTemplateエンジンよりも柔軟性が高くてセキュアなTwig（ツイッグ）をDrupalのテーマに使うのは、自然な帰着ということなのだそうです。

Drupalはなぜツイッグを採用したの？

DrupalがTwig（ツイッグ）を取り入れた理由は、PHPTemplateエンジンのセキュリティ問題のほかにも、役に立つことがいろいろあったからです。
それを少しご紹介しますね。

1) 簡潔な構文

以前のPHPTemplateファイルは、以下のような構文になっています。

■PHPTemplateの場合

<div id=”node-<?php print $node->id; ?>” class=”<?php print $classes; ?> clearfix”>
<?php print $content; ?>
</div>
….
….
<div id=”footer”>
<?php print render($page[‘footer’]); ?>
</div>

ご覧のように$node-id (オブジェクト)、$classes/ $content (変数) 、$page[‘footer’] (アレイ)といった、いろいろなデータのタイプがコードの中に混在していますから、うっかりすると矛盾が生じてしまいがちです。それから、アイテムを表示するには”print”か”print render()”のどちらかを使わなければなりません。

次に、Twig（ツイッグ）テンプレート・ファイルのコードの一部を見てみましょう。

■Twig（ツイッグ）の場合

<div id=”node-{{ node.id }}” class=”{{ attributes.class }} clearfix”>
{{ content }}
</div>
….
….
<div id=”footer”>
{{ page.footer }}
</div>

このように構文が簡潔になっていて、読みやすいテンプレートになっています。何よりも変数へのアクセス方法に一貫性がありますし、表示の手段は1種類。{{ print.it }}だけです。

2) 矛盾をなくす

Drupalの最新の1つ前のバージョンのDrupal 7は、情報を出力するためにテンプレート・ファイルとテーマの機能を両方使っていました。そのため、どうすればDrupalコアのどこかの部分をオーバーライド（上書き）できるのかが分かりにくくてとても大変でした。

Drupal 7では、テンプレート・ファイルの中でPHPコードを使うことが許されていました。Drupal 8ではPHPコードは使えず、デザインの変更などはテンプレート・ファイル（Twig（ツイッグ）の構文のみ）を介在させる必要があります。このため、PHPコード間の矛盾などを心配する必要がなくなりました。

3) シンプル

Drupal 7には、複雑なサブシステムがあって、いろいろなテンプレート・ファイル、前処理機能、そのほかのテーマ関係の機能を使って出力を作っていました。プロセスの流れは絡み合っていて、上にも書きましたが、何かをオーバーライドするのは本当に大変でした。下の図の左側のようなイメージです。

TWIG

出典: Jen Lampton Presentation regarding Twigから作成

Drupal 8では、出力を作るフローがツイッグ（Twig）のお蔭で図の右側のように、とても分かりやすくなっています。

4) 重複が減って、保守性が向上

「ツイッグで最もパワフルなのはテンプレートを継承できること」－SensioLabs

Drupal 7でも、テンプレート・ファイルのオーバーライドはできていましたが、Drupal 8のツイッグ（Twig）はオブジェクト指向プログラミングの「継承（インヘリタンス）」というコンセプトを使っていますから、コードをコピーして再利用する手間がなくなって、コードのメンテナンスもとても簡単になりました。さらにDrupal 8では、継承したテンプレート・ファイルの「一部」だけオーバーライドする機能まであるんです。仮にそのテンプレートに不具合があったり、機能を追加したり削除したりする必要が生じても、部分的な手直しが可能なのです。

5) セキュアなアウトプット

Drupal 7ではテンプレート・ファイルの中で、PHPのコアを使ってよかったので、 PHPの内部構造まで熟知していれば、コアを書き換えて、PHPのそれぞれの機能にアクセスしたり、テンプレート・ファイルからデータベース・クエリを起動したりできました。

例えば、データベースのクエリを実行するコードは、以下のようになります。

<?php db_query(“DROP TABLE {node}”); ?>

でも、これではデータベースからテーブル全体を消去してしまう可能性があります。なので、サードパーティーのテーマを使うと、バックエンドに重大な問題が起こってしまう恐れがありました。十分な知識を持った人が悪意をもって使えば、サイトを破壊してしまうこともできたでしょう。
また、ユーザが入力したデータを出力するときにも、まずはそのデータをDrupalcheck plain()機能に渡して、悪さをするコードが入っていないかチェックし、もしあればそれを削除して、プレーンテキストだけを出力するようにと、とても用心して使わなければなりませんでした。
Twig（ツイッグ）は最初からセキュアで、Drupal 7にあったような欠点はありません。望ましくないアクセスはフィルタリングしてくれますし、実行できるのは特定の機能だけに制限されています。

さらに、もしもTwig（ツイッグ）のフィルターでは不十分で、例えば文字列全体から特定の何かを取り除きたいということになれば、カスタムメイドのフィルターを作ることもできます。詳しいガイドが、ここにあります。

6) 分かりやすいエラーメッセージとドキュメント

Twig（ツイッグ）でテンプレート・ファイルに、構文その他のエラーがあると、ファイルでの場所を行番号で示してくれるのでデバグが楽になっています。

参考）
https://drupal.studio-umi.jp/blog/Drupal-8-debugging-twig-templates

また、Twig（ツイッグ）には優れたオンラインのドキュメントがたくさんあって（残念なのは英語ばかりですけれど）、フレームワークを学習する材料が揃っています。

参考）
https://www.drupal.org/docs/8/theming/twig
http://twig.sensiolabs.org/documentation

まとめ

DrupalはOOP（オブジェクト指向プログラミング）のアプローチを採用していますが、さらにTwig（ツイッグ）を導入したことによってこれがますます強化され、アプリケーションの設計も保守も大幅に改善されました。開発者の視点から見ると、Twig（ツイッグ）をマスターするときに得られる知識は、DrupalでもDrupal以外でもとても役に立ちます。Twig（ツイッグ）を使えば、その先には驚きの世界が待っているのです。

今回も最後までお読みいただき、ありがとうございました。少し難しかったかも知れませんが、Twig（ツイッグ）の素晴らしさを少しでも感じていただければと思います。

そうそう、10月から私がいる会社の名前がジェネロテクノロジー株式会社から短いジェネロ株式会社（http://genero.jp/）に変更になりました。呼びやすくなったと同時に、事業の領域を技術中心から法人のお客様の事業全般の支援にまで拡大しているという決意の表明でもあります。

この連載も頑張って続けますので、次回もよろしくお願いします！

参照情報

DrupalSymfony2twigツイッグテンプレートエンジン
東百合のプロフィール画像
東百合
はじめまして！ジェネロテクノロジーの東 百合（あずま ゆり）と申します。 ジェネロでは、当社イメージキャラクター兼Drupalに関わるマーケティングのお仕事をしています。 現在はマーケティングを担当していますが、学生時代は、自宅にサーバーを立てたり、先生に内緒で研究室にWLANを設置したりとITインフラにどっぷり浸かっていた理系女子です！どうぞよろしくお願いいたしいます！