はじめに
こんにちは！今回はJavaScriptを使ったループ処理について学んでいきましょう。プログラムを書く上でループは非常に重要な概念です。何度も繰り返す作業を自動化するために、ループ処理は欠かせません。この記事では、JavaScriptで如何に効率よくループ処理を行うかについて見ていきます。
ループ処理の基本概念
まずはループ処理の基本から見ていきましょう。例えば、「こんにちは」と100回表示するプログラムを書くとします。一つ一つ手で書くのは非常に面倒です。その代わりに、JavaScriptのループを使えば簡単に実現できます。
for (let i = 0; i < 100; i++) {
console.log("こんにちは");
}
このように書くことで、「こんにちは」が100回出力されます。
for文の基本構造
for文の基本的な構造は以下の通りです：
- 初期化：
let i = 0; - 条件判定：
i < 100; - 増分：
i++
以下の図で示しています：
for (初期化; 条件判定; 増分) {
// 繰り返す処理
}
JavaScriptの具体例
実際のJavaScriptコードで具体例を見てみましょう。新しいHTMLファイルを作成し、その中で「こんにちは」を100回表示してみます。
<!DOCTYPE html>
<html>
<head>
<title>ループ処理の例</title>
</head>
<body>
<script>
for (let i = 0; i < 100; i++) {
document.write("こんにちは<br>");
}
</script>
</body>
</html>
このように書くことで、「こんにちは」が100回表示されます。
配列とループの組み合わせ
では、もう少し進んで、配列とループを組み合わせて使う方法を見てみましょう。例えば、学生の名前を格納した配列をループで取り出して表示するというものです。
以下のコードを見てください：
const students = ['吉田', '田所', '美々'];
for (let i = 0; i < students.length; i++) {
console.log(students[i]);
}
このコードでは、配列studentsに格納された名前を順番に表示しています。
配列の長さを動的に取得
配列の長さ（要素数）は.lengthプロパティで取得できます。これを使うことで、配列の要素数が動的に変化しても対応できます。
const students = ['吉田', '田所', '美々', '安川'];
for (let i = 0; i < students.length; i++) {
console.log(students[i]);
}
配列に要素を追加したり減らしたりしても、ループは自動的にその長さに合わせて回ります。
応用例：配列のダイナミックなループ
ここでは、配列の中に多くの名前が格納されている場合、それを動的に取り出す方法を見てみましょう。
const students = ['吉田', '田所', '美々', '安川', '新井', '村田'];
for (let i = 0; i < students.length; i++) {
document.write(students[i] + "<br>");
}
ASCIIアートの図解
+-------------------+
| 配列: students |
+-----+-------------+
| 0 | '吉田' |
| 1 | '田所' |
| 2 | '美々' |
| 3 | '安川' |
| 4 | '新井' |
| 5 | '村田' |
+-----+-------------+
この図のように、配列の中身を順番に取り出して表示しています。
終わりに
JavaScriptのループ処理について、基本から応用までを見てきました。ループは非常に強力なツールで、繰り返しの作業を簡単にすることができます。配列と組み合わせることで、さらに柔軟で効率的なプログラムを書けるようになります。
ぜひ、自分で色々なパターンを試してみてください。繰り返し処理に慣れることで、プログラミングの幅がぐっと広がります！
以上、ループ処理に関する基本と応用についてでした。次回もお楽しみに！
タイムスタンプ
1 00:00:01,310 --> 00:00:09,969 [音楽]
2 00:00:20,769 --> 00:00:32,549 ブーバー之一アニメ
3 00:00:28,109 --> 00:00:35,869 理由人間だったらやんなっちゃうなことをコンピューターがやってくれればその代表が
4 00:00:32,549 --> 00:00:42,169 このループ処理繰り返しね
5 00:00:35,869 --> 00:00:47,238 例えばまぁ百回こんにちはって html って書くとしましょう
6 00:00:42,170 --> 00:00:49,650 これやじゃないですかめんどくさくて100今日は後にこのコピペコピックをいっぺん
7 00:00:47,238 --> 00:00:53,009 にしても大変ですよね
8 00:00:49,649 --> 00:00:54,829 それよりはただこういうふうに
9 00:00:53,009 --> 00:01:01,390 javascript で
10 00:00:54,829 --> 00:01:04,859 プログラムを書いてあげるだけそうすると100回こんにちはが出力されます
11 00:01:01,390 --> 00:01:04,859 いいですよね簡単でねー
12 00:01:05,209 --> 00:01:14,929 でまぁちょっと内部の書き方を見ていくと
13 00:01:08,420 --> 00:01:17,620 えっ情景を満たし続ければでこの格好と格好の間これが条件になるんですけども
14 00:01:14,930 --> 00:01:20,230 この条件を満たし続ければで
15 00:01:17,620 --> 00:01:21,890 この格好の中身を
16 00:01:20,230 --> 00:01:24,460 繰り返す
17 00:01:21,890 --> 00:01:24,459 っていうこと
18 00:01:24,680 --> 00:01:33,050 ねっ
19 00:01:26,930 --> 00:01:38,840 愛というカウント用の変数があってこれが変数なんですね
20 00:01:33,049 --> 00:01:40,479 で条件真ん中が条件愛がカウントが100以下になれば
21 00:01:38,840 --> 00:01:45,010 でその次
22 00:01:40,480 --> 00:01:45,950 ループが終わる度に愛のカウントを一つずつアップする i ++
23 00:01:45,010 --> 00:01:50,000 みたいな
24 00:01:45,950 --> 00:01:53,879 まあこれも決まりきった書き方なので覚えちゃっていいかもしれないですけれども
25 00:01:50,000 --> 00:01:55,930 4のだからね各国へ条件があって
26 00:01:53,879 --> 00:01:59,159 増やし続けなさいといっ
27 00:01:55,930 --> 00:01:59,160 いうことができます
28 00:01:59,560 --> 00:02:07,549 そうするとそのまあその条件の間はこの中身が実行されるってわけ
29 00:02:06,030 --> 00:02:10,819 さあ
30 00:02:07,549 --> 00:02:14,449 繰り返し種類のですねデモンストレーションいきましょうか
31 00:02:10,819 --> 00:02:16,919 まずじゃあここ新しいファイルを作りましょうね
32 00:02:14,449 --> 00:02:21,179 インファイルでまず保存で
33 00:02:16,919 --> 00:02:29,049 パーループ繰り返しだからループ取ってーしてみるにしておきましょう
34 00:02:21,180 --> 00:02:32,030 web . html で書きますじゃあこの中にですねま変えていくんですけれども
35 00:02:29,050 --> 00:02:33,600 まあこんにちはと言う
36 00:02:32,030 --> 00:02:34,979 これ
37 00:02:33,599 --> 00:02:39,919 市は
38 00:02:34,979 --> 00:02:44,060 っていうのを100回出力するのは大変だという話ですよね
39 00:02:39,919 --> 00:02:48,259 こういうふうにコピペしたとしても大変です
40 00:02:44,060 --> 00:02:52,110 これを見てみましょうか loop . html を
41 00:02:48,259 --> 00:02:53,919 見て見てこんにちはこんにちはまあでますけど
42 00:02:52,110 --> 00:02:57,220 まあ大変だと
43 00:02:53,919 --> 00:03:00,549 じゃなくてこのスクリプトでですね
44 00:02:57,219 --> 00:03:03,849 変えていくと非常に
45 00:03:00,550 --> 00:03:06,080 楽にできるよってことですね javascript
46 00:03:03,849 --> 00:03:09,680 これ書いてみましょうか
47 00:03:06,080 --> 00:03:14,689 まず何もないですねここ
48 00:03:09,680 --> 00:03:18,920 document .ライト今日は9面と javascript で書くには
49 00:03:14,689 --> 00:03:22,419 投球面とととらいと
50 00:03:18,919 --> 00:03:24,649 8今日は
51 00:03:22,419 --> 00:03:27,559 英知は
52 00:03:24,650 --> 00:03:30,560 国会てあげると
53 00:03:27,560 --> 00:03:37,729 1回赤穂でてくれますねドキュメントにま
54 00:03:30,560 --> 00:03:40,580 ライトしているわけですこれを繰り返し処理で書いてみますねまずどうするかと言い
55 00:03:37,729 --> 00:03:44,829 ますと4部を
56 00:03:40,580 --> 00:03:48,770 i エコール0場所吉ですよね
57 00:03:44,830 --> 00:03:52,780 最初はゼロだよでセミコロン出会いが
58 00:03:48,770 --> 00:03:56,230 100以下までは
59 00:03:52,780 --> 00:03:59,110 愛を++0たし
60 00:03:56,229 --> 00:04:04,909 021をたし続けなさい
61 00:03:59,110 --> 00:04:06,360 でその中身は中括弧の中に書きなさいと
62 00:04:04,909 --> 00:04:09,419 いうわけ
63 00:04:06,360 --> 00:04:17,100 で今これ
64 00:04:09,419 --> 00:04:19,180 リロードしてももちろん1回しかなんですよねこの4分のこの中括弧の中にこれをかか
65 00:04:17,100 --> 00:04:25,949 ない解けません
66 00:04:19,180 --> 00:04:27,910 じゃあカット&ペーストでここの中にいれますするとどうなるかというと
67 00:04:25,949 --> 00:04:30,550 百花いっ
68 00:04:27,910 --> 00:04:34,060 出力してくれましたねぇ
69 00:04:30,550 --> 00:04:40,079 すごくラクじゃないですかコンピューターらしいですよね
70 00:04:34,060 --> 00:04:40,079 コンピューターは汗をかかないというのはこういうことですね
71 00:04:41,079 --> 00:04:51,938 じゃあ例えばこの配列さっき
72 00:04:44,829 --> 00:04:53,629 ね作って前に作ったこの配列データをループで取り出すと今後に言いますね吉田た所峰
73 00:04:51,939 --> 00:04:57,250 伊藤安川
74 00:04:53,629 --> 00:04:57,250 ガス給電するという
75 00:04:57,910 --> 00:05:05,640 配列ねに入ってますはいです
76 00:05:01,000 --> 00:05:05,639 箱に入っていますでこれを取り出すには
77 00:05:06,620 --> 00:05:17,139 配列の中身の数を繰り返すのでまぁ
78 00:05:11,408 --> 00:05:18,990 江衣花ってほんとはね書いてもいいかもしれないんだけれどもそれだと増えたときに
79 00:05:17,139 --> 00:05:25,530 なかなか出来ないでしょ
80 00:05:18,990 --> 00:05:28,848 6人目7人目って増えるかもしれないからその時にここ67とかた書き換えるのはまあ
81 00:05:25,529 --> 00:05:34,888 どうも現実的じゃないし面倒くさい
82 00:05:28,848 --> 00:05:37,449 ねということでこのスチューデンツのドンとレングス
83 00:05:34,889 --> 00:05:41,978 って書いてあげると
84 00:05:37,449 --> 00:05:44,900 connection to rent .レングスって書いてあげるとこの配列の
85 00:05:41,978 --> 00:05:46,918 中身の数を介している
86 00:05:44,899 --> 00:05:51,079 今だった後って書いている
87 00:05:46,918 --> 00:05:52,750 で増やすとその分で書いて例えば
88 00:05:51,079 --> 00:05:54,408 6しちっ
89 00:05:52,750 --> 00:05:58,449 2人増やすと
90 00:05:54,408 --> 00:06:02,800 スチューデンツ.レングスってやるとなんだって帰っている
91 00:05:58,449 --> 00:06:08,920 まあこういうふうにへダイナミックな音
92 00:06:02,800 --> 00:06:11,930 固定されてないんでねダイナミックに結果が入ってくる子のかけ方が
93 00:06:08,920 --> 00:06:17,900 柔軟でいいですよね
94 00:06:11,930 --> 00:06:21,439 なので4 i0まあ最初0が設定しておいてえっと student .レングスまで
95 00:06:17,899 --> 00:06:22,888 i ぷらぷらその人数分まで
96 00:06:21,439 --> 00:06:26,180 繰り返せよと
97 00:06:22,889 --> 00:06:26,180 いいじゃないですかね
98 00:06:26,490 --> 00:06:29,910 で
99 00:06:27,420 --> 00:06:33,620 その中身を取り出すときは
100 00:06:29,910 --> 00:06:37,070 これ変数 i に入ってますので
101 00:06:33,620 --> 00:06:41,360 エートスというレンズはいこれを順番が入ってるね
102 00:06:37,069 --> 00:06:43,620 愛は最初はゼロだけれどもあの繰り返されることに
103 00:06:41,360 --> 00:06:50,470 カウントがアップしていくんで
104 00:06:43,620 --> 00:06:51,990 で取り出され最初のカウントはゼロなので吉田が取り出されます
105 00:06:50,470 --> 00:06:55,410 で
106 00:06:51,990 --> 00:06:56,750 2回目に回るときはこの幌 i ぷらぷらで
107 00:06:55,410 --> 00:07:02,300 一つ
108 00:06:56,750 --> 00:07:05,670 上がってるしのこの変数 i が1ねそうするとステーデンツ
109 00:07:02,300 --> 00:07:12,180 この it の数で1位なんだよね
110 00:07:05,670 --> 00:07:17,249 だからこのた所が取り出されるって次に回っていくと話題ぷらぷらで
111 00:07:12,180 --> 00:07:20,459 8実になってるからミニが取り出されすっていうレンズに行ってやるとね
112 00:07:17,249 --> 00:07:22,189 そうこうやってループをつくっていくと
113 00:07:20,459 --> 00:07:28,220 a まあ楽チン
114 00:07:22,189 --> 00:07:32,269 銃弾にえっとその中身を取っていくことができてデータを参照することができるまあ
115 00:07:28,220 --> 00:07:38,500 典型的なパターンという感じでしょうか
116 00:07:32,269 --> 00:07:38,500 ループとても便利なのでちょっといろいろ自分でもで試してみてください
117 00:07:38,848 --> 00:07:48,000 じゃああーえっとこれでね4部
118 00:07:42,178 --> 00:07:52,439 基本的なものは分かっていただいたと思うんですけれども配列と組み合わせてっ
119 00:07:48,000 --> 00:07:54,920 使うことが多いですね配列をどう
120 00:07:52,439 --> 00:07:57,569 繰り返し処理でとってきて
121 00:07:54,920 --> 00:08:01,720 で出力すると
122 00:07:57,569 --> 00:08:06,710 for 文で出力する配列を4部に出力するっていうのを
123 00:08:01,720 --> 00:08:11,470 ちょっとやってみましょうねこれが一番使うんじゃないですかね今上野は
124 00:08:06,709 --> 00:08:11,469 えっとを選択してコメントアウトしておきましょう
125 00:08:11,610 --> 00:08:17,879 いいでしょ何もなくなりましたねー
126 00:08:14,620 --> 00:08:22,168 ではできますねまずす宮殿です
127 00:08:17,879 --> 00:08:25,560 という変数を作るすっていうレンズ
128 00:08:22,168 --> 00:08:30,329 捨てて釣って変数の中
129 00:08:25,560 --> 00:08:35,899 編そうですねあの4分で分解していきましょループさせていきましょうか
130 00:08:30,329 --> 00:08:37,689 でこれはすとぅー dents を定義していきます
131 00:08:35,899 --> 00:08:41,029 田所
132 00:08:37,690 --> 00:08:43,670 3人ぐらいでいいですかねねぇ
133 00:08:41,029 --> 00:08:45,939 sq でドゥ
134 00:08:43,669 --> 00:08:48,539 今配列が出来ました
135 00:08:45,940 --> 00:08:49,900 これはですねー
136 00:08:48,539 --> 00:08:55,099 芳文で
137 00:08:49,899 --> 00:08:58,129 使うかなと思いますデフォーの i =0
138 00:08:55,100 --> 00:09:01,379 最初はゼロで出会いは
139 00:08:58,129 --> 00:09:02,779 者3人まで繰り返すねさん
140 00:09:01,379 --> 00:09:06,200 で
141 00:09:02,779 --> 00:09:08,559 セミコロンで i ++
142 00:09:06,200 --> 00:09:14,120 と書きます
143 00:09:08,559 --> 00:09:17,099 ってですねこれで3回繰り返すことになったと思うんですね
144 00:09:14,120 --> 00:09:22,850 で document .ラインと
145 00:09:17,100 --> 00:09:25,459 東ドットラインとのちょっとですねじゃあこれは
146 00:09:22,850 --> 00:09:30,800 8 hi 問えると
147 00:09:25,458 --> 00:09:35,649 これがはいがハイ3回繰り返しますよね
148 00:09:30,799 --> 00:09:38,079 ok 動いてそうですじゃあこの中に
149 00:09:35,649 --> 00:09:39,830 ス宮殿です
150 00:09:38,080 --> 00:09:42,639 つって言う
151 00:09:39,830 --> 00:09:42,639 この配列
152 00:09:43,000 --> 00:09:50,980 配列が入っている変数を使います
153 00:09:46,539 --> 00:09:55,089 こうするとじゃあ保存してそうするとあれ
154 00:09:50,980 --> 00:09:57,370 吉田た所ミニ吉田たところ皆全部
155 00:09:55,090 --> 00:09:59,810 3回ずつね
156 00:09:57,370 --> 00:10:02,960 3回出力されてしまいました
157 00:09:59,809 --> 00:10:08,000 これだといけないですよねじゃあ
158 00:10:02,960 --> 00:10:10,129 とここの配列前の音ですね配列をやりましたけれども
159 00:10:08,000 --> 00:10:16,279 0番目
160 00:10:10,129 --> 00:10:19,549 これ012でしょで0番目を取り出すと
161 00:10:16,279 --> 00:10:20,899 そうすると吉田が3回で繰り返されます
162 00:10:19,549 --> 00:10:25,250 3階
163 00:10:20,899 --> 00:10:30,330 このゼロが取り出されるわけですね
164 00:10:25,250 --> 00:10:33,549 でも今回そうじゃなくてこの配列の
165 00:10:30,330 --> 00:10:37,690 012と取り出したいわけなんですよ
166 00:10:33,549 --> 00:10:41,500 そうなんですでここでどうすればいいか
167 00:10:37,690 --> 00:10:48,550 まずじゃあこの it やですねこれ i =0
168 00:10:41,500 --> 00:10:50,208 で山まで y ++になってますけれどもこのループするたり3回ループするように
169 00:10:48,549 --> 00:10:54,829 なってますが
170 00:10:50,208 --> 00:11:00,169 この愛の数というのは0123って変わっていくんですね
171 00:10:54,830 --> 00:11:01,360 ちょっと見てみましょうかこの州トゥーレンズゼロというところ1回決して
172 00:11:00,169 --> 00:11:05,919 io
173 00:11:01,360 --> 00:11:09,139 出力してみましょう変数 i すると
174 00:11:05,919 --> 00:11:13,349 012になってるじゃないですか
175 00:11:09,139 --> 00:11:17,909 これはループして012が取り出されているわけです
176 00:11:13,350 --> 00:11:20,089 なので8を思い出してください次はまだネスティデンツ
177 00:11:17,909 --> 00:11:27,948 すっていうレンツの
178 00:11:20,089 --> 00:11:33,139 最初の取るには0番目でしょ次は1番目2番目という風になっていくのでループの中で
179 00:11:27,948 --> 00:11:39,449 はここには変する愛を指定してあげると言っ影は0
180 00:11:33,139 --> 00:11:45,629 2回目は13回目はにここが変わってくれるわけですよねエンスーなんで
181 00:11:39,450 --> 00:11:46,940 じゃあこれで見てみるとを吉田たところ見気になっているようです
182 00:11:45,629 --> 00:11:52,049 はい
183 00:11:46,940 --> 00:11:55,860 ねこういう風にしてえっと配列から
184 00:11:52,049 --> 00:12:00,859 一つの要素を取り出したけどね
185 00:11:55,860 --> 00:12:03,278 で変数を使ってループの中で使う場合にはこれは決まりきったような
186 00:12:00,860 --> 00:12:07,980 使い方なんで一つ
187 00:12:03,278 --> 00:12:07,980 覚えておくと後で応用が効くと思います
188 00:12:08,600 --> 00:12:14,889 じゃあですねえっとまぁこれでうまくいったんですけれども
189 00:12:12,980 --> 00:12:17,139 もう少しやってみましょうか
190 00:12:14,889 --> 00:12:20,629 これ例えば
191 00:12:17,139 --> 00:12:21,960 配列の数が多くなるね
192 00:12:20,629 --> 00:12:24,269 ここは
193 00:12:21,960 --> 00:12:27,480 じゃあ員ととかねぇ
194 00:12:24,269 --> 00:12:30,120 いうふうにしておきますと今どうなるでしょう
195 00:12:27,480 --> 00:12:34,050 これ見てみるとお
196 00:12:30,120 --> 00:12:39,509 よしあったところ見るここ増やしたのに出てこないですよね
197 00:12:34,049 --> 00:12:44,539 そうですこれはなぜかというとこれをさんで書いてしまっているから
198 00:12:39,509 --> 00:12:49,269 ハードコードでカカともバシッと決めて買えちゃう
199 00:12:44,539 --> 00:12:56,278 コードハードコードと言いますけれどもになっているからですね
200 00:12:49,269 --> 00:13:00,929 もう少し柔軟にここの数をとってきてその分繰り返したいなと思いますね
201 00:12:56,278 --> 00:13:04,799 今は4つなんでここよっつって書いてもいいですけどどんどん増えると
202 00:13:00,929 --> 00:13:06,278 またここも変えなきゃいけないってまあエラーの原因にも同じ
203 00:13:04,799 --> 00:13:08,759 面倒ですね
204 00:13:06,278 --> 00:13:12,649 なのでどうするかというと
205 00:13:08,759 --> 00:13:12,649 この配列の数
206 00:13:12,818 --> 00:13:20,479 返してくれる女ソフトがあるんですねここに書けばいいんですそれは何かと言うと
207 00:13:18,089 --> 00:13:24,030 student つつ
208 00:13:20,480 --> 00:13:26,480 ドット連うすってやると
209 00:13:24,029 --> 00:13:28,259 ここは数が
210 00:13:26,480 --> 00:13:31,739 帰ってくるんですね
211 00:13:28,259 --> 00:13:35,339 まぁちょっとこのスチューデント.レングスだけをですね
212 00:13:31,739 --> 00:13:37,399 まず見てみたいんですけれどもちょっとここ
213 00:13:35,339 --> 00:13:41,620 コメンターとして
214 00:13:37,399 --> 00:13:43,569 アラートで簡単に見てみましょうか府中レンズ.
215 00:13:41,620 --> 00:13:45,090 レンス
216 00:13:43,570 --> 00:13:48,110 書いて
217 00:13:45,090 --> 00:13:50,740 こそホール4て帰ってるでしょ
218 00:13:48,110 --> 00:13:54,590 そうなんですでこれは
219 00:13:50,740 --> 00:13:58,089 増えたり減ったりすると例えばこうして
220 00:13:54,590 --> 00:14:02,920 でもう一回リロードするとこのニッソー
221 00:13:58,089 --> 00:14:08,209 だからスチューデンツ.レングスにしておくとこの配列の大きさね
222 00:14:02,919 --> 00:14:15,769 数を返してくれるんで非常にまぁ使いどころがあるんですね
223 00:14:08,208 --> 00:14:20,949 でどうするかっていうとさっきのここ4の中でさんとかって書いちゃうとこうハード
224 00:14:15,769 --> 00:14:23,639 ポーズじゃなくて通電ず.レングスにしてあげる
225 00:14:20,950 --> 00:14:23,640 そうすると
226 00:14:23,820 --> 00:14:33,540 吉田たところミート入ってましたよねこれでだ配列を取るを足していっても問題なく
227 00:14:31,379 --> 00:14:35,328 動くようなコードになりました
228 00:14:33,539 --> 00:14:40,719 素晴らしい
229 00:14:35,328 --> 00:14:40,719 はいでは繰り返し処理のでもは以上になります