【TypeScript】ループと条件分岐の完全ガイド10選

はじめに

Web開発の世界で、TypeScriptは急速に注目を浴びてきました。

JavaScriptの上位互換として知られるTypeScriptは、静的型付けやクラスベースのオブジェクト指向など、強力な機能を持ちながらも、JavaScriptとのシームレスな連携を持っています。

この記事では、TypeScriptでのプログラム制御の基本であるループと条件分岐に焦点を当て、初心者向けにわかりやすく、サンプルコードを交えて徹底的に解説します。

TypeScriptのループと条件分岐のメカニズムを通じて、プログラムの制御構造を網羅的に理解する手助けとなれば幸いです。

●TypeScriptとは

TypeScriptは、Microsoftが開発したオープンソースのプログラム言語であり、JavaScriptのスーパーセットとして位置づけられています。

これにより、JavaScriptコードはそのままTypeScriptとして動作することができます。

しかし、TypeScriptには型システムやインターフェイスといった、JavaScriptには存在しない多くの機能が追加されています。

○TypeScriptの特徴

❶静的型付け

TypeScriptは変数や関数の引数、戻り値などに型を指定することができます。

これにより、コンパイル時に型の誤りを発見することが可能となり、バグの発生を抑制することができます。

❷強力なオブジェクト指向

TypeScriptはクラス、インターフェイス、ジェネリクスなどのオブジェクト指向プログラミングの機能をフルにサポートしています。

これにより、大規模なアプリケーションの開発や、再利用性の高いコードの構築が容易になります。

❸豊富なツールのサポート

TypeScriptはVisual Studio CodeやWebStormといった多くのIDEでネイティブサポートされています。

これにより、リアルタイムのエラーチェックや自動補完、リファクタリングといった開発効率を大幅に向上させるツールを使用することができます。

●TypeScriptのループの基本

プログラムの中で同じ操作を何度も繰り返す必要がある場合、ループを使用します。

TypeScriptでは、JavaScriptと同じく、for文、while文、do-while文を使用してループを実現することができます。

それでは、それぞれのループの使い方を解説していきます。

○for文の使い方

for文は、指定された回数だけ処理を繰り返す際に使用されます。

基本的な構文は次のとおりです。

for (初期化式; 継続条件; 更新式) {
    // ループ内での処理
}

□サンプルコード1：for文での繰り返し処理

for文を使用して、1から10までの数字をコンソールに出力するサンプルコードを紹介します。

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

このコードでは、iという変数を1からスタートさせ、iが10以下である限りループを実行します。

ループの各反復ごとに、iの値が1増加します。

この例では、1から10までの数字が順番にコンソールに出力されます。

実行すると、次のような出力が得られます。

1
2
3
4
5
6
7
8
9
10

○while文の使い方

while文は、指定された条件が真である間、処理を繰り返します。

基本的な構文は次のとおりです。

while (条件) {
    // ループ内での処理
}

□サンプルコード2：while文での繰り返し処理

while文を使用して、1から10までの数字をコンソールに出力するサンプルコードを紹介します。

let j = 1;
while (j <= 10) {
    console.log(j);
    j++;
}

このコードでは、jという変数を1からスタートさせ、jが10以下である限りループを実行します。

ループの各反復ごとに、jの値が1増加します。

この例では、1から10までの数字が順番にコンソールに出力されます。

実行すると、次のような出力が得られます。

1
2
3
4
5
6
7
8
9
10

○do-while文の使い方

do-while文は、処理を一度実行した後、指定された条件が真である間、処理を繰り返します。

基本的な構文は次のとおりです。

do {
    // ループ内での処理
} while (条件);

□サンプルコード3：do-while文での繰り返し処理

do-while文を使用して、1から10までの数字をコンソールに出力するサンプルコードを紹介します。

let k = 1;
do {
    console.log(k);
    k++;
} while (k <= 10);

このコードでは、kという変数を1からスタートさせ、kが10以下である限りループを実行します。

ループの各反復ごとに、kの値が1増加します。

この例では、1から10までの数字が順番にコンソールに出力されます。

実行すると、次のような出力が得られます。

1
2
3
4
5
6
7
8
9
10

●TypeScriptの条件分岐の基本

条件分岐は、特定の条件に基づいて、異なる処理を実行するための機構です。

TypeScriptでは、JavaScriptと同じく、if文、switch文を使用して条件分岐を実現することができます。

それでは、それぞれの条件分岐の使い方を解説していきます。

○if文の使い

if文は、指定された条件が真である場合に、特定の処理を実行するために使用されます。

基本的な構文は次のとおりです。

if (条件) {
    // 条件が真の場合の処理
} else if (他の条件) {
    // 他の条件が真の場合の処理
} else {
    // それ以外の場合の処理
}

□サンプルコード4：if文での条件分岐

if文を使用して、変数scoreの値に応じて、評価をコンソールに出力するサンプルコードを紹介します。

let score = 85;

if (score >= 90) {
    console.log("Excellent");
} else if (score >= 70) {
    console.log("Good");
} else {
    console.log("Needs Improvement");
}

このコードでは、scoreの値が90以上の場合は”Excellent”、70以上の場合は”Good”、それ以外の場合は”Needs Improvement”とコンソールに出力されます。

実行すると、次のような出力が得られます。

Good

○switch文の使い方

switch文は、変数の値に応じて、複数の処理の中から一つを選択して実行するための構文です。

基本的な構文は次のとおりです。

switch (変数) {
    case 値1:
        // 値1の場合の処理
        break;
    case 値2:
        // 値2の場合の処理
        break;
    default:
        // それ以外の場合の処理
}

□サンプルコード5：switch文での条件分岐

switch文を使用して、変数dayの値に応じて、曜日をコンソールに出力するサンプルコードを紹介します。

let day = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    case 4:
        console.log("Thursday");
        break;
    case 5:
        console.log("Friday");
        break;
    case 6:
        console.log("Saturday");
        break;
    case 7:
        console.log("Sunday");
        break;
    default:
        console.log("Invalid Day");
}

このコードでは、dayの値に応じて、該当する曜日がコンソールに出力されます。

実行すると、次のような出力が得られます。

Wednesday

●TypeScriptのループの応用

TypeScriptでのループ処理は、単純な繰り返しの実行から、データの集合に対する高度な操作まで、多岐にわたるシチュエーションで活用されます。

特に、オブジェクトや配列を効率的に取り扱うためのループの方法としてfor...ofおよびfor...inがあります。

これらの構文は、JavaScriptのものをそのまま利用する形となりますが、TypeScriptではより型安全に扱うことができます。

○for…ofとfor…inの使い方

for...ofループは、配列や文字列、Set、MapなどのIterableオブジェクトの要素を一つずつ取り出して処理を行うためのものです。

一方、for...inループは、オブジェクトのプロパティ名（キー）を取り出して処理を行います。

□サンプルコード6：オブジェクトや配列のループ

まず、for...ofを使った配列のループ処理のサンプルを見てみましょう。

let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
    console.log(fruit);
}

このコードでは、fruitsという名の配列を使って、その各要素を一つずつ取り出してconsole.logで出力しています。

この例では、”apple”, “banana”, “cherry”という3つのフルーツの名前が順番に出力されます。

次に、オブジェクトのプロパティを取り出すfor...inの使用例を見てみましょう。

let car = {
    brand: "Toyota",
    model: "Camry",
    year: 2020
};
for (let key in car) {
    console.log(`${key}: ${car[key]}`);
}

このコードでは、carという名のオブジェクトのプロパティ名をkeyという変数に一つずつ取り出し、そのキーと値を組み合わせてconsole.logで出力しています。

この例では、”brand: Toyota”, “model: Camry”, “year: 2020″という3つのプロパティとその値が順番に出力されます。

●条件分岐の応用例

条件分岐の基本を学んだ後、もう一歩進んで、条件分岐の応用例を理解することで、より複雑なロジックのコーディングに対応できるようになります。

ここでは、TypeScriptで頻繁に使用される三項演算子について詳しく解説します。

○三項演算子の使い方

三項演算子は、簡潔な条件分岐を行いたい場合に利用することができます。

構文は次の通りです。

条件式 ? 真の場合の処理 : 偽の場合の処理

このコードでは、条件式を評価し、その結果が真の場合は真の場合の処理が実行され、偽の場合は偽の場合の処理が実行されます。

この例では、短いコードで条件分岐を実装する方法を示しています。

□サンプルコード7：三項演算子での簡潔な条件分岐

三項演算子を用いたTypeScriptのサンプルコードを紹介します。

let age: number = 20;
let result: string = age >= 20 ? '成人です' : '未成年です';

console.log(result);

このコードでは、年齢が20歳以上かどうかを判定し、20歳以上なら”成人です”という文字列を、20歳未満なら”未成年です”という文字列をresult変数に代入しています。

その後、その結果をconsole.logで出力しています。

このように実行すると、出力結果として「成人です」と表示されます。

なぜなら、age変数の値が20で、条件式age >= 20が真であるため、「成人です」がresult変数に代入されたからです。

●ループと条件分岐の組み合わせ

TypeScriptを使用してプログラムを書く際、単純なループや条件分岐だけでなく、ループと条件分岐の組み合わせが必要になる場面が多々あります。

これにより、より複雑なロジックを簡潔に表現することができます。

○ループ内の条件分岐

ループ内で条件分岐を行うことで、特定の条件を満たす要素にだけ特定の処理を適用するといったことができます。

例えば、配列の要素の中で偶数だけを抜き出して処理を行うという場面を想像してみてください。

そのような場面でループと条件分岐の組み合わせが役立ちます。

□サンプルコード8：for文とif文の組み合わせ

このコードでは、数値の配列を用意し、その中の偶数だけを別の配列にコピーする処理を行っています。

この例ではfor文を使って配列の各要素を順番に取り出し、if文を使ってその要素が偶数かどうかを判定しています。

// 数値の配列を用意
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 偶数を格納するための新しい配列
let evenNumbers: number[] = [];

// for文で配列の要素を1つずつ取り出し
for (let i = 0; i < numbers.length; i++) {
    // if文で偶数かどうかを判定
    if (numbers[i] % 2 === 0) {
        evenNumbers.push(numbers[i]);
    }
}

// 偶数のみが格納されたevenNumbersを出力
console.log(evenNumbers);  // 出力例: [2, 4, 6, 8, 10]

このサンプルコードを実行すると、偶数のみが格納された新しい配列が得られます。

具体的には、[2, 4, 6, 8, 10]という配列が出力される結果となります。

ループと条件分岐を組み合わせることで、効率的に特定の条件を満たす要素だけを取り出すことができました。

●注意点と対処法

TypeScriptでループや条件分岐を使用する際には、いくつかの注意点があります。

これらの注意点を理解し、適切な対処法を取り入れることで、バグのリスクを減少させることができます。

○ループの無限回の問題とその対処

TypeScriptにおけるループ処理、特にwhile文やdo-while文を使用する際には、条件の設定に注意が必要です。

誤った条件を設定すると、ループが永遠に続く「無限ループ」となってしまう恐れがあります。

// このコードでは、条件が常にtrueであるため、無限ループとなってしまいます。
while (true) {
    console.log("これは無限ループです");
}

この例では、while文の条件がtrueのため、ループが終わることなく永遠に続きます。

ループを使用する際には、条件式を正しく設定し、ループが正常に終了することを確認することが重要です。

また、開発時にはループの回数や終了条件を確認するためのデバッグ出力を行うと良いでしょう。

○条件分岐の落とし穴

条件分岐においても、注意すべきポイントが存在します。

特に、if文やswitch文を使用する際には、条件の評価順序や、breakの使用を忘れることがよくあるミスとなっています。

let value = 10;

// このコードでは、valueが10であるにも関わらず、"Valueは10以上です"の出力が行われません。
if (value == 5) {
    console.log("Valueは5です");
} else if (value == 10) {
    console.log("Valueは10です");
} else {
    console.log("Valueは10以上です");
}

この例では、valueの値が10であるため、”Valueは10です”という出力が期待されます。

しかし、条件文の評価順序や書き方によっては、意図しない結果となる場合があります。

条件分岐を記述する際には、各条件を明確にし、重複や矛盾がないように注意することが重要です。

また、switch文を使用する場合は、各caseの終了時にbreakを忘れないようにしましょう。

●TypeScriptのループと条件分岐のカスタマイズ

近年のプログラミングでは、標準のループや条件分岐だけでなく、特定の要件に合わせてカスタマイズされたループや条件分岐を使用することが増えてきました。

TypeScriptも例外ではありません。

TypeScriptにおいて、どのようにループや条件分岐をカスタマイズして使用するのかを解説します。

○カスタムループの作成方法

通常のforやwhile文では対応できない特殊な繰り返しを行いたい場合、独自のループを作成することが考えられます。

例えば、特定の条件を満たすまでループを続けたい、あるいは特定の回数だけループをスキップしたい、といった場合です。

□サンプルコード9：カスタムループの例

このコードでは、独自のループ関数customLoopを作成しています。

この例では、指定された回数だけループを実行し、その都度コールバック関数を実行しています。

function customLoop(times: number, callback: (index: number) => void): void {
    for(let i = 0; i < times; i++){
        if(i % 2 === 0){ // この条件を満たすときのみコールバックを実行
            callback(i);
        }
    }
}

// 使用例
customLoop(10, (index) => {
    console.log(`現在${index}回目のループです。`);
});

上記のコードは、指定した回数だけループを実行し、その中で偶数回のループの時だけコールバック関数を実行します。

このようにカスタムループを使用することで、より柔軟な繰り返し処理を実現することができます。

上記のコードを実行すると、次のような結果が得られることでしょう。

現在0回目のループです。
現在2回目のループです。
現在4回目のループです。
現在6回目のループです。
現在8回目のループです。

○カスタム条件の作成方法

TypeScriptでは、通常のifやswitch文に加え、特定の条件を満たす関数を用意することでカスタム条件の実装が可能です。

これにより、コードの再利用性が向上し、複雑な条件判定をクリーンに実装することができます。

□サンプルコード10：カスタム条件の例

このコードでは、独自の条件関数isValidを使って、数値が特定の範囲内にあるかを判定しています。

この例では、数値が10から20の間にあるかどうかを判定しています。

function isValid(value: number): boolean {
    return value >= 10 && value <= 20;
}

const number = 15;

if(isValid(number)){
    console.log(`${number}は指定された範囲内にあります。`);
} else {
    console.log(`${number}は指定された範囲外です。`);
}

上記のコードを実行すると、”15は指定された範囲内にあります。”というメッセージが表示されることでしょう。

カスタム条件を使用することで、コードの可読性が向上し、再利用も容易になります。

まとめ

TypeScriptを学ぶ過程で、ループと条件分岐はコードの基盤を形成する要素と言えます。

この記事を通じて、TypeScriptのループと条件分岐の様々な側面を深く理解することができたことでしょう。

この記事で提供された情報やサンプルコードを参考に、TypeScriptでのプログラミング能力を高め、より高度で効率的なコードの開発を進めてください。

今後もTypeScriptの様々な機能やテクニックを学び、スキルアップしていくことを強く推奨します。