こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
TypeScriptを書き始めの頃って、コンパイラに「おい、ここ怒られてるぞ！」って赤く波線を引かれて、頭を抱えた経験ありませんか？「ちゃんと動くはずなのに、なんで怒るんだよ…」って。特に、データの中にひょっこり現れる `null` や `undefined` に足元をすくわれるのは、TypeScriptあるあるの登竜門です。
今回は、そんな私たちを悩ませる「こいつら（nullとundefined）」を綺麗さっぱりお片付けしてくれる、すごく頼もしい相棒『`NonNullable
難しいことは抜きにして、身近なたとえ話をしながら一緒に紐解いていきましょう。大丈夫、一歩ずつ進めば絶対にすんなり理解できますよ！
—
1. `NonNullable` って、たとえるなら「仕分けネット」
突然ですが、おうちでフルーツの詰め合わせを買ったときのことを想像してみてください。
リンゴ、オレンジ、そして…なぜか「ちょっと傷んだ葉っぱ」や「緩衝材のゴミ」が混ざっているとします。
プログラムの世界における `null` や `undefined` は、まさにこの「ゴミや不要なカス」のようなものです。「データがあると思って箱を開けたら、中身が空っぽ（null）だった！」なんてことがあると、プログラムはびっくりしてパニックを起こしてしまいます。
そこで登場するのが、今回主役の `NonNullable
こいつは、データがごちゃ混ぜになった箱から、「`null` と `undefined` というゴミだけを完全に排除し、ちゃんとした中身だけを取り出すための『仕分けネット』」のようなものです。
型 `T` という箱の中に、もし `null` や `undefined` が混ざっていたとしても、このネットに通せば、それらが綺麗に濾過されて、安心安全なデータだけが手に入るというわけです。
—
2. なぜ `NonNullable` が必要なの？（現場のリアルな悩み）
Web制作やアプリ開発をしていると、サーバーからデータをもらったり、ユーザーが入力した値を受け取ったりしますよね。このとき、TypeScriptさんはとっても心配性なので、こんな風に言ってくるんです。
> 「ねえ、このデータ、もしかしたら中身が `null` かもしれないよ？ 本当にこのまま使っちゃって大丈夫？」
例えば、ユーザーのプロフィール画面を作るとしましょう。
// ユーザー名が入るかもしれないし、まだ未登録なら null かも…という型
type UserName = string | null | undefined;
この `UserName` 型のままだと、文字数を数えようと `name.length` なんて書いた瞬間に、TypeScriptに「おいおい、もし `null` だったらエラーになるぜ？」と怒られてしまいます。
ここで、「いやいや、この処理にたどり着いた時点ですでに名前が入っていることは保証されてるんだよ！」というときに、`NonNullable
—
3. 実際のコードで動きを見てみよう
百聞は一見にしかず。実際にコードを書いて、その働きをこの目で確かめてみましょう。
VS Codeなどのエディタを開いている方は、ぜひコピペして試してみてくださいね。
/
- 【サンプルコード】NonNullable
の基本のキ
/
// 1. 文字列かもしれないし、nullやundefinedかもしれないカオスな型
type MaybeString = string | null | undefined;
// 2. NonNullableを使って、nullとundefinedをシャットアウト！
type DefiniteString = NonNullable
// この時点で、DefiniteString の中身は実質的に `string` だけになります。
// 以下のように、値を入れるときに null を入れようとすると、しっかり怒ってくれます。
const validName: DefiniteString = “TypeScript太郎”; // ⭕️ これはOK！
// const invalidName: DefiniteString = null; // ❌ エラー！nullは通しません！
// const emptyName: DefiniteString = undefined; // ❌ エラー！undefinedも通しません！
すごくスッキリしていませんか？
「いろんな型が混ざってカオスになっているものから、`null` と `undefined` だけを綺麗に取り除く」という仕事を見事にこなしてくれています。
—
4. 実務でどう使う？ ちょっと実践的なシチュエーション
「理屈は分かったけど、実際の現場でどうやって使うの？」という声が聞こえてきそうですね。
よくある実務のパターンとして、「配列の中から空っぽの要素を取り除く」という場面で使ってみましょう。
/
- 【応用編】配列の中に混ざった null や undefined を掃除する
/
// フォームの入力値のリスト（未入力の項目が null になっている想定）
type FormInputs = (string | null)[];
// 配列の要素1つひとつの型を取り出して、NonNullableを適用したい！
type CleanInputs = NonNullable
// ※ CleanInputs は string だけになります
// 実際のフィルタリング処理のイメージ
const rawInputs: FormInputs = [“お名前”, null, “メールアドレス”, null, “ご意見”];
// filterメソッドを使って、確実に null じゃないものだけを絞り込む
// (TypeScriptの型ガード機能と組み合わせると、より強力になります)
const cleanedInputs: CleanInputs[] = rawInputs.filter(
(input): input is NonNullable
);
console.log(cleanedInputs); // [“お名前”, “メールアドレス”, “ご意見”] だけが残る！
このように、実務では「絞り込み（Type Guard）」を行うときの型定義のサポートとして、`NonNullable
—
5. チーフアーキテクトからの温かいアドバイス
TypeScriptの型定義を見ていると、最初は「なんでこんなにめんどくさいルールがあるんだよ…」と投げ出したくなる瞬間が絶対に来ます。私も昔はそうでした。
でも、型が厳格であればあるほど、「コードを書いている最中に、未来のエラーをバシバシ防いでくれる最強の相棒」になってくれます。
`NonNullable
もしまたエラー画面に直面して心が折れそうになったら、「あ、TypeScriptくんが心配してくれてるんだな」と深呼吸して、この仕事を思い出してみてください。
あなたのフロントエンド開発の旅が、少しでも快適で楽しいものになりますように。
それでは、また次の現場でお会いしましょう！
コメント