【リファクタリング記事】for文【for(これ;これ;これ)】の内容を正しく説明できますか？よくある勘違いを解説します。 #JavaScript

【後記】新人研修で教えられないforのお話

これ結構良かったので、勝手にパクリます（なお、パクもラレも本人です）
なんで下書きに残っとるんや…！

元々は過去日に公開していたテーマだったんですが、結構ブラッシュアップしたので別記事になりました。
とはいえ、同じ事を言っているのでそのまま更新して2022アドカレに登録する運びにします。

今日いいたいこと

タイトルの通り、for文の

for(
  1. これ;
  2. これ;
  3. これ
) {
  // 処理
}

を正しく説明できるか？というのが本旨です。

研修中の説明例

for(
  変数の初期値;
  繰り返しの条件;
  カッコが終わった後にすること・繰り返しの条件が終わるようにする
) {
  // 処理
}

です。
研修など時間が限られている中で解説するため、forを使うだけならこの説明でも良いです。
が、今回取り上げたいのは、この説明は間違っているということです。

for文をwhile文で書き直してみる

下記にコード例を示します。
いずれも出力は以下のような結果になります。

1 / 0
1 / 1
1 / 2
1 / 3
1 / 4

for.php

<?php
$i = 1;
$before = 0;
$after = 0;

for(
  $before++;
  $i <= 5;
  $after++
) {
  $i++;
  echo $before . " / " . $after . "<br />";
}
?>

これをfor->whileにリファクタリングします。

while.php

<?php
$i = 1;
$before = 0;
$after = 0;

$before++;  // for文の１行目
while($i <= 5) {  // for文の2行目
  $i++;
  echo $before . " / " . $after . "<br />";

  $after++;// for文の3行目
}
?>

JavaScript

（※）PHP側の書き方に寄せています。

for.js

let i = 1;
let before = 0;
let after = 0;

for (
  before++;
  i < 5;
  after++
)
{
  i++;
  console.log( before + " / " + after );
}

これをfor->whileにリファクタリングします。

while.js

let i = 1;
let before = 0;
let after = 0;

before++;  // for文の１行目
while ( i < 5 )  // for文の２行目
{
  i++;
  console.log( before + " / " + after );

  after++;  // for文の3行目
}

勘違いしていても使えます

プログラミングの世界では、「厳密に意味を正しく理解していなくても使えてしまう」ものがいっぱいあります。
これは言語仕様であったりフレームワーク仕様などで「何となくいい感じにしてくれる」ものがある事を認識して使うのと、認識せず使うのでは意味が大きく異なります。

本来であれば、しっかりと指導するべきなのですが実際問題として指導できていないという問題があるので、せめてこういった時間を意識しなくても良い場では、ガチャガチャいじって予測と実験をする練習する機会を作っていくと、言語やフレームワークだけでなく、特にインフラ周りは理解が大幅に進みやすくなります。

【リファクタリング記事】for文【for(これ;これ;これ)】の内容を正しく説明できますか？よくある勘違いを解説します。