3.

TypeScriptのboolean型|true/false・truthy/falsyとBooleanとの違い

編集

Boolean (真偽値: true/false)

TypeScriptのboolean型は、true(真)か false(偽)のどちらか一方だけを値に取るプリミティブ型です。条件分岐(if)やループの継続判定、フラグ管理など、「はい/いいえ」で表せるあらゆる状態をこの型で扱います。型注釈は小文字の boolean を使い、大文字の Boolean(ラッパーオブジェクト型)を型として書くのは避けるのが鉄則です。

この記事の要点
  • boolean型の値は truefalse の2つだけ。型注釈は let flag: boolean = true; のように小文字で書く。
  • 比較演算子(===< など)や論理演算子(&&||!)の結果は boolean 値になる。
  • if の条件には boolean 以外も書け、truthy / falsy(真とみなされる値/偽とみなされる値)として評価される。
  • falsyな値は false / 0 / -0 / 0n / "" / null / undefined / NaN の8種類だけ。これ以外はすべて truthy。
  • 型注釈には小文字 boolean を使う。大文字 Boolean はラッパーオブジェクト型で、プリミティブを代入できず落とし穴になる。
  • boolean を返す関数は型ガードx is T)と組み合わせると型の絞り込みに使える。

 

boolean型とは

boolean(ブーリアン、真偽値)は、論理的な「真」と「偽」を表すデータ型です。TypeScriptでは取りうる値が truefalse のリテラル2つに限定されており、数値や文字列のように無数の値を持つことはありません。この性質から、ある条件が成立しているかどうかを表現するのに適しています。

名称は19世紀の数学者ジョージ・ブール(George Boole)にちなみます。TypeScriptの boolean 型は、実行時にはJavaScriptのプリミティブ値 true / false としてそのまま扱われます。

// 取りうる値は2つだけ

const yes: boolean = true;

const no: boolean = false;

 

宣言と型注釈

変数を boolean 型として明示するには、変数名のあとに : boolean と型注釈を付けます。一方で、最初から true / false で初期化する場合は、型推論(type inference)によって TypeScript が自動で boolean 型と判断するため、型注釈は省略しても構いません。

// 型注釈を明示

let isDone: boolean = false;

 

// 初期化からの型推論(isActive は boolean と推論される)

let isActive = true;

 

isDone = true;   // OK

// isDone = "yes"; // エラー: 型 'string' を型 'boolean' に割り当てできません

 

なお、let flag = true のように let で初期化した変数は boolean 型に推論されますが、const flag = trueconst で宣言すると、より狭いリテラル型 true に推論される点も覚えておくと役立ちます。

真偽値を返す式

boolean 値はリテラルで直接書くほか、比較演算子論理演算子の結果としても得られます。条件式の多くはこれらの演算から生まれます。

比較演算子

演算子 意味 結果
=== 厳密に等しい(型変換なし) 1 === 1 true
!== 厳密に等しくない 1 !== 2 true
< / > より小さい/より大きい 3 < 5 true
<= / >= 以下/以上 5 >= 5 true

 

論理演算子

&&(論理積)、||(論理和)、!(否定)を使います。なお JavaScript/TypeScript の &&|| は、必ずしも boolean を返すわけではなくオペランドそのものを返す(短絡評価)点に注意が必要です。確実に boolean を得たい場合は ! を2回重ねた !!Boolean(...) 関数を使います。

const a = 10;

a > 5 && a < 20;   // true(両方が真)

a === 0 || a === 10; // true(どちらかが真)

!(a > 5);         // false(否定)

 

// 短絡評価: && / || はオペランドを返すことがある

0 || "既定値";     // "既定値"(boolean ではない)

!!"text";         // true(確実に boolean 化)

 

truthy / falsy(真値・偽値)

TypeScript の if 文や論理演算子の条件部分には、boolean 以外の値も書けます。このとき値は「真とみなされる(truthy)」か「偽とみなされる(falsy)」かに自動的に分類されて評価されます。これは TypeScript 独自の仕様ではなく、ベースとなる JavaScript の挙動を引き継いだものです。

falsy(偽とみなされる)な値は、次の8種類だけです。これら以外の値はすべて truthy になります(空配列 [] や空オブジェクト {}、文字列 "0""false" も truthy である点に注意)。

falsyな値 説明
false boolean の偽そのもの
0 / -0 数値のゼロ(正負)
0n BigInt のゼロ
"" 空文字列('' / `` も同じ)
null 値が存在しないことを示す
undefined 未定義
NaN 非数(Not a Number)

 

const name = "";

if (name) {

  console.log("名前あり");

} else {

  console.log("名前なし"); // 空文字は falsy なのでこちらが実行される

}

 

// 直感に反する例

if ([]) console.log("空配列は truthy"); // 実行される

if ("false") console.log("文字列の false も truthy"); // 実行される

 

boolean(プリミティブ)と Boolean(ラッパー)の違い

TypeScript には小文字の boolean と大文字の Boolean という、紛らわしい2つの名前があります。型注釈には必ず小文字の boolean を使ってください。

  • boolean(小文字): プリミティブ型。true / false という値そのものを表す。通常はこちらを使う。
  • Boolean(大文字): ラッパーオブジェクト型。new Boolean() が生成するオブジェクトの型であり、プリミティブの boolean 値を代入できない。
  • Boolean(...) 関数(new なし): 引数を truthy/falsy 判定して boolean プリミティブに変換する関数。これは便利で、使ってよい。

// 推奨: 小文字 boolean

const ok: boolean = true;

 

// 非推奨: 大文字 Boolean 型はプリミティブを代入できない

// const ng: Boolean = true; // 一見通るが、Boolean 型は避けるべき

 

// Boolean() 関数(new なし)は変換用途で有用

const flag = Boolean("text"); // true(プリミティブ)

 

型ガードでの活用

boolean を返す関数は、TypeScript の型ガード(type guard)と組み合わせると強力です。戻り値の型注釈を 引数 is 型 の形(型述語、type predicate)で書くと、その関数が true を返した分岐内で、コンパイラが値の型を自動的に絞り込んでくれます。

// 戻り値型を「value is string」とすると型ガードになる

function isString(value: unknown): value is string {

  return typeof value === "string";

}

 

function print(x: unknown) {

  if (isString(x)) {

    // このブロック内では x は string に絞り込まれる

    console.log(x.toUpperCase());

  }

}

 

落とし穴と注意点

注意したい落とし穴
  • 型注釈に大文字 Boolean を使わない。ラッパーオブジェクト型であり、プリミティブとの相性が悪い。型としては必ず小文字 boolean を使う(lint ルール @typescript-eslint/ban-types も大文字を禁止する)。
  • new Boolean(false) はオブジェクトなので常に truthy。if (new Boolean(false)) の中身は実行されてしまう。new 付きの Boolean は使わない。
  • 等値比較は === / !== を使う。==(緩い等価)は暗黙の型変換を伴い、0 == false"" == falsetrue になるなど直感に反する結果を生む。
  • boolean と truthy/falsy を混同しない。if (x) は「x が true か」ではなく「x が truthy か」を判定する。"0"[] は truthy。
  • && / || の戻り値は boolean とは限らない。確実に boolean 化したいときは Boolean(x)!!x を使う。

 

boolean に関するFAQ

Q1. 型注釈は booleanBoolean のどちらを書けばよいですか?

必ず小文字の boolean です。大文字 Boolean はラッパーオブジェクトの型で、const x: Boolean = true のように一見書けてしまいますが、メソッド呼び出しの想定が異なり混乱の元になります。実用上の利点は一切ないため、型としては常に小文字を使ってください。

Q2. if (value)if (value === true) は同じですか?

異なります。if (value) は value が truthy かどうかを判定するため、1"text" でも真になります。if (value === true) は value がプリミティブの true と厳密に一致する場合だけ真です。value が boolean 型だと型で保証されているなら if (value) で十分ですが、truthy 全般ではなく true のみを判定したいときは === true を使い分けます。

Q3. 文字列や数値を boolean に変換するにはどうすればよいですか?

Boolean(値) 関数か、!!値 イディオムを使います。どちらも対象が truthy なら true、falsy なら false を返します。例えば Boolean("")false!!"text"true です。なお文字列 "false" を変換すると(空文字ではないため)true になる点に注意してください。文字列 "true"/"false" を真偽値に解釈したい場合は str === "true" のように明示的に比較します。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. String(文字列)
  2. Number (数値: 整数/浮動小数点数)
  3. Boolean (真偽値: true/false)
  4. Any (全ての型を許容)
  5. Array(配列)
  6. Tuple (値のペア)

最近更新/作成されたページ