JavaScriptの基本、オブジェクトを理解しよう

はじめに

JavaScriptを学習する中で、よく目にするオブジェクトについて、少しわかりにくいと感じることはありませんか？実は、JavaScriptのオブジェクトは単なるデータのまとまり以上に、プログラム全体で重要な役割を果たしています。オブジェクトを正しく理解できれば、データの操作や管理がスムーズになり、より効率的にコードを書けるようになります。

また、オブジェクトはデータベースから取得した情報を理解し、扱う上でも欠かせない概念です。この記事では、オブジェクトの基礎をしっかり押さえつつ、よく使われるプロパティやメソッドの具体例も紹介します。基本を学び、JavaScriptの理解を深めていきましょう！

この記事について

目的

• JavaScriptのオブジェクトについて知る
• JavaScriptでオブジェクトの操作をできるようにする

対象者

• 初学者の方
• JavaScriptの勉強を最近始めた方
• JavaScriptのオブジェクトの理解を深めたい方

JavaScriptの基本について

この記事ではJavaScriptの基本的な説明には触れていません。JavaScriptの基礎や実践ハンズオンを以下の記事で紹介していますので、理解を深めたい方はぜひご覧ください。

https://envader.plus/article/331

JavaScriptにおけるオブジェクトとは

オブジェクトとは、複数のプロパティを持つものです。プロパティは「名前（キー）」と「バリュー（値）」がセットになっており、プロパティの値には、どんな種類のデータでも使うことができます。

オブジェクトをコードで表すと、次のようになります。名前（キー）とバリュー（値）を「 : 」で繋げ、一つ一つのプロパティは「 , 」で区切ります。

{
  // キー（key）: 値（value）
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

オブジェクトはどのような時に使用されるか

JavaScriptにおけるオブジェクトは、いろいろな場面で使われますが、データベースから受け取ったデータをJavaScriptで扱うときによく使われます。また、いくつかの関連する情報をまとめて管理したいときにも便利です。

データベースから受け取ったデータの扱い方

データベースから受け取ったデータをJavaScriptで扱う際は、そのデータをオブジェクトとして操作することが基本となります。データベースからデータを受け取ると、そのデータは通常はJSON形式で渡されます。

JSONとは

JSON（JavaScript Object Notation）は、JavaScriptのオブジェクトの書き方に似た軽量なデータ形式です。人間にも読みやすく、プログラムでも簡単に扱えるようになっています。

例えば、データベースからユーザー情報を受け取る場面があったとして、データベースからは以下のようなデータ形式で渡されることがあります。この場合、「"id"、"name"、"email"」は名前（キー）となり、「1、"Alice"、"alice@sample--sample.com"」がバリュー（値）となります。

{
  "id": 1,
  "name": "Alice",
  "email": "alice@sample--sample.com"
}

このようなJSONデータは、JavaScriptではオブジェクトとしてそのまま扱えます。これにより、データベースから取得した値を、別の形に変換することなく、プロジェクト内で簡単に扱うことができます。

オブジェクトの作成方法

オブジェクトの基本を学んだところで、次にその作成方法を確認しましょう。

オブジェクトを作成するには、オブジェクトリテラルを使用します。

const obj = {};

オブジェクトリテラルの{}の中に、プロパティを名前（キー）と値を:で区切って記述します。プロパティはいくつでも追加でき、それぞれのプロパティは,で区切ります。

const obj = {
	"key1" : "Value1",
	"key2" : "Value2"
};

オブジェクトのキーとバリューの記法ルール

JavaScriptのオブジェクトで使う名前（キー）や値（バリュー）の書き方には、いくつかルールがあります。たとえば、チーム全体でクオートの種類を統一するルールや、JSONデータでは名前（キー）と文字列の値をダブルクオートで囲むというルールがあります。こうしたルールを守ることで、コードが読みやすくなり、プロジェクト内で一貫性を保つことができます。

名前（キー）のクオートに関するルール

• クオートを省略できる場合

  名前（キー）は、英字、数字、アンダースコア、または$で始まり、スペースや特殊文字が含まれていない場合、クオートを省略することができます。

// キーのクオートを省略した例
{
  name: "Alice",
  email: "alice@sample--sample.com"
}

• クオートが必要な場合

  名前（キー）にスペースや特殊文字が含まれている場合や、数字で始まる場合は、クオートが必要です。

{
  "first name": "Alice",  // スペースが含まれる
  "123key": "value",  // 数字で始まる
  "email-1": "alice@sample--sample.com"  // 特殊文字を含む（ここではハイフン）
}

バリュー（値）のクオートに関するルール

• 文字列のバリュー（値）

  JavaScriptでは文字列は必ずクオートで囲みます。シングルクオートでもダブルクオートでも使用できます。

  // 名前やメールアドレスは文字列のため、クオートが必要です。
  {
    name: 'Alice', // シングルクオート
    email: "alice@sample--sample.com"  // ダブルクオート
  }

• 数値や真偽値など、クオート不要のバリュー（値）

  数値、真偽値、null、undefinedなどの値は、クオートは不要です。

  {
    id: 1,
    isActive: true,
    data: null
  }

JSONでのクオートのルール

JSON形式では、名前（キー）と文字列の値には必ずダブルクオートを使います。しかし、数値や真偽値、nullに関してはクオートを使いません。

{
  "id": 1,
  "name": "Alice",
  "mail": "alice@sample--sample.com",
  "isMember": true,
  "status": null
}

オブジェクトを作成してみよう

このセクションでは、JavaScriptでオブジェクトを作成する基本的な方法と、その操作方法を学びます。シンプルなオブジェクトを作成し、キーと値を追加・変更・削除する方法を実際にコードを書いて確認してみましょう。

オブジェクトの基本形を作成する

まずは、シンプルなオブジェクトを作成してみましょう。ここでは、ユーザー情報を保持するオブジェクトを例にします。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer"
};

// オブジェクトの内容をコンソールに表示
console.log(user);

user オブジェクトを作成し、コンソールに次のような内容が表示されます。

{
	id: 1,
	name: "Alice",
	job: "Developer"
}

オブジェクトのプロパティにアクセスする

作成したオブジェクトの各プロパティにアクセスしてみましょう。プロパティにアクセスするには、オブジェクト名にドット (.) を続けて、プロパティ名を指定します。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer"
};

// オブジェクトの内容をコンソールに表示
console.log(user.name);
console.log(user.job);

このコードの出力結果は、user オブジェクトのプロパティの値がコンソールに表示されます。

Alice
Developer

オブジェクトの入れ子構造

オブジェクトのプロパティの値として、別のオブジェクトを持つこともできます。これは「入れ子構造」と呼ばれます。

const obj = {
  key1: "value1",
  key2: "value2",
  key3: {
    key4: "value4",  // key3は入れ子構造で、key4とkey5というプロパティを持つ
    key5: "value5",
  }
};

このコードで、key4の値を参照したい場合は、以下のようにアクセスします。

console.log(obj.key3.key4);
// 出力結果："value4"

ブラケット記法

ブラケット記法は、オブジェクトのプロパティ（キー）にアクセスするための方法の一つです。ブラケット記法は、プロパティ名を動的に扱いたい場合や、特定の文字（スペースやハイフンなど）が含まれるキーにアクセスする場合に便利です。

• ブラケット記法の基本

  オブジェクトのキーをブラケット[]の中に文字列として指定し、そのプロパティにアクセスします。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer"
};

console.log(user["name"]);
// 出力結果："Alice"
// console.log(user.name); と同じ意味になります。

• ブラケット記法が必要な場面

  プロパティ名にスペースやハイフンなどの特殊文字が含まれている場合は、ブラケット記法が必要です。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer",
    "place-address": "Tokyo"
};

console.log(user["place-address"]);
// 出力結果："Tokyo"

• プロパティ名を動的に扱う

  ブラケット記法を使うと、プロパティ名を文字列や変数で指定でき、実行時にプロパティ名を動的に指定できます。

  例えば、次のように変数を使ってプロパティ名にアクセスできます。

const user = {
  id: 1,
  name: "Alice",
  job: "Developer"
};

const key = "job";  // ここでプロパティ名を動的に指定

// ブラケット記法で動的にプロパティにアクセス
console.log(user[key]);
// 出力結果："Developer"

ここでは、key という変数を使って、オブジェクト user の job プロパティにアクセスしています。プロパティ名を変数として指定できるため、実行時に値を動的に決定できます。

• 式を使用したプロパティへの動的アクセス

  プロパティ名を変数だけでなく、式（評価される式）として動的に決定することも可能です。

const index = 2;
const user = {
  id: 1,
  name: "Alice",
  job: "Developer"
};

const keys = ["id", "name", "job"];

// ブラケット記法で式を使ってプロパティにアクセス
console.log(user[keys[index]]);
// 出力結果："Developer"

この例では、配列 keys のインデックスを動的に指定することで、user オブジェクトのプロパティにアクセスしています。このように、式の結果をプロパティ名として使用できます。

オブジェクトのプロパティを変更・追加・削除をする

オブジェクトは作成した後もその値を変更できるという、ミュータブル（変更可能）な特性を持っています。JavaScriptでは、オブジェクトや配列はミュータブルで、後からプロパティの変更・追加・削除が可能です。

• プロパティを変更

  以下の例では、user オブジェクトの like プロパティが変更され、"dog"という新しい値が設定されました。オブジェクト自体が変更可能であるため、このように後から変更できます。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer",
    like: "cat"
};

// オブジェクトのプロパティを変更
user.like = "dog";

console.log(user);
// 出力結果：{ id: 1, name: "Alice", job: "Developer", like: "dog" }

• プロパティを追加

  プロパティは次のように追加できます。この例では、user.place = "Tokyo"; で新しいプロパティを追加しています。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer",
    like: "cat"
};

// オブジェクトのプロパティを追加
user.place = "Tokyo";

console.log(user);

// 出力結果：
{ id: 1,
  name: "Alice",
  job: "Developer",
  like: "cat",
  place: "Tokyo" }

• プロパティを削除

  プロパティの削除には delete 演算子を使います。

// オブジェクトの作成
const user = {
    id: 1,
    name: "Alice",
    job: "Developer",
    like: "cat"
};

// オブジェクトのプロパティを削除
delete user.like;

console.log(user);
// 出力結果：{ id: 1, name: "Alice", job: "Developer" }

オブジェクトのプロパティの操作について

オブジェクトは作成した後もその値を変更できる、変更可能な特性を持っていると説明しました。しかし、constで宣言しているオブジェクトを変更できることに違和感を持つ方もいるかもしれません。constは再代入を防ぐためのキーワードなので、「変更できないのでは？」と感じることもあるでしょう。

実際、constは変数に再代入できないことを保証するものですが、オブジェクトのプロパティの変更は防ぎません。constで宣言したオブジェクトに対してプロパティを変更することは可能ですが、オブジェクト全体を別のオブジェクトに再代入することはできません。

以下の例を見てみましょう。

const user = {
  id: 1,
  name: "Alice",
  job: "Developer"
};

// これは再代入となりエラーになる
user = {
  id: 1,
  name: "Bob",
  job: "Developer"
};

このように、オブジェクトは作成した後もそのプロパティの値を変更することはできますが、オブジェクト全体を再代入することはできません。constはあくまで「再代入を防ぐ」ものであり、オブジェクトそのものの変更（プロパティの追加・変更・削除）は可能です。

このセクションではJavaScriptでオブジェクトを作成し、プロパティの追加・変更・削除の方法について学びました。この基本操作をしっかりと身につけておくことで、よりスムーズにコードを書けるようになります。

これからの開発に役立つ大事なスキルとなるため、繰り返し練習してみてください。

この記事で学んだこと

この記事では、JavaScriptのオブジェクトについて、その作成方法からプロパティの追加・変更・削除、ブラケット記法や入れ子構造まで、幅広い基本操作を学びました。オブジェクトは、JavaScriptのプログラミングにおいて非常に重要なデータ構造であり、今後の学習や開発で頻繁に使用されることになります。

また、constで宣言したオブジェクトのプロパティが変更可能である点や、再代入ができないという特性についても確認しました。オブジェクトの操作におけるこれらの基本をしっかり理解することで、より効率的にJavaScriptを使いこなすことができるようになります。

今後のプロジェクトで役立つ大事なスキルですので、繰り返し学習しながら、オブジェクト操作の理解を深めていきましょう。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

JavaScript Primer

https://jsprimer.net/basic/object/

現代の JavaScript チュートリアル

https://ja.javascript.info/object