JavaScript

　The for loop in JavaScript repeats a specified code block while a particular condition is true.

for [loop]

　JavaScriptの「for」ループは、あるコードを繰り返し実行したいときに便利なツールです。想像してみてください、あなたがお友達に同じ話を５回繰り返して聞かせるよう頼まれたとします。毎回、同じ話を始める前に「１回目」「２回目」と数えるのは面倒ですよね。ここで「for」ループが役立ちます。

　「for」ループは基本的には、「これをこの回数だけ繰り返して」という指示をコンピュータに出す方法です。この命令は３つの部分から成り立っています。スタートの設定、繰り返しを続ける条件、そして何かを１回実行した後に行う小さな変更です。

　こう聞くと難しそうに感じるかもしれませんが、例を見てみましょう。

for (let i = 0; i < 5; i++) {
	console.log("これが " + (i + 1) + " 回目の話です。");
}

　このコードでは、以下のことが行われています。

スタートの設定

let i = 0; これは「カウンターを 0 から始めます」と言っています。このカウンターは繰り返しごとに増えていきます。

繰り返しを続ける条件

i < 5; これは「カウンターが 5 未満の間は、繰り返しを続けます」と言っています。つまり、0 から始まり 4 までの 5 回です。

小さな変更

i++ は「 1 回の繰り返し後にカウンターを 1 増やす」という意味です。

　このコードを実行すると、コンピュータは「これが 1 回目の話です」から始めて、「これが 5 回目の話です」まで、5回のメッセージを表示します。これが「for」ループの魔法です。同じ行動を繰り返し実行する必要がある時に、この方法でコードを簡潔に保ち、作業を効率化できます。

Sample 1

　画面上に 10体の敵キャラクターを生成したいとします。各敵キャラクターには、独自の位置が必要です。これを実現するためには、以下のような「for」ループを使うことができます。

// 10体の敵キャラクターを生成するためのコード
for (let i = 0; i < 10; i++) {
	// 仮想的な関数を呼び出して、敵キャラクターを生成する。
	// ここでは、各キャラクターの位置を示すために、i * 100 を使用しています。
	// 実際のゲームでは、より複雑なロジックで位置や他の属性を設定します。
	createEnemy(i * 100, 100); // 仮想的な関数、x位置は i * 100、y位置は100とする
}

　このコードの解説は以下の通りです

for (let i = 0; i < 10; i++)

これは、「 0 から始まり、9 までの、合計 10回の繰り返しを行う」という意味です。

createEnemy(i * 100, 100);

これは架空の関数で、各敵キャラクターを生成しています。i * 100 としているのは、簡単な例として、各敵キャラクターを横に 100ピクセルずつ離して配置するためです。実際には、createEnemy関数は敵キャラクターの生成とその位置設定を行いますが、この関数の実装はこの例では省略しています。

　このような使い方は、ゲーム開発では非常に一般的で、敵キャラクターやアイテムの一括生成、画面上のオブジェクトの更新など、さまざまな場面で活用されます。

Sample 2

　画面の幅に応じて星をランダムに配置するシンプルなゲームの背景を生成する例を示します。このコードは、画面サイズに関わらず適切に動作するように設計されています。

<canvas id="gameCanvas"></canvas>

<script>
	// ここに JavaScript のコードを書く
	// または外部の JSファイル内に配置する
</script>

// Canvasを取得し、コンテキストを設定
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Canvasのサイズを画面のサイズに合わせる
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Canvasの背景を黒に設定
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 画面に星を描画する関数
function drawStar(x, y) {
	ctx.beginPath();
	ctx.arc(x, y, 5, 0, Math.PI * 2);
	ctx.fillStyle = 'white';
	ctx.fill();
}

// 画面の幅に応じて星をランダムに50個配置する
for (let i = 0; i < 50; i++) {
	const x = Math.random() * canvas.width;
	const y = Math.random() * canvas.height;
	drawStar(x, y);
}

// リサイズ時にキャンバスのサイズを更新し、星を再描画
window.addEventListener('resize', function() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	// 背景を再設定
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// 星を再描画
	for (let i = 0; i < 50; i++) {
		const x = Math.random() * canvas.width;
		const y = Math.random() * canvas.height;
		drawStar(x, y);
	}
});

　このサンプルコードでは、forループを使用して、画面上に 50個の星をランダムな位置に描画しています。さらに、画面のサイズが変わったときには、resizeイベントリスナーがキャンバスのサイズを更新し、星を再描画することで、レスポンシブデザインに対応しています。