【ECMAScript編】第5回：データを構造化する

導入

これまで、私たちは数値、文字列、真偽値といった基本的なデータ型を学んできました。これらは、たとえば「商品の価格」「ユーザー名」「ログイン状態」といった単一の情報を表現するのに非常に便利です。

しかし、実際のアプリケーションでは、単一の情報だけでなく、関連する複数の情報をひとまとまりとして扱ったり、たくさんの情報をリストとして管理したりする場面が頻繁にあります。

想像してみてください。もし「ユーザー」の情報を表現するのに、ユーザー名、メールアドレス、年齢、居住地などをそれぞれバラバラの変数で管理していたらどうでしょう？非常に扱いにくく、どの情報がどのユーザーに対応しているのかすぐに分からなくなってしまいますよね。

そこで登場するのが、オブジェクトと配列です。これらはEcmaScriptにおけるデータの構造化の基本的なツールであり、関連する情報をまとめたり、複数の情報をリストとして管理したりするために不可欠です。

この回では、オブジェクトを使って関連するデータをひとつの塊として扱う方法と、配列を使って順序付けられたデータのリストを作成・操作する方法を学びます。これらの知識を習得することで、より複雑なデータや現実世界の情報をEcmaScriptで表現し、効率的に扱えるようになります。

メイン解説

1. オブジェクト：関連するデータをまとめる

オブジェクトは、複数の「キー（key）」と「値（value）」のペアをひとまとめにしたものです。それぞれのキーはプロパティ名と呼ばれ、そのオブジェクトが持つデータの一つの側面を表します。例えば、一人のユーザーに関するさまざまな情報を一つのオブジェクトにまとめることができます。

なぜオブジェクトが必要か？

「ユーザー名」「メールアドレス」「年齢」といったユーザーに関連する情報を、それぞれ独立した変数で管理するのではなく、user という一つの「もの」として扱うことで、コードが整理され、データの整合性が保ちやすくなります。

オブジェクトの基本構文

オブジェクトは波括弧 {} を使って定義します。波括弧の中には、キー: 値 の形式でプロパティをカンマ , 区切りで記述します。キーは通常文字列ですが、引用符を省略できる場合があります。値は、数値、文字列、真偽値はもちろん、別のオブジェクトや配列など、あらゆるデータ型を指定できます。

// ユーザー情報を表現するオブジェクト
let user = {
  name: "山田 太郎",
  email: "taro.yamada@example.com",
  age: 30,
  isActive: true
};

// 商品情報を表現するオブジェクト
let product = {
  id: "A001",
  name: "ワイヤレスイヤホン",
  price: 7980,
  available: true
};

プロパティへのアクセス

オブジェクト内の特定のプロパティの値にアクセスするには、主に2つの方法があります。

1. ドット記法（.）: 最も一般的に使われる方法です。オブジェクト名.プロパティ名 の形式でアクセスします。プロパティ名が有効な変数名と同じルールに従う場合に利用できます。

   console.log(user.name);      // 出力: 山田 太郎
   console.log(product.price);  // 出力: 7980
   

2. ブラケット記法（[]）: オブジェクト名['プロパティ名'] の形式でアクセスします。プロパティ名が有効な変数名でない場合（例: スペースを含む、数字から始まる）や、プロパティ名を動的に指定したい場合（例: 変数にプロパティ名を格納してアクセスする場合）に便利です。

   console.log(user['email']); // 出力: taro.yamada@example.com
   
   let propertyName = 'age';
   console.log(user[propertyName]); // 出力: 30
   
   let complexKeyObject = {
     'my-favorite-color': 'blue'
   };
   console.log(complexKeyObject['my-favorite-color']); // 出力: blue
   

プロパティの追加と変更

オブジェクトのプロパティは、後から追加したり、既存の値を変更したりできます。

let user = {
  name: "山田 太郎",
  age: 30
};

// プロパティの追加
user.country = "日本";
console.log(user);
// 出力: { name: '山田 太郎', age: 30, country: '日本' }

// 既存プロパティの値の変更
user.age = 31;
console.log(user.age); // 出力: 31

プロパティの削除

delete 演算子を使うと、オブジェクトから特定のプロパティを削除できます。

let user = {
  name: "山田 太郎",
  age: 30,
  email: "taro.yamada@example.com"
};

delete user.email;
console.log(user);
// 出力: { name: '山田 太郎', age: 30 }

2. 配列：順序付けられたリスト

配列は、複数の値を順序付けて格納するのに使われるリストのようなデータ構造です。同じ種類のデータをまとめて扱いたいときに非常に便利です。例えば、ユーザーのリスト、商品のリスト、テストの点数のリストなどを表現できます。

なぜ配列が必要か？

もし複数の商品名があるとして、product1 = "鉛筆", product2 = "消しゴム", product3 = "ノート" のように個別の変数で管理すると、商品の数が増えるたびに変数を増やさなければなりません。配列を使えば、これらをひとつの products というリストとして管理し、より柔軟に操作できます。

配列の基本構文

配列は角括弧 [] を使って定義します。角括弧の中に、格納したい値をカンマ , 区切りで並べます。配列の要素は、数値、文字列、真偽値はもちろん、オブジェクトや別の配列など、あらゆるデータ型を格納できます。

// 数値の配列
let scores = [85, 92, 78, 95, 88];

// 文字列の配列
let fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];

// 異なるデータ型の要素を含む配列
let mixedArray = [1, "hello", true, { key: "value" }];

要素へのアクセス

配列の各要素には、その位置を示す「インデックス」を使ってアクセスします。配列のインデックスは 0 から始まります。つまり、最初の要素のインデックスは 0、2番目の要素は 1、といった具合です。

let fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];

console.log(fruits[0]); // 出力: りんご (最初の要素)
console.log(fruits[2]); // 出力: オレンジ (3番目の要素)
console.log(fruits[4]); // 出力: undefined (存在しないインデックスにアクセスすると undefined)

配列の長さ

配列の要素の数（長さ）は、length プロパティを使って取得できます。

let fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];
console.log(fruits.length); // 出力: 4

要素の追加と削除

配列には、要素を追加したり削除したりするための便利なメソッドがいくつかあります。

1. push(): 配列の末尾に新しい要素を追加します。

   let fruits = ["りんご", "バナナ"];
   fruits.push("オレンジ");
   console.log(fruits); // 出力: [ 'りんご', 'バナナ', 'オレンジ' ]
   

2. pop(): 配列の末尾の要素を削除し、その削除された要素を返します。

   let fruits = ["りんご", "バナナ", "オレンジ"];
   let removedFruit = fruits.pop();
   console.log(fruits);       // 出力: [ 'りんご', 'バナナ' ]
   console.log(removedFruit); // 出力: オレンジ
   

3. unshift(): 配列の先頭に新しい要素を追加します。

   let fruits = ["バナナ", "オレンジ"];
   fruits.unshift("りんご");
   console.log(fruits); // 出力: [ 'りんご', 'バナナ', 'オレンジ' ]
   

4. shift(): 配列の先頭の要素を削除し、その削除された要素を返します。

   let fruits = ["りんご", "バナナ", "オレンジ"];
   let removedFruit = fruits.shift();
   console.log(fruits);       // 出力: [ 'バナナ', 'オレンジ' ]
   console.log(removedFruit); // 出力: りんご
   

5. splice(): 配列の途中の要素を削除したり、新しい要素を挿入したり、既存の要素を置き換えたりできる強力なメソッドです。引数によって挙動が変わります。

   let colors = ["赤", "緑", "青", "黄"];
   
   // 1番目の要素から2つ削除
   colors.splice(1, 2);
   console.log(colors); // 出力: [ '赤', '黄' ]
   
   // 1番目の位置に「オレンジ」と「紫」を追加
   colors.splice(1, 0, "オレンジ", "紫");
   console.log(colors); // 出力: [ '赤', 'オレンジ', '紫', '黄' ]
   
   // 2番目の要素から1つ削除し、そこに「ピンク」を挿入 (置換)
   colors.splice(2, 1, "ピンク");
   console.log(colors); // 出力: [ '赤', 'オレンジ', 'ピンク', '黄' ]
   

3. オブジェクトと配列の組み合わせ

実際のアプリケーションでは、オブジェクトと配列はしばしば組み合わせて使われます。例えば、ショッピングカートの中身を表現する場合、各商品はオブジェクトで、それらの商品のリストは配列で表現するのが自然です。

let shoppingCart = [
  {
    id: "P001",
    name: "スマートウォッチ",
    price: 12800,
    quantity: 1
  },
  {
    id: "P002": "ワイヤレスイヤホン",
    price: 7980,
    quantity: 2
  },
  {
    id: "P003": "充電ケーブル",
    price: 1500,
    quantity: 1
  }
];

// カート内の2番目の商品の名前を取得
console.log(shoppingCart[1].name); // 出力: ワイヤレスイヤホン

// カート内の最初の商品の数量を変更
shoppingCart[0].quantity = 2;
console.log(shoppingCart[0]);
// 出力: { id: 'P001', name: 'スマートウォッチ', price: 12800, quantity: 2 }

// 新しい商品をカートに追加
shoppingCart.push({
  id: "P004",
  name: "モバイルバッテリー",
  price: 3500,
  quantity: 1
});
console.log(shoppingCart.length); // 出力: 4

このように、オブジェクトと配列を組み合わせることで、複雑な現実世界のデータを柔軟かつ効率的に表現し、操作できるようになります。

まとめ

この回では、EcmaScriptにおけるデータの構造化の強力なツールであるオブジェクトと配列について学びました。

• オブジェクトは、関連する複数の情報を キー: 値 のペアとしてひとまとまりにするために使用します。これにより、現実世界の「もの」や「エンティティ」を表現しやすくなります。ドット記法やブラケット記法でプロパティにアクセスし、追加・変更・削除が可能です。
• 配列は、順序付けられたデータのリストを管理するために使用します。インデックス（0から始まる番号）を使って個々の要素にアクセスし、push(), pop(), unshift(), shift(), splice() などのメソッドを使って要素を追加・削除できます。

オブジェクトと配列を適切に使いこなすことで、単一の値を扱うだけでは不可能だった、より複雑で意味のあるデータ構造を構築できます。これは、今後のアプリケーション開発において、非常に重要なスキルとなるでしょう。これらの概念をしっかりと理解し、実際にコードを書いてみて、その動作を確かめてみてください。

チャンネル登録 よろしくお願いします

こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。