【JavaScript入門】JavaScriptのオブジェクトを学ぼう

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptのオブジェクトについて学びます。

オブジェクトとは何か、オブジェクトは何のためにあるのか、オブジェクトの使い方などを解説します。

本題に入る前に、オブジェクトを理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「009 オブジェクト」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

オブジェクトってなに

JavaScriptのオブジェクトとは、複数の値をまとめて扱うことのできる「型」 になります。

データの集まりというと、配列に似ていますがデータの持ち方に違いがあります。

配列は次のようにデータをインデックス番号で管理します。

const fruits = ["りんご", "オレンジ", "バナナ"]

しかし、オブジェクトはインデックス番号でなく、任意の名前で管理することができます。

例えば、ある人物のプロフィールをオブジェクトで表現すると次のようになります。

この「任意の名前と値のペア」のひとかたまりがオブジェクトになります。

オブジェクトの書き方

実際にオブジェクトの書き方を見てみましょう。

オブジェクトのフォーマットは次のようになります。

変数 = { プロパティ名: 値, プロパティ名: 値 }

オブジェクトは「{}」で括ったデータのかたまりです。

「プロパティ名と値」を1つのセットで表現します。

実際にコードを見てみましょう。

先ほどのプロフィールの例で書いてみます。

これをコードにすると、次のようになります。

const profile = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}

カンマ区切りで、「プロパティ名: 値」のセットで並べています。

表にすると次のような関係になります。

これがプロフィールのオブジェクトです。

要するに、オブジェクトは 「プロパティ名: 値」のペアの集合体 ということです。

プロパティってなに

オブジェクトは 「プロパティ名: 値」のペアの集合体 と解説しました。

では、プロパティとは一体なんでしょうか。

プロパティは、「プロパティ名: 値」のペアのひとまとまり のことを言います。

プロパティ名のことを、キー と呼ぶことがあります。

開発の現場では、キーと呼ぶことが多いので覚えておきましょう。

波括弧はif文と同じ？

オブジェクトを作るときは、波括弧「{}」で括ります。

if文を書くこときも同じように、波括弧「{}」で括りましたね。

if (true) {
  console.log("こんにちは")
}

しかし、オブジェクトを作るときの波括弧とif文を作るときの波括弧は全く別の意味を持ちます。

オブジェクトを作るときの波括弧は、単純に オブジェクトを作るためだけの書き方 です。

if文を作るときの波括弧は ブロックを意味します。

ブロックは以前解説しましたね。

【JavaScript入門】JavaScriptの条件分岐を学ぼう – if文 –

この二つは全く違うものなので混合しないようにしましょう。

最後に、もう一度まとめます。

関数も同様のブロックとしての波括弧を使います。

関数については以降の章で解説をします。

オブジェクトは何のためにあるの？

オブジェクトは、複数のデータをひとまとまりとして扱うため にあります。

例えば、先ほどのプロフィールのデータを複数の変数で書くとどうなるでしょうか。

const lastName = "山田"
const firstName = "太郎"
const birthday = "1980年1月2日"
const sex = "男性"
const address = "東京"

この書き方でも、問題はないように見えます。

しかし、ここからさらに複数のプロフィールを扱いたい場合はどうでしょうか。

「鈴木さん」や「佐藤さん」が加わるとなると大量の変数になってしまいます。

また、識別するために変数の名前も「山田さん」専用に変えなければなりません。

const lastNameYamada = "山田"
const firstNameYamada = "太郎"
const birthdayYamada = "1980年1月2日"
const sexYamada = "男性"
const addressYamada = "東京"

これでは、読みづらいですし、あまり効率がよくありませんね。

これをオブジェクトを使って表現してみましょう。

3人のプロフィールを3つのオブジェクトでまとめてみましょう。

// 山田さんのプロフィール
const profile1 = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}
// 鈴木さんのプロフィール
const profile2 = {
  lastName:"鈴木",
  firstName:"次郎",
  birthday:"1990年4月2日",
  sex:"男性",
  address:"福島"
}
// 佐藤さんのプロフィール
const profile3 = {
  lastName:"佐藤",
  firstName:"三郎",
  birthday:"1984年5月22日",
  sex:"男性",
  address:"名古屋"
}

それぞれのプロフィールをまとめることができました。

このように、オブジェクトは複数のデータを集めて使いやすくすることができます。

配列とオブジェクトを合わせる

オブジェクトは、配列と組み合わせることができます。

例えば、先ほどの3つのプロフィールを見てみましょう。

const profile1 = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}
const profile2 = {
  lastName:"鈴木",
  firstName:"次郎",
  birthday:"1990年4月2日",
  sex:"男性",
  address:"福島"
}
const profile3 = {
  lastName:"佐藤",
  firstName:"三郎",
  birthday:"1984年5月22日",
  sex:"男性",
  address:"名古屋"
}

オブジェクトでまとまっていますが、変数が3つありますね。

これを配列を使って一つにまとめてみましょう。

配列を使うと次のように書くことができます。

const profiles = [
  {
    lastName:"山田",
    firstName:"太郎",
    birthday:"1980年1月2日",
    sex:"男性",
    address:"東京"
  },
  {
    lastName:"鈴木",
    firstName:"次郎",
    birthday:"1990年4月2日",
    sex:"男性",
    address:"福島"
  },
  {
    lastName:"佐藤",
    firstName:"三郎",
    birthday:"1984年5月22日",
    sex:"男性",
    address:"名古屋"
  }
]

少し複雑に見えますが、構成は単純です。

それぞれのオブジェクトが配列の要素として入っているのです。

オブジェクトを書いてみよう

では、実際にオブジェクトを書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「オブジェクトを書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// オブジェクトを書いてみよう
const user = {
  name:"山田",
  email:"[email protected]",
  age:21
}
console.log(user)

const book = {
  title:" ノルウェイの森",
  author:"村上春樹",
}
console.log(book)

const movies = [
  {
    title:" 風の谷のナウシカ",
  },
  {
    title:" となりのトトロ",
  },
  {
    title:" もののけ姫",
  },
]

movies.forEach((movie) => {
  console.log(movie)
})

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

プロパティへのアクセス

オブジェクトの書き方について学びました。

では、次にオブジェクトのプロパティの値を取得してみましょう。

オブジェクトのプロパティの値の取得は次のようなフォーマットです。

オブジェクト.プロパティ名
または、
オブジェクト["プロパティ名"]

実際にコードを見てみましょう。

次のようなプロフィールのオブジェクトがあります。

const profile = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}

このプロフィールの 「lastName」 プロパティの値を取り出してみましょう。

const lastName = profile.lastName
// または
const lastName = profile["lastName"]

プロパティの値を取り出して、変数に代入しています。

console.log で出力すると、「山田」が表示されます。

console.log(lastName)

実行結果

山田

オブジェクトに続いてプロパティ名を記述するとその値を取得できる仕組みになっているのです。

プロパティの追加

では、次にプロパティの追加をしてみましょう。

オブジェクトのプロパティの追加は次のようなフォーマットです。

オブジェクト.プロパティ名 = 値
または、
オブジェクト["プロパティ名"] = 値

実際にコードを見てみましょう。

先ほどのプロフィールのオブジェクトに、「email」を追加してみましょう。

const profile = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}

次のように「email」プロパティを追加します。

profile.email = "[email protected]"
// または
profile["email"] = "[email protected]"

コンソールに出力すると次に結果になります。

{
  lastName: "山田",
  firstName: "太郎",
  birthday: "1980年1月2日",
  sex: "男性",
  address: "東京"
  email: "[email protected]"
}

追加するときも同様に「オブジェクト.プロパティ名」で記述します。そして、その中に値を代入します。

プロパティの削除

では、次にプロパティの削除をしてみましょう。

オブジェクトのプロパティの削除は次のようなフォーマットです。

delete オブジェクト.プロパティ名
または、
delete オブジェクト["プロパティ名"]

オブジェクトを削除するには、「delete」とという演算子を使います。

実際にコードを見てみましょう。

先ほどのプロフィールのオブジェクトから「address」を削除してみましょう。

次のように「address」プロパティを削除します。

delete profile.address
// または
delete profile["address"]

コンソールに出力すると次に結果になります。

{
  lastName: "山田",
  firstName: "太郎",
  birthday: "1980年1月2日",
  sex: "男性"
}

delete演算子で削除したいプロパティ名を指定すると、削除することができます。

プロパティの書き方の違い

プロパティへのアクセス、追加や削除について見てきました。
オブジェクトのプロパティの指定の仕方に2通りありましたが、この違いは一体なんでしょうか。

profile.lastName // ドット(.)で記述するパターン
profile["lastName"]　// 鍵括弧([])で記述するパターン

結論からいうと、この二つに違いはありません。

どちらも同じようにプロパティにアクセスすることができます。

しかし、1つ目の「ドットで記述するパターン」で書けないケースがあります。

それは次のようなケースです。

一つずつ見てみましょう。

プロパティ名に「-」が入っている場合

プロパティ名に「-」が入っている場合は、ドットで書くことができません。

例えば、次のようなキーと値のペアのオブジェクトがあるとします。

「last-name」と「first-name」には、「-」が含まれています。

その場合は、次のようにダブルクォート（もしくは、シングルクォート）でプロパティ名を囲ってオブジェクトを作らなければなりません。

const profile = {
  "last-name":"山田",
  "first-name":"太郎"
}

そして、プロパティへのアクセスをするときも「鍵括弧([])で記述するパターン」で書きます。

profile["last-name"]

ドットで書くと、値を取得することができません。

profile.last-name

これは、「-」をコンピュータがプロパティ名として正確に識別できないためです。

プロパティ名として識別させるには、ダブルクォート（もしくは、シングルクォート）で囲う必要があります。

プロパティ名に変数を使う場合

プロパティ名に変数を使う場合は、「鍵括弧([])で記述するパターン」で書きます。

オブジェクトのプロパティ名を直接書かなくても、変数を指定することができます。

実際に見てみましょう。

次のようなプロフィールのオブジェクトがあります。

const profile = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}

「lastName」プロパティの値を取得するには、次のように書きます。

profile["lastName"]

この鍵括弧の中の「lastName」を変数に書き換えてみましょう。

「prop」という変数に「lastName」という文字を入れます。

const prop = "lastName"

この変数をオブジェクトのプロパティに指定します。

const prop = "lastName"
profile[prop]

これで、「lastName」プロパティの値を取ることができます。

なぜなら、「prop」変数が「lastName」というプロパティ名を指定しているからです。

const prop = "lastName"

// どちらも意味は一緒
profile[prop]
profile["lastName"]

このように変数をプロパティ名として書くときは、「鍵括弧([])で記述するパターン」で書きます。

どちらを使うべきか

二つのパターンを見てきましたが、どちらを使えばいいのでしょうか。

これは、状況によって使い分けるべきでしょう。

開発の現場では、普段は「ドット(.)で記述するパターン」を使います。

そして、変数などでプロパティにアクセスするときは「鍵括弧([])で記述するパターン」を使います。（というより、書かざるを得ない）

なので、普段は「ドット(.)で記述するパターン」で書くようにしましょう。

プロパティを操作してみよう

では、実際にオブジェクトのプロパティを操作してみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「プロパティを操作してみよう」と記述がされています。

その真下に、次のように書いてください。

// プロパティを操作してみよう
// プロパティにアクセスしてみよう
const student = {
  id:1,
  name:"鈴木",
}
const id = student.id
const name = student.name
console.log(id)
console.log(name)

const teacher = {
  id:1,
  "last-name":"佐藤",
  "first-name":"一"
}
console.log(teacher["last-name"])
console.log(teacher["first-name"])

const school = {
  name:"東京都学園高校"
}
const schoolKey = "name"
console.log(school[schoolKey])

// プロパティを追加しよう
const article = {
  title:"タイトル",
  body:"内容"
}
article.publishedAt = "1998年3月2日"
console.log(article)

// プロパティを削除しよう
delete article.title
console.log(article)

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

オブジェクトの中にオブジェクトを書く

オブジェクトのなかにオブジェクトを書くこともできます。

例えば、プロフィールに職業の情報を足すと、次のような構造になります。

では、コードで書いてみましょう。

まずは、プロフィールのオブジェクトを作ります。

const profile = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京"
}

次に、職業をオブジェクトで追加してみましょう。

const profile = {
  lastName:"山田",
  firstName:"太郎",
  birthday:"1980年1月2日",
  sex:"男性",
  address:"東京",
  job: {
    company:"プログラミング株式会社",
    occcupation:"プログラマー",
    serviceOfYears:10
  }
}

「job」というプロパティ名で追加しました。

このようにオブジェクトの中にはいつくもオブジェクトを入れ子にすることができます。

プロパティへのアクセス

プロパティの値を取るときには、同様にドットを繋げて取得することができます。

profile.job.company

まとめ

本章では、JavaScriptのオブジェクトについて学びました。

最後にもう一度、重要なことを確認しましょう。

次章は、JavaScriptの関数について解説します。