プリミティブ型
=========================

プログラムの解説にはよく、リテラルという言葉がでてきます。
リテラルというのは、専用の文法を持ち、ソースコード中に直接記述できるデータのことです。TypeScriptには何種類かあります。

* ``boolean`` 型
* ``number`` 型
* ``string`` 型
* 配列
* オブジェクト
* 関数
* ``undefined``
* ``null``

このうち、それ以上分解できないシンプルなデータを「プリミティブ型」と呼びます。
ここでは、よく出てくるプリミティブ型を紹介します。

配列とオブジェクトは次章の\ :doc:`complex`\ で、関数は\ :doc:`function`\ で紹介します。

``boolean`` リテラル
---------------------

``boolean``\ 型は ``true``\ /\ ``false``\ の2つの真偽値を取るデータ型です。 ``if``\ 文、\ ``while``\ ループなどの制御構文や、三項演算子などを使ってプログラムの挙動をコントロールするために大切な型です。

.. code-block:: ts

   // 値を表示
   console.log(true);
   console.log(false);

   // 変数に代入。変数の型名はboolean
   const flag: boolean = true;

   // 他のデータ型への変換
   console.log(flag.toString()); // 'true' / 'false' になる
   console.log(String(flag));    // こちらでも変換可能
   console.log(Number(flag));    // 1, 0になる

   // 他のデータ型をtrue/falseに変換
   const notEmpty = Boolean("test string"); // 変換ルールは後述
   const flag = flagStr === 'true';         // 'true'の文字をtrueにするなら
   const str = "not empty string";          // true/false反転するが演算子一つで変換可能
   const isEmpty = !str;                    // 反転すると!Boolean()と同じ
   const notEmpty = !!str;                  // もう1つ使うと反転せずにboolean型に

TypeScriptでは、数字のゼロ（負も含む）、空文字列、 ``null`` 、 ``undefined`` 、 ``NaN`` を変換すると ``false`` 、それ以外を変換すると ``true`` になります \ [#]_\ 。

.. [#] この真偽値への変換ルールは言語によって異なります。例えば、Pythonでは空の配列や辞書も偽（\ ``False``\ ）になります。Rubyの場合は数字のゼロや空文字列も真（\ ``true``\ ）になります。

ド・モルガンの法則
~~~~~~~~~~~~~~~~~~~~~~

``if`` 文の条件式が複雑なときに、それを簡単にするのにごくたまに役立つのがド・モルガンの法則です。
次のような法則でNOTとANDとORの組みを変換できます。

.. code-block:: ts
   :caption: ド・モルガンの法則

   !(P || Q) == !P && !Q
   !(P && Q) == !P || !Q

特に、右辺から左辺への変換がコードの可読性を高めることが多いと思います。
NOTの集合同士の演算というのは普段の生活ではあまり出てきません。
集合のAND/ORを考えてから逆転させる方が簡単にイメージできる思いますので、条件を書く時に、想定が漏れてロジックが正しく動作しない、ということが減るでしょう。
また、より構成要素が多い論理式のときに、式を整理するのにも使えます。

数値型
---------------------

TypeScriptには組み込みで2種類の数値型があります。ほとんどの場合は ``number`` だけで済むでしょう。

``number``
~~~~~~~~~~~~~~~~~~~~~~~

TypeScript（というか、その下で動作しているJavaScript）は64ビットの浮動小数点数で扱います。これはどのCPUを使っても基本的に同じ精度を持ちます\ [#]_\ 。整数をロスなく格納できるのは53ビット(-1)までなので、±約9007兆までの整数を扱えます。それ以上の数値を入れると、末尾が誤差としてカットされたりして、整数を期待して扱うと問題が生じる可能性があります。正確な上限と下限は ``Number.MAX_SAFE_INTEGER`` 、 ``Number.MIN_SAFE_INTEGER`` という定数で見ることができます。また、 ``Number.isSafeInteger(数値)`` という関数で、その範囲内に収まっているかどうかを確認できます。

.. figure:: ./images/basic/double.png

   The memory format of an IEEE 754 double floating point value. by Codekaizen (CC 4.0 BY-SA)

.. [#] IEEE 754という規格で決まっています。

.. code-block:: ts

   // 値を表示
   console.log(10.5);
   console.log(128);
   console.log(0b11);  // 0bから始まると2進数
   console.log(0o777); // 0oから始まると8進数
   console.log(0xf7);  // 0xから始まると16進数

   // 変数に代入。変数の型名はnumber
   const year: number = 2019;

   // 他のデータ型への変換
   console.log(year.toString());  // '2019'になる
   console.log(year.toString(2)); // toStringの引数で2進数-36進数にできる
   console.log(Boolean(year));    // 0以外はtrue

   // 他のデータ型を数値に変換
   console.log(parseInt("010"));     // →10 文字列はparseIntで10進数/16進数変換
   console.log(parseInt("010", 8));  // →8 2つめの数値で何進数として処理するか決められる
   console.log(Number(true));        // boolean型はNumber関数で0/1になる

変換の処理は、方法によって結果が変わります。10進数を期待するものはradix無しの ``parseInt()`` で使っておけば間違いありません。

.. list-table:: 文字列から数値の変換

   - *
     * ``Number(文字列)``
     * ``parseInt(文字列)``
     * ``parseInt(文字列, radix)``
     * リテラル
   - * "10"
     * 10
     * 10
     * radixによって変化
     * 10
   - * "010"
     * 10
     * 10
     * radixによって変化
     * 8 (8進数)
   - * "0x10"
     * 16
     * 16
     * radixが16以外は0
     * 16 (16進数)
   - * "0o10"
     * 8
     * 0
     * 0
     * 8 (8進数)
   - * "0b10"
     * 2
     * 0
     * 0
     * 2 (2進数)

なお、リテラルの8進数ですが、ESLintの推奨設定を行うと ``no-octal`` というオプションが有効になります。このフラグが有効だと、8進数を使用すると警告になります。

.. note::

   IE8以前及びその時代のブラウザは、 ``parseInt()`` に0が先頭の文字列を渡すと8進数になっているため、かならずradixを省略せずに10を設定しろ、というのが以前言われていました。その世代のブラウザは現在市場に出回っていないため、10は省略しても問題ありません。

   また、8進数リテラルは以前のJavaScriptは\ ``0777``\ のように、ゼロ始まりのものも使えましたが、現在はこちらの記法はES5以上で非推奨となっており、TypeScriptではエラーになります。

数値型の使い分け
~~~~~~~~~~~~~~~~~~~~~~~

TypeScriptには組み込みで2種類の数値型があります。
2つの型を混ぜて計算することはできません。

* ``number``: 64ビットの浮動小数点数
* ``bigint``: 桁数制限のない整数（\ ``10n`` のように、後ろにnをつける）

``number`` 型は多くのケースではベストな選択になります。特に浮動小数点数を使うのであればこちらしかありません。
それ以外に、±2^53-1までであれば整数として表現されるので情報が減ったりはしません。また、これらの範囲では一番高速に演算できます。

``bigint`` 型は整数しか表現できませんが、桁数の制限はありません。ただし、現時点では ``"target": "esnext"`` と設定しないと使えません。
使える場面はかなり限られるでしょう。本ドキュメントでは詳しく扱いません。

``number`` は2進数で表した数値表現なので、 0.2 + 0.1などのようなきれいに2進数で表現できない数値は誤差が出てしまいます。金額計算など、多少遅くても正確な計算が必要な場合はdecimal.js\ [#]_\ などの外部ライブラリを使います。

.. code-block:: ts
   :caption: numberの誤差

   const a = 0.1;
   const b = 0.2;
   console.log(a + b);
   // 0.30000000000000004

.. [#] https://www.npmjs.com/package/decimal.js

演算子
~~~~~~~~~~~~

``+`` 、 ``-`` 、 ``*`` 、 ``/`` 、 ``%`` （剰余）のよくある数値計算用の演算子が使えます。これ以外に、 ``**`` というベキ乗の演算子がES2016で追加されています [#]_ 。

また、 ``number`` は整数としても扱えますのでビット演算も可能です。ビット演算は2進数として表現した表を使って、計算するイメージを持ってもらえると良いでしょう。コンピュータの内部はビット単位での処理になるため、高速なロジックの実装で使われることがよくあります [#]_ 。

ただし、ビット演算時には精度は32ビット整数にまで丸められてから行われるため、その点は要注意です。

.. list-table::
   :header-rows: 1
   :widths: 3 5 10

   - * AND
     * ``a & b``
     * 2つの数値の対応するビットがともに1の場合に1を返します。
   - * OR
     * ``a | b``
     * 2つの数値の対応するビットのどちらかが1の場合に1を返します。
   - * XOR
     * ``a ^ b``
     * 2つの数値の対応するビットのどちらか一方のみが1の場合に1を返します。
   - * NOT
     * ``~a``
     * ビットを反転させます
   - * LSHIFT
     * ``a << b``
     * aのビットを、b (32未満の整数)分だけ左にずらし、右から0をつめます。
   - * RSHIFT
     * ``a >> b``
     * aのビットを、b (32未満の整数)分だけ右にずらし、左から0をつめます。符号は維持されます。
   - * 0埋めRSHIFT
     * ``a >>> b``
     * aのビットを、b (32未満の整数)分だけ右にずらし、左から0をつめます。

なお、トリッキーな方法としては、次のビット演算を利用して、小数値を整数にする方法があります。なぜ整数になるかはぜひ考えて見てください [#]_  。これらの方法、とくに後者の方は小数値を整数にする最速の方法として知られているため、ちょっと込み入った計算ロジックのコードを読むと出てくるかもしれません。

* ``~~`` を先頭につける
* ``|0`` を末尾につける

.. [#] 以前は ``Math.pow(x, y)`` という関数を使っていました。
.. [#] ビット演算を多用する用途としては、遺伝子情報を高速に計算するのに使うFM-Indexといったアルゴリズムの裏で使われる簡潔データ構造と呼ばれるデータ構造があります。
.. [#] ただし、ビット演算なので、本来扱えるよりもかなり小さい数字でしか正常に動作しません。

特殊な数値
~~~~~~~~~~~~~~~~

数値計算の途中で、正常な数値として扱えない数値が出てくることがあります。業務システムでハンドリングすることはあまりないと思います。もし意図せず登場することがあればロジックの不具合の可能性が高いでしょう。

* 無限大: ``Infinity``
* 数字ではない: ``NaN`` (Not a Number)

``Math`` オブジェクト
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

TypeScriptで数値計算を行う場合、 ``Math`` オブジェクトの関数や定数を使います。

.. list-table:: 数値の最大値、最小値
   :header-rows: 1
   :widths: 5 15

   - * 関数
     * 説明
   - * ``Math.max(x, y, …)``
     * 複数の値の中で最大の値を返す。配列内の数値の最大値を取得したい場合は ``Math.max(...array)``
   - * ``Math.min(x, y, …)``
     * 複数の値の中で最小の値を返す。配列内の数値の最小値を取得したい場合は ``Math.min(...array)``

乱数生成の関数もここに含まれます。0から1未満の数値を返します。例えば0-9の整数が必要な場合は、10倍して ``Math.floor()`` などを使うと良いでしょう。

.. list-table:: 乱数
   :header-rows: 1
   :widths: 5 15

   - * 関数
     * 説明
   - * ``Math.random()``
     * 0以上1未満の疑似乱数を返す。暗号的乱数が必要な場合は ``crypto.randomBytes()`` を代わりに使う。

整数に変換する関数はたくさんあります。一見、似たような関数が複数あります。例えば、 ``Math.floor()`` と ``Math.trunc()`` は似ていますが、負の値を入れた時に、前者は数値が低くなる方向に（-1.5なら-2）丸めますが、後者は0に近く方向に丸めるといった違いがあります。

.. list-table:: 整数変換
   :header-rows: 1
   :widths: 5 15

   - * 関数
     * 説明
   - * ``Math.abs(x)``
     * xの絶対値を返す。
   - * ``Math.ceil(x)``
     * x以上の最小の整数を返す。
   - * ``Math.floor(x)``
     * x以下の最大の整数を返す。
   - * ``Math.fround(x)``
     * xに近似の単精度浮動小数点数を返す。ES2015以上。
   - * ``Math.round(x)``
     * xを四捨五入して、近似の整数を返す。
   - * ``Math.sign(x)``
     * xが正なら1、負なら-1、0なら0を返す。ES2015以上。
   - * ``Math.trunc(x)``
     * xの小数点以下を切り捨てた値を返す。ES2015以上。

整数演算の補助関数もいくつかあります。ビット演算と一緒に使うことが多いと思われます。

.. list-table:: 32ビット整数
   :header-rows: 1
   :widths: 5 15

   - * 関数
     * 説明
   - * ``Math.clz32(x)``
     * xを2進数32ビット整数値で表した数の先頭の0の個数を返す。ES2015以上。
   - * ``Math.imul(x, y)``
     * 32ビット同士の整数の乗算の結果を返す。超えた範囲は切り捨てられる。主にビット演算と一緒に使う。ES2015以上。

平方根などに関する関数もあります。

.. list-table:: ルート
   :header-rows: 1
   :widths: 5 15

   - * 関数・定数
     * 説明
   - * ``Math.SQRT1_2``
     * 1/2の平方根の定数。
   - * ``Math.SQRT2``
     * 2の平方根の定数。
   - * ``Math.cbrt(x)``
     * xの立方根を返す。ES2015以上。
   - * ``Math.hypot(x, y, …)``
     * 引数の数値の二乗和の平方根を返す。ES2015以上。
   - * ``Math.sqrt(x)``
     * xの平方根を返す。

対数関係の関数です。

.. list-table:: 対数
   :header-rows: 1
   :widths: 5 15

   - * 関数・定数
     * 説明
   - * ``Math.E``
     * 自然対数の底（ネイピア数）を表す定数。
   - * ``Math.LN10``
     * 10の自然対数を表す定数。
   - * ``Math.LN2``
     * 2の自然対数を表す定数。
   - * ``Math.LOG10E``
     * 10を底としたeの対数を表す定数。
   - * ``Math.LOG2E``
     * 2を底としたeの対数を表す定数。
   - * ``Math.exp(x)``
     * ``Math.E ** x`` を返す。
   - * ``Math.expm1(x)``
     * ``exp(x)`` から1を引いた値を返す。ES2015以上。
   - * ``Math.log(x)``
     * xの自然対数を返す。
   - * ``Math.log1p(x)``
     * 1 + x の自然対数を返す。ES2015以上。
   - * ``Math.log10(x)``
     * xの10を底とした対数を返す。ES2015以上。
   - * ``Math.log2(x)``
     * xの2を底とした対数を返す。ES2015以上。

最後は円周率や三角関数です。引数や返り値で角度を取るものはすべてラジアンですので、度 （°）で数値を持っている場合は ``* Math.PI / 180`` でラジアンに変換してください。

.. list-table::　三角関数
   :header-rows: 1
   :widths: 5 15

   - * 関数・定数
     * 説明
   - * ``Math.PI``
     * 円周率の定数。
   - * ``Math.acos(x)``
     * アークコサイン (逆余弦) を返す。
   - * ``Math.acosh(x)``
     * ハイパボリックアークコサイン (双曲線逆余弦) を返す。
   - * ``Math.asin(x)``
     * アークサイン (逆正弦) を返す。
   - * ``Math.asinh(x)``
     * ハイパボリックアークサイン (双曲線逆正弦) を返す。
   - * ``Math.atan(x)``
     * アークタンジェント (逆正接) を返す。
   - * ``Math.atanh(x)``
     * ハイパボリックアークタンジェント (双曲線逆正接) を返す。
   - * ``Math.atan2(y, x)
     * アークタンジェント (逆正接) を返す。
   - * ``Math.cos(x)``
     * コサイン (余弦) を返す。
   - * ``Math.cosh(x)``
     * ハイパボリックコサイン (双曲線余弦) を返す。
   - * ``Math.sin(x)``
     * サイン (正弦) を返す。
   - * ``Math.sinh(x)``
     * ハイパボリックサイン (双曲線正弦) を返す。
   - * ``Math.tan(x)``
     * タンジェント (正接) を返す。
   - * ``Math.tanh(x)``
     * ハイパボリックタンジェント (双曲線正接) を返す。

``string`` リテラル
---------------------

``string`` リテラルは文字列を表現します。シングルクオート、ダブルクオートでくくると表現できます。
シングルクオートとダブルクオートは、途中で改行が挟まると「末尾がない」とエラーになってしまいますが、
バッククオートでくくると、改行が中にあっても大丈夫なので、複数行あるテキストをそのまま表現できます。

.. code-block:: ts

   // 値を表示
   // シングルクオート、ダブルクオート、バッククオートでくくる
   console.log('hello world');

   // 変数に代入。変数の型名はstring
   const name: string = "future";

   // 複数行
   // シングルクオート、ダブルクオートだとエラーになる
   // error TS1002: Unterminated string literal.
   const address = '東京都
   品川区';
   // バッククオートならOK。ソースコード上の改行はデータ上も改行となる
   const address = `東京都
   品川区`;

   // 他のデータ型への変換
   console.log(parseInt('0100', 10)); // 100になる
   console.log(Boolean(name));        // 空文字列はfalse、それ以外はtrueになる

   // 他のデータ型をstringに変換
   const year = 2019;
   console.log((2019).toString(2));     // numberはtoStringの引数で2進数-36進数にできる
   console.log((true).toString());      // boolean型を'true'/'false'の文字列に変換
   console.log(String(false));          // こちらでも可

JavaScriptはUTF-16という文字コードを採用しています。Javaと同じです。絵文字など、一部の文字列は1文字分のデータでは再現できずに、2文字使って1文字を表現することがあります。これをサロゲートペアと呼びます。範囲アクセスなどで文字列の一部を扱おうとすると、絵文字の一部だけを拾ってしまう可能性がある点には要注意です。何かしらの文字列のロジックのテストをする場合には、絵文字も入れるようにすると良いでしょう。

文字列のメソッド
~~~~~~~~~~~~~~~~~~~~~

文字列には、その内部で持っている文字列を加工したり、一部を取り出したりするメソッドがいくつもあります。
かなり古いJavaScriptの紹介だと、HTMLタグをつけるためのメソッドが紹介されていたりもします、TypeScriptの型定義ファイルにも未だに存在はしますが、それらのメソッドは言語標準ではないためここでは説明しません。

.. list-table::　文字・コード
   :header-rows: 1
   :widths: 5 15

   - * ``[i]``
     * i番目の文字を返す。範囲外では ``undefined`` が返る。
   - * ``charAt(i)``
     * i番目の文字を返す。範囲外では空文字列が返る。
   - * ``charCodeAt(i)``
     * 指定された位置のUTF-16のコードを返す。 ``String.fromCharCode(c)`` を使って元の文字列に戻せる。
   - * ``codePointAt(i)``
     * 指定された位置のユニコードのコードポイントを返す。範囲外では ``undefined`` が返る。 ``String.fromCodePoint(c)`` を使って元の文字列に戻せる。ES2015以上。

.. list-table::　加工
   :header-rows: 1
   :widths: 5 15

   - * ``normalize(form?)``
     * ユニコードの正規化を行う。後述。
   - * ``padEnd(l, s)``
     * 指定された文字長に足りないときに、終端から文字列sで埋める。ES2017以上。
   - * ``padStart(l, s)``
     * 指定された文字長に足りないときに、先頭から文字列sで埋める。ES2017以上。
   - * ``repeat()``
     * ES2015以上。
   - * ``toLocaleLower(...l)``
     * ロケール情報の従って大文字を小文字に変換した新しい文字列を返す。
   - * ``toLocaleUpper()``
     * ロケール情報の従って小文字を大文字に変換した新しい文字列を返す。
   - * ``toLowerCase()``
     * すべて大文字を小文字に変換した新しい文字列を返す。
   - * ``toUpperCase()``
     * すべて小文字を大文字に変換した新しい文字列を返す。
   - * ``trim()``
     * 前後のスペース（とそれに類する文字）を削除した新しい文字列を返す。
   - * ``trimEnd()``
     * 後のスペース（とそれに類する文字）を削除した新しい文字列を返す。ES2019以上。
   - * ``trimStart()``
     * 前のスペース（とそれに類する文字）を削除した新しい文字列を返す。ES2019以上。

.. list-table::　検索・分析
   :header-rows: 1
   :widths: 5 15

   - * ``endsWith(s, i?)``
     * 文字列がsで終わるかどうかを調べる。ES2015以上。
   - * ``includes(s)``
     * ES2015以上。
   - * ``indexOf(s, i?)``
     * 文字列sを検索し、そのインデックスを返す。
   - * ``lastIndexOf(s, i?)``
     * 文字列sを後方から検索し、そのインデックスを返す。
   - * ``localeCompare(s, l?, opt?)``
     * 指定された言語の規則を使って文字列sと比較する
   - * ``match(regexp)``
     * 文字列が正規表現にマッチするか調べ、マッチしたらその情報を含むオブジェクトを返す。
   - * ``search(regexp)``
     * 正規表現にマッチする文字列を検索し、インデックスを返す。
   - * ``startsWith(s, i?)``
     * 文字列がsから始まるかどうかを調べる。ES2015以上。
   - * ``substring(s, e?)``
     * 指定されたインデックス間（後半を省略すると末尾まで）の部分文字列を返す。

文字コードの正規化
~~~~~~~~~~~~~~~~~~~~~

ユニコードには、同じ意味だけどコードポイントが異なり、字形が似ているけど少し異なる文字というものが存在します。たとえば、全角のアルファベットのＡと、半角アルファベットのAがこれにあたります。
それらを統一してきれいにするのが正規化です。文字列の ``normalize("NFKC")`` というメソッド呼び出しをすると、これがすべてきれいになります。

.. code-block:: ts

   > "ＡＢＣｱｲｳｴｵ㍻".normalize("NFKC")
   'ABCアイウエオ平成'

正規化を行わないと、例えば、「６月６日議事録.md」という全角数字のファイル名を検索しようとして、「6月6日議事録」という検索ワードで検索しようとしたときにひっかからない、ということがおきます。検索対象と検索ワードの両方を正規化しておけば、このような表記のブレがなくなるため、ひっかかりそうでひっかからない、ということが減らせます。

正規形は次の4通りあります。Kがついているものがこのきれいにする方です。また、Dというのは、濁音の記号とベースの文字を分割するときの方法、Cは結合するときの方法になります。macOSの文字コードがNFKDなので、たまにmacOSのChromeでGoogle Spreadsheetを使うと、コピペだかなんだかのタイミングでこのカタカナの濁音が2文字に分割された文字列が挿入されることがあります。 ``NFKC`` をつかっておけば問題はないでしょう。

* ``NFC``
* ``NFD``
* ``NFKC``
* ``NFKD``

正規化をこのルールに従って行うと、ユーザーに「全角数字で入力する」ことを強いるような、かっこ悪いUIをなくすことができます。ユーザーの入力はすべてバリデーションの手前で正規化すると良いでしょう。

ただし、長音、ハイフンとマイナス、漢数字の１、横罫線など、字形が似ているものの意味としても違うものはこの正規化でも歯が立たないので、別途対処が必要です。

文字列の結合
~~~~~~~~~~~~~

従来のJavaScriptは他の言語でいうprintf系の関数がなく、文字列を\ ``+``\ で結合したり、配列に入れて\ ``.join()``\ で結合したりしましたが、いまどきは文字列テンプレートリテラルがありますので、ちょっとした結合は簡単に扱えます。
printfのような数値の変換などのフォーマットはなく、あくまでも文字列結合をスマートにやるためのものですが、複数行のテキストを表現できますし、プレースホルダ内には自由に式が書けます。
もちろん、数が決まらない配列などは従来どおり\ ``.join()``\ を使います。

.. code-block:: js

   // 古いコード
   console.log("[Debug]: " + variable);

   // 新しいコード
   console.log(`[Debug]: ${variable}`);

このバッククオートを使う場合は、関数を前置することで、文字列を加工することができます。
国際化でメッセージを置き換える場面などで利用されます。

文字列の事前処理
~~~~~~~~~~~~~~~~~~~~~~~~

テンプレートリテラルに関数を指定すると（タグ付きテンプレートリテラル）、文字列を加工する処理を挟めます。よく使われるケースは翻訳などでしょう。
テンプレートリテラルの前に置かれた関数は、最初に文字列の配列がきて、その後はプレースホルダの数だけ引数が付く構造になっています。
文字列の配列は、プレースホルダに挟まれた部分のテキストになります。
自作する機会は多くないかもしれませんが、コード理解のために覚えておいて損はないでしょう。

.. code-block:: ts
   :caption: タグ付きテンプレートリテラル

   function i18n(texts, ...placeholders) {
     // texts = ['小動物は', 'が好きです']
     // placeholders = ['小旅行']
     return // 翻訳処理
   }

   const hobby = "小旅行"
   console.log(i18n`小動物は${hobby}が好きです`);

``undefined`` と ``null``
-------------------------------------

JavaScript/TypeScriptでは、 ``undefined`` と ``null`` があります。他の言語では ``null`` （もしくは ``None`` 、 ``nil`` と呼ぶことも）だけの場合がほとんどですが、JavaScript/TypeScriptでは2種類登場します。

このうち、 ``undefined`` は未定義やまだ値が代入されていない変数を参照したり、オブジェクトの未定義の属性に触ると返ってくる値です。
TypeScriptはクラスなどで型定義を行い、コーディングがしやすくなるとよく宣伝されますが、「 ``undefined`` に遭遇するとわかっているコードを事前にチェックしてくれる」ということがその本質だと思われます。

.. code-block:: ts

   let favoriteGame: string; // まだ代入してないのでundefined;
   console.log(favoriteGame);

このコードは、 ``tsconfig.json`` で ``strict: true`` （もしくは ``strictNullChecks: true`` ）の場合にはコンパイルエラーになります。

JavaScriptはメソッドや関数呼び出し時に数が合わなくてもエラーにはならず、指定されなかった引数には ``undefined`` が入っていました。
TypeScriptでは数が合わないとエラーになりますが、 ``?`` を変数名の最後に付与すると、省略可能になります。

.. code-block:: ts

   function print(name: string, age?: number) {
       console.log(`name: ${name}, age: ${age || 'empty'}`);
   }

意図せずうっかりな「未定義」が ``undefined`` であれば、意図をもって「これは無効な値だ」と設定するのが ``null`` です。
ただし、Javaと違って、気軽に ``null`` を入れることはできません。 変数の章でも紹介した、「AもしくはBのデータが格納できる」という合併型（Union Type）の型宣言ができるので、これをつかって ``null`` を代入します。
TypeScriptでは「これは無効な値をとる可能性がありますよ」というのは意識して許可してあげなければなりません。

.. code-block:: ts

   // stringかnullを入れられるという宣言をしてnullを入れる
   let favoriteGame: string | null = null;

``undefined`` と ``null`` は別のものなので、コンパイラオプションで ``compilerOptions.strict: true`` もしくは、 ``compilerOptions.strictNullChecks: true`` の場合は、 ``null`` 型の変数に ``undefined`` を入れようとしたり、その逆をするとエラーになります。
これらのオプションを両方とも ``false`` にすれば、エラーにはならなくなりますが、副作用が大きいため、これらのオプションは有効にして、普段から正しくコードを書く方が健全です。

.. code-block:: ts
   :caption: nullとundefinedは別物

   const a: string | null = undefined;
   // error TS2322: Type 'undefined' is not assignable to type 'string | null'.

   const b: string | undefined = null;
   // error TS2322: Type 'null' is not assignable to type 'string | undefined'.

まとめ
--------------

TypeScript（とJavaScript）で登場する、プリミティブ型を紹介してきました。
これらはプログラムを構成する上でのネジやクギとなるデータです。