こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
毎日フロントエンドのコードを書いていると、「あー、このデータ、絶対にここに存在してほしいのに、型定義のせいで `null` かもしれないって怒られちゃうよ…！」と頭を抱えたくなる瞬間、ありますよね。
大丈夫ですよ、そのイライラ、皆が通る道です。TypeScriptは慎重すぎるガードマンみたいなものなので、「いやいや、ここは絶対大丈夫だから！」と私たちが教えてあげる必要があります。
そこで今回は、TypeScriptが誇る心強いお助けユーティリティ型、`NonNullable
—
1. 「いるはずなのに、捕まらない！」モヤモヤする日常
まずは、よくあるシチュエーションから考えてみましょう。
例えば、あなたがネットショップの「お気に入りリスト」を作っているとします。画面上では「お気に入りに追加された商品」だけを表示しているので、そこにある商品は絶対にデータが存在するはずですよね。
でも、TypeScriptくんはこう言います。
「待て待て、もしかしたらそこにあるのは `null` かもしれないし、`undefined` かもしれないぞ。油断するな！」
// 商品のIDが入っているかもしれないし、入っていないかもしれないリスト
type CartItem = string | null | undefined;
この状態のまま、「よし、商品の文字数を数えよう！」とコードを書くと……。
function printItemLength(item: CartItem) {
// 怒られる：「おい、itemはnullかもしれないから、lengthなんて呼べないぞ！」
console.log(item.length);
}
「いやいや、ここにたどり着いた時点で `null` なんてあり得ないんだってば！」と、画面の前でツッコミを入れたくなりますよね。この「いるはずなのに、型の上では居留守を使われるモヤモヤ」を綺麗に解決してくれるのが、今回主役の `NonNullable
—
2. `NonNullable` ってなに？（身近な例えで理解しよう）
`NonNullable
イメージしてみてください。
ダンボール箱（型 `T`）の中に、欲しかったおもちゃと一緒に、得体の知れないゴミやホコリ（`null` や `undefined`）が混ざって届いたとします。
`NonNullable
これで、箱の中には確実に欲しかったものだけが残るため、安心して扱うことができるようになります。
—
3. 実際にコードを書いてみよう
百聞は一見にしかず。実際にエディタで動かせるコードを見てみましょう。
以下のコードをコピーして、ご自身のTypeScript環境（Playgroundなど）に貼り付けてみてください。
// 1. 文字列かもしれないし、nullかもしれない、undefinedかもしれない型
type MaybeString = string | null | undefined;
// 2. NonNullableを使って、nullとundefinedを強制退場させる！
type DefinitelyString = NonNullable
// 結果：DefinitelyString の中身は、純粋な `string` だけになります！
// — 実用的な関数の例 —
// お買い物カゴから、確実に存在するユーザーIDを受け取る処理を想定します
function processUserId(userId: NonNullable
// ここに到達した時点で、userId は確実に string 型であることが保証されています！
// だから、大文字に変換するメソッド `.toUpperCase()` も安心して呼び出せます。
const upperId = userId.toUpperCase();
console.log(`処理中のユーザーID: ${upperId}`);
}
// 【OKな呼び出し例】
processUserId(“user_12345”); // 文字列なのでバッチリ動きます！
// 【NGな呼び出し例（もし書いたらTypeScriptが赤く怒ってくれます）】
// processUserId(null); // ダメです！nullは排除されています
// processUserId(undefined); // ダメです！undefinedも排除されています
どうでしょう？ `NonNullable
—
4. 現場でよくある「おいしい」使い方
実務の現場では、この `NonNullable
一番多いのは、「配列の中にある `null` や `undefined` を一網打尽にしたい時」や、「APIから返ってきたデータの型をきれいに整えたい時」です。
例えば、ユーザーのアンケート結果のリスト（回答がない人は `null` になっている）を扱う場合を考えてみましょう。
// アンケートの回答（回答がない人は null の可能性がある）
type Answers = (string | null)[];
// 応用テクニック：配列全体の型から、nullをごっそり排除したい場合などにも応用できます
// （※実際には filter や他の型ガードと組み合わせることで真価を発揮します）
実務でコードを書いていて、「あ、ここ、絶対型が枯渇してる（nullやundefinedが混ざって邪魔をしている）」と感じたら、思い出し笑いでもいいのでこの `NonNullable
—
まとめ：TypeScriptと仲良くするために
TypeScriptの型定義は、最初は堅苦しくて「めんどくさいな」と感じるかもしれません。でもそれは、未来のバグや、真夜中の緊急メンテナンスからあなたを守るための「優しい防壁」です。
今回学んだ `NonNullable
「nullかもしれない不安」を「絶対大丈夫という確信」に変えて、快適なTypeScriptライフを楽しんでいきましょう！それではまた、次の現場でお会いしましょう。チーフアーキテクトでした！
コメント