ユニオンとナローイング

今日のゴール

第3章で開けたままにした NaN の穴をふさぎます。変な入力には、画面に日本語で理由が出ます。

今日つかまえるバグ: 失敗を -1 や NaN で返して、確認を忘れる事故。

ミニ解説その1(JS): 失敗をどう返すか

JavaScriptには昔から「失敗したら特別な値を返す」慣習があります。indexOf は見つからないと -1、Number('abc') は NaN。

問題は、それが失敗だと呼び出す側が忘れられることです。

const amount = parseAmount(input.value); // 失敗すると -1 が返る
const yen = amount * rate;               // 確認を忘れると…
// 画面に ¥-15,000 と表示される。目で見て気づける?

-1 も NaN も立派な数なので、そのまま計算が続いてしまいます。

Aパート: JSで書く

新しいファイル src/parse.js を作ります。失敗したら null を返す方式で書きます。

export function parseAmount(text) {
  const trimmed = text.trim();
  if (trimmed === '') return null;

  const value = Number(trimmed);
  if (Number.isNaN(value)) return null;
  if (value <= 0) return null;

  return value;
}

export function toCurrency(value) {
  if (value === 'TWD' || value === 'EUR' || value === 'USD') {
    return value;
  }
  return null;
}

exchange.js から使うように直します。

+import { parseAmount, toCurrency } from './parse';+ const CURRENCIES = ['TWD', 'EUR', 'USD'];

   const update = () => {-    const amount = Number(amountInput.value);-    const code = currencySelect.value;+    const amount = parseAmount(amountInput.value);+    if (amount === null) {+      result.textContent = '金額は0より大きい数字で入れてください';+      result.classList.add('error');+      return;+    }++    const code = toCurrency(currencySelect.value);+    if (code === null) {+      result.textContent = 'この通貨にはまだ対応していません';+      result.classList.add('error');+      return;+    }++    result.classList.remove('error');     const yen = convert(amount, rateFor(code));     result.textContent = `${amount.toLocaleString()} ${code} = ¥${yen.toLocaleString()}`;

ここまでがAパートです。 空欄や abc を入れると、日本語のエラーが出るようになりました。

事故を踏む

if (amount === null) のかたまりを消してみてください。空欄にすると ¥NaN、-5 と入れると ¥-24,400 のような値が平然と出ます。JavaScriptは何も言いません。戻してから次へ。

ミニ解説その2(TS): ユニオンとナローイング

parseAmount は「数を返すこともあれば、失敗して null を返すこともある」関数です。それをそのまま型に書けます。

function parseAmount(text: string): number | null

| で並べたものを ユニオン型 と呼びます。「AまたはB」です。

大事なのはここからです。number | null のままでは掛け算できません。 TypeScriptが「null かもしれないでしょう」と止めます。掛け算するには、null でないことを確かめた証拠が要ります。

const amount = parseAmount(text); // number | null
if (amount === null) return;
// ここから下では amount は number

この「ifを書くと、その先で型が狭まる」動きを ナローイング と呼びます。

そして 第3章の種明かしです。if (el === null) return; を定型で書いてもらったあれは、まさにこのナローイングでした。querySelector の戻りが HTMLInputElement | null というユニオンだったのです。

これが効いているのは tsconfig.json の "strict": true の中の strictNullChecks という設定です。これがないと、TypeScriptは null を見逃します。

リテラル型

もう1つ。文字列そのものを型にできます。

type Currency = 'TWD' | 'EUR' | 'USD';

「この3つのどれか」という意味です。string よりずっと狭い型です。

Bパート: TSにする

parse.js を F2 で parse.ts にリネームします。

-export function parseAmount(text) {+export type Currency = 'TWD' | 'EUR' | 'USD';++export function parseAmount(text: string): number | null {   const trimmed = text.trim();   if (trimmed === '') return null;    const value = Number(trimmed);   if (Number.isNaN(value)) return null;   if (value <= 0) return null;    return value; } -export function toCurrency(value) {+export function toCurrency(value: string): Currency | null {   if (value === 'TWD' || value === 'EUR' || value === 'USD') {     return value;   }   return null; }

toCurrency の中の if に注目してください。value === 'TWD' || ... と確かめたことで、TypeScriptは「ここから先の value は Currency だ」と認めます。ナローイングが string を Currency に狭めています。

複数のエラーを読む練習

parse.ts の戻り値の型を、わざと number に変えてみてください(| null を消す)。npm run check を打つと、エラーが複数出ます。

確認したら | null を戻します。

わざと壊してみる

parse.ts の最後に次の1行を足してください。

const test: Currency = 'GBP';

ここで赤くなるのが正解です。 Type '"GBP"' is not assignable to type 'Currency' = 「GBPはCurrencyの仲間ではありません」。存在しない通貨コードが、書いた瞬間に止まります。確認したら消します。

あなたの番

• エラーの文言を自分の言葉にしてください。
• | null を返す分岐を1つ自作してください。 例: 上限額チェック(1000万を超えたら null)。
• 合格条件: 変えたあとも npm run check がエラー0。

実務メモ

「失敗は null で返して、呼び出す側に処理を強制する」——React Nativeのフォーム処理でも定石です。呼び出し側が書かされることに価値があります。

TSエラー語辞典

この章で実際に出るエラー英文と、その日本語訳です。卒業するころには全章ぶんがお助けページに集まります。

ハマったら