【PR】を含みます。

フロントエンド

【JavaScript】ループ処理（繰り返し処理）の書き方まとめ

JavaScript ループ処理（繰り返し処理）の書き方まとめ

JavaScriptでは、さまざまな方法で繰り返し処理を行うことができます。

この記事では、配列やオブジェクトに対するループの使い方に加えて、HTMLオブジェクトに対するループも紹介します。

基本のループ構文

forループ

標準的なカウンタベースのループ。

以下のforループは、変数iが0から始まり、i < 5の条件を満たすまでループを繰り返します。

iの値は毎回1ずつ増加し、結果として0, 1, 2, 3, 4がコンソールに出力されます。

forループは、繰り返し回数が予めわかっている場合に最適です。

JavaSctipt
Copy
  1. for (let i = 0; i < 5; i++) {
  2.   console.log(i);
  3. }

whileループ

条件が満たさなくなるまで繰り返すループ。

以下のwhileループは、条件i < 5がtrueである限り、ループが実行されます。

iが0からスタートし、毎回i++で値を1増やし、条件を満たさなくなるとループが終了します。

forループに似ていますが、条件が事前に決まっていない場合にも使いやすいです。

JavaSctipt
Copy
  1. let i = 0;
  2. while (i < 5) {
  3.   console.log(i);
  4.   i++;
  5. }

配列のループ

JavaScriptでは、配列を扱うために多くのループ方法が提供されています。

forで配列のループ

配列のインデックスを使った基本的なループ方法。

以下のforループは、配列arrの長さ（arr.length）を使って、各要素にアクセスしています。

配列のインデックスを直接利用するため、配列の特定の範囲や位置にアクセスする際に便利です。

JavaSctipt
Copy
  1. const arr = [1, 2, 3, 4, 5];
  2. for (let i = 0; i < arr.length; i++) {
  3.   console.log(arr[i]);
  4. }

forEachメソッドで配列のループ

forEachは配列のメソッドで、引数に関数を渡し、各要素に対してその関数を実行します。

以下は、配列arrの各要素がconsole.logで出力されます。

配列をループする際に最も簡潔に書ける方法の1つです。

JavaSctipt
Copy
  1. const arr = [1, 2, 3, 4, 5];
  2. arr.forEach(num => {
  3.   console.log(num);
  4. });

for...ofで配列のループ

for...ofループは、配列のインデックスではなく、要素そのものにアクセスします。

以下は、配列の各要素numをループし、その値がコンソールに出力されます。

要素を直接操作したいときに直感的に使える構文です。

JavaSctipt
Copy
  1. const arr = [1, 2, 3, 4, 5];
  2. for (const num of arr) {
  3.   console.log(num);
  4. }

mapメソッド

mapは、配列の各要素を変換して新しい配列を生成するメソッドです。

以下は、配列の各要素を2倍にした新しい配列doubledを返しています。

元の配列は変更されず、変換後のデータが必要なときに使われます。

今まで解説したループ処理とは異なりますが、各要素に対して同じ処理を実行したいときに便利です。

JavaSctipt
Copy
  1. const arr = [1, 2, 3, 4, 5];
  2. const doubled = arr.map(num => num * 2);
  3. console.log(doubled); // [2, 4, 6, 8, 10]

オブジェクト(連想配列)のループ

for...inでオブジェクトのループ

for...inループは、オブジェクトの各プロパティ名（キー）に対してループします。

以下はオブジェクトobjのキーと対応する値がコンソールに出力されます。

オブジェクトのプロパティに対して操作を行う場合に有効です。

JavaSctipt
Copy
  1. const obj = {a: 1, b: 2, c: 3};
  2. for (const key in obj) {
  3.   console.log(`${key}: ${obj[key]}`);
  4. }

Object.keysでオブジェクトのループ

Object.keysは、オブジェクトのすべてのキーを配列として取得するメソッドです。

その配列に対してforEachを使い、各キーに対する処理を行います。

以下はキーとその値を出力しています。

JavaSctipt
Copy
  1. const obj = {a: 1, b: 2, c: 3};
  2. Object.keys(obj).forEach(key => {
  3.   console.log(`${key}: ${obj[key]}`);
  4. });

Object.entriesでオブジェクトのループ

Object.entriesは、オブジェクトのキーと値をペアにした配列を返します。

for...ofを使ってそのペアをループし、キーと値を同時に操作するのに便利です。

以下はキーとその値を出力しています。

JavaSctipt
Copy
  1. const obj = {a: 1, b: 2, c: 3};
  2. for (const [key, value] of Object.entries(obj)) {
  3.   console.log(`${key}: ${value}`);
  4. }

HTMLオブジェクトのループ

JavaScriptでは、DOM操作を通じてHTML要素を操作できます。

複数の要素に対して同じ処理を行いたい場合、ループを使って効率的に処理することが可能です。

getElementsByClassNameとforを使ったループ

以下のループでは、指定したクラス名example-classを持つすべての要素のテキストカラーを赤に変更しています。

getElementsByClassNameはHTMLCollectionを返し、配列のようにforループで操作できます。

JavaSctipt
Copy
  1. const elements = document.getElementsByClassName('example-class');
  2. for (let i = 0; i < elements.length; i++) {
  3.   elements[i].style.color = 'red';
  4. }

querySelectorAllとforEachを使ったループ

以下は、指定したクラス名example-classを持つすべての要素のテキストカラーを赤に変更しています。

querySelectorAllはNodeListを返し、forEachを使って各要素を簡単に操作できます。

JavaSctipt
Copy
  1. const elements = document.querySelectorAll('.example-class');
  2. elements.forEach(element => {
  3.   element.style.color = 'red';
  4. });

childrenとforを使ったループ

特定の親要素のすべての子要素に対して操作を行います。

以下は、parentというIDを持つ要素のすべての子要素（children）に対して、ループを実行しています。

各子要素のテキスト内容（textContent）が「子要素 1」「子要素 2」といった形式に書き換えられています。

特定の親要素内の全ての子要素に対して操作を行いたい場合に便利な方法です。

JavaSctipt
Copy
  1. const parentElement = document.getElementById('parent');
  2. const childElements = parentElement.children;
  4. for (let i = 0; i < childElements.length; i++) {
  5.   childElements[i].textContent = `子要素 ${i + 1}`;
  6. }

【応用】非同期処理のループ

forループとawaitを使用して非同期処理を1つずつ実行

forEach内ではawaitが使えないため、forループで処理するのが有効です。

以下はfetchData1の結果が1秒後に出力され、その後にfetchData2（2秒後）、最後にfetchData3（3秒後）と、順番に処理されます。

JavaSctipt
Copy
  1. // 非同期関数
  2. function fetchData1() {
  3.   return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));
  4. }
  6. function fetchData2() {
  7.   return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));
  8. }
  10. function fetchData3() {
  11.   return new Promise(resolve => setTimeout(() => resolve('Data 3'), 3000));
  12. }
  14. // 1つずつ順番に処理する
  15. async function processSequentially() {
  16.   const promises = [fetchData1(), fetchData2(), fetchData3()];
  17.   
  18.   for (const promise of promises) {
  19.     const result = await promise;
  20.     console.log(result);
  21.   }
  22. }
  24. processSequentially();

Promise.allとawaitを使用して非同期処理を並列に実行

以下はfetchData1, fetchData2, fetchData3が並列に実行され、それぞれの処理が完了した後にresults.forEachで結果を1つずつコンソールに表示します。

JavaSctipt
Copy
  1. // 非同期関数
  2. function fetchData1() {
  3.   return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));
  4. }
  6. function fetchData2() {
  7.   return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));
  8. }
  10. function fetchData3() {
  11.   return new Promise(resolve => setTimeout(() => resolve('Data 3'), 3000));
  12. }
  14. // 並列で実行する
  15. async function processConcurrently() {
  16.   const promises = [fetchData1(), fetchData2(), fetchData3()];
  17.   
  18.   const results = await Promise.all(promises);
  19.   results.forEach(result => console.log(result));
  20. }
  22. processConcurrently();

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。
アイコン画像

もみじ

JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。

初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-フロントエンド
-