【入門編】 as constによるリテラル型の固定 – TypeScript実践ガイド

TypeScriptの世界へようこそ！
最初は「型？インターフェース？ジェネリクス？なんか難しそう…」と圧倒されてしまうかもしれませんが、大丈夫。今日は、あなたのコードを劇的に賢く、そして「壊れにくく」する魔法のテクニック、`as const` についてお話しします。

現場の第一線で戦っているエンジニアたちが、なぜこぞってこれを使うのか。その理由を、一緒に紐解いていきましょう。

—

まず、普通の変数定義を思い出してみてください。

let status = “success”;
// TypeScriptは「これは文字列（string）だね」と判断します。

TypeScriptは優秀なので、`status` という変数は「文字列なら何でもいいよ」と判断します。しかし、開発現場では「いやいや、`status` に入るのは `’success’` か `’error’` だけで、それ以外は絶対に入ってほしくないんだ！」という場面がめちゃくちゃ多いんです。

普通の書き方だと、後から `status = “hoge”` と書いてもTypeScriptは文句を言いません。これがバグの温床になります。

ここで登場するのが `as const` です。
これは、「この中身を二度と変えさせない（読み取り専用にする）し、中身もこの値そのものとして固定するよ！」とTypeScriptに宣言する強力な魔法です。

たとえるなら、「プラスチックのケースに入れて、上から接着剤で蓋をしてしまった状態」です。

// 普通の定数
const config = {
mode: “dark”,
version: 1
};
// これだと、config.mode = “light” と書き換えられてしまう可能性がある。

// as const をつけた場合
const config = {
mode: “dark”,
version: 1
} as const;

// こうすると、config.mode は “dark” という型そのものに固定されます。
// もし config.mode = “light” と書こうものなら、TypeScriptが真っ赤になって怒ってくれます！

どうですか？「そんなことして何が嬉しいの？」と思うかもしれません。でも、これが大規模な開発になると、「ここには絶対に定義した値以外入らない」という絶対的な安心感として機能するんです。

—

例えば、Webアプリで「支払い方法」を選択する機能を作るとしましょう。

const PAYMENT_METHODS = [
“credit_card”,
“bank_transfer”,
“paypay”
] as const;

// この書き方をすると、PAYMENT_METHODSは「ただの文字列の配列」ではなく、
// 「”credit_card” か “bank_transfer” か “paypay” のどれか」という
// 非常に厳密なリストに変化します。

もし、あなたがこのリストを元にコードを書いているとき、うっかりタイポをして `”credit-card”`（アンダースコアをハイフンにした）と書いてしまったら……。

`as const` を使っていれば、エディタが「そんな支払い方法、リストに存在しないよ！」と即座に教えてくれます。デバッグの手間が一つ減る。これこそが、TypeScriptの真骨頂なんです。

—

`as const` を使うと、中身がすべて `readonly`（読み取り専用）になります。
「えっ、後から変更できないなんて不便じゃない？」と思うかもしれません。

でも、考えてみてください。プログラムの中で「設定値」や「選択肢」のような大事なデータが、途中で勝手に書き換わってしまったら、それはもう大事故ですよね。

「最初から最後まで、この値は変わらない」と保証すること。
これこそが、バグを未然に防ぐための最強の防御術なんです。

—

最初は `as const` を見かけても「何のために書いてあるんだろう？」と思うかもしれません。でも、それは「このデータは絶対に壊さないでくれ！」という、プログラマーから未来の自分への熱いメッセージなんです。

この感覚を覚えておくだけで、あなたのコードの品質は一段上のレベルに到達します。怖がらず、どんどん使ってみてくださいね。もしエラーが出たら、それはTypeScriptがあなたを守ろうとしているサインです。

「大丈夫ですよ、ちゃんと型を定義できれば、怖いものなんてありませんから！」

それでは、次回のコードリーディングも楽しんでいきましょう。ハッピーコーディング！