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

1. ループ処理とは？

1. ループ処理とは？

プログラミングにおける「ループ処理」とは、特定の条件を満たしている間、同じ命令を何度も自動で繰り返す仕組みのことです。例えば、100人にメールを送る、名簿のデータを1行ずつ読み込むといった、人間が手作業で行うと時間がかかる「単純な繰り返し作業」を、コンピュータに一瞬で実行させることができます。

JavaScriptでは、主に for 文や while 文といった構文を使ってこの繰り返しを実現します。未経験の方でもイメージしやすいように、簡単な数字のカウントアップを例に見てみましょう。

// 3回繰り返す処理の例
for (let i = 1; i <= 3; i++) {
  console.log(i + "回目の、こんにちは！");
}

1回目の、こんにちは！
2回目の、こんにちは！
3回目の、こんにちは！

このように、ループを使うことで、1行の命令を書くだけで何十回、何百回もの処理を効率的に記述できるようになります。プログラムの行数を減らし、記述ミス（タイポ）を防ぐためにも、JavaScript開発においてループの理解は避けて通れない非常に重要なステップです。

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

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

JavaScriptで最も一般的で、古くから使われているのが for 文によるループ処理です。この書き方は「どこから始めて」「いつまで続けて」「1回ごとにどう変化させるか」という3つのルールを自分で細かく指定できるのが特徴です。

まずは、プログラミング未経験の方でも直感的に理解しやすい、果物の名前が入った「配列」の中身を順番に取り出すサンプルを見てみましょう。

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

// カウンター変数 i を使って、配列の 0番目から順番に処理します
for (let i = 0; i < fruits.length; i++) {
  console.log("取り出した果物: " + fruits[i]);
}

取り出した果物: りんご
取り出した果物: バナナ
取り出した果物: みかん

このコードの中にある fruits.length は、配列の中にデータがいくつあるか（この場合は3つ）を自動で数えてくれる命令です。そのため、データの数が増えても柔軟に対応できるのがメリットです。

しかし、この書き方は let i = 0 （スタート位置）や i < fruits.length （終了条件）など、記述すべき項目が多く、初心者の方にとっては「少し複雑で、打ち間違い（タイポ）が起きやすい」と感じるかもしれません。実務の現場では、この基本をベースにしつつ、よりミスが少なく直感的な「短縮した書き方」が好まれる傾向にあります。

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

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

JavaScriptで配列のデータを扱う際、基本の for 文よりも直感的でミスを減らせる書き方が forEach （フォーイーチ）メソッドです。これは「配列専用の繰り返し命令」で、データの数に合わせて自動でループ回数を調整してくれるため、初心者の方でも非常に扱いやすいのが特徴です。

従来の for 文では「i」というカウンター変数を使って「何番目の要素か」を意識する必要がありましたが、forEach を使えば「中身のデータを1つずつ取り出す」という動作だけに集中できます。

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

// 配列内の各要素（fruit）に対して順番に処理を実行します
fruits.forEach(function(fruit) {
  console.log("forEachで取得: " + fruit);
});

forEachで取得: りんご
forEachで取得: バナナ
forEachで取得: みかん

このコードの function(fruit) という部分は、配列の中から取り出された「今のデータ」が一時的に fruit という名前の変数に入っていることを意味します。この変数名は自由に決められるため、item や data など、自分が理解しやすい名前に設定できるのもメリットです。

forEach を使うことで、ループの終了条件を書き間違えて無限ループになってしまったり、配列の範囲外にアクセスしてエラーが出たりするリスクを大幅に抑えることができます。まずはこの「配列に命令を出す」感覚に慣れていきましょう。

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

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

JavaScriptの「アロー関数（arrow function）」は、ES6（ECMAScript 2015）で導入された、従来の関数（function）をより簡潔に記述できる構文です。その名の通り「=>」という矢印のような記号を使って処理を書くのが特徴です。

前述した forEach メソッドと組み合わせることで、コードの行数を劇的に減らし、読みやすさを向上させることができます。まずは、従来の書き方とアロー関数を使った書き方を比較して、どれほど短くなるか確認してみましょう。

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

// アロー関数を使えば、これだけでOK！
fruits.forEach(fruit => console.log("アロー関数で出力: " + fruit));

アロー関数で出力: りんご
アロー関数で出力: バナナ
アロー関数で出力: みかん

この書き方の大きなポイントは、function という単語や、処理を囲む { }（波括弧）を省略できる点にあります。特に処理が1行で終わる場合は、return 文も省略できるため、まるで1つの文章を読んでいるかのような直感的なコードになります。

プログラミング未経験の方にとっては、最初は「=>」という記号に戸惑うかもしれませんが、モダンなJavaScript開発（ReactやVue.jsなど）ではこのアロー関数が標準的に使われています。タイピング量を減らすだけでなく、コード全体の視認性が高まるため、ループ処理を短く書くための必須テクニックとして覚えておきましょう。

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