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

前回の記事では、複数のデータを管理するためのオブジェクトと配列についてご説明しました。

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

今回の記事では、配列とオブジェクトの値取得やデータ更新などの操作方法についてご説明します。

配列の操作

配列はそれぞれの値に番号が振られています。

例えば、const hairetsu: string[] = [“A”, “B”, “C”] という定数があるとして、それぞれのデータに対して０から番号が振られています。

hairetsuの場合では「Aは０」、「Bは１」、「Cは２」という番号が割り振られています。

この番号を使って配列の操作を行います。

データ取得

配列内のデータを取得するには、割り振られた番号で指定します。

先ほどのhairetsuからAを取り出す場合、以下のように記述します。

const A: string = hairetsu[0]

定数Aは文字列型としてhairetsuの０番目の値を取得しました。

[]内の数字を１、２というように変更すると”B”や”C”も取得することができます。

削除

const hairetsu: string[] = [“A”, “B”, “C”] は定数なので中身を書き換えたり追加、削除をすることができません。

配列内のデータを変更したい場合は、変数として定義する必要があります。

変数を定義する場合はletを使用します。

let hairetsu: string[] = [“A”, “B”, “C”]

この変数から指定のデータを削除するにはsplice()を使用します。

書き方は配列名の後に.spliceをつけて、カッコの中に削除開始の番号と、削除する個数を記述します。

番号は0番から始まりますので、”A”だけ削除する場合はhairetsu.splice(0,1)と記述します。

ちなみに配列の最後のデータを削除する場合は.splice()ではなく.pop()を使います。

hairiest.pop() 　カッコ内に数字を書く必要はありません。

例ではデータが３つだけなので、splice()でも最後のデータを削除することは容易ですが、データの数が多くなったり、プログラムの途中で追加や削除を繰り返して、最後のデータが何番目になるか予想ができない場合はpop()を使うと便利です。

追加

次に配列にデータを追加する方法をご説明します。

追加する場合もsplice()を使用します。

方法はsplice()のカッコ内にデータの番号とデータの内容を記述します。

例として先ほどの変数　let hairetsu: string[] = [“A”, “B”, “C”]　の”A”と”B”の間に”AB”というデータを追加したいと思います。

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

hairetsu.splice(1,0,"AB")

この１文にて、変数hairetsuの中身は[“A”, “AB”, “B”, “C”]となります。

データ”AB”に割り振られる番号はカッコ内のはじめ記述している1になります。

次の0について少し説明すると、splice()は正確にはデータの削除や追加をするためのものではなく、データを何かと置き換えるために使用します。

削除の場合はsplice(1,1)と書くことで、配列内のでデータの番号１から数えて１番目のデータを空っぽにするという意味になります。

つまり、データの番号１が削除されたわけです。

追加の場合はsplice(1, 0, “AB”)と記述しましたが、これはデータの番号１から数えて０番目のデータを”AB”にするという意味になっています。

０番目のデータというのは指定した番号の手前と思っていただくか、データを追加する際は割り当てたいデータの番号と0を記述すると覚えておきましょう。

0番目のデータというのは存在しておらず、空っぽのデータを”AB”に置き換えることで、データを追加しております。

データを追加すると、追加された後ろのデータは番号が一つずつずれますので、プログラム内で、番号を指定している場合は注意してください。

ちなみに、配列の先頭と末尾にデータを追加する簡単な方法もあるのでご紹介しておきます。

まずは、先頭にデータを追加する場合は.splice()の代わりに.unshift()を使用します。

また、末尾にデータを追加する場合は.push()を使用します。

hairetsu.unshift(“Z”)とすると、hairetsuの中身は[“Z”, “A”, “B”, “C”]となり、hairetsu.push(“D”)とすると中身は[“A”, “B”, “C”, “D”]となります。

配列に追加する場合は順番に並べるように使用することが一般的なので.push()を使って後入れすることが多いかと思います。

オブジェクトの操作

オブジェクトについても配列同様に定数で宣言しているとデータの追加や削除などができませんので、変数で宣言します。

前回の記事でご紹介した通り、オブジェクトの型定義のためにtypeを使用します。

例としてTaskという型宣言をします。

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

そしてletを使って変数taskをオブジェクトとして宣言します。

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

では、上記の変数にてオブジェクトの操作をご説明します。

データ取得

オブジェクトからデータを取得する場合は、オブジェクト名.プロパティ名と記述します。

例えば、taskから”limit”に保存されている日付けの”2023/03/26″を取得したい場合は、task.limitと記述します。

配列の場合は角カッコ[]と番号で値を取得していましたが、オブジェクトはキーワードで値を取得することができるので、配列の場合よりは感覚的に値が取得できて簡単です。

データ更新

taskの各プロパティのデータを更新する場合は取得の時同じようにtask.limitの記述をします。

task.limit = “2023/03/27” と書くことで値を更新することができます。

データ追加

データを追加する場合は、型定義しているtype Taskも更新する必要があります。

まずTaskを更新しましょう。

新しい型定義の名前をNewTaskとします。

type NewTask = Task & {
  charge: string;
}

chargeという文字列型のプロパティを一つ追加してNewTaskという名前で再定義しました。

そして、データ更新と同じ方法で、新しいプロパティ名とデータを記述します。

では先ほど再定義したchargeに担当者名を追加してみます。

task.charge = "tanaka";

これによりオブジェクトtaskに4つ目のプロパティが追加され、”tanaka”というデータが保存されました。

削除

最後にオブジェクトからプロパティを削除する方法をご説明します。

削除する場合はdeleteを使用して、削除したいプロパティ名を記述します。

例えば、先ほど追加したchargeを削除する場合、delete task.chargeと記述します。

配列とオブジェクトのよく使用する操作方法は以上となります。

この他にも操作するための記述はいくつかございますので、上記の記述で希望する動作が実現できない場合は操作方法を調べていただければと思います。

まとめ

• 配列は一つ一つのデータに番号が振られている。
• 配列からデータを取得する場合は角カッコ[]で番号を指定する。
• 配列やオブジェクトは変数として宣言したものは更新することができる。
• 配列からデータを削除すうる場合は、splice()を使用する。
• データの追加もsplice()で行い、第二引数に0を与える。
• unshiftとpushで配列の先頭・末尾にデータを追加することができる。
• オブジェクトからデータを取得する場合は、変数名とプロパティ名で取得する。
• でーたを追加する場合は型定義から更新する。
• オブジェクト名と追加したいプロパティ名、追加するデータを記述することで簡単に追加することができる。
• データを削除する場合はdeleteをと変数名、プロパティ名を記述する。