【TypeScript初心者】データ型④ - ボックス化を理解する

はじめに

AIは書き方を教えてくれますが、それが最善か判断できないので、勉強します...！

「読んで学ぶTypeScript」をちょっとずつ読み進めます！
今回は、ボックス化についてです！

---

コーディングに慣れていないので、ところどころ用語を調べて記載しながら書きますmm
そのため、初心者の方が理解するには、助けになるかもしれません

---

JavaScriptのデータ型

データ型：プログラムが扱うデータの種類や取り扱い方を決めるもの
データ型を適切に選ぶことで、プログラムが効率よく動作し、エラーを減らすことができる

JavaScriptのデータ型は、プリミティブ型とオブジェクトの大きく2つに分類される

• プリミティブ型：データ型の中で最も基本的なもので、最初から用意されている型
  • 言語ごとにプリミティブ型がある
• オブジェクト：プリミティブ型以外のもの、プロパティの集合
  • プロパティ：名前（key）と値（value）のペア
    • 例: name: "りんご"（key: value）

今回はプリミティブ型の特徴である、ボックス化について学びます

プリミティブ型については、こちら↓

ボックス化

• プリミティブ型をオブジェクトに変換する機能
• プリミティブ型をラッパーオブジェクトに入れて、オブジェクトのように扱う

ラッパーオブジェクト
・オブジェクト型でない値をオブジェクトで包む
・オブジェクトとしての振る舞いを持たせるもの

なぜ、プリミティブ型をオブジェクトに変換する必要があるのか

プリミティブ型の値はフィールドの参照やメソッドの呼び出しができない

• フィールド：オブジェクトが持っている「データ」や「情報」のこと
  • 例：文字数など
• メソッド：オブジェクトが持っている「機能」や「動き」のこと
  • 例：toUpperCase()など

なぜ、プリミティブ型はメソッドの呼び出し等ができないのか

• プリミティブ型は値そのものしか持たず、メソッド等を持っていないため
  • 軽量性と速度を最優先して設計されているデータ構造
• 一方、オブジェクトは複雑な構造を持つ
  • 複数の情報や、それらを実行するための機能（メソッド）を持つデータ構造

TypeScript, JavaScript は自動でボックス化される

TypeScript, JavaScriptでは、プリミティブを一時的にオブジェクトに変身させることで、ギャップを感じずにメソッドを利用できる

// 例：string はプリミティブ型
const userName = "ktrk";

// toUpperCase() メソッドを呼び出す
const upperCaseName = userName.toUpperCase();
// 結果：KTRK

自動ボックス化されてメソッドを使う流れ

1. プリミティブ型（今回だとstring型）をラッパーオブジェクトに入れる
   • string型に対応するラッパーオブジェクト（String）はフィールドやメソッドを持つ
2. メソッドがラッパーオブジェクトに対して呼び出される
3. 結果が返されて、ラッパーオブジェクトは破棄される

さいごに

今回はボックス化について、学びました！
自動で行われている仕組みと必要性を知ることができました。

アドカレ2025が開催中！

今年もアドカレ開催中です
面白そうなカレンダーがたくさんです！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考