TypeScriptの配列型・タプル型の使い方と違いをやさしく解説！初心者でも理解できる型の基本
生徒
「TypeScriptで複数の値をまとめて管理する方法ってありますか？」
先生
「はい、TypeScriptでは配列型とタプル型という2つの方法があります。どちらも複数の値をひとまとめにすることができますよ。」
生徒
「どっちを使えばいいのか迷いそうです…。どう違うんですか？」
先生
「それでは、配列型とタプル型の基本的な使い方と違いについて、順番に説明していきましょう！」
1. 配列型とは？
まずは配列型（Array）から見ていきましょう。配列型とは、「同じ種類のデータ（型）を、順番にずらっと並べて1つのまとまりとして扱える」仕組みです。イメージとしては、同じ形の箱が横に並んでいて、左から順番に番号がふられている棚のようなものです。
例えば、「名前の一覧」や「年齢のリスト」など、すべてが同じ型のデータをまとめたいときに配列型を使います。TypeScriptで配列を使うと、バラバラに変数を用意する必要がなくなり、一覧として管理しやすくなります。
TypeScriptでは、次のように書きます：
let fruits: string[] = ["りんご", "みかん", "バナナ"];
この例では、「文字列（string）」だけを並べた配列になっています。["りんご", "みかん", "バナナ"]のように、同じ種類の値をカンマ区切りで並べるのが配列の基本的な書き方です。: string[]という部分は、「文字列の配列ですよ」という意味だとざっくり覚えておけば大丈夫です。
配列には、数字（number）や真偽値（boolean）など、ほとんどどんな型でも使うことができます。
let numbers: number[] = [10, 20, 30];
let flags: boolean[] = [true, false, true];
このように、数字だけの配列、true / falseだけの配列というように、「1つの配列の中身は同じ型でそろえる」のがTypeScriptの配列のルールです。文字列と数値を混ぜてしまうと、型がバラバラになってしまうので注意しましょう。
配列の中身を取り出すときは、インデックス（番号）を使います。インデックスは0から始まるという点が、日常の「1番目、2番目」と少し違うところです。
console.log(fruits[0]); // "りんご"（0番目）
console.log(fruits[1]); // "みかん"（1番目）
りんご
みかん
このように、配列型を使うと、TypeScriptで複数の値を「順番付きのリスト」として扱えるようになります。まずは、「同じ種類のデータをまとめる箱」だとイメージしておくと、配列型の使い方が理解しやすくなります。
2. タプル型とは？
次にタプル型（Tuple）について説明します。タプル型は、配列と見た目はよく似ていますが、使いどころが少し異なります。
タプル型は、「異なる種類（型）のデータを、決まった順番で1セットとして扱いたい」ときに使います。配列が「同じ型のデータの集まり」だったのに対して、タプルは「意味のある組み合わせ」を表すイメージです。
たとえば、「名前」と「年齢」はセットで使うことが多く、順番も固定されています。このような場合にタプル型が向いています。
let person: [string, number] = ["たろう", 25];
このコードでは、[string, number]と型を指定することで、「1つ目は文字列、2つ目は数値」というルールをあらかじめ決めています。これにより、意図しないデータの入れ替わりを防ぐことができます。
中身を取り出す方法は配列と同じで、インデックス（番号）を使います。
console.log(person[0]); // "たろう"
console.log(person[1]); // 25
たろう
25
ここで大切なのは「順番」です。タプル型は順番まで含めて型の一部なので、順序を間違えるとエラーになります。
// エラー例（順番が違う）
let wrong: [string, number] = [30, "たろう"];
このようにタプル型を使うと、「この位置にはこの意味の値が入る」というルールをコードで表現できます。初心者のうちは、「セットで扱う決まりのデータ」を見かけたら、タプル型を思い出すと理解しやすくなります。
3. 配列型とタプル型の違いとは？
ここまでで、配列型とタプル型の基本的な使い方を見てきました。どちらも「複数の値をまとめて扱う」という点は同じですが、考え方と使いどころに明確な違いがあります。
まず、配列型は「同じ種類のデータをたくさん並べたいとき」に使います。要素の数は決まっていなくてもよく、あとから増やしたり減らしたりすることもできます。
- 配列型： 同じ型のデータを、必要な数だけまとめて管理する
一方、タプル型は「意味の決まったデータの組み合わせ」を表したいときに使います。データの型だけでなく、順番そのものにも意味があるのが特徴です。
- タプル型： 異なる型のデータを、決められた順番で1セットとして扱う
たとえば、「名前が何人分も並んでいる一覧」であれば配列型が向いています。一方で、「名前と年齢をひとまとめにした1人分の情報」のように、役割が決まっている場合はタプル型のほうが分かりやすくなります。
- 「名前の一覧」→ 配列型
- 「名前と年齢のセット」→ タプル型
このように、「数が増える同じデータ」なのか、「意味の決まったセット」なのかを意識すると、配列型とタプル型を自然に使い分けられるようになります。
4. 配列型・タプル型の応用例
ここでは少しだけ応用して、タプル型と配列型を組み合わせた使い方を紹介します。実際のプログラムでは、「1つのデータ」ではなく、「同じ形式のデータを複数まとめて扱いたい」場面がよくあります。
たとえば、「複数の人の名前と年齢を一覧で管理したい」といったケースです。この場合、「名前と年齢のセット」はタプルで表し、それをさらに配列でまとめると分かりやすくなります。
let people: [string, number][] = [
["たろう", 25],
["じろう", 30],
["はなこ", 22]
];
このコードでは、[string, number]というタプルを、[]で囲むことで「タプルの配列」を表しています。つまり、「名前と年齢のセットが何人分も並んでいる一覧」だと考えるとイメージしやすいです。
値を取り出すときは、まず「何番目の人か」を指定し、次に「名前か年齢か」を指定します。そのため、インデックスを2回使います。
console.log(people[1][0]); // "じろう"
じろう
このように、配列型とタプル型を組み合わせることで、情報のまとまりを保ったまま複数のデータを管理できます。初心者のうちは、「セットの集合」として考えると理解しやすくなります。
5. 型注釈（アノテーション）とは？
ここで出てきた: string[]や: [string, number]の部分は、型注釈（アノテーション）といいます。
これは、「この変数にはどんな型の値が入るのか」を明示するための記述です。
型注釈を使うことで、TypeScriptが間違いを早めに教えてくれるようになります。
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の恩恵を最大限に活用できるようになります。配列型・タプル型の使い方を正しく理解しておくことは、型安全な開発の第一歩です。
生徒
「配列型とタプル型って、似てるけど違いがはっきりしてるんですね。ちゃんと目的に合わせて使い分けないと混乱しそう…」
先生
「そのとおりです。配列型は“同じ型が何個でも”で、タプル型は“決められた型と順番”がポイントですよ。」
生徒
「複数の人の情報をタプルで管理して、配列にまとめる書き方、ちょっとかっこよかったです！」
先生
「実務でもよく使われるパターンなので、今のうちに慣れておくといいですよ。あと型注釈も忘れずに！」
生徒
「はい！TypeScriptの型って、面倒そうに見えたけど、理解できると安心感がありますね！」
この記事を読んだ人からの質問
