初心者向けにjavascriptのオブジェクトとは【現役SEが紹介】

javascripのオブジェクトって何なのかを知りたい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptのオブジェクトについて解説していきます。

SPAのフロントエンド開発の場合、javascriptのオブジェクトを使用する頻度が高いです。
今回はjavascriptのオブジェクトということですが、オブジェクトの内容とあわせてJsonというデータ形式についても知っておくとよいです。

上記のことを初心者向けに解説していきたいと思います。

javascripのオブジェクトとは？

はじめにjavascriptのオブジェクトがどういったものか説明していきます。

オブジェクトは変数の型の１つでもあり、複数のデータを保持できるものです。
保持する内容は、キーとバリューといった感じで、map形式とも似た感じでデータを持つことができます。

イメージとしては以下のような感じです。

これら1項目をプロパティと呼ぶこともあります。
上記のようなデータを１つの変数に格納することができます。

javascripのオブジェクトの書き方

では、実際にjavascriptのオブジェクトの書き方を説明します。

先ほどの例だと以下のような形になります。

const test = {
  id: 'TEST001',
  name: '田中',
  mail: 'tanaka@test.com'
};

中かっこ｛｝でくくって、左側にキー名を書きそのあとコロン（：）を記載し、その後に値を記載するといった感じです。

文字列の場合はシングルクォーテーションをかこう必要があります。
数値の場合はシングルクォーテーションは不要です。このあたりは通常の変数の書き方と同じですね。

値で指定できる型は、javascriptで指定できるものであれば概ね利用することができます。
先ほどは文字列と数値の話でしたが、配列も使用することができます。
少しややこしくなるかもしれませんが、さらにオブジェクトを指定することができます。

以下のようなイメージです。

const test = {
  string: 'test',
  number: 10,
  array: [1, 2, 3, 4, 5],
  boolean: true,
  object: {
    a: 1,
    b: 2,
    c: 3
  }
};

このように複数の型を持つ値を１つの変数で保持することができます。
私はあまり使用したことないですが、関数も入れることが可能です。

続いて、オブジェクトの参照と更新の仕方について説明します。

let test = {
  string: 'test',
  number: 10,
  array: [1, 2, 3, 4, 5],
  boolean: true,
  object: {
    a: 1,
    b: 2,
    c: 3
  }
};

console.log(test.string); // 参照

test.string = 'update'; // 設定

console.log(test);

オブジェクトにある項目の値を取得したい場合は、「変数名.キー名」で対象を取得することが可能です。
上記の場合はstringの項目を参照しようとしています。
設定する際も同様に「変数名.キー名」を左辺に記載し、いつもの変数設定と同じように＝で右辺で値を指定するだけです。

上記を実行すると以下のような出力になります。

> "test" 
> Object { string: "update", number: 10, array: Array [1, 2, 3, 4, 5], boolean: true, object: Object { a: 1, b: 2, c: 3 } }

他にも配列みたいな書き方でも取得することも可能ですが、基本的に書き方は上記のような書き方がほとんどですのでとりあえず上記の内容を理解しておくだけで良いかと思います。

どういった時に使用するのか

主にデータベースのデータを扱ったり、何かしらのプロパティとして保持させたりで使用することが多いです。

他にも冒頭で説明したJson形式のデータを保持するときにもよく使います。

Jsonとは、JavaScript Object Notationの略でテキストベースのデータフォーマットです。
以下のような書き方をするデータのことを指します。

{
  "string": "test",
  "number": 1
}

どうでしょう？見覚えありませんか？
そうです。オブジェクトと書き方がほぼ同じなのです。

上記Json形式はサーバのAPIでやり取りするデータフォーマットとして利用することが多く、クライアントレンダリングのSPA形式のフロントエンド開発の場合はほぼ使用することになります。

最後に

javascriptのオブジェクトについて説明しました。

javascriptを学ぶ上でオブジェクトを使用すること多く、知っていないと開発できないケースが多いですので、必ずどういったものか理解しておくほうがよいでしょう。

上記を使わないケースがあるするのであれば、サーバレンダリング型の開発でページごとにhtmlやxmlのデータをやり取りをするときぐらいです。

ただ、最近ではREST APIを利用した開発がほとんどですので、早いうちに理解しておくとよいでしょう。