【JS応用|初心者向け】初心者必見!JavaScriptの「オブジェクトリテラル」でデータをスマートに管理しよう

1. 導入:なぜオブジェクトリテラルが重要なのか

プログラミングをしていると、「ユーザーの名前、年齢、住所」といった、関連する複数のデータを一つの塊として扱いたい場面によく遭遇します。バラバラの変数で管理すると、データが増えるたびに管理が大変になり、コードも読みづらくなります。そんな時、オブジェクトリテラルを使えば、関連するデータを一つにまとめ、直感的に扱うことができます。これはモダンなJavaScript開発の基本中の基本です。

2. 基礎知識:オブジェクトリテラルとは?

オブジェクトとは、「名前(プロパティ名)」と「値」のペアを格納できる箱のようなものです。その中でも、波括弧 { } を使って直接記述する方法を「オブジェクトリテラル」と呼びます。
例えば、「車」というオブジェクトを作るなら、色は赤、メーカーはトヨタ、といった情報を { color: ‘red’, brand: ‘Toyota’ } のように記述します。

3. 実装・解決策

オブジェクトリテラルを作成するには、変数に { } を代入し、その中に「キー: 値」をカンマ区切りで記述します。取り出すときは、ドット記法(変数名.キー名)を使うのが一般的です。

4. サンプルプログラム

以下のコードをコピーして、ブラウザのコンソールなどで実行してみてください。

// ユーザー情報をオブジェクトリテラルで作成
const user = {
  name: "田中太郎",      // 文字列のプロパティ
  age: 25,               // 数値のプロパティ
  isStudent: true,       // 真偽値のプロパティ
  // メソッド(オブジェクト内の関数)も定義できます
  greet: function() {
    console.log("こんにちは、" + this.name + "です!");
  }
};

// プロパティへのアクセス
console.log(user.name);  // 出力: 田中太郎
console.log(user.age);   // 出力: 25

// メソッドの実行
user.greet();            // 出力: こんにちは、田中太郎です!

// プロパティの追加も簡単です
user.job = "エンジニア";
console.log(user.job);   // 出力: エンジニア

5. 応用・注意点

現場でよく使われるテクニックとして、「省略記法」があります。変数名とオブジェクトのキー名が同じ場合、{ name: name } と書かずに { name } だけで記述できるため、コードが非常にスッキリします。
注意点として、プロパティ名にハイフン(-)を含む場合(例: user-name)は、ドット記法ではなくブラケット記法(user[‘user-name’])を使う必要があることを覚えておきましょう。また、オブジェクトは「参照型」という性質を持つため、コピーする際は注意が必要です。まずは基本の { } の書き方に慣れるところから始めてみてください。

タイトルとURLをコピーしました