この動画はメンバー限定動画です

全ての講座が
月額990円で学び放題

講座の情報を見る

TypeScript入門1から100までを表示しよう – for構文

記事を共有:

  • X
  • Pocket
  • クリップボードにコピー

次のようなプログラムを作成してみましょう。

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までの数字がずらっと表示されました。

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ずつ加えられながら何度も繰り返し行われるため、数字が次々に表示されるというわけです。

前のレッスン 次のレッスン