こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとおせっかいなチーフアーキテクトです。
JavaScriptを書き始めの頃って、「あれ？さっき代入したはずの値が、いつの間にか別の場所に書き換わってる！？」なんてバグに頭を抱えた経験、ありませんか？ 私は数え切れないほどあります（笑）。
特にアプリが大きくなってくると、自分以外の人（あるいは未来の自分）が、うっかり大切な設定データやIDを書き換えてしまい、アプリ全体がクラッシュする……なんていう悲劇が起きがちです。
そんな時、「おいおい、ここは触っちゃダメな場所だよ！」とIDE（VS Codeなどのエディタ）が優しく、かつビシッと警告してくれたら、めちゃくちゃ助かりますよね。
今回は、そんな夢のような安全網を作ってくれる魔法のJSDocタグ、`@readonly` について、身近な例えを交えながらじっくりとお話ししていきますね。
—
1. プロパティの「書き換え事故」を防ぎたい！
まずはイメージしやすいように、身近なもので例えてみましょう。
あなたの手元に、お気に入りの「鍵付きの透明なピルケース（お薬ケース）」があるとします。
このケースには、毎日絶対になくしてはいけない「今日のサプリメント（データ）」が入っています。
もし、このケースに鍵がかかっておらず、誰でもパカッと開けて中身を自由に入れ替えられたり、別のものとすり替えられたりしたらどうでしょう？
「あれ？昨日入れたサプリがない！？」と、あとでパニックになりますよね。
JavaScriptのオブジェクトもこれと全く同じです。
デフォルトの状態では、オブジェクトのプロパティは「鍵なしのケース」。どこからでも自由に中身を書き換えられてしまいます。
// 普通のオブジェクト（鍵なしのケース）
const user = {
id: 1001,
name: ‘タロウ’
};
// うっかり誰かがIDを書き換えちゃった！
user.id = 9999;
// 怖〜い！簡単に書き換わっちゃいました……。
「いやいや、`id`なんて一度決まったら絶対に変わっちゃ困るんだよ！」という時に登場するのが、今回主役の `@readonly` です。
—
2. `@readonly` ってなに？（TypeScriptがなくても恩恵を受けられる魔法）
`@readonly` は、JavaScriptのコードを書くときにコメントとして添える「JSDoc（ジェイエスドック）」という仕組みの一つです。
「うわ、なんか難しそうな用語が出てきた……」と思いました？
大丈夫です、安心してください。難しい設定はいりません。VS Codeなどのエディタを使っているなら、コメントを書くだけで、エディタがあなたのコードの監視員になってくれるというスグレモノなんです。
TypeScriptのような本格的な型定義の導入コストをかけなくても、通常の `.js` ファイルのまま、今日からすぐに始められるのが最大の魅力です。
—
3. 実際に書いてみよう！動かせるサンプルコード
百聞は一見に如かず。実際にエディタでどう動くのか、コードを見てみましょう。
そのままコピペして、VS Codeなどのエディタで試してみてくださいね。
/
- ユーザー情報を表す設計図（オブジェクト）です
- @type {Object}
/
const userAccount = {
/
- ユーザーの識別ID（一度発行されたら絶対に変更不可！）
- @readonly
- @type {number}
/
id: 42,
/
- ユーザーの名前（こちらは変更OK）
- @type {string}
/
name: ‘花子’
};
// — ここから実験です —
// 1. 名前の変更は問題なし！
userAccount.name = ‘鈴木 花子’;
console.log(userAccount.name); // ちゃんと「鈴木 花子」に変わります
// 2. IDを書き換えようとしてみる……？
userAccount.id = 999;
// ほら！VS Codeの画面上で、この `id` の部分に「シュッ」と赤い波線（エラー線）が入りませんか？
// マウスオーバーすると、「このプロパティは読み取り専用です」とエディタが優しく怒ってくれます。
ね？ すごいでしょう？
コードを実行する前に、エディタを書いている段階で「おっと、そこは触っちゃダメだよ！」と教えてくれるんです。これが、私たち開発者のミスをどれだけ救ってくれることか……！
—
4. 現場で役立つ！つまずきやすいポイントと注意点
ここで、現場のシニアエンジニアから少しだけ補足のワンポイントアドバイスです。
実は、この `@readonly` には、JavaScriptならではの「お茶目なクセ」があります。
Q. エディタが赤く怒ってくれるけど、無理やり実行したら書き換わっちゃうの？
A. はい、JavaScriptの実行そのものを強制的に止めるわけではありません。
TypeScriptの `readonly` キーワードなどとは違い、JSDocの `@readonly` は、あくまで「エディタ（VS Codeなど）の入力補完や警告機能に教えるためのヒント」です。
もし `useDefineForClassFields` などの厳密な設定をしていない通常のJS環境では、無理やりビルドして実行すれば値が変わってしまうこともあります。
そのため、チームで開発する時は「エディタの警告を無視しない」という共通の意識を持つことが大切です。
さらに、絶対に絶対に変更されたくない重要な定数データを扱う場合は、Object.freeze() と組み合わせると鉄壁になりますよ。
const config = Object.freeze({
/
- APIのベースURL
- @readonly
/
API_BASE: ‘https://api.example.com’
});
ここまでやれば、うっかりミスも完全ブロックです！
—
5. おわりに：小さな習慣が、コードを美しくする
JavaScriptは、なんでも自由に書ける「自由なジャングル」のような言語です。そこが最高に楽しいところでもありますが、時としてその自由さが牙をむき、バグという名のモンスターを生み出します。
そんなジャングルの中で、 `@readonly` はあなたやチームメンバーを守る小さな「標識」になってくれます。
「このデータは大事だから、勝手にいじっちゃダメだよ」
そんなメッセージをコードのコメントに残すだけで、未来の自分や仲間が「おっ、親切だな」と笑顔になれるはずです。
最初は難しく考えず、まずは一番間違えたくないプロパティの頭に `/ @readonly /` を1行添えることから、始めてみませんか？
あなたのフロントエンドライフが、より快適でエラーのないものになりますように。それでは、また次の現場でお会いしましょう！
コメント