【React】複数のデータを扱う配列とオブジェクト　その1

React開発では一つのデータのみを扱うということは珍しく、ほとんどの場合が複数のデータを利用することになります。

現在作成しているToDoアプリの場合を例に挙げると、一般的にはタスクは複数登録して管理することができます。

登録する内容についてもアプリによっては、タスクと登録した日付を保存したり、期日を設定したりと、タスク以外の情報を合わせて扱うことも可能です。

簡単な内容の開発であっても複数のデータを扱うことを避けて通ることは非常に難しいので、今回の記事では、複数データを扱うための配列とオブジェクトについて解説します。

配列とは

まずは配列について説明します。

配列とは、リストを構成するデータの塊のことで、ToDoアプリでいうところのタスクの一覧が配列にあたります。

Reactで配列を表現する際は次のように記述します。

const Tasks = ["TaskA", "TaskB", TaskC", "TaskD"];

TaskAからTaskDまで4つのタスクが一つの塊となっているTasksという名前の配列です。

オブジェクトとは

配列と同じくデータの塊なのですが、こちらは一つのデータが持っている複数の要素がまとまったものをオブジェクトと言います。

ToDoアプリの例で説明すると、タスクに管理番号とタスクの期限を設定するとした場合に、「タスク」「管理番号」「期限」の三つのデータをまとめて一つにしたものをオブジェクトと言います。

記述すると以下のようになります。

const task = {
  id: 1,
  taskName: "task",
  limit: "2023/03/20"
};

管理番号としての「id」とタスクの内容を示す「taskName」、タスク期限を示す「limit」の３つのデータを持ったtaskというオブジェクトになります。

型の定義

TypeScriptで配列とオブジェクトを扱う場合の型定義について説明します。

配列の型定義は定数名の後ろに型を記述するだけなので非常に簡単です。

先ほどのTasksに型を記述すると以下のようになります。

const Tasks: string[] = ["TaskA", "TaskB", TaskC", "TaskD"];

アンダーラインを引いた部分が型定義となっております。

定数名の後ろにコロン「:」と型名、角括弧[]を付けることで配列の型定義は完了です。

次にオブジェクトの型定義を説明します。

オブジェクトの型定義をするには「type」を使用して型の宣言を別にする必要があります。

先ほどのtaskオブジェクトを例にすると、以下のようになります。

まず、typeにてTaskという名前で型宣言をします。
名前は自由に変えることができるので、オブジェクトに合わせて分かりやすいものにしましょう。

type Task = {
  id: number;
  taskName: string;
  limit: string;
};

波括弧{}の内側にオブジェクトの要素名とそれぞれの型を記述し、セミコロン「;」で区切ります。

これでTaskという名前の型の宣言が完了しました。

このタスクを定数に反映させる必要があります。
方法としては配列と同じく、定数名の後ろにコロン「:」を付けて、その後ろに宣言した「Task」を記述します。

type Task = {
  id: number;
  taskName: string;
  limit: string;
};

const task: Task = {
  id: 1,
  taskName: "task",
  limit: "2023/03/20"
};

以上でオブジェクトの型定義が完了します。

ちなみに中身が「id」「taskName」「limit」で構成されているオブジェクトであれば型宣言したTaskを使い回すことができます。

type Task = {
  id: number;
  taskName: string;
  limit: string;
};

const taskA: Task = {
  id: 1,
  taskName: "taskA",
  limit: "2023/03/20"
};

const taskB: Task = {
  id: 2,
  taskName: "taskB",
  limit: "2023/03/21"
};

上記のように、taskAとtaskBの要素は同じなので同じTaskという型定義をすることができます。

まとめ

• リスト化されたデータの塊のことを配列という。
• 複数の要素からなる一つのデータの塊をオブジェクトという。
• 配列の型定義は定数名の後ろに型名を記述して角括弧をつける。
• オブジェクトの型定義はtypeにより別途型宣言をする。
• 宣言した型を定数名の後ろに記述して型定義する。
• オブジェクトの要素が同じ場合は宣言した型を使い回すことができる。