JavaScriptのfor文とforEachメソッドの違いについて現役エンジニアが解説【初心者向け】

JavaScriptのfor文とforEachメソッドの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• for文の使い方
• forEachメソッドの使い方
• for文とforEachメソッドの違い
• まとめ

 

for文の使い方

JavaScriptのfor文は、Javaなどの他言語と同じ使い方ができます。次のような処理ブロックを記述してから、ブロック内に繰り返したい処理を記述するだけです。

for ( let i = 0; i < 5; i++){
  // ここに繰り返したい処理を記述
}

for文についてのより詳しい内容は、こちらに動画つきの解説記事があります。

[PR] フロントエンドで副業する学習方法を動画で公開中

forEachメソッドの使い方

JavaScriptのforEechは配列型に実装されたメソッドとして利用することができます。例えば、以下のような配列があった時に

var fruits = ["apple", "orange", "melon"]

配列の要素すべてをconsole出力するための処理は、forEachを使って以下のように記述できます。

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

 

実行結果

apple
orange
melon

forEachメソッドについてのより詳しい内容は、こちらに動画つきの解説記事があります。

for文とforEachメソッドの違い

for文は、「どこでも使える構文」です。一方で、forEachメソッドは、配列のデータに対してのみ実行可能な処理となります。

基本的に、繰り返し処理を実行したい場合は、for文を使えば大丈夫です。中級者以上の場合は、配列のデータを扱う場合にforEachメソッドを使うことで、効率的なコーディングができます。

forとforEachを同時に使ったサンプルプログラム

実際にプログラムを動かしてforとforEachを比較してみましょう。

JavaScript

// 1. for文を使った繰り返し処理の例
for ( let i = 0; i < 3; i++) {
  console.log("現在" + (i+1) + "回目の処理です。");
}

// 2. for文で配列をループ処理する例
let fruits = ["apple", "orange", "melon"];

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

// 3. forEachで配列を効率的にループ処理する例
fruits.forEach( item => console.log( item ) );

 

実行結果

現在1回目の処理です。
現在2回目の処理です。
現在3回目の処理です。

apple
orange
melon

apple
orange
melon

forEachは、以下の形式で実行するところがポイントです。

配列.forEach( コールバック関数による処理 )

 

ループ回数について

基本的に、forEachは配列が持っている要素の数だけループする処理となります。一方で、for文は何にでも対応できて何回でもループできるところがポイントです。

まとめ

forEachメソッドは、「配列専用のfor文」と理解しておくと良いでしょう。

for文はどこでも使える処理ですが、配列の場合はforEachの利用を検討することで、効果的な処理が実現できます。適切に使いこなして、JavaScript中級者を目指しましょう。

筆者プロフィール

寺谷文宏（てらたにふみひろ） Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。