サイト管理者
ReactReact Nativeその他
JavaScriptプログラミング初心者

【すべてのJavaScript初学者へ】配列とオブジェクトを見分けて値を取り出す

React
2021.12.22
この記事は約6分で読めます。

プログラミングを学び始めたばかりのあなたに向けて書いています。
（JavaScript書いていても不安なあなたもこっそり…）

JavaScriptを用いた開発を進めていると配列やオブジェクトを扱うことが増えてきます。
プログラミング初学者の方は、配列やオブジェクトという言葉があるのはわかっていても
「見分ける」「あつかう」といった作業がむずかしいものです。
ものです。

その都度、「値が取り出せそうで、取り出せない」ストレスと戦い…。

そんなあなたもこの記事を読むことで
「JavaScriptにおける配列、オブジェクトから値を取得する方法」
が学べます。しかも、カンタンに扱えるようになります。

【基本編：見分ける】配列やオブジェクト

データが格納されている集合体だと思ってもらえればいいです。
まずはあなたが「配列」と「オブジェクト」が見分けられるかどうかです。

難しく考える必要はありません。

下記のコードを見て【 A 】と【 B 】のどちらが配列でオブジェクト？

【 A 】
const Names = ["sato", "tanaka", "suzuki"];

【 B 】
const member = { id: 1, name: "sato", age: 22 };

…

…

…

正解は…

【 A : 配列 】      
const Names = ["sato", "tanaka", "suzuki"];

【 B : オブジェクト】
const member = { id: 1, name: "sato", age: 22 };

です。

見分ける方法はカンタンです。
配列は[ ]で囲まれていて
オブジェクトは{ }で囲まれています。

配列 : [ ]  オブジェクト : { }

これだけわかれば、配列とオブジェクトを扱う準備が整いました。

【基本編：あつかう】配列から要素をとりだそう

配列は[ ]  で囲まれている集合体でしたね。
配列から要素を抜き出すには大きく2つのパターンがあります。

  1. indexで指定した値をを取り出す
  2. ループ処理で値を取り出す

1.indexで指定した値を取り出す

配列には、index(0から始まる連番)を指定することで
指定した値を取り出すことができます。

先ほどの配列の例からconsoleで値を取り出してみましょう。

const Names = ["sato", "tanaka", "suzuki"];

console.log(Names[0]); 
// sato

console.log(Names[1]);
// tanaka

console.log(Names[2]);
// suzuki

と表示されます。

2.ループ処理で値を取り出す

「リストで表示をしたい」と言ったときには配列からループ処理で値を取り出します。
ここでは、map()を用いて配列の値を全て表示します。

Names.map((Name) => {
  console.log(Name);
});

// sato
// tanaka
// suzuki

と表示されます。

map()を使用する機会が多いため、説明でも扱いましたが、
状況によって、他のメソッドも使い分けられるといいでしょう！
「配列の操作」について以下の記事でもまとめられているので気になる方は見てください。

JavaScriptの配列を操る汎用メソッド

【基本編：あつかう】オブジェクトから値を取り出そう

オブジェクトの場合は、{ } で囲まれていましたね。
プロパティ名で要素を取り出していきます。

オブジェクトの中身を取り出す方法は

{ 左のプロパティ名を指定すると : 右の値を取り出せます , …}

です。

それではオブジェクトの例から、値を取り出してみましょう。

const member = { id: 1, name: "sato", age: 22 };

console.log(member.id);
// 1
console.log(member.name);
// sato
console.log(member.age);
// 22

これでオブジェクトの値を取り出すこともできるようになりました！
基本的な操作はここまでです。

お疲れ様です。

次は少し応用編といきましょう。

【応用編】配列の中のオブジェクトを扱えるようにしよう

配列とオブジェクトを扱えるようになったあなたは
あとは【応用編】の配列の中のオブジェクトの扱い方をマスターするのみです。

これさえできれば、あとは組み合わせ方が違うだけで
どんな配列もオブジェクトも扱えるようになっているはず…！

では、みていきましょう！！

const membersList = [
    { id: 1, name: "sato", age: 22 },
    { id: 2, name: "tanaka", age: 28 },
    { id: 3, name: "suzuki", age: 35 },
];

今回は配列の中に3つのオブジェクトを含む変数を例にしました。
最終的にはオブジェクトから値を取り出していきます。

  1. 配列から3つのオブジェクトを取り出す
  2. 取り出したオブジェクトからnameとageを取り出す

段階的に処理をみていきましょう。

1.配列から3つのオブジェクトを取り出す

まずは、段階的に配列をループですべてのオブジェクトを表示してみましょう。

const membersList = [
    { id: 1, name: "sato", age: 22 },
    { id: 2, name: "tanaka", age: 28 },
    { id: 3, name: "suzuki", age: 35 },
];

membersList.map((member) =>
    console.log(member),
);

// {id: 1, name: "sato", age: 22}
// {id: 2, name: "tanaka", age: 28}
// {id: 3, name: "suzuki", age: 35}

配列の例でも使用したmap()で配列の中身を取り出しました。
これでオブジェクトの操作ができるようになりますね！

2.取り出したオブジェクトからnameとageを取り出す

次はオブジェクトの例と同じように値を取り出すのみです。
name と age を取り出してみましょう。

membersList.map((member) => {
    console.log(member.name);
    console.log(member.age);
});

// sato
// 22
// tanaka
// 28
// suzuki
// 35

応用編も段階的に考えると基本と同じように取り出せます。
ここまでできたら、配列とオブジェクトの扱い方をマスターできています！

混乱してきたら、基本を見直してよりカンタンに考えるようにしていきましょう。