74.foreachでHTMLのブロックをまとめて書く ～PHPで楽して書こう～

foreachを使ってHTML要素の繰り返し記述が楽になる。

結構な衝撃でした。

本日はこれをやっていきましょう。

どんなところに使うのか

カードとかアイテムとかニュースとか

形は同じで中身が違うような

そんなところで大いに力を発揮してくれます。

例えば、phpの配列に表示したい要素の中身をストックしておいて、

配列の中身の分だけHTMLの要素を生成して表示させたい。

そんなことができちゃうのです。

まずは配列とベースとなるHTMLを用意する

今回は処理を確認するだけなので、簡素なもので進めていきます。

まずはPHPの配列

<?php 
$names =[ "google" , "apple" , "facebook" , "amazon" , "microsoft"];
?>

次にHTML

<div class="card">
    <h2 class="corporate-name"></h2>
    <p>これは会社紹介です</p>
</div>

上記の配列とHTMLを使って、カードをブロック単位で生成していきましょう。

繰り返したいHTML部分をforeachで囲む

通常のforeachと書き方が違って、

<?php foreach($names  as $name): ?>
<div class="card">
    <h2 class="corporate-name"></h2>
    <p>これは会社紹介です</p>
</div>
<?php endforeach; ?>

このように繰り返したいHTMLをphpタグでサンドイッチします。

特に注意したいのは、開始側のPHPの部分で

foreach($names  as $name):

最後がセミコロンではなくコロンなので、間違えないようにしましょう。

配列から取出したデータをHTMLに表示させる

下記のように記述することで、配列から取出したname変数がh2タグのコンテンツとして表示されます。

<?php foreach($names  as $name): ?>
<div class="card">
    <h2 class="corporate-name"><?php echo $name; ?></h2>
    <p>これは会社紹介です</p>
</div>
<?php endforeach; ?>

これで、phpプログラムで処理されたHTMLは$names配列に格納されているデータの分だけ、上記のブロックが生成された状態で表示されるのです。

すごい！

ブラウザが受け取る時は上記コードが、

<div class="card">
    <h2 class="corporate-name">google</h2>
    <p>これは会社紹介です</p>
</div>

<div class="card">
    <h2 class="corporate-name">apple</h2>
    <p>これは会社紹介です</p>
</div>

<div class="card">
    <h2 class="corporate-name">facebook</h2>
    <p>これは会社紹介です</p>
</div>

<div class="card">
    <h2 class="corporate-name">amazon</h2>
    <p>これは会社紹介です</p>
</div>

<div class="card">
    <h2 class="corporate-name">microsoft</h2>
    <p>これは会社紹介です</p>
</div>

このようにして表示されてくるのです。

コード量が段違いですよね。

今日のまとめ

• foreachを使うことで、配列の中身の数だけブロックを自動生成してブラウザにわたすことができる。
• foreachの書き方が通常とは若干異なるので、記述に注意する

こんなに簡単にページが生成されてしまうの、すごいですね。

手書きでゴリゴリと書いているのが少し虚しくなりました笑

引き続き楽しんでPHP進めていきたいと思います。

では、また。