はじめに
今回は、配列とfor文について復習していきます。繰り返し処理を用いることで、HTMLとJavaScriptがどう関連しているのかを知ることができます。
配列とは
JavaScriptの配列（Array）は、複数の値を1つの変数にまとめて格納できるデータ構造です。各値は要素と呼ばれ、インデックス（0から始まる番号）でアクセスできます。
下記では、fruitsという配列に3つの文字列が格納されています。それぞれの要素にはインデックスを使ってアクセスできます。また、配列は以下のように動的に要素を追加・削除することができます。多様なデータ型（数値、文字列、オブジェクトなど）を混在させることも可能です。
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits[2]); // "cherry"
fruits.push("orange"); // 要素を追加
fruits.pop(); // 最後の要素を削除
for文の仕組み
JavaScriptのfor文は、指定された条件に基づいて繰り返し処理を実行するためのループ構文です。特定の範囲の回数だけコードを繰り返し実行したい場合に便利です。
for (初期化; 条件; 変化) {
// 繰り返し実行するコード
}
- 初期化: ループが始まる前に1度だけ実行されます。通常はループカウンタ変数を初期化します。
- 条件: ループが繰り返されるかどうかを決定します。この条件がtrueである限り、ループは続行します。
- 変化: 各ループが終了した後に実行される部分で、通常はカウンタ変数を更新します。
例）
let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
- この場合、i = 0から始めて「i < fruits.length（配列の要素数）を条件にしてループし、
各ループの終わりにi++でカウンタを1増やします。」このfor文は、fruits配列の全ての要素を順に出力します。
変数letとconstの違いとは？
letは繰り返し処理などで使われる代入できる変数、constは値の再代入できない変数を表します。
初期化の処理について
let i = 1; // 変数iの中に1を入れている。
- この変数は、ループカウンターと呼ばれ、何回目の繰り返し処理かを記憶させるためのもの。
繰り返し条件とは？
i <= 10;
- 繰り返し条件を実行するための条件を指定します。変数iが10以下であれば、｛｝ブロック内の内容を実行するという意味になります。初期値は1としたので、条件に当てはまるため、この処理はiが1ずつ加算される繰り返し処理が続き、11になると繰り返し処理は停止します。
- 毎回の処理の後で、i++が実行されます。これは最初に作成したiの値を増やすという意味です。
例２）
See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.
- 配列itemsは、各画像のURLと文字をオブジェクトとして配列に格納しています。for文を用いて、配列の要素をループし、各画像とテキストをHTML要素として生成してDOMに追加します。
- createElementとappendChildは、画像やテキストを新しく作成したdivに追加し、それを#image-containerに挿入します。
まとめ
今回は、配列とfor文を使ってJavaScriptの効率の良い書き方、考え方について復習しました。
次回は、Webサイトでよく使われているアニメーションについてまとめていきます。