こんにちは！JavaScriptの学習、毎日お疲れ様です。
変数を作って、データをいれて、画面に表示させて……。「少しずつJavaScriptの動きが分かってきたぞ！」という楽しい時期ですよね。でも、プログラムが大きくなってくると、こんなモヤモヤを感じたことはありませんか？
「あれ？ このデータ、今どんな形だっけ……？」
「画面を表示させようとしたら、突然 `undefined` って怒られてアプリが真っ白になっちゃったよ！」
大丈夫です。その悩み、あなたが通る道はみんな同じです。フロントエンドの現場で何年もコードを書いているプロたちも、昔は全く同じ壁にぶつかってきましたからね。
今回は、そんなJavaScriptの「データの形迷子」を防ぐ、とっても優しくて強力なデザインパターン「タグ付きユニオン（判別共用体）」についてお話しします。難しそうな名前ですが、身近な例えですぐに納得できますよ。さあ、コーヒーでも飲みながらリラックスして見ていきましょう！
—
1. 「タグ付きユニオン」ってなぁに？ 身近な例えで考えてみよう
いきなり専門用語が出てくると身構えてしまうので、まずは身近なものでイメージしてみましょう。
例えば、街で見かける「自動販売機」を想像してください。
自動販売機の中には、色々な商品が入っていますよね。「冷たい缶ジュース」「温かい缶コーヒー」「お菓子」「当たりが出たらもらえるオマケ」などなど。
もし、自動販売機のボタンを押したときに、中から何が出てくるのか分からない箱がランダムに出てきたら……怖くないですか？ お金を入れたのに、ジュースじゃなくて謎の鉄の塊が出てきたら大パニックです。
だから、商品のパッケージには必ず「ラベル（目印）」がついています。「これはジュースです」「これはお菓子です」というタグ（印）があるからこそ、私たちは「あ、これはストローを挿して飲むんだな」「これは袋を開ければいいんだな」と正しく扱うことができます。
JavaScriptのデータもこれと全く同じです。
アプリを作っていると、「ログインしているユーザーのデータ」「エラーのデータ」「読み込み中のデータ」など、色々な種類のデータがごちゃ混ぜになります。そこで、それぞれのデータに「私はこういう種類のデータです！」という名前のタグ（目印）をあらかじめ貼っておく。これが「タグ付きユニオン」の正体です。
—
2. なぜJavaScriptでこれが必要なの？
JavaScriptは、すごく自由な言葉（言語）です。変数になんでも入れられるし、オブジェクトの形も自由自在に変えられます。これはすごく便利な反面、「うっかり違う形のデータを渡しちゃったときエラーに気づきにくい」という弱点を持っています。
例えば、ネットショップの注文状況を考えてみましょう。注文の状態には、いくつかのパターンがありますよね。
1. 処理中（今頑張って準備しています）
2. 完了（無事に届きました！お届け日は〇月〇日です）
3. エラー（ごめんなさい、売り切れました……）
これらを適当なオブジェクトとしてJavaScriptで管理していると、「あれ？ 今どの状態だっけ？ `deliveryDate` ってプロパティ、完了のときしか入ってないはずなのに、エラーのときにも読もうとしちゃった……あ、エラーになった！」というバグが起きやすくなります。
ここで「タグ付きユニオン」の出番です。すべてのデータに `type` という共通のタグを持たせることで、JavaScriptに「今はこういう状態だから、この処理をしてね」と安全に道案内をしてあげられるようになります。
—
3. 実コードで見てみよう！お買い物の状態管理
それでは、実際にコードを書いてみましょう。
今回は、お買い物の「注文ステータス」を例にします。読者のあなたがそのままコピーして、ブラウザのコンソールなどで動かせるコードを用意しました。
// 【1. 処理中のデータ】
// type: “LOADING” というタグ（目印）を持たせます
const loadingState = {
type: “LOADING”,
message: “ただいまお買い物を処理しています…”
};
// 【2. 完了のデータ】
// type: “SUCCESS” というタグを持たせ、完了時に必要なデータだけを持たせます
const successState = {
type: “SUCCESS”,
message: “ご注文ありがとうございます！”,
deliveryDate: “10月25日” // 完了のときだけに存在する特別なデータ
};
// 【3. エラーのデータ】
// type: “ERROR” というタグを持たせます
const errorState = {
type: “ERROR”,
message: “申し訳ありません。クレジットカードの限度額を超えています。”
};
どうでしょう？ すべてのオブジェクトに `type` というプロパティがあるのが分かりますか？ これが「タグ」です。
—
4. `switch` 文で安全にパキッと分岐させる
データにタグをつけたら、次はそれをどう料理するか、つまり「判定と分岐」です。
ここで大活躍するのが `switch` 文です。オブジェクトの `type` を覗き見して、状態ごとに処理を綺麗に分けちゃいましょう。
以下のコードを、先ほどのコードの下にくっつけて実行してみてください。
// 画面に状況を表示する関数を作ってみます
function handleOrderState(state) {
// state（データ）の持つ ‘type’ プロパティをチェック！
switch (state.type) {
case “LOADING”:
// タグが “LOADING” だった場合の処理
console.log(“🔄 ” + state.message);
break;
case “SUCCESS”:
// タグが “SUCCESS” だった場合の処理
console.log(“✅ ” + state.message);
console.log(“📦 お届け予定日: ” + state.deliveryDate);
break;
case “ERROR”:
// タグが “ERROR” だった場合の処理
console.log(“❌ ” + state.message);
// 万が一、エラーの時に deliveryDate を読もうとしても、
// この分岐に入っていなければエラー（undefinedによる爆死）を防げます！
break;
default:
// 万が一、知らないタグが来ちゃったときの安全ネット
console.log(“⚠️ 不明なステータスです: ” + state.type);
}
}
// — 実際に動かしてみよう！ —
console.log(“— 1回目：読み込み中 —“);
handleOrderState(loadingState);
console.log(“\n— 2回目：お買い物成功 —“);
handleOrderState(successState);
console.log(“\n— 3回目：エラー発生 —“);
handleOrderState(errorState);
コンソールに綺麗にメッセージが表示されましたか？
この書き方の何が素晴らしいかと言うと、「どのデータには、どんなプロパティ（情報）が入っているか」が `switch` 文のケースごとに綺麗に整理されることです。
「あ、`SUCCESS` の中身を触るときだけ `deliveryDate` を使えばいいんだな」と、頭の中がすごくスッキリ整理整頓されますよね。これが、実務でプロたちがこのパターンを愛してやまない理由です。
—
5. つまずきやすいポイントと「大丈夫だよ」のフォロー
ここまで読んで、「なるほど、便利そうだな」と感じていただけたかと思います。ただ、実際に自分で書き始めると、いくつか「あれ？」と手が止まるポイントがあります。
よくあるつまずき：
1. `type` のスペルミスをしちゃう
- 「`”SUCSESS”` って書いちゃって、なぜか `switch` の `default` に落ちちゃうよ〜！」というミスは、プロも含めて人類全員が通る道です。文字を打つときは気をつけて、もしTypeScriptなどの型チェック環境に進むステップが来たら、ツールに助けてもらうと一瞬で解決します。今はまずは焦らず、文字入力に気をつけましょう！
2. `if` 文でもいいの？
- 「`switch` 文じゃなくて、普通の `if (state.type === ‘SUCCESS’)` じゃダメなの？」という疑問。もちろん、最初は `if` 文でも全然大丈夫です！ 自分にとって一番読みやすい書き方から始めてくださいね。ただ、分岐のパターンが多くなってくると `switch` 文の方が整理しやすくなるので、頭の片隅に置いておいてもらえればオッケーです。
—
まとめ：一歩ずつ、安全なコードへ
今回は、JavaScriptでのデータ管理をぐっと安全にする「タグ付きユニオン（判別共用体）」についてお話しました。
- オブジェクトには `type` プロパティ（タグ）を持たせる
- `switch` 文や `if` 文を使って、タグごとに安全に処理を分岐させる
- これによって、「データの形が分からない不安」や「予期せぬエラー」から身を守ることができる
最初は難しく感じるかもしれませんが、小さなアプリを作るときに「あ、ここに `type` を置いておこうかな」と意識するだけで、あなたの書くコードの質は劇的に変わります。
焦る必要は全くありません。一歩ずつ、昨日より少しだけスッキリしたコードが書けるようになっていけば大成功です。あなたのJavaScriptの学習を、心から応援しています！
コメント