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’])を使う必要があることを覚えておきましょう。また、オブジェクトは「参照型」という性質を持つため、コピーする際は注意が必要です。まずは基本の { } の書き方に慣れるところから始めてみてください。