この動画はメンバー限定動画です
全ての講座が
月額990円で学び放題
次のようなプログラムを作成してみましょう。
1から100まで画面に表示したい
この時、次のように手で全部書くことはもちろんできます。
console.log(1);
console.log(2);
console.log(3);
...
しかし、これでは非常に手間がかかるので、プログラムに代わりにやらせましょう。このような、連続した作業を何度も行うことを「繰り返し」の処理などと呼び、TypeScriptではfor構文を使うことができます。次のように入力しましょう。
for (let i: number=1; i<=100; i++) {
console.log(i);
}
すると、1から100までの数字がずらっと表示されました。
![](https://tomosta.jp/wp-content/uploads/2024/05/image-69-1024x576.png)
for構文の書式
for構文は、次のような書式で作ることができます。
for (初期化作業; 繰り返す条件; 更新作業) {
繰り返したい処理
}
かなり特殊な構文なので、1つずつ詳しく見ていきましょう。まず、forの直後のカッコにはセミコロンで区切って、次の3つの要素を一気に指定します。
- 初期化作業… 繰り返す条件などで使う変数を初期化します
- 繰り返す条件… 処理を繰り返し行うための条件を指定します
- 更新作業… 繰り返し条件を満たすための更新処理をします
例えば今回の場合、「繰り返す条件」としては「100回」という条件になるのですが、残念ながら単純に「100回」という条件をしている事ができません。そこで、次のように言い換えました。
iという変数に1を代入し、それが100になるまで1ずつ加えながら繰り返す
これによって、100回繰り返すことができるようになります。この時、初期化作業、更新作業と繰り返す条件は次のようになります。
- 初期化作業… iという変数に1を代入する
- 繰り返す条件… iが100以下の間
- 更新作業… 1を加える
これを、for構文の中に含めていきます。「iに1を代入する」のは次のようになります。
for (let i: number = 1;
for構文の中に、変数を宣言する「let」を入れ込んでしまっていますが、このような書き方もできます。続いて、条件は「iが100以下」となるので比較演算子を使って、次のようになります。
for (let i: number = 1; i <= 100;
そして、更新作業は「1を加える」となりますが、これは少し難しいのでこの後詳しく紹介しましょう。ひとまず、次のように記述します。
for (let i: number = 1; i<= 100; i++) {
後は、ここで準備した「i」という変数を画面に表示すると、iが1ずつ加えられながら何度も繰り返し行われるため、数字が次々に表示されるというわけです。