TypeScript while文

概要: このチュートリアルでは、TypeScriptのwhile文を使用してループを作成する方法を学びます。

TypeScript while文入門

while文を使用すると、条件がtrueである限りコードブロックを実行するループを作成できます。

TypeScriptのwhile文の構文を以下に示します。

while(condition) {
    // do something
}Code language: TypeScript (typescript)

while文は、各ループの反復の前に条件を評価します。

conditionがtrueと評価された場合、while文は中括弧（{}）で囲まれた本体内のコードを実行します。

conditionがfalseと評価された場合、実行はwhile文の後の文に進みます。

while文は本体が実行される前にconditionを評価するため、whileループは事前テストループとも呼ばれます。

別の条件に基づいてループを途中で中断するには、if文とbreak文を使用します。

while(condition) {
    // do something
    // ...

    if(anotherCondition) 
        break;
}Code language: TypeScript (typescript)

ループを複数回実行する場合は、TypeScriptのfor文を使用する必要があります。

TypeScript while文の例

TypeScriptのwhile文を使用する例をいくつか見てみましょう。

TypeScript while：簡単な例

次の例では、while文を使用して、数値が5未満である限りコンソールに出力します。

let counter = 0;

while (counter < 5) {
    console.log(counter);
    counter++;
}
Code language: TypeScript (typescript)

出力

0
1
2
3
4
Code language: TypeScript (typescript)

仕組み

• まず、counter変数を宣言し、0に初期化します。
• 次に、ループに入る前に、counterが5未満かどうかを確認します。そうであれば、counterをコンソールに出力し、1ずつ増やします。
• 最後に、counterが5未満である限り、上記の手順を繰り返します。

TypeScript whileループの実用的な例

HTMLドキュメントに次のリスト要素があるとします。

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
Code language: TypeScript (typescript)

次の例は、while文を使用して、<ul>要素のすべての<li>要素を削除する方法を示しています。

let list = document.querySelector('#list');

while (list.firstChild) {
    list.removeChild(list.firstChild);
}
Code language: TypeScript (typescript)

仕組み

• まず、querySelector()メソッドを使用して、IDで<ul>要素を選択します。
• 次に、listのfirstChildが使用可能かどうかを確認し、削除します。最初のチャイルドノードが削除されると、次のチャイルドノードは自動的に最初のチャイルドノードとして昇格されます。したがって、while文はlist要素のすべてのチャイルドノードを削除します。

まとめ

• TypeScriptのwhile文を使用して、条件がtrueである限り実行されるループを作成します。