for文とwhile文、ループ処理とその使い分け

wordpressやjavascriptのコーディングをしていると、同じブロックを複数回繰り返し表示したいことがあります。ブログの一覧ページやカテゴリページで、各記事のサムネとタイトルだけズラッとならべたいときなんかがそれです。
今回はそういった繰り返し処理に利用されるfor文とwhile文、それぞれの使い方を紹介します。

for文

for文の構造は以下のようになります。

for (初期値; 条件式; 増減式) {
　　繰り返し処理
}

初期値とは、処理をおこなう前の状態の値です。
条件式には演算子を利用し、繰り返し処理をおこなうかどうかの判定に使います。
増減式は、値を処理ごとにどれだけ更新するか、を設定します。

例文は以下になります。

See the Pen rLkQjw by hoshu_t (@hoshu_t) on CodePen.

0から始まって(初期値)、値が10以下であれば(条件式)、値を表示して(繰り返し処理)、値に1を加える
という処理を行っています。値が11になったタイミングで繰り返し処理が実行されないので、11は表示されていません。

while文

while文の構造は以下のようになります。

while (条件式) {
繰り返し処理
}

例文は以下になります。

See the Pen grdQvp by hoshu_t (@hoshu_t) on CodePen.

予め設定された値(var i = 0;)を参照し、値が10以下であれば(条件式)、値を表示して(繰り返し処理)、値に1を加える(i++)
という処理を行っています。for文と同じ内容を表示していますが初期値とループ後の処理が内包されていないのがポイントです

どう使い分けるのか

for文は初期値が構文内に内包されており、これは一般的に繰り返し回数の指定に使われます。対してwhile文は初期値の読み込みをあらかじめ設定した値にすることができるので、設定済みの配列や値の集まりに条件だけを指定して処理を行いたい時に利用が平易です。

つまりfor文は繰り返し回数を指定したい処理に適しており、while文はとにかく条件ごとに値を処理をしたいときに便利、ということになります。
ブログサイトでの利用に例えると、20件ある記事の中から、最新から5件を新着情報として表示したい場合はfor文、特定のカテゴリの記事を一覧で表示したいときはwhile文、という使い分けができそうです。

状況に適したループ処理を行ってコーディングの最適化を目指しましょう。