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文についてのより詳しい内容は、こちらに動画つきの解説記事があります。
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文は何にでも対応できて何回でもループできるところがポイントです。
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
forEachメソッドは、「配列専用のfor文」と理解しておくと良いでしょう。
for文はどこでも使える処理ですが、配列の場合はforEachの利用を検討することで、効果的な処理が実現できます。適切に使いこなして、JavaScript中級者を目指しましょう。
筆者プロフィール
寺谷文宏(てらたにふみひろ)
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)