ヒアドキュメントとテンプレートを使用してソースの可読性を向上させる

PHPのヒアドキュメントとHTMLのテンプレートの使い方を覚えたのでメモ。この2つを上手く使うことでJavascript側でDOMをゴリゴリ生成せずに済みます。

ヒアドキュメントとは

ヒアドキュメント(別の呼び方としてヒア文字列、heredocなど)は、文字列リテラルをシェルスクリプトやプログラミング言語の中に埋め込むための1つの方法です。

PHPでのヒアドキュメントの使い方

ヒアドキュメントは以下のような書式で使用することができます。「EOD」の部分はアルファベットの大文字3文字なら何でも使用することができます。EODはEnd Of Documentの略です。

<<< EOD
    ここに内容
EOD;

これができるとechoを何度も書かずに済むという利点があります。

以下のPHPは悪い例です。echoを書きすぎて見通しが悪くなっています。

echo "<ul>";
echo "<li class=\"adjust\">" . $listFirstMember . "</li>";
echo "<li class=\"adjust\">" . $listSecondMember . "</li>";
echo "<li class=\"adjust\">" . $listThirdMember . "</li>";
echo "</ul>";

これをヒアドキュメントを使用して記述するとダブルクォートのエスケープや結合子が無くなり、見通しがだいぶ良くなります。

echo <<<EOD
<ul>
    <li class="adjust">{$listFirstMember}</li>
    <li class="adjust">{$listSecondMember}</li>
    <li class="adjust">{$listThirdMember}</li>
</ul>
EOD;

注意点としては、ヒアドキュメント内では関数を使うことができないことです。この点は関数の戻り値を説明変数で受け取ってからヒアドキュメント内で使用することで回避することが可能です。

テンプレートとは

template要素を使用すると、コンテンツの雛型をHTML内に保持しておくことができます。template要素はページの読み込み時には描画されません。template要素を実際に描画するにはJavaScriptでtemplate要素のコピーを作成し、それをHTMLに埋め込んで使用します。

HTMLでのtemplate要素の使い方

template要素は以下のような書式で使用することができます。今回の例ではtable要素内に配置されるtr要素以下をまとめてテンプレートとして保存する。

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 必要に応じて既存のデータをここに含めることができます。 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="first"></td>
    <td class="second"></td>
  </tr>
</template>

これをJavascriptのJQueryからDOMを使用して以下のように操作することができます。

var template = $('#productrow').html();
var row = $(template).clone();

var firstColumn = row.find('.first');
var secondColumn = row.find('.second');
firstColumn.text('1つ目のカラムです。');
secondColumn.text('2つ目のカラムです。');

$('#producttable').find('tbody').append(row);

参考
ヒアドキュメント - Wikipedia
<template> - HTML | MDN
templateタグを使う - Qiita