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

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;

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

テンプレートとは

HTML template 要素 <template> は、ページの読み込み時に描画されず、後で JavaScript を使用してインスタンス生成できるクライアントサイドのコンテンツを保持するメカニズムである。

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