「インスタンス化」とは？~クラスとインスタンスの整理~
フロントエンドエンジニアとして1年が経過しました！
技術動画やドキュメントを読んでいると、聞き慣れない用語が少しずつ理解できるようになってきていますが、ある日「インスタンス化しておきます」という言葉に出会い、「…あれ、インスタンスってなんだっけ？」と疑問に思ったので、改めて整理してみます。
クラスとインスタンスとは？
オブジェクト指向プログラミング（OOP）でよく登場する概念です。
- クラス: 設計図のようなもので、オブジェクトがどのようなプロパティや振る舞いを持つかを定義します。
- インスタンス: クラスを基に生成される「具体的な実体」です。
実際のコードでイメージすると、以下のようになります。
// クラスに相当する部分（設計図）
type Dog = {
kinds: string;
name: string;
age: number;
};
// インスタンスに相当する部分（実体）
const dogs: Dog[] = [
{
kinds: "チワワ",
name: "ココア",
age: 1,
},
{
kinds: "パピヨン",
name: "もち",
age: 4,
},
{
kinds: "柴犬",
name: "みかん",
age: 1,
},
];
この例では、type Dogが「設計図」であり、dogsの中にあるオブジェクトが具体的な「実体」です。
現行のフロントエンド開発のクラスの扱い
現代のフロントエンド開発（Next.js など）では、直接クラスを使う機会が少なくなっています。
代わりに TypeScriptでtypeやinterfaceを用いてデータの型を定義し、それを元に実際のデータを作成することが主流です。
とはいえ、「動くからOK」ではなく、背後にある設計の概念やオブジェクト指向の考え方を理解しておくことは、実装の質を高めるためにも大切ですね。
「インスタンス化する」とは？
設計をもとに実体を作ることを指すらしく、以下の記事ではたい焼きに例えていてがとてもわかりやすかったです。
この記事から要約するとこんな感じです。
- たい焼き機（クラス）: たい焼きを焼くための設計図。
- たい焼き（インスタンス）: たい焼き機を使って焼かれたたい焼きの実体。
- インスタンス化: たい焼き機を動かして、たい焼きを焼くプロセス。
インスタンス化をする際はnewを使うことから
インスタンス化＝newすると覚えると良いという記事も見かけました。
たい焼きで表現すると...
たい焼き機をnew(インスタンス化)して、いろんな味のたい焼きが作ることができる
と言うことですね！
プログラミング用語でまとめると
「クラス」という設計図を基にして、「インスタンス」という具体的なオブジェクトを生成する行為が「インスタンス化」です。
あとがき
フロントエンドエンジニアとして1年が経ちましたが、正直なところ、まだコードを書く際に「とりあえず動けばOK」という感覚で進めてきました。
でも、先輩エンジニアたちの仕事ぶりを見ていると、「コードをしっかり理解しながら書くことの大切さ」を日々感じています。
便利なライブラリが増え、「なんとなく」できてしまう弊害があると個人的に感じているので
「なぜ？」を深掘りして理解し、ふわっとした理解から卒業するべくこれからも頑張ります🔥
この記事が同じような悩みを持つ方の参考になれば嬉しいです！
Discussion