icon
icon

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

初心者向けにJavaScriptのfor文とforEachメソッドの違いについて現役エンジニアが解説しています。for文とはブロック内で繰り返し処理を行います。forEachメソッドとは、配列の各要素に対して処理を行います。JavaScriptのfor文とforEachメソッドの違いや使い方について解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptの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講座を開催しています。

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