・HTMLにfor文を埋め込む際に、もっと簡略化して書くことはできる？
PHPで繰り返し処理を行うfor文はHTML内に埋め込むことができますが、どうやって埋め込めばいいかわからない人も多いでしょう。
そこでこの記事では、PHPのfor文をHTML内に埋め込む方法について詳しく解説します！
この記事を読めば、for文をHTML内に埋め込む方法と簡略化して書く方法がわかるでしょう。
PHPのfor文をHTML内に埋め込む方法がわからない人は、ぜひ最後までご覧ください。
for文の使い方
まず、for文とはどういった構文なのか、詳しく理解していない人もいるでしょう。
なのでここでは、for文の使い方について簡単に説明していきます。
for文の書き方
for文は、PHPで繰り返し処理を行うことができる構文です。
|
1 2 3 4 5 |
<?php for (初期値 条件式 増減式) { // 繰り返し処理 } ?> |
for文を書くときは上記のように、for()と書いて括弧の中は「初期値、条件式、増減式」の順に記述します。
例えば、「初期値が0、条件が10以下まで、増減が1ずつ増える」という式ならば、「$i = 0; $i <= 10; $i++」ということになります。
そして、{}の中に繰り返しの処理を書いていきます。
※for文は、同じ繰り返し処理を行うwhile文と書き方が異なるので、間違えないようにしましょう。
for文の基本的な使い方
では、for文の具体的な使い方について見ていきましょう。
先ほど解説した書き方通り、繰り返し処理を書いていくと、次のようになります。
|
1 2 3 4 5 |
<?php for ($i = 0; $i <= 10; $i++) { echo $i.'<br>'; } ?> |
「初期値が0、条件が10以下まで、増減が1ずつ増える」という式を作りたいので、forの括弧の中は「$i = 0; $i <= 10; $i++」というようになります。
そして、{}の中は繰り返し処理の結果を表示したいので、echoで「$i」を出力します。
※brタグは、繰り返し処理を改行して表示させるために指定しています。（brタグを指定しない場合は、繰り返し処理が横並びに表示されます）
結果を表示して確認してみましょう。
結果は、0~10までの数字が表示されていますね。
これによって、0から10までの数字が繰り返し処理されているのがわかります。
for文は、このように初期値、条件式、増減式を指定することで、繰り返し処理を行うことができるのです。
for文の使い方について、さらに詳しく知りたい人は、以下の記事をご覧ください。
for文をHTML内に埋め込む方法
では、本題のfor文をHTML内に埋め込む方法について学んでいきましょう。
書き方は簡単で、HTML内で繰り返し処理を行いたい箇所に、for文を書くだけです。
今回は、ulタグとliタグを使ったリストにfor文を埋め込んで、繰り返し処理を行います。
実際のコードを使って見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>サンプルページ</title> </head> <body> <ul> <?php for ($i = 1; $i <= 10; $i++) { ?> <li><?php echo $i; ?></li> <?php } ?> </ul> </body> </html> |
まず、ulタグの中にliタグを書きます。
本来であれば、リストの数だけliタグを記述しますが、今回はliタグは1つだけ書いて、それをfor文の繰り返し処理で指定の数のリストが表示されるようにします。
ulタグの直下にfor文で「$i = 1; $i <= 10; $i++」と指定し、1から10までの数字を繰り返し処理するようにしましょう。（for文を「?php ?」の中で書いているところに注意してください）
そして、1から10までの繰り返し処理をliタグで表示したいので、liタグの中にechoで「$i」を出力します。
繰り返し処理を行うのは、liタグだけなので、liタグの後にfor文の閉じ括弧「}」を書きましょう。
これでfor文の埋め込みは完了です。
結果を表示して確認してみましょう。
1から10までの繰り返し処理が、リストとして表示されているのがわかりますね。
Chromeのデベロッパーツールで確認してみると、数字1つ1つがきちんとliタグとして指定されています。
このことから、for文はHTML内に埋め込まれ、繰り返し処理を行っているということがわかります。
PHPの構文をHTML内に埋め込むのは、少し複雑でややこしく感じる部分もありますが、書き方をしっかり理解すれば簡単に埋め込むことができます。
なので、今回解説したfor文をHTML内に埋め込む方法を覚えておくといいでしょう。
for文を簡略化して埋め込む方法
先ほど、for文をHTML内に埋め込む方法について解説しました。
実は、そのfor文をもう少し簡略化して書くことができます。
なのでここでは、for文を簡略化してHTML内に埋め込む方法を説明していきます。
では、実際のコードで見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>サンプルページ</title> </head> <body> <ul> <?php for ($i = 1; $i <= 10; $i++) : ?> <!-- 「{」を「:」に --> <li><?php echo $i; ?></li> <?php endfor; ?> <!-- 「}」を「endfor」に --> </ul> </body> </html> |
先ほどと同じように、ulタグとliタグを使ってリストを作成し、for文を埋め込みます。
そして、簡略化した部分はどこかと言うと、for文の「{}」波括弧の部分です。
for文の「{}」波括弧は、「{」の部分を「:」コロンに、「}」の部分を「endfor」に置き換えることができます。
一度、この置き換えた文の状態で、ブラウザに結果を表示してみましょう。
結果は先ほどと同じように、1から10までの数字がリストとして表示されていますね。
この「{}」波括弧を「:」コロンと「endfor」に置き換えることでどういったメリットがあるのかと言うと、
構文が複雑になった場合に、どこまでがfor文なのかがわかる、「}」閉じ波括弧の書き忘れを防ぐことができる、といったメリットがあります。
コードが複雑になってくると、いくつも階層ができてしまい、「}」閉じ波括弧がどの構文を指しているのか、また書き忘れたりする可能性があるかもしれません。
そういった際に、「{}」波括弧を「:」コロンや「endfor」に書き換えることで、エラーを防ぐことに繋がります。
なので、このようにfor文を簡略化してHTML内に埋め込む方法も覚えておくといいでしょう。
まとめ
今回は、PHPのfor文をHTML内に埋め込む方法について解説しました。
PHPの構文をHTML内に埋め込む際は、「?php ?」の中に記述しなければならないことを覚えておきましょう。
また、for文の「{」波括弧を「:」（コロン）、「}」閉じ波括弧を「endfor」に置き換えることができます。
HTML内で、どこまでがfor文なのかわかりやすくなるので、使い方を覚えておくといいでしょう。
この記事がPHPの学習に役立つと幸いです。
