JavaScriptでは、さまざまな方法で繰り返し処理を行うことができます。
この記事では、配列やオブジェクトに対するループの使い方に加えて、HTMLオブジェクトに対するループも紹介します。
基本のループ構文
forループ
標準的なカウンタベースのループ。
以下のforループは、変数i
が0から始まり、i < 5
の条件を満たすまでループを繰り返します。
i
の値は毎回1ずつ増加し、結果として0, 1, 2, 3, 4がコンソールに出力されます。
forループは、繰り返し回数が予めわかっている場合に最適です。
for (let i = 0; i < 5; i++) {
console.log(i);
}
whileループ
条件が満たさなくなるまで繰り返すループ。
以下のwhileループは、条件i < 5
がtrue
である限り、ループが実行されます。
i
が0からスタートし、毎回i++
で値を1増やし、条件を満たさなくなるとループが終了します。
forループに似ていますが、条件が事前に決まっていない場合にも使いやすいです。
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
配列のループ
JavaScriptでは、配列を扱うために多くのループ方法が提供されています。
forで配列のループ
配列のインデックスを使った基本的なループ方法。
以下のforループは、配列arr
の長さ(arr.length
)を使って、各要素にアクセスしています。
配列のインデックスを直接利用するため、配列の特定の範囲や位置にアクセスする際に便利です。
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
forEachメソッドで配列のループ
forEachは配列のメソッドで、引数に関数を渡し、各要素に対してその関数を実行します。
以下は、配列arr
の各要素がconsole.log
で出力されます。
配列をループする際に最も簡潔に書ける方法の1つです。
const arr = [1, 2, 3, 4, 5];
arr.forEach(num => {
console.log(num);
});
for...ofで配列のループ
for...ofループは、配列のインデックスではなく、要素そのものにアクセスします。
以下は、配列の各要素num
をループし、その値がコンソールに出力されます。
要素を直接操作したいときに直感的に使える構文です。
const arr = [1, 2, 3, 4, 5];
for (const num of arr) {
console.log(num);
}
mapメソッド
mapは、配列の各要素を変換して新しい配列を生成するメソッドです。
以下は、配列の各要素を2倍にした新しい配列doubled
を返しています。
元の配列は変更されず、変換後のデータが必要なときに使われます。
今まで解説したループ処理とは異なりますが、各要素に対して同じ処理を実行したいときに便利です。
const arr = [1, 2, 3, 4, 5];
const doubled = arr.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
オブジェクト(連想配列)のループ
for...inでオブジェクトのループ
for...inループは、オブジェクトの各プロパティ名(キー)に対してループします。
以下はオブジェクトobj
のキーと対応する値がコンソールに出力されます。
オブジェクトのプロパティに対して操作を行う場合に有効です。
const obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}
Object.keysでオブジェクトのループ
Object.keysは、オブジェクトのすべてのキーを配列として取得するメソッドです。
その配列に対してforEachを使い、各キーに対する処理を行います。
以下はキーとその値を出力しています。
const obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach(key => {
console.log(`${key}: ${obj[key]}`);
});
Object.entriesでオブジェクトのループ
Object.entriesは、オブジェクトのキーと値をペアにした配列を返します。
for...ofを使ってそのペアをループし、キーと値を同時に操作するのに便利です。
以下はキーとその値を出力しています。
const obj = {a: 1, b: 2, c: 3};
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
HTMLオブジェクトのループ
JavaScriptでは、DOM操作を通じてHTML要素を操作できます。
複数の要素に対して同じ処理を行いたい場合、ループを使って効率的に処理することが可能です。
getElementsByClassNameとforを使ったループ
以下のループでは、指定したクラス名example-class
を持つすべての要素のテキストカラーを赤に変更しています。
getElementsByClassName
はHTMLCollectionを返し、配列のようにforループで操作できます。
const elements = document.getElementsByClassName('example-class');
for (let i = 0; i < elements.length; i++) {
elements[i].style.color = 'red';
}
querySelectorAllとforEachを使ったループ
以下は、指定したクラス名example-class
を持つすべての要素のテキストカラーを赤に変更しています。
querySelectorAll
はNodeListを返し、forEachを使って各要素を簡単に操作できます。
const elements = document.querySelectorAll('.example-class');
elements.forEach(element => {
element.style.color = 'red';
});
childrenとforを使ったループ
特定の親要素のすべての子要素に対して操作を行います。
以下は、parent
というIDを持つ要素のすべての子要素(children
)に対して、ループを実行しています。
各子要素のテキスト内容(textContent
)が「子要素 1」「子要素 2」といった形式に書き換えられています。
特定の親要素内の全ての子要素に対して操作を行いたい場合に便利な方法です。
const parentElement = document.getElementById('parent');
const childElements = parentElement.children;
for (let i = 0; i < childElements.length; i++) {
childElements[i].textContent = `子要素 ${i + 1}`;
}
【応用】非同期処理のループ
forループとawaitを使用して非同期処理を1つずつ実行
forEach内ではawait
が使えないため、forループで処理するのが有効です。
以下はfetchData1
の結果が1秒後に出力され、その後にfetchData2
(2秒後)、最後にfetchData3
(3秒後)と、順番に処理されます。
// 非同期関数
function fetchData1() {
return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));
}
function fetchData3() {
return new Promise(resolve => setTimeout(() => resolve('Data 3'), 3000));
}
// 1つずつ順番に処理する
async function processSequentially() {
const promises = [fetchData1(), fetchData2(), fetchData3()];
for (const promise of promises) {
const result = await promise;
console.log(result);
}
}
processSequentially();
Promise.allとawaitを使用して非同期処理を並列に実行
以下はfetchData1
, fetchData2
, fetchData3
が並列に実行され、それぞれの処理が完了した後にresults.forEach
で結果を1つずつコンソールに表示します。
// 非同期関数
function fetchData1() {
return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));
}
function fetchData3() {
return new Promise(resolve => setTimeout(() => resolve('Data 3'), 3000));
}
// 並列で実行する
async function processConcurrently() {
const promises = [fetchData1(), fetchData2(), fetchData3()];
const results = await Promise.all(promises);
results.forEach(result => console.log(result));
}
processConcurrently();
udemyでJavaScriptを学ぶ
- 本格的な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でどのようにすればレベルアップできるのか悩んでいる方
- JavaScriptの動作原理について深く学びます。
- JavaScriptがどのように実行されるのかについて深く学びます。
- ES6+の最新のJavaScriptの記法について幅広く学びます。
- 変数や参照の仕組みについて深く学びます。
- オブジェクトのメカニズムについて深く学びます。
- 関数のメカニズムについて深く学びます。
- スコープの仕組みについて深く学びます。
- プロトタイプのメカニズムについて深く学びます。
- 反復処理のメカニズムについて深く学びます。
- ジェネレーターやイテレーターについて深く学びます。
- コールバック関数について深く学びます。
- 非同期処理のメカニズムについて深く学びます。
- モジュールの仕組みについて深く学びます。
- クロージャーの仕組みについて深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- thisの仕組みについて深く学びます。
- bind、apply、callの動作原理について深く学びます。
- クラスと継承の仕組みについて深く学びます。
- ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
- Map,Setなどの強力なコレクションについて実践を交えて学びます。
- よく使用される強力な実装パターンを演習を交えて学びます。
- 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
- JavaScriptをコアの動作原理からキチンと理解したい方。
- 自分の思った通りコードが動かずに悩んでいる方。
- 自分の思った通りに動かず、気付いたら解決するのに1日経ってしまっていた経験のある方。
- React, Vue, Angularが使いこなせず悩んでいる方。
- JavaScriptの不可解な動きが理解できず、苦しんでいる方。
- 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
- JavaScriptを本気で勉強したいと思っている方。
- JavaScriptの変態仕様に苦しんでいる方。
- JavaScriptが苦手なプログラマーの方。
もみじ
JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。
初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。
講座内容は実践で使用するものが多く、実務でも役立つ内容でした。