web-dev-qa-db-ja.com

PHP / HTML混合コードを適切にインデントする方法は？

PHPとHTML、使用する適切なインデントスタイルは何ですか？出力されたHTMLが正しいインデントを持つように、またはPHP/HTMLミックスが適切にフォーマットされているようにインデントしますしたがって、読みやすい）？

たとえば、テーブル行を出力するforeachループがあるとします。以下のどれが正しいですか？

PHP/HTMLミックスは正しいように見えます：

<table>
  <?php foreach ($rows as $row): ?>
    <tr>
      <?php if ($row->foo()): ?>
        <?php echo $row ?>
      <?php else: ?>
        Something else
      <?php endif ?>
    </tr>
  <?php endforeach ?>
</table>

出力されたHTMLは正しいように見えます：

<table>
<?php foreach ($rows as $row): ?>
  <tr>
  <?php if ($row->foo()): ?>
    <?php echo $row ?>
  <?php else: ?>
    Something else
  <?php endif ?>
  </tr>
<?php endforeach ?>
</table>

私はこの状況に出くわすと（かなり頻繁に）、使用する標準的なスタイルがないことに気付きました。 「正しい」答えがないかもしれないことは知っていますが、他の開発者からの意見を聞きたいです。

phphtmlindentation
62
James Skidmore

PHPとHTMLは、互いにおよび出力された形式に関係なく、ソース形式で自分自身に対して正しいように、それぞれインデントする必要があります。

<table>
<?php foreach ($rows as $row): ?>
    <tr>
    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>
        Something else
    <?php endif ?>
    </tr>
<?php endforeach ?>
</table>
48
chaos

私もこの質問をよく考えましたが、HTML出力がどのように見えるか気にしているのは誰なのでしょうか？とにかくあなたのユーザーはあなたのHTMLを見るべきではありません。 [〜＃〜] you [〜＃〜]が読むためのものであり、おそらく他の開発者もいます。 sourceのコードをできる限りきれいに保ち、出力がどのように見えるかを忘れます。

出力をデバッグする必要がある場合は、Chrome Developer Tools、Firebug、またはF12 Toolsを使用します。

13
mpen

通常、行の先頭にopening phpタグを配置しますが、タグ内にあるものはすべてインデントして、HTML形式に一致させます。ただし、短いオープンタグを使用するため、単純なechoステートメントではこれを行いません。すべての宣言を見つけるためにファイルをブラウズするとき、それがより簡単になると思います。

    <table>
<?  foreach ($foo as $bar): ?>
      <tr>
<?    foreach ($bar as $baz): ?>

         <td><?=$baz?></td>

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>
8
tj111
  1. あなたの質問への直接的な答え：HTML出力を頻繁に読む必要がある場合、適切にインデントされたHTMLを出力するのは良いことかもしれません。しかし、より一般的なケースは、PHPソースコードを読む必要があるため、ソースが簡単に読めるようにすることがより重要です。
  2. あなたが言及した2つのオプションの代替： chaos ' または tj111's answerを参照してください。
  3. 私の意見では、HTMLとphpを混在させないでください。代わりにテンプレートエンジンを使用してください。
4
Treb

読みやすくするために、常に少しの空白も使用できます。カオスのインデントの構築：

<table>

<?php foreach ($rows as $row): ?>

    <tr>

    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

これの唯一の欠点は、a lotの混合コードがある場合、ドキュメントが2倍長くなり、スクロールが増えることです。このように多くのコードが混在している場合は、テンプレートエンジンを検討することをお勧めします。

2
Etzeitet

実稼働環境でマークアップのインデントを気にする必要はありません。また、Tidyやその他のHTMLピューリファイヤーも使用しないでください。有効なユースケースがあります。 HTML入力を許可する場合（ただし、代わりに Markdown の使用を検討してください）、これらはまれです。

ほとんどの場合、HTML美化フィルターは、コードの根本的な問題を隠すために悪用されます。しないでください。マークアップを手動で修正します。

開発環境でのみコードをインデントする必要がある場合は、上記のいずれかを使用できます。ただし、これらのライブラリはマークアップの修正を試みることに注意してください（これが主な目的です。インデントは副産物です）。正規表現ベースのインデントツール Dindent を作成しました。

Dindentは次のようにマークアップを変換します。

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
    <div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <div><table border="1" style="background-color: red;"><tr><td>A cell    test!</td>
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
        <td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
            ll</td></tr></table></td></tr><tr><td>Test <span>Ce       ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
</body>
</html>

これに：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
        <div>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <div>
                <table border="1" style="background-color: red;">
                    <tr>
                        <td>A cell test!</td>
                        <td colspan="2" rowspan="2">
                            <table border="1" style="background-color: green;">
                                <tr>
                                    <td>Cell</td>
                                    <td colspan="2" rowspan="2"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input>
                                        <input>
                                        <input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                    <td>Ce ll</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Test <span>Ce ll</span></td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

Dindentは、インデントを追加する以外に、コードのサニタイズや干渉を試みません。これは、開発/デバッグを簡単にするためです。生産用ではありません。

2
Gajus