こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。
JavaScriptを書いていると、避けて通れないのが「型」の話ですよね。「あれ、この変数、いま`null`が入ってるんだっけ？それとも普通の文字列だっけ？」なんて悩んで、画面が真っ白になって冷や汗をかいた経験、誰しも一度や二度はあるはずです。大丈夫、みんな最初はそこでつまずきます。
TypeScriptを導入するのが一番の近道…と言いたいところですが、プロジェクトの規模や構成によっては「そこまで大掛かりにはしたくない、でもコードの意図をハッキリさせたい！」という場面も多いですよね。そんなとき、JSDoc（ジェイズドック）というコメントの書き方を知っているだけで、あなたのコードは劇的に読みやすく、そして強くなります。
今回は、JSDocの世界で使われる「Null許容型（ぬるきょようがた）」と「非Null型（ひぬるがた）」について、身近な例えを交えながら優しく紐解いていきましょう！
—
1. 「箱」のイメージで考えるJavaScriptのデータ
まずは、JavaScriptの変数を「お道具箱」や「郵便受け」に例えてみてください。
プログラムを書いていると、「ここに必ず手紙（データ）が入っている箱」もあれば、「今は空っぽ（`null`や`undefined`）かもしれない箱」もありますよね。
JavaScriptはとても優しい（というか何でも受け入れちゃう）言語なので、空っぽの箱に突然リンゴを入れたり、逆にリンゴが入っていた箱を空っぽにしたりできちゃいます。これが柔軟で便利な反面、大規模な開発になると「おい、この箱の中身はいったい何が入ってるんだっけ？」と迷子になる原因になります。
そこで登場するのが JSDoc です。コードの機能を説明するコメントの一種ですが、ここに専用のルールで「この箱の中身はこれ！」と書いておくと、エディタ（VS Codeなど）が「おっ、ここは空っぽの可能性があるから気をつけてね！」と教えてくれるようになります。
—
2. Null許容型（`?`）と非Null型（`!`）ってなに？
JSDocで変数の型を指定するとき、型名の前に `?`（クエスチョンマーク） や `!`（エクスクラメーションマーク） をつけることで、`null`や`undefined`を受け入れていいのか、絶対に許さないのかを厳密にコントロールできます。
なんだか難しそうな記号ですが、スーパーのお買い物に例えると一発で理解できます。
🍎 非Null型（`!`）：絶対に中身が入っている「お会計済みのリンゴ」
- 記法: `!String` や `!Object` など
- 意味: 「ここには必ず指定したデータが入っています。`null`や`undefined`なんて空っぽなものは一切認めません！」という強い意志を表します。
- 例え: レジを通してお金も払って、手元に確実に存在しているリンゴです。「中身が何もない」なんてことは絶対にあり得ません。
🍏 Null許容型（`?`）：空っぽの可能性がある「配送待ちのダンボール箱」
- 記法: `?String` や `?Object` など
- 意味: 「データが入っているかもしれないし、今はまだ `null`（空っぽ）かもしれないよ」という寛大な状態です。
- 例え: ネット通販で頼んだ荷物が届くのを待っている状態。ダンボールはそこにあるけれど、開けてみたら中身がまだ入っていなかったり、あるいは商品が入っていたりしますよね。
—
3. 実践！コードで見てみよう
百聞は一見にしかず。実際のJSDocの書き方を見てみましょう。
お手元のエディタ（VS Codeなど）にコピペして試せるように、コメントも日本語でたっぷり書いておきました。
/
- ユーザーの名前を表示する関数
- @param {?string} userName – ユーザー名（名前がない場合は null の可能性がある）
/
function displayUserName(userName) {
// もし userName が null または undefined だったら…
if (userName === null || userName === undefined) {
console.log(“ゲストさん、いらっしゃいませ！”);
return;
}
// ここに到達したということは、userName には確実に文字列が入っている！
// 大文字に変換して表示するよ
console.log(`こんにちは、${userName.toUpperCase()}さん！`);
}
// — 使い方テスト —
// パターン1: 普通の名前を渡す（非Nullな文字列）
displayUserName(“tanaka”);
// 出力: こんにちは、TANAKAさん！
// パターン2: まだ名前が決まっていないので null を渡す（Null許容）
displayUserName(null);
// 出力: ゲストさん、いらっしゃいませ！
このコードでは、引数の `userName` を `{?string}` と定義しています。
「あ、この引数は `null` が入ってくることもあるんだな」とコードを読む人（そして未来の自分）が一目で理解できるようになります。
—
4. エディタがあなたを優しく守ってくれる
「わざわざこんな記号を書く意味あるの？」と思われるかもしれませんが、最大のメリットはエディタ（VS Codeなど）が先回りしてバグを防いでくれることにあります。
例えば、さっきの関数の中で、もし `?` をつけ忘れて「絶対文字列が入るはずだ！」と思い込んでコードを書いたとします。すると、`null` が渡ってきたときに `.toUpperCase()` を実行しようとして、JavaScriptが次のようなエラーを吐き出します。
> `TypeError: Cannot read properties of null (reading ‘toUpperCase’)`
> （通称：TypeError祭り、画面が真っ白になる恐怖の瞬間です）
JSDocできちんと `?string` と書いておけば、VS Codeなどの賢いエディタは、「おいおい、`userName` は `null` かもしれないのに、そのままメソッドを呼ぶのは危ないんじゃないかい？」と黄色い波線を出して警告してくれます。
この警告こそが、私たちエンジニアの強い味方です。
—
さいごに
今回は、JSDocにおけるNull許容型（`?`）と非Null型（`!`）についてお話ししました。
- `?`（クエスチョンマーク）: 「空っぽ（null/undefined）かもしれないよ！」（許容する）
- !`（エクスクラメーションマーク）: 「絶対にデータが入っているよ！」（許容しない）
TypeScriptのような本格的なビルド環境を整えるのはハードルが高くても、JSDocなら今日から、今書いているJavaScriptのファイルにそのまま書き込むだけで始められます。
最初は難しく感じるかもしれませんが、コードの安全性がグッと高まり、エラーに怯える夜が確実に減っていきますよ。
あなたのWeb制作・開発ライフが、少しでも快適で楽しいものになりますように。もしまた分からないことが出てきたら、いつでも気軽に扉を叩いてくださいね！
コメント