JavaScriptのループ処理を短く書く書き方のコツ！初心者でもわかる繰り返しコードの簡略化テクニック

1. ループ処理とは？

1. ループ処理とは？

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

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

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

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

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

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

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

3. forEachメソッドでループを短く書く

3. forEachメソッドでループを短く書く

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

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

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

4. アロー関数でさらに短く書く

4. アロー関数でさらに短く書く

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

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

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

5. forループの条件や変数の省略例

5. forループの条件や変数の省略例

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

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

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

6. whileループも1行で書ける

6. whileループも1行で書ける

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

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

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

7. 配列のmapメソッドで新しい配列を簡単に作る

7. 配列のmapメソッドで新しい配列を簡単に作る

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

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

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

8. まとめのポイント

8. まとめのポイント

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

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

まとめ

まとめ

JavaScriptのループ処理を短く書く方法について学ぶことで、コードの可読性や保守性を高めることができます。特に初心者の方にとっては、for文やwhile文の基本を理解したうえで、forEachやmapといった配列メソッドを活用することが重要です。これらの書き方は単に短くなるだけでなく、処理の意図が明確になるため、後から見返したときにも理解しやすいというメリットがあります。 また、アロー関数を組み合わせることで、無駄な記述を減らし、よりシンプルなコードを書くことができます。例えば、functionを使った従来の書き方からアロー関数へと変更するだけでも、見た目がすっきりし、処理内容に集中しやすくなります。これはJavaScriptのモダンな書き方として非常に重要なポイントです。 さらに、forループの中でlengthを毎回参照するのではなく、あらかじめ変数に入れておくことでパフォーマンスの向上にもつながります。細かい工夫ですが、このような積み重ねが効率的なプログラミングにつながります。 while文においても同様に、1行で書くことで簡潔に表現できますが、可読性を損なわないように注意することが大切です。短く書くことと読みやすく書くことのバランスを意識することが、実務において非常に重要になります。 mapメソッドについては、新しい配列を作成する場面で非常に便利です。単なる繰り返し処理ではなく、データの変換処理を伴う場合にはmapを使うことで、より意図が明確なコードになります。for文でも同じ処理は可能ですが、mapを使うことでコードの意味が直感的に伝わるようになります。 このように、JavaScriptでループ処理を短く書くためには、配列メソッドの理解、アロー関数の活用、そして基本構文の最適化が重要です。初心者の方はまず基本のfor文をしっかり理解し、その上で徐々に短い書き方に慣れていくことをおすすめします。段階的に学習することで、無理なくスキルアップすることができます。 また、短く書くことだけを目的にするのではなく、他の人が読んでも理解しやすいコードを書く意識を持つことが大切です。プログラミングは自分だけでなく、チームで行うことも多いため、読みやすさは非常に重要な要素です。今回学んだテクニックを活用しながら、実践的なコーディング力を身につけていきましょう。

サンプルプログラムで復習

const numbers = [1, 2, 3, 4, 5];

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

// forEach
numbers.forEach(num => console.log(num));

// map
const doubled = numbers.map(num => num * 2);
console.log(doubled);

1
2
3
4
5
2,4,6,8,10