カテゴリ: TypeScript 更新日: 2026/02/18

TypeScriptのオブジェクト型の書き方と構造の指定方法をやさしく解説!

TypeScriptのオブジェクト型の書き方と構造の指定方法
TypeScriptのオブジェクト型の書き方と構造の指定方法

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで、ひとつにまとまったデータを扱いたいときって、どう書けばいいですか?」

先生

「それなら“オブジェクト型”を使うのが便利ですよ。複数の情報を1つにまとめて扱えるんです。」

生徒

「オブジェクト型って、どうやって書くんですか?難しそう…」

先生

「大丈夫!まずは基本の書き方から丁寧に説明するので、一緒に学んでいきましょう。」

1. オブジェクト型とは?

1. オブジェクト型とは?
1. オブジェクト型とは?

TypeScript(タイプスクリプト)におけるオブジェクト型とは、「複数の項目(情報)をひとつにまとめて扱うための型」です。バラバラの値を別々に管理するのではなく、意味のある情報を1つのまとまりとして整理できるのが特徴です。

たとえば、「名前」「年齢」「住所」といった情報は、すべて「ある人物」に関するデータですよね。これらを1つのオブジェクトとしてまとめることで、誰の情報なのかが分かりやすくなり、管理もしやすくなります

JavaScriptにもオブジェクトはありますが、TypeScriptではさらに一歩進んで、どんな項目があって、どんな型の値が入るのかをあらかじめ決めておくことができます。これが「オブジェクト型」です。

たとえば、「名前は文字列」「年齢は数値」といったルールを最初に決めておくことで、間違ったデータが入るのを防げます。


let sampleUser = {
    name: "山田太郎",
    age: 25
};

このように、関連する情報をひとまとめにしたデータを扱う場面で、オブジェクト型はとてもよく使われます。まずは「情報をセットで持つ箱」だとイメージすると理解しやすいでしょう。

2. オブジェクト型の基本的な書き方

2. オブジェクト型の基本的な書き方
2. オブジェクト型の基本的な書き方

それでは、TypeScriptでオブジェクト型を実際に書く方法を見ていきましょう。ここでは、「名前」と「年齢」という2つの情報を持つ、シンプルな人物データを例にします。

TypeScriptでは、変数名のあとに:(コロン)を書き、その右側に「オブジェクトの形」を指定します。これにより、「どんな項目があって、それぞれ何の型なのか」をはっきりさせることができます。


let person: {
    name: string;
    age: number;
} = {
    name: "山田太郎",
    age: 25
};

この例では、personという変数に対して、「nameは文字列」「ageは数値」というルールを先に決めています。そのルールに合ったデータだけを代入できる、という仕組みです。

ポイントは、左側で型(設計図)を決めて、右側で実際の値を入れているという点です。この形を覚えておくと、オブジェクト型の読み書きがぐっと楽になります。

プログラミング未経験の方は、「項目名と型をセットで書く」と意識すると、オブジェクト型の構造が理解しやすくなります。

3. オブジェクト型に指定できる主な型

3. オブジェクト型に指定できる主な型
3. オブジェクト型に指定できる主な型

オブジェクト型の各項目(プロパティ)には、いろいろな型を組み合わせて指定できます。ここを押さえると、「この情報は文字」「これは数字」「これはYES/NO」といったルールをはっきり決められるので、データのミスが起きにくくなります。

よく使う型は、まず次の4つです。

  • string:文字列(例:「名前」「住所」「商品名」など)
  • number:数値(例:「年齢」「料金」「在庫数」など)
  • boolean:真偽値(例:「在庫があるか」「ログイン済みか」など)
  • 配列型:同じ種類の値を複数まとめる(例:「タグ一覧」「購入履歴」など)

たとえば、商品情報を表すオブジェクトを作るなら、「商品名は文字列」「価格は数値」「在庫があるかはtrue/false」というように型を決めておくと分かりやすいです。


let product: {
    title: string;
    price: number;
    inStock: boolean;
} = {
    title: "ノートパソコン",
    price: 120000,
    inStock: true
};

このように型を決めておくと、たとえばpriceに文字を入れたり、inStockに「はい/いいえ」のような文字列を入れようとしたときに、TypeScriptがすぐに「それは違うよ」と教えてくれます。初心者ほど、このチェック機能のありがたさを実感しやすいです。

4. オブジェクト型の中で「?」を使う方法(任意プロパティ)

4. オブジェクト型の中で「?」を使う方法(任意プロパティ)
4. オブジェクト型の中で「?」を使う方法(任意プロパティ)

すべての項目が「必須」である必要はありません。場合によっては、「あってもなくてもいい情報」もありますよね。そんなときは、プロパティ名のあとに?(はてなマーク)をつけます。


let user: {
    id: number;
    nickname?: string;
} = {
    id: 1
};

nicknameはあってもなくてもOKなので、省略してもエラーになりません。

5. オブジェクト型の入れ子構造(ネスト)

5. オブジェクト型の入れ子構造(ネスト)
5. オブジェクト型の入れ子構造(ネスト)

オブジェクトの中に、さらに別のオブジェクトを含めたい場合もあります。これをネスト(入れ子構造)といいます。


let employee: {
    name: string;
    department: {
        name: string;
        floor: number;
    };
} = {
    name: "佐藤花子",
    department: {
        name: "開発部",
        floor: 3
    }
};

このように、構造が深くなってもTypeScriptなら型をしっかり定義できるので、プログラムのミスを減らせます。

6. オブジェクト型と型エラーの確認

6. オブジェクト型と型エラーの確認
6. オブジェクト型と型エラーの確認

TypeScriptは、型が合わないときに自動的にエラーを出してくれます。たとえば、数値を入れるべきところに文字列を入れてしまった場合です。


let book: {
    title: string;
    pages: number;
} = {
    title: "TypeScript入門",
    pages: "三百ページ" // これはエラー!
};

Type 'string' is not assignable to type 'number'.

このように、TypeScriptを使うことで間違った型のデータを早い段階で見つけることができます。

7. オブジェクト型の書き方を覚えるコツ

7. オブジェクト型の書き方を覚えるコツ
7. オブジェクト型の書き方を覚えるコツ

オブジェクト型を覚えるときは、以下のポイントを意識しましょう。

  • 「{}」で囲む:オブジェクト型の基本
  • プロパティ名: 型の形で1つずつ書く
  • 最後の「,(カンマ)」を忘れない
  • ネストする場合も型をしっかり書く
  • 任意プロパティには「?」をつける

最初は覚えることが多く感じるかもしれませんが、何度も書いているうちに自然と身につきます。

まとめ

まとめ
まとめ

TypeScriptにおけるオブジェクト型の書き方は、初心者にとってやや難しく感じる部分もありますが、型を明確に定義することで、プログラムの信頼性と読みやすさが格段に向上します。特に、複数の情報を1つにまとめて扱いたい場面では、オブジェクト型を使うことでデータ構造がすっきり整理され、後から見直す際にも理解しやすくなります。

基本の書き方としては、{ name: string; age: number }のように、プロパティ名と型をセットで記述する方法が一般的です。また、string型number型boolean型など、さまざまな型を柔軟に組み合わせることが可能です。

実務では、任意の項目を扱いたい場面も多いため、?を使った任意プロパティの指定方法も重要です。たとえば、ニックネームのように「入力されることもあれば、省略されることもある」という情報はnickname?: stringのように書くことで、柔軟に対応できます。

また、オブジェクトの中にさらにオブジェクトを持たせるネスト構造も、現実のデータを扱う上でよく使われるパターンです。部署情報や住所情報のように複数の階層に分かれるデータも、型定義を丁寧に行うことで安全かつ見通しの良い設計ができます。

型エラーに対してもTypeScriptは非常に厳密です。間違った型の値が代入された場合には、実行前にしっかりエラーを出してくれるので、開発中のトラブルを未然に防げます。この「事前に気づける」というのが、JavaScriptと違ってTypeScriptが選ばれる大きな理由のひとつでもあります。

以下は、今回の学習内容を整理した簡単なサンプルコードです。


let student: {
    id: number;
    name: string;
    email?: string;
    course: {
        title: string;
        credits: number;
    };
} = {
    id: 101,
    name: "田中一郎",
    course: {
        title: "TypeScript基礎",
        credits: 3
    }
};

console.log(student.name);         // "田中一郎"
console.log(student.course.title); // "TypeScript基礎"

上記の例では、studentというオブジェクトの中にcourseというネストされたオブジェクトを含み、emailは任意プロパティとして定義しています。こうした使い方をマスターすることで、複雑なデータ構造にも対応できるようになります。

最後に覚えておいてほしいのは、型定義は「ルール」ではなく「味方」であるということです。最初は少し堅苦しく感じるかもしれませんが、慣れてくるとそのありがたみが自然と実感できるようになります。TypeScriptのオブジェクト型を使いこなすことは、安全で効率的なコードを書くための第一歩です。

先生と生徒の振り返り会話

生徒

「オブジェクト型って、最初はちょっと難しかったけど、今はだいぶ分かってきました!」

先生

「それは素晴らしいですね。構造を型で定義できるようになると、コード全体がとても整理しやすくなりますよ。」

生徒

「任意のプロパティとか、ネストしたオブジェクトも書けるようになったのが嬉しいです!」

先生

「その調子です。TypeScriptでは、型がきっちり決まっていれば、安心して大規模なアプリ開発にも挑戦できますからね。」

生徒

「次は配列の中にオブジェクトがあるパターンも学びたいです!」

先生

「いいですね。それもよく使うパターンですし、今回の内容をしっかり押さえておけばスムーズに進められますよ。」

この記事を読んだ人からの質問

この記事を読んだ人からの質問
この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問/質問を解決します

TypeScriptのオブジェクト型って何ですか?

TypeScriptのオブジェクト型とは、複数の情報をひとまとまりにして管理できるデータの形式です。「名前」「年齢」「住所」など、複数の項目を1つの変数で扱いたいときに使います。
カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptで非同期処理を扱う基本!Promise(プロミス)とasync/awaitを初心者向けに徹底解説
New2
TypeScript
TypeScriptの型に関するエラーの読み方と対処法|初心者でも理解できるエラーメッセージの意味
New3
TypeScript
TypeScriptのプロジェクトをtscでビルドする基本操作を解説!初心者にもわかるステップバイステップ
New4
JavaScript
JavaScriptでDOM操作時のパフォーマンス改善テクニックを初心者向けに解説
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptで新しい要素を作成する方法(createElement, appendChildなど)
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptのプロジェクトをtscでビルドする基本操作を解説!初心者にもわかるステップバイステップ
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptで要素の属性を操作する方法を完全解説!初心者でもわかるDOM操作入門
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptの型エイリアス(type)とは?初心者でもわかる使い方と活用例
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptのファイル分割とimport/exportの基本を徹底解説!初心者でも安心のやさしい入門