先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでループを書くときにもっと短く書く方法ってありますか？同じことを何度も書くのが大変で…」

先生

「ありますよ！ループ処理は便利ですが、もっと簡単に、短く書ける方法もたくさんあります。今回は初心者でもわかりやすいように説明しますね。」

生徒

「どうやって短く書けるんですか？教えてください！」

先生

「では、一緒にコツを見ていきましょう！」

1. ループ処理とは？

まず、ループとは「同じ処理を何度も繰り返す仕組み」です。JavaScriptではforやwhileを使って書きます。例えば、リストの中身を順番に表示したり、数を数えたりする時に使います。

2. ループの基本の書き方

普通のforループはこのように書きます。


const fruits = ["りんご", "バナナ", "みかん"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

このコードは、配列（リスト）fruitsの中の果物を順番に表示します。ですが、何度もforや変数の準備を書くので、初心者は長く感じるかもしれません。

JavaScriptの配列には便利なforEachというメソッドがあり、これを使うとループ処理を短く書けます。forEachは「配列の中身を1つずつ順番に処理する」命令です。


fruits.forEach(function(fruit) {
  console.log(fruit);
});

このコードはさっきのforループと同じ動きをします。変数fruitに配列の中の1つの値が順番に入ります。

JavaScriptのアロー関数（arrow function）は、関数を書くのをもっと短くできる記法です。上のforEachと組み合わせるとこうなります。


fruits.forEach(fruit => console.log(fruit));

「function」という言葉を書かなくて良くなり、コードがかなり短くシンプルになります。これが短く書くコツの一つです。

普通のforループでも、条件や変数を工夫すると短くできます。例えば、カウンター変数をiだけ使い、lengthは変数に入れて省略したりします。


const len = fruits.length;
for (let i = 0; i < len; i++) console.log(fruits[i]);

また、1行で書くこともできて見やすくなります。

whileループも同様に、1行で書けます。ただし、コードが短すぎると読みにくくなるので注意が必要です。


let i = 0;
while(i < fruits.length) console.log(fruits[i++]);

i++はiの値を使った後に1増やす、という意味です。

mapは配列のすべての要素に同じ処理をして新しい配列を作る便利なメソッドです。ループと似た働きをしますが、短くて見やすいのが特徴です。


const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);

これは、fruitsの中身を全部大文字にして、新しい配列に入れています。

JavaScriptでループ処理を短く書くには、forEachやmapなどの配列メソッドを使うこと、アロー関数を使うことが大切です。また、条件や変数の書き方を工夫することで、コードを見やすく、短くできます。

初心者の方は、まず普通のforループを書いてから、これらの短縮方法にチャレンジしてみると理解しやすいですよ。