Loop：for、while、do…while、for…ofとfor…in
for、while、do…whileの基本と、arrayやobjectでfor…ofとfor…inを使い分ける場面を学びます。
「Loop：for、while、do…while、for…ofとfor…in」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。
導入
目標: 適切なループを選びます。for、while、do…while と、for…of と for…in の使い分けを学びます。
- 回数指定のループ
- 条件指定のループ
- 値とキーの反復処理
forループの基本
インデックスと終了条件が必要な場合は、for が適しています。
// Classic for: great for indexes
const nums = [2, 4, 6];
for (let i = 0; i < nums.length; i++) {
console.log("Index:", i, "Value:", nums[i]);
}
whileループの基本
while は最初に条件を確認します。ループ変数が変化するようにしてください。
// while: run while a condition stays true
let count = 3;
while (count > 0) {
console.log("Countdown:", count);
count = count - 1;
}
console.log("Go!");
do…whileの基本
do…while は本体を先に実行してから条件を確認します。必ず1回は実行したい場合に便利です。
// do…while: runs the body at least once
let tries = 0;
do {
console.log("Attempt:", tries + 1);
tries = tries + 1;
} while (tries < 2);
for…ofとfor…in
for…of は値を取り出し、for…in はキーを取り出します。後者では継承されたキーが含まれることもあります。
// for…of: values of an iterable (arrays, strings, etc.)
// for…in: keys (property names)
const colors = ["red", "green", "blue"];
for (const value of colors) {
console.log("of value:", value);
}
for (const key in colors) {
console.log("in key:", key);
}
ループのヒント
ヒント:
- 配列から値を直接取得するには for…of を優先してください。
- オブジェクトのキーには for…in を使ってください（配列には使いません）。
- 無限ループを避けるため、必ずループ変数を更新してください。
for…ofとfor…inのクイズ
クイックチェック: 配列の値を直接取得します。
まとめ
まとめ: インデックスには for、条件主導のループには while、1回実行してから確認する場合には do…while、配列の値には for…of を使ってください。
よくある質問
「Loop：for、while、do…while、for…ofとfor…in」レッスンは無料ですか？
はい。「Loop：for、while、do…while、for…ofとfor…in」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。
「Loop：for、while、do…while、for…ofとfor…in」で何を学びますか？
for、while、do…whileの基本と、arrayやobjectでfor…ofとfor…inを使い分ける場面を学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Loop：for、while、do…while、for…ofとfor…in」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- if/elseとswitch――基本パターン
- Loop：for、while、do…while、for…ofとfor…in
- Early ReturnとGuard Clause