みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回はJavaScriptの繰り返し処理、for文について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- for文による繰り返し処理がわかる
そもそも繰り返し処理とは
JavaScriptにおける繰り返し処理とは、
同じ処理を複数回行うことです。
例えばですが
・「こんにちは」と10回出力する
・「N + 1」という処理を5回行う
for文
for文とはループ処理を行う最もポピュラーかつ汎用性の高い処理です。
基本的な書き方なので、これさえマスターすればとりあえずOKです。
■構文
for (値の初期化; 繰り返し処理を行う条件; 値の更新){
// 繰り返し行いたい処理
}例文として、「こんにちは」と5回出力するループ処理を作ってみましょう。
※実行環境がない方は、こちらの記事を参考にオンラインで実行してみてください！
// 値の初期化 ; 条件式; 値の更新
for (let i = 0; i < 5; i++) {
// 繰り返したい処理
console.log("こんにちは");
}
// 【出力結果】こんにちは
// こんにちは
// こんにちは
// こんにちは
// こんにちはこのように出力されたと思います。
これがどういう処理をされているかというと・・・
- ①変数iに0を代入
- ②i < 5;の条件を満たすか確認
- ③の1 満たさない場合：ループを抜ける
- ③の2 満たした場合：「こんにちは」と出力
- ④i++して値を更新
※i++はi = i + 1;の省略形です。 - ⑤ ②〜④の処理を繰り返す
というような順で処理が行われています。
つまり今回のケースだと、
処理が終わるたびに変数iに1を加算していき、
変数iが5になるまで中括弧内の処理を繰り返します。
※5になったタイミングで i < 5; の条件式がfalseになり処理を抜けます
これを確認するために、変数iの値を確認する処理を追加して実行してみましょう
// 値の初期化; 条件; 値の更新
for (let i = 0; i < 5; i++) {
// iの値を出力
console.log(i + "回目の処理です");
console.log("こんにちは");
console.log("ーーーーーーーー");
}
// 【出力結果】0回目の処理です
// こんにちは
// ーーーーーーーー
// 1回目の処理です
// こんにちは
// ーーーーーーーー
// 2回目の処理です
// こんにちは
// ーーーーーーーー
// 3回目の処理です
// こんにちは
// ーーーーーーーー
// 4回目の処理です
// こんにちは
// ーーーーーーーーこのように、iの値が0〜4の際に処理が行われていることがわかります。
ちなみにですがプログラミングは大半が0オリジン
つまり0をベースに数が数えられるので注意が必要です。
はじめはなんとなく違和感を覚えると思いますが
すぐに慣れるので、安心してください。
おまけ：問題
問題1
「今日も頑張ろう！」と3回出力してください
問題2
iが0の時 ：「チェックをはじめるよ」
iが偶数の時：「iは偶数です」※iは実際の値が入る
iが奇数の時：「iは奇数です」※iは実際の値が入る
というように、0〜10の数値に対して奇数と偶数を判定するプログラムを作ってください
まとめ
- forを使うとループ処理(繰り返し処理)が作れる
- 処理ごとに変数iの値を更新し、条件式がfalseになるまで中括弧内の処理を繰り返す
- for (値の初期化; 繰り返し処理を行う条件; 値の更新) { // 繰り返し行いたい処理 }
for文は他の書き方もできるので、次回解説するよ！
おまけの答え
問題1
// 値の初期化; 条件; 値の更新
for (let i = 0; i < 3; i++) {
// 繰り返し処理
console.log("今日も頑張ろう！");
}
// 【出力結果】今日も頑張ろう！
// 今日も頑張ろう！
// 今日も頑張ろう！問題2
その1：if文を使うパターン
// 値の初期化; 条件; 値の更新
for (let i = 0; i < 11; i++) {
// 繰り返し処理
if (i === 0) {
console.log("チェックをはじめるよ！");
} else if (i % 2 === 0) {
console.log(i + "は偶数です");
} else {
console.log(i + "は奇数です");
}
}
// 【出力結果】チェックをはじめるよ！
// 1は奇数です
// 2は偶数です
// 3は奇数です
// 4は偶数です
// 5は奇数です
// 6は偶数です
// 7は奇数です
// 8は偶数です
// 9は奇数です
// 10は偶数ですif文について復習したい方はこちら
その2：switch文を使うパターン
// 値の初期化; 条件; 値の更新
for (let i = 0; i <= 10; i++) {
// 繰り返し処理
switch (i) {
case 0:
console.log("チェックをはじめるよ！");
break;
case 2:
case 4:
case 6:
case 8:
case 10:
console.log(i + "は偶数です");
break;
case 1:
case 3:
case 5:
case 7:
case 9:
console.log(i + "は奇数です");
break;
}
}
// 【出力結果】チェックをはじめるよ！
// 1は奇数です
// 2は偶数です
// 3は奇数です
// 4は偶数です
// 5は奇数です
// 6は偶数です
// 7は奇数です
// 8は偶数です
// 9は奇数です
// 10は偶数です
switch文について復習したい方はこちら！
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
