JavaScript

JavaScriptでオブジェクトを作成する2通りの方法

どうも、つよぽんです!

今回は、JavaScriptのオブジェクトの作成方法について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • JavaScriptのオブジェクトってどうやって作成するの?
  • JavaScriptでオブジェクトを作成する方法は複数あるけど、どれを使うのが一般的なの?

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • JavaScriptでオブジェクトを作成する方法
  • JavaScriptでオブジェクトを作成するときの一般的な書き方

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
【JavaScript】オブジェクトの作成方法【2通りの作り方】JavaScriptでオブジェクトを作成する方法を学習します。JavaScriptのオブジェクトは2通りありますが、基本的には「{}」を使った書き方しか使わないので最低限「{}」を覚えれば良いでしょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptでオブジェクトを作成する方法その1 :「{}」を使う
  2. JavaScriptでオブジェクトを作成する方法その2 :「new Object()」を使う
  3. JavaScriptでオブジェクトを作成する一般的な書き方はどっち?

 

JavaScriptでオブジェクトを作成する方法その1 :「{}」を使う

まず1つ目のJavaScriptでオブジェクトを作成する方法を解説します。

以下の画像内でも説明していますが、「{key1: value2, key2: value2}」のように、「{}」の中に「key: value」の組み合わせで値をセットします。(複数の値をセットするときはカンマで区切ります。)

「{}」の中に「key: value」の形式で値をセットする「{}」の中に「key: value」の形式で値をセットする

以下の画像内の赤枠で囲っているサンプルコードでは、上の画像で説明している方法でオブジェクトを作成しています。

赤枠内で「{}」を使ってオブジェクトを作成している赤枠内で「{}」を使ってオブジェクトを作成している

上の画像で使われているサンプルコードは以下のリンクから直接確認できます。

オブジェクトの作成方法サンプル1

この章で解説した内容をまとめると以下のとおりです。

  • 「{ key1: value1, key2: value2 }」の形式でオブジェクトを作成できる
  • 複数の値をセットするときはカンマ(,)で区切る

JavaScriptでオブジェクトを作成する方法その2 :「new Object()」を使う

この章では、JavaScriptでオブジェクトを作成する2つ目の方法を解説します。

以下の画像内でも説明していますが、「new Object({key1: value2, key2: value2})」のように、「new Object()」を使って、「()」の中に1つ目の方法で解説した「{key: value}」の値を埋め込みます。

new Object()」を使う以外は1つ目の方法とやることは同じだと思っていただいて問題ありません。

「new Obuject()」のカッコの中で「{key: value}」の形式で値をセットする「new Obuject()」のカッコの中で「{key: value}」の形式で値をセットする

以下の画像内の赤枠で囲っているサンプルコードでは、上の画像で説明している方法でオブジェクトを作成しています。

赤枠内で「new Object()」を使ってオブジェクトを作成している赤枠内で「new Object()」を使ってオブジェクトを作成している

上の画像で使われているサンプルコードは以下のリンクから直接確認できます。

オブジェクトの作成方法サンプル1

この章で解説した内容をまとめると以下のとおりです。

  • 「new Object({ key1: value1, key2: value2 })」の形式でオブジェクトを作成できる
  • 「new Object()」を使う以外は1つ目に紹介した「{}」を使ってオブジェクトを作成する方法とやることは同じ

JavaScriptでオブジェクトを作成する一般的な書き方はどっち?

ここまでで、JavaScriptでオブジェクトを作成する方法として次の2つを解説してきました。

オブジェクトを作成する方法
  1. 「{key: value}」の形式でオブジェクトを作成
  2. 「new Object({key: value})」の形式でオブジェクトを作成

上記のようにJavaScriptでオブジェクトを作成するには複数の方法がありますが、いざ開発をするときは①と②のどちらを使えばよいのでしょうか?

結論から言うと「①「{key: value}」の形式でオブジェクトを作成」の方法で記述すれば良いです。

僕自身、これまでJavaScriptのコードをたくさん読んできましたが、②の「new Object()」でオブジェクトを作成するコードは見た記憶はほとんど無いです。

そのため、JavaScriptでオブジェクトを作成するときは基本的に「①{key: value}」の書き方で記述するようにしましょう。

  • JavaScriptでオブジェクトを作成するときは「{key: value}」の形式で記述すること

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • JavaScriptでオブジェクトを作成する方法は2通りある
    • ①「{key: value}」の形式でオブジェクトを作成する
    • ②「new Object({key: value})」の形式でオブジェクトを作成する
  • オブジェクトを作成する方法は2通りあるが、基本的には①の「{key: value}」の形式でオブジェクトを作成すること

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】オブジェクトの作成方法【2通りの作り方】JavaScriptでオブジェクトを作成する方法を学習します。JavaScriptのオブジェクトは2通りありますが、基本的には「{}」を使った書き方しか使わないので最低限「{}」を覚えれば良いでしょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です