【TypeScript】booleanを完全ガイド！5つのサンプルコード

TypeScriptのbooleanを学ぶ人のイラスト TypeScript
2023.12.21
この記事は約20分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

TypeScriptはJavaScriptに静的型チェックの特性を付加したスーパーセットとして人気を集めています。

その中でも、boolean型は特に基本的なデータ型の1つとして、さまざまなプログラムやアルゴリズムの中心に位置しています。

この記事では、TypeScriptでのboolean型の基本的な使い方から応用例、注意点、カスタマイズ方法まで徹底的に解説します。

5つのサンプルコードを交えながら、初心者の方でもboolean型の使い方をしっかりと理解して、日常のコーディングに生かせるようになることを目指します。

●TypeScriptのbooleanとは

boolean型は、trueまたはfalseの2つの値のみを持つデータ型です。

これは、条件を評価したり、状態を示す際に非常に役立ちます。

例えば、ユーザーがログインしているかどうか、チェックボックスが選択されているかどうかなどの状態を表現するのに最適です。

○boolean型の基本

TypeScriptでのboolean型の変数の宣言は、次のように行います。

// boolean型の変数宣言
let isLoggedin: boolean;

このコードでは、isLoggedinという名前の変数をboolean型で宣言しています。

この変数はtrueまたはfalseのいずれかの値を持つことができます。

●booleanの使い方

TypeScriptの中で、boolean型は最も基本的であり、かつ強力な型の一つです。

boolean型は、trueまたはfalseのいずれかの値を取ることができる変数の型を指します。

ここでは、TypeScriptでのbooleanの使い方とその特性について、初心者にもわかりやすく説明します。

○サンプルコード1：基本的なbooleanの使い方

まず、最も基本的なbooleanの使用方法から見ていきましょう。

TypeScriptでのboolean型の変数の宣言と初期化の方法を紹介します。

// boolean型の変数を宣言と同時に初期化
let isActive: boolean = true;

// 値の変更
isActive = false;

このコードでは、isActiveという名前のboolean型の変数を宣言し、初めにtrueを代入しています。

その後、値をfalseに変更しています。

このように、boolean型の変数はtrueまたはfalseのいずれかの値を取ることができます。

この2つの値を使って、プログラム内での状態のオン/オフや、条件の成立/不成立など、二つの選択肢を持つ様々な状況を表現することができます。

このコードを実行すると、isActiveは最初にtrueとして初期化され、その後falseに変更されるので、最終的なisActiveの値はfalseとなります。

○サンプルコード2：条件分岐でのbooleanの使用

TypeScriptでのbooleanの使用法として、非常によく使われるのが「条件分岐」です。

特にif文やswitch文、三項演算子などでの使用が一般的です。

boolean型の真偽値に応じて、特定のコードブロックを実行したり、実行しなかったりします。

下記のサンプルコードは、booleanを使用してif文で条件分岐を行う基本的な例です。

// TypeScriptでのサンプルコード
let isSunny: boolean = true;

if (isSunny) {
    console.log("晴れています。");
} else {
    console.log("晴れていません。");
}

このコードでは、変数isSunnyにboolean型の真偽値を持っています。

もしisSunnyがtrueであれば、コンソールに「晴れています。」と出力され、falseであれば「晴れていません。」と出力されます。

このコードを実行すると、isSunnyがtrueであるため、結果として「晴れています。」と表示されます。

さらに応用として、booleanの値を動的に変える場合も考えられます。

例えば、ユーザからの入力やAPIからのレスポンスに応じて、booleanの値が変わることもあります。

このような場合でも、if文や三項演算子などでの条件分岐が非常に役立ちます。

また、複数のboolean値を組み合わせて、複雑な条件分岐を作成することも可能です。

&&（AND）や||（OR）などの論理演算子を使用して、複数の条件を組み合わせることができます。

例えば、次のようなコードが考えられます。

let isWeekend: boolean = true;
let isHoliday: boolean = false;

if (isWeekend || isHoliday) {
    console.log("休日です。");
} else {
    console.log("平日です。");
}

このコードでは、isWeekendがtrueか、isHolidayがtrueのどちらか一方でも成り立つ場合に「休日です。」と出力します。

どちらもfalseの場合には「平日です。」と出力されます。

このコードを実行すると、isWeekendがtrueなので、「休日です。」と表示されます。

○サンプルコード3：関数の戻り値としてのboolean

TypeScriptにおける関数の基本的な使い方の中で、booleanを戻り値として活用するケースは非常に多いです。

booleanを戻り値として使うことで、特定の条件を満たしているか、あるいは操作が成功したかどうかなどの情報をシンプルに返すことができます。

ここでは、関数の戻り値としてbooleanを返す具体的な方法と、その利用例について詳しく見ていきましょう。

まず、関数の戻り値としてbooleanを返す基本的なコードをご紹介します。

// 数値が10以上であればtrue、それ以下であればfalseを返す関数
function isOverTen(num: number): boolean {
    return num >= 10;
}

このコードでは、関数isOverTenを定義しています。引数として数値numを受け取り、その数値が10以上であればtrueを、10未満であればfalseを返すというシンプルな関数です。

このコードを実行すると、次のような結果になります。

例えば、isOverTen(15)を呼び出すと、15は10以上なので、trueが返されることになります。

一方、isOverTen(5)を呼び出すと、5は10未満なので、falseが返されます。

では、もう少し複雑な例を見てみましょう。

// 文字列が指定された文字数以上であればtrue、それ以下であればfalseを返す関数
function isOverLength(str: string, length: number): boolean {
    return str.length >= length;
}

このコードでは、関数isOverLengthを定義しています。

引数として文字列strと、比較対象の文字数lengthを受け取ります。

文字列strの長さが指定されたlength以上であればtrueを、length未満であればfalseを返します。

このコードを実行すると、例えば、isOverLength("TypeScript", 10)を呼び出すと、文字列”TypeScript”の長さは10未満なので、falseが返されることになります。

一方、isOverLength("Hello, TypeScript!", 10)と呼び出すと、この文字列の長さは10以上なので、trueが返されます。

○サンプルコード4：booleanを使用した繰り返し処理

TypeScriptにおけるboolean型は、主に条件分岐などのフロー制御の際に利用されますが、繰り返し処理、特にwhileループやdo...whileループでの使用例も見られます。

ここでは、boolean型を用いた繰り返し処理のサンプルコードとその詳細な解説を行います。

まず、基本的なwhileループでのboolean型の使用例を見てみましょう。

let isActive = true;
let count = 0;

while(isActive) {
    count++;
    console.log(`繰り返し処理を${count}回実行しました。`);
    if(count >= 5) {
        isActive = false;
    }
}

このコードでは、isActiveという名前のboolean型の変数を使って、whileループを制御しています。

isActiveがtrueである間、ループは繰り返されます。

ループ内でcount変数の値を1つずつ増やしており、その値が5に達した時点でisActiveをfalseに設定して、ループを終了しています。

このコードを実行すると、繰り返し処理を1回実行しました。から繰り返し処理を5回実行しました。までのメッセージがコンソールに出力されます。

次に、do...whileループの例を見てみましょう。

let isRunning = true;
let iteration = 0;

do {
    iteration++;
    console.log(`do...whileループを${iteration}回実行しました。`);
    if(iteration >= 3) {
        isRunning = false;
    }
} while(isRunning);

do...whileループは、最初の繰り返しを行った後に条件を確認します。

このため、条件が最初からfalseであっても、ループ内のコードは少なくとも1回は実行されます。

このコードを実行すると、コンソールにはdo...whileループを1回実行しました。からdo...whileループを3回実行しました。までのメッセージが出力されます。

いずれのループも、boolean型の変数を使ってループの終了条件を管理しています。

これにより、繰り返し処理の途中での終了条件を柔軟に制御することができます。

○サンプルコード5：booleanと他の型との組み合わせ

TypeScriptでのbooleanの使用方法についての旅も中盤に差し掛かりましたね。

今回は、booleanと他のデータ型との組み合わせに関して詳しく見ていきましょう。

特に、booleanと数値や文字列との組み合わせが多くの場面で必要となります。

これらの組み合わせ方法を理解することで、より実践的なプログラミングが可能になります。

□booleanと数値

まず、booleanと数値の組み合わせを考えます。

具体的には、ある数値が特定の条件を満たすかどうかをbooleanで表現するケースです。

// このコードでは、数値が10以上かどうかを判定しています。
const number: number = 15;
const isOverTen: boolean = number >= 10;
console.log(isOverTen);  // このコードを実行すると、trueと表示されます。

このコードでは、変数numberの値が10以上であるかどうかを判定し、結果をboolean型の変数isOverTenに格納しています。

実行すると、numberの値が15であるため、isOverTenの結果としてtrueが出力されます。

□booleanと文字列

次に、booleanと文字列との組み合わせを見ていきましょう。

文字列が特定の条件を満たしているか、または含んでいるかどうかを判定する場面でこの組み合わせが役立ちます。

// このコードでは、文字列に"TypeScript"という単語が含まれているかを判定しています。
const text: string = "I love TypeScript!";
const includesTypeScript: boolean = text.includes("TypeScript");
console.log(includesTypeScript);  // このコードを実行すると、trueと表示されます。

上記のコードは、変数textに”TypeScript”という文字列が含まれているかどうかをboolean型の変数includesTypeScriptに格納しています。

この場合も、結果としてtrueが出力されることが確認できます。

●booleanの応用例

boolean型は、基本的な使い方だけでなく、多くの応用例も存在します。

TypeScriptでの開発を進めていく中で、boolean型を巧みに使用することで、より効果的なコーディングが可能となります。

ここでは、boolean型の一つの応用例として、簡単なバリデーション機能を実装するサンプルコードを解説します。

○サンプルコード6：booleanを使った簡単なバリデーション機能

多くのアプリケーションやウェブサイトで、フォームの入力内容が正しいかどうかを確認するバリデーション機能は欠かせません。

このような機能の中心には、条件に合致するか合致しないかを判定するboolean型が利用されています。

入力された文字列がメールアドレスとして正しい形式を持っているかどうかを判定する簡単なバリデーション機能のサンプルコードを紹介します。

function isValidEmail(email: string): boolean {
    // シンプルなメールアドレスの正規表現を利用してチェック
    const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    return regex.test(email);
}

const email = "example@domain.com";
if (isValidEmail(email)) {
    console.log("有効なメールアドレスです。");
} else {
    console.log("無効なメールアドレスです。");
}

このコードでは、isValidEmailという関数を定義しています。

この関数は、引数として受け取った文字列がメールアドレスとしての条件を満たしているかどうかをboolean型で返します。

具体的には、正規表現を利用して、メールアドレスの形式に合致するかどうかを確認しています。

このコードを実行すると、”example@domain.com”という文字列がメールアドレスとしての条件を満たしているかどうかをチェックし、結果をコンソールに表示します。

このように、boolean型を使用することで、簡単に条件に合致するかどうかを判定する機能を実装することができます。

このようなバリデーション機能は、ユーザからの入力を受け取る際に、誤ったデータが保存されることを防ぐための重要な役割を果たします。

実際に上記のコードを実行すると、”有効なメールアドレスです。”というメッセージがコンソールに表示されます。

これにより、入力されたメールアドレスが正しい形式であることが確認できます。

逆に、正しい形式でないメールアドレスを入力した場合、”無効なメールアドレスです。”というメッセージが表示されるでしょう。

○サンプルコード7：booleanを活用したフィルタリング処理

TypeScriptを学んできたあなたにとって、booleanはもはや避けては通れない存在となっていることでしょう。

boolean型は「真」または「偽」の二つの値しか持たないため、条件分岐やループ処理で非常に頻繁に用いられます。

今回は、そのbooleanを活用して、データのフィルタリング処理を行う具体的なサンプルコードを紹介します。

まず、サンプルコードを紹介します。

// ユーザー情報の型を定義
type User = {
  id: number;
  name: string;
  isActive: boolean;
};

// ユーザーデータのサンプル
const users: User[] = [
  { id: 1, name: '山田太郎', isActive: true },
  { id: 2, name: '佐藤花子', isActive: false },
  { id: 3, name: '鈴木一郎', isActive: true },
  { id: 4, name: '高橋健太', isActive: false }
];

// isActiveがtrueのユーザーのみをフィルタリング
const activeUsers = users.filter(user => user.isActive);

console.log(activeUsers);

このコードでは、まずユーザー情報を持つオブジェクトの型Userを定義しています。

次に、User型の配列としてusersを定義し、4人のユーザー情報を持っています。

この中でisActiveというプロパティがあり、ユーザーがアクティブかどうかの情報（真偽値）を持っています。

そして、Array.prototype.filterメソッドを利用して、isActiveがtrueのユーザーのみをフィルタリングしています。

このフィルタリングはbooleanのプロパティを活用することで、非常にシンプルに書くことができます。

このコードを実行すると、isActiveがtrueであるユーザーのみがactiveUsers配列に格納されます。

その結果、コンソールには山田太郎さんと鈴木一郎さんの情報が出力されます。

○サンプルコード8：booleanを使ったトグル機能

TypeScriptでboolean型を使用する際の一般的な用途の1つにトグル機能の実装があります。

トグル機能は、スイッチのようにON/OFFを切り替えることができる機能のことを指します。

例えば、メニューバーの表示・非表示や、ダークモードのON/OFFなど、ユーザーインターフェースにおいて非常によく見られる機能です。

このようなトグル機能を実装する際、boolean型は非常に役立ちます。

なぜなら、boolean型にはtrue（真）またはfalse（偽）の2つの値しか存在しないため、2つの状態を持つトグル機能の実装に適しているからです。

TypeScriptでのbooleanを使用したトグル機能のサンプルコードを紹介します。

// トグルの状態を表すboolean型の変数
let toggleState: boolean = false;

// トグル機能の実装
function toggle(): void {
    toggleState = !toggleState;
    console.log(`トグルの状態: ${toggleState ? 'ON' : 'OFF'}`);
}

// トグル機能のテスト
toggle();  // トグルの状態: ON
toggle();  // トグルの状態: OFF

このコードでは、toggleStateというboolean型の変数を使用して、トグルの状態を保持しています。

初期状態ではfalse（OFF）に設定されています。toggle関数内で、toggleStateの値を反転させることで、トグルの状態を切り替えています。

このコードを実行すると、toggle関数が呼び出されるたびに、toggleStateの値が反転され、トグルの状態が切り替わります。

その結果、console.logを使用して、現在のトグルの状態（ONまたはOFF）がコンソールに表示されます。

●注意点と対処法

TypeScriptを使用する際、特に初心者の方々がよく遭遇するbooleanに関する問題点とその対処法を詳しく解説します。

ここをしっかりと理解し、実践に活かすことで、TypeScriptでの開発効率や品質を向上させることができます。

○型推論とboolean

TypeScriptは、変数の宣言時に型を明示しない場合、その変数の初期値に基づいて型を推論します。

この型推論によって、開発者は型の明示を省略できる利点があります。

しかし、booleanに関しては注意が必要です。

例えば、次のようなコードを考えます。

let isActive = true;

このコードでは、isActiveはboolean型として推論されます。

しかし、後続のコードでisActiveに文字列や数字を代入しようとすると、TypeScriptはエラーを出力します。

このコードでは、isActive変数はtrueというboolean値を初期値として持っているため、TypeScriptはこの変数の型をbooleanと推論します。

対策としては、変数の宣言時に型を明示的に指定することです。

次のように書くことで、後のコードで誤った型の値を代入するリスクを減らすことができます。

let isActive: boolean = true;

このように、型注釈を用いて変数の型を明示することで、意図しない型の値の代入を防ぐことができます。

○truthyとfalsyの注意点

JavaScriptやTypeScriptでは、全ての値が真偽値として評価される時、truthyまたはfalsyとして振る舞います。

truthyは条件式などで真として評価される値を、falsyは偽として評価される値を指します。

例えば、次の値はすべてfalsyです。

  • false
  • 0
  • ''(空文字)
  • null
  • undefined
  • NaN

これ以外の値はtruthyとして評価されます。

しかし、TypeScriptで厳密なbooleanのチェックを行う場合、このtruthyやfalsyの振る舞いには注意が必要です。

次のサンプルコードを見てみましょう。

function isTruthy(value: any): boolean {
    return value ? true : false;
}

console.log(isTruthy('hello'));  // このコードを実行すると、trueと表示されます。
console.log(isTruthy(''));      // このコードを実行すると、falseと表示されます。

このコードでは、任意の値を受け取り、それがtruthyかどうかをbooleanとして返す関数isTruthyを定義しています。

この関数を使って、文字列'hello'や空文字''の真偽値をチェックすると、それぞれtrueとfalseが返されます。

●カスタマイズ方法

TypeScriptのbooleanはそのままでも非常に強力ですが、カスタマイズすることでさらに多様な使い方ができるようになります。

TypeScriptの豊富な型システムを活用して、booleanの利用範囲を広げる方法を解説します。

○booleanを拡張する方法

TypeScriptでは、boolean型を拡張して新たな型を作ることが可能です。

例えば、特定の条件を満たす場合のみtrueとなるようなカスタムboolean型を作成することが考えられます。

下記のコードは、isAdultという名前の新しいboolean型を作成しています。

この型は、年齢が18歳以上の場合にtrueとなります。

type isAdult = boolean & { _brand: 'isAdult' };

function checkIsAdult(age: number): isAdult {
    if (age >= 18) {
        return true as isAdult;
    } else {
        return false as isAdult;
    }
}

const john: isAdult = checkIsAdult(20);  // このコードでは、20歳の年齢を使ってcheckIsAdult関数を呼び出しています。

このコードを実行すると、johnはtrueのisAdult型として認識されます。

このようにして、特定の条件を持ったboolean型をカスタムで作成することができます。

○ユーティリティタイプを利用したbooleanのカスタマイズ

TypeScriptには、型を効率的に操作するためのユーティリティタイプが提供されています。

boolean型と組み合わせることで、さらに高度な型定義を作成することができます。

例として、オブジェクトのキーがboolean型であるかどうかを判定する型を考えてみましょう。

type HasBooleanKey<T> = {
    [K in keyof T]: T[K] extends boolean ? K : never;
}[keyof T];

type Sample = {
    isReady: boolean;
    count: number;
};

type BooleanKey = HasBooleanKey<Sample>;  // このコードでは、Sample型のキーのうちboolean型を持つキーのみを取得しています。

このコードを実行すると、BooleanKey型は’isReady’と評価されます。

つまり、Sample型の中でboolean型のキーは’isReady’のみであることがわかります。

まとめ

TypeScriptでのbooleanの利用は、日々のプログラミングにおいて非常に重要な役割を果たしています。

本ガイドを通じて、booleanの基本的な使い方から応用例、カスタマイズ方法に至るまでの詳細な情報を解説しました。

TypeScript初心者の方はもちろん、経験者の方にも、booleanの深い理解と効果的な利用方法を学んでいただけたことを願っています。

今後のプログラミング作業において、本ガイドが皆様の手助けとなることを心より願っております。