PHP開発でTwigを利用する方法を現役エンジニアが解説【初心者向け】

初心者向けにPHP開発でTwigを利用する方法について解説しています。TwigとはPHP専用のテンプレートエンジンです。テンプレートエンジンとはプログラムとHTMLやCSSを分離して開発するためのライブラリです。Twigのインストール方法や書き方、使い方などについて解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

PHP開発でTwigを利用する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。

 

田島悠介

今回は、PHPに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

PHP開発でTwigを利用する方法について詳しく説明していくね!

大石ゆかり

お願いします!

この記事は、PHPのテンプレートエンジン「Twig」について解説した記事です。テンプレートエンジンについてや、Twigの導入方法など、テンプレートエンジンを使用したことない方でも理解できる内容となっています。

目次

 

テンプレートエンジンとは

テンプレートエンジンとは、テンプレート(HTML)とプログラムを分離して、テンプレートにプログラムのデータを当てはめるためのライブラリのことです。

テンプレートエンジンを使用することで、動的なWebサイトを用意に作成できます。

[PR] PHPプログラミングで挫折しない学習方法を動画で公開中

Twigの特徴

TwigはPHP専用のテンプレートエンジンです。

Twigの記法でテンプレートに記載された構文は、全てPHPプログラムにコンパイルされ、そのコンパイルにかかる負荷もHTMLにPHPを直接書き込むよりも軽いのが特徴です。

また、HTMLにPHPを直接書き込むよりも、短く記載できて、よりテンプレートが読みやすい記述になります。

PHPを直接テンプレートに記載した例:

<?php echo "<p>".$name."</p>"; ?>

 

Twigで記載した例:

<p>{{ name }}</p>

 

Twigの使い方

まずは、Twigを自身の開発プロジェクトにインストールしましょう。Twigは、PHPのパッケージ管理システム「composer」で簡単にインストールをすることができます。

以下composerによるTwigのインストール方法を記載していくので、composerがまだローカル環境にインストールされていない方は、composer公式ダウンロードページからダウンロードしましょう。(Windowsの方はこちらからComposer-Setup.exeをダウンロードしてインストーラーよりインストール)

composerがインストールされたら、Twigを自身の開発プロジェクトにインストールしていきます。自身の開発プロジェクト内にディレクトリを移動して、下記のコマンドを入力してください。

$ composer require twig/twig:~3.0

このコマンドは、Twigの3.0系のバージョンで最新のものをインストールするというコマンドです。

Twigは使用しているPHPのバージョンによって使えるバージョンが異なるので、自身の使用しているPHPバージョンに合わせてTwigのインストールするバージョンを決めましょう。

Twigバージョン対応表:

Twig1.0系:PHP5.5.0以上
Twig2.0系:PHP7.0.0以上
Twig3.0系:PHP7.2.9以上

Twigのインストールが完了すると、自身のプロジェクト直下に下記のファイル・ディレクトリが作成されたかと思います。

・composer.json
・composer.lock
・vender

この作成されたものの中には、Twigを使用するための情報やプログラムが記載されています。それでは、PHPプログラムでTwigのライブラリを読み込んで使用できるようにする方法をについて解説します。

index.php:

<?php
// ①Twigライブラリの読み込み
require_once './vendor/autoload.php';

// ②Twigを使用するテンプレートを読み込む
$loader = new \Twig\Loader\FilesystemLoader('./view');
$twig = new \Twig\Environment($loader);

// ③テンプレートのレンダリング
echo $twig->render('index.html', array('message' => 'Hellow World!'));

 

/view/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Twig</title>
  </head>
  <body>
    <h1>{{ message }}</h1>
  </body>
</html>

自身のプロジェクト配下に、index.php/view/index.htmlを作成します。

index.phpの①では、アプリケーションでTwigライブラリを使用するためにautoload.phpを読み込んでいます。

autoload.phpを読み込むことでvendorディレクトリ以下のライブラリをアプリケーション内で使用可能になります。

②では、Twigを使用するテンプレートを読み込んでいます。上記の例では、viewディレクトリ以下のテンプレートを読み込んでいます。

③では、テンプレートのレンダリングを行っています。ここでは、テンプレートで使用する変数や適用するテンプレートの設定を行っています。上記の例では、②で読み込んだ/view/index.htmlに’message’という変数を適用する設定を行っています。

index.htmlでは、「 {{  }} 」のデリミタを使用することによってindex.phpで設定した変数を出力することができます。

上記の例では、変数 ‘message’ を {{ }}内に記載することによって’message’に設定した値’Hello World!’という文字列を出力しています。

実行結果:

実際に使ってみよう

ここでは、テンプレートにTwigの構文を実際に使用した例を紹介していきますが、その前に上記で紹介したデリミタについて解説します。

Twigで使用するデリミタは以下の3つです。

デリミタ一覧:

プリント コメント ロジック定義
{{  }} {#  #}  {%  %}

デリミタ {{  }} に記載されたものは、文字列として画面に出力されます。変数などを設定しておくと、画面を動的に表示することが可能です。

デリミタ{#  #}は、コメント文を記載する時に使用します。デリミタ{#  #}に囲まれた文字列はコメント文になります。デリミタ {%  %}は、条件文や繰返し文などのロジックを記載する時に使用します。

この3つのデリミタはTwigの基本となる構文なので、しっかり覚えておきましょう。

それでは、この3つのデリミタを実際にテンプレート内で使用してみましょう。

index.php:

<?php
require_once './vendor/autoload.php';

// 商品一覧情報取得
$file = 'items.json';
$json = file_get_contents($file);
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$data = json_decode($json, true);

$loader = new \Twig\Loader\FilesystemLoader('./view');
$twig = new \Twig\Environment($loader);
 
echo $twig->render('index.html', ['items' => $data['items']]);

/view/index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>商品一覧</title>
  </head>
  <body>
    <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
      <tr>
        <th>商品名</th>
        <th>価格</th>
      </tr>
      {#  フルーツの価格一覧を表示する #}
      {% for item in items %}
        <tr>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      {% endfor %}
    </table>
  </body>
</html>

 

items.json:

{
  "items": [
    {
      "name": "りんご",
      "price": 100
    },
    {
      "name": "みかん",
      "price": 150
    },
    {
      "name": "もも",
      "price": 300,
    }
  ]
}

実行結果:

上記の例では、JSONファイルの商品データを読み込んで、3つのTwigデリミタを使用して、商品一覧情報を画面に表示しています。

まとめ

以上、PHPのテンプレートエンジンTwigについて解説しました。

Twigは非常に便利なテンプレートエンジンなので、PHPでWebアプリケーション開発を行う場合はその使用方法を覚えておいて損はないと思います。

筆者プロフィール

平野大輝(ひらのだいき)

スキル:PHP・Java・JavaScriptを用いて様々なアプリを開発するWebエンジニア。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。