TypeScriptの配列型・タプル型の使い方と違いをやさしく解説！初心者でも理解できる型の基本

1. 配列型とは？

1. 配列型とは？

まずは配列型（Array）について解説します。配列型とは、「同じ種類のデータ（型）を、順番に並べてまとめて扱える」仕組みです。

例えば、「名前の一覧」や「年齢のリスト」など、すべてが同じ型のデータをまとめたいときに便利です。

TypeScriptでは、次のように書きます：

let fruits: string[] = ["りんご", "みかん", "バナナ"];

この例では、「文字列（string）」だけを並べた配列になっています。

配列には、数字（number）や真偽値（boolean）など、どんな型でも使うことができます。

let numbers: number[] = [10, 20, 30];
let flags: boolean[] = [true, false, true];

中身を取り出すときは、インデックス（番号）を使います。インデックスは0から始まります。

console.log(fruits[0]); // "りんご"

りんご

2. タプル型とは？

2. タプル型とは？

次にタプル型（Tuple）を見てみましょう。

タプル型は、「異なる種類（型）のデータ」を決まった順番で並べたいときに使います。

例えば、「名前（文字列）」と「年齢（数字）」をセットにしたいとき、次のように書けます。

let person: [string, number] = ["たろう", 25];

この例では、1つ目は文字列、2つ目は数値と決まっています。

取り出すときは、配列と同じようにインデックスを使います。

console.log(person[0]); // "たろう"
console.log(person[1]); // 25

たろう
25

順番が決まっているので、間違えた順番にするとエラーになります。

// エラー例（順番が違う）
let wrong: [string, number] = [30, "たろう"];

3. 配列型とタプル型の違いとは？

3. 配列型とタプル型の違いとは？

ここまでで、配列型とタプル型の基本を学びました。では、どんな違いがあるのでしょうか？

• 配列型： 同じ種類のデータを自由な数だけまとめる。
• タプル型： 異なる種類のデータを決まった順番でまとめる。

つまり、

• 「名前の一覧」→ 配列型
• 「名前と年齢のセット」→ タプル型

このように使い分けます。

4. 配列型・タプル型の応用例

4. 配列型・タプル型の応用例

少し応用して、複数のタプルを配列で管理することもできます。

たとえば、「複数の人の名前と年齢をまとめたい」ときは、次のように書けます。

let people: [string, number][] = [
    ["たろう", 25],
    ["じろう", 30],
    ["はなこ", 22]
];

このように、タプル型と配列型を組み合わせることで、データをより便利に整理することができます。

取り出すときも、インデックスを2段階で使います。

console.log(people[1][0]); // "じろう"

じろう

5. 型注釈（アノテーション）とは？

5. 型注釈（アノテーション）とは？

ここで出てきた: string[]や: [string, number]の部分は、型注釈（アノテーション）といいます。

これは、「この変数にはどんな型の値が入るのか」を明示するための記述です。

型注釈を使うことで、TypeScriptが間違いを早めに教えてくれるようになります。

6. 配列やタプルを使うときの注意点

6. 配列やタプルを使うときの注意点

最後に、初心者が配列やタプルを使うときに注意したいポイントを紹介します。

• 配列： すべて同じ型でそろえる必要がある。
• タプル： 順番と型をきっちり守る必要がある。
• 配列やタプルの要素にアクセスするには、インデックス（番号）を使う。

特にタプルは、順番を間違えるとエラーになるので、定義の順番通りに使うことが大切です。

まとめ

まとめ

TypeScriptでは、複数の値をひとまとめに管理するために「配列型（Array）」と「タプル型（Tuple）」という2つの便利な仕組みが用意されています。これらはどちらも似たような見た目をしていますが、用途や設計思想が異なります。配列型は同じ型のデータをいくつでも並べて扱いたい場合に使い、タプル型は異なる型のデータを決められた順番でセットにしたいときに使います。

たとえば、string[]型で「フルーツの名前一覧」を作成したり、[string, number]型のタプルで「名前と年齢の組み合わせ」を定義することができます。このように用途に応じて正しく使い分けることで、コードはより明確で読みやすくなり、エラーも未然に防ぐことができます。

特に初心者がTypeScriptでつまずきやすいのが「型注釈」や「インデックスの扱い」です。配列やタプルを使うときは、型と順序を正しく意識することが大切です。タプル型では順番を間違えるとすぐにエラーになるため、定義と使用箇所の整合性を丁寧に確認する習慣をつけておきましょう。

また、複数のタプルを配列でまとめる構文（例：[string, number][]）なども登場しましたが、これは実務でもよく使われるテクニックです。リスト構造とタプルの組み合わせによって、複雑な情報を整理する力がぐっと高まります。

以下は、まとめとして再掲する応用的な記述例です。複数人の名前と年齢をまとめて表示する例を見てみましょう。

let people: [string, number][] = [
    ["さくら", 20],
    ["たけし", 32],
    ["ひかり", 28]
];

people.forEach(([name, age]) => {
    console.log(`${name}さんは${age}歳です`);
});

さくらさんは20歳です
たけしさんは32歳です
ひかりさんは28歳です

このようにforEachの中で分割代入（[name, age]）を活用することで、構造を保ちつつ柔軟に扱うことができます。配列やタプルの設計がしっかりしていれば、関数処理やループ処理も簡潔に保つことができ、バグの発生率も低く抑えられます。

タプル型は「順番がすべて」であり、配列型は「同一型で揃える」ことが鉄則です。これを意識すれば、データの構造が頭の中でも整理しやすくなり、保守性の高いコードが書けるようになります。

最後に、型注釈を面倒くさがらずに書く習慣を持つことで、IDEの支援機能やエラーメッセージも正確に働き、TypeScriptの恩恵を最大限に活用できるようになります。配列型・タプル型の使い方を正しく理解しておくことは、型安全な開発の第一歩です。