for と while はどう使い分けますか。

始める前にくり返す回数が決まっているなら for、決まっていないなら while です。配列を全部まわす処理は要素数だけ回せばよいので for が向いています。回数が状況によって変わる処理は次のレッスンで扱う while の出番です。

ループ変数はなぜ i という名前が多いのですか。

index の頭文字で、ほぼすべてのプログラミング言語に共通する慣習だからです。二重ループになると i の次は j、その次は k と続きます。意味のある名前を付けたほうがよい場面もありますが、単純なカウンタなら i のままが読み手にも伝わります。

合計が NaN になってしまいました。

存在しないインデックスを触っている可能性が高いです。条件を `i <= arr.length` と書くと最後に `undefined` を足すことになり、数値と undefined の足し算は NaN になります。条件は `i < arr.length` が正解です。

for ループで合計を求める｜コードで実践

このレッスンで分かること

for (初期化; 条件; 更新) で、配列を先頭から順に処理できます

集計は「ループの外で用意し、中で更新し、外で返す」形になります

要素が増えるたびに、行を書き足すはめになる

山田太郎さんの作品には、それぞれ閲覧数が付いています。合計を出したいとき、ここまでの知識ではこう書くしかありません。

JavaScript

const views = [120, 80, 45];
console.log(views[0] + views[1] + views[2]); // => 245

3 つならまだ書けます。ですが作品が 20 個になったら views[19] まで並べることになり、しかも作品が 1 つ増えるたびにこの行を書き直すはめになります。要素数が変わっても書き直さずに済む道具が for 文です。

丸カッコの中は 3 つに分かれている

for 文の丸カッコには、セミコロンで区切られた 3 つの式が並びます。

JavaScript

for (初期化; 条件; 更新) {
  // くり返したい処理
}

式	いつ動くか	配列を回すときの定番
初期化	ループが始まる前に 1 回だけ	`let i = 0`
条件	毎回のくり返しの前に判定	`i < arr.length`
更新	本体を実行したあと毎回	`i++`

配列を先頭から末尾まで回す形は、ほぼ固定です。インデックスは 0 から始まるので初期化は let i = 0、最後のインデックスは length - 1 なので条件は i < arr.length になります。

JavaScript

const titles = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];

for (let i = 0; i < titles.length; i++) {
  console.log(i, titles[i]);
}
// => 0 プロフィールサイト
// => 1 自己紹介カード
// => 2 スキル一覧の表

i が 3 になったところで条件 3 < 3 が偽になり、ループを抜けます。動きが読めなくなったら、小さい配列で 1 周ずつ紙に書き出してください。地味ですが最短の解決法です。

i は index の頭文字で、ループの番号として世界中で使われている慣習です。C でも Java でも Python でも同じなので、i を見たら「ループの番号だな」と読めるようになります。

外で用意して、中で更新して、外で返す

くり返して 1 つの答えを組み立てるときの形は決まっています。ためる変数をループの外で用意し、ループの中で更新し、ループを抜けてから返します。

JavaScript

let joined = "";
for (let i = 0; i < titles.length; i++) {
  joined += titles[i];  // 中で更新する
}
console.log(joined);    // ループを抜けてから使う

joined は中身が変わるので const ではなく let です。そして初期値をどう置くかが要点になります。文字列をつなぐなら空文字、数を足し合わせるなら 0 から始めます。こうしておくと、空の配列を渡されたときにも自然に正しい答えが出ます。要素が 0 個なら条件が最初から偽で本体は 1 度も動かず、初期値がそのまま答えになるからです。

同じくらい大事なのが return を置く場所です。ループの中に書くと 1 周目で関数が終わってしまい、1 件ぶんの結果しか返りません。全部を回し終えたあと、ループの外で返してください。

よくある間違い

区切りをカンマにする — 3 つの式はセミコロンで区切ります。カンマで書くと SyntaxError になります
条件で <= を使う — i <= titles.length にすると、最後に存在しない番号を触ります。数を集計している場合は undefined を足して NaN になります
更新を書き忘れて無限ループ — i++ を忘れると i がずっと 0 のままで、条件が真であり続けます。ブラウザのタブが固まるので、書いたらまず更新式を確かめてください

このレッスンで分かること

for (初期化; 条件; 更新) で、配列を先頭から順に処理できます

集計は「ループの外で用意し、中で更新し、外で返す」形になります

要素が増えるたびに、行を書き足すはめになる

山田太郎さんの作品には、それぞれ閲覧数が付いています。合計を出したいとき、ここまでの知識ではこう書くしかありません。

JavaScript

const views = [120, 80, 45];
console.log(views[0] + views[1] + views[2]); // => 245

丸カッコの中は 3 つに分かれている

for 文の丸カッコには、セミコロンで区切られた 3 つの式が並びます。

JavaScript

for (初期化; 条件; 更新) {
  // くり返したい処理
}

式	いつ動くか	配列を回すときの定番
初期化	ループが始まる前に 1 回だけ	`let i = 0`
条件	毎回のくり返しの前に判定	`i < arr.length`
更新	本体を実行したあと毎回	`i++`

JavaScript

const titles = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];

for (let i = 0; i < titles.length; i++) {
  console.log(i, titles[i]);
}
// => 0 プロフィールサイト
// => 1 自己紹介カード
// => 2 スキル一覧の表

i は index の頭文字で、ループの番号として世界中で使われている慣習です。C でも Java でも Python でも同じなので、i を見たら「ループの番号だな」と読めるようになります。

外で用意して、中で更新して、外で返す

JavaScript

let joined = "";
for (let i = 0; i < titles.length; i++) {
  joined += titles[i];  // 中で更新する
}
console.log(joined);    // ループを抜けてから使う

よくある間違い

区切りをカンマにする — 3 つの式はセミコロンで区切ります。カンマで書くと SyntaxError になります
条件で <= を使う — i <= titles.length にすると、最後に存在しない番号を触ります。数を集計している場合は undefined を足して NaN になります
更新を書き忘れて無限ループ — i++ を忘れると i がずっと 0 のままで、条件が真であり続けます。ブラウザのタブが固まるので、書いたらまず更新式を確かめてください

for ループで合計を求める

要素が増えるたびに、行を書き足すはめになる

丸カッコの中は 3 つに分かれている

外で用意して、中で更新して、外で返す

よくある間違い

要件

入出力例

ヒント

メモ

for ループで合計を求める

要素が増えるたびに、行を書き足すはめになる

丸カッコの中は 3 つに分かれている

外で用意して、中で更新して、外で返す

よくある間違い

要件

入出力例

ヒント

メモ