今回扱う内容：オブジェクト

JavaScriptの重要な概念である「オブジェクト」を解説します。

オブジェクトとは

オブジェクトとは、「関連のあるデータと機能の集合」です。ここでいうデータとは、数値(1, 2, ...)、文字列("Hello", ...)などの値のことであり、機能とは関数のことです。より詳しく知りたい人は、MDN Web Docsの解説の記事もご覧ください。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics
https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures

実際にコード上でpersonというオブジェクトを作ってみます。

const person = {
  firstName: "Ken",
  lastName: "Takahashi",
  age: 29,
  gender: "male",
  interests: [
    {
      name: "programming",
      emoji: "💻"
    },
    {
      name: "motorcycle",
      emoji: "🏍"
    },
  ],
  greeting: function () {
    alert("Hi! I'm " + this.firstName + " " + this.lastName);
  }
};

今回はオブジェクトのデータ(プロパティ)には firstName lastName age gender interestsを、関数(メソッド)には greeting を設定しました。メソッド内の this はオブジェクト自身のプロパティを参照するときに使います。

オブジェクト内のメソッドまたはプロパティを呼ぶ際には(オブジェクト名).(使いたいプロパティかメソッド名)と記述します。

// プロパティ呼び出しの例
console.log(person.age);
// メソッド実行の例
person.greeting();

オブジェクトは何に使うのか

オブジェクトは普段のJavaScriptのプログラミングの中でよく使われています。numberやstringなどの基本のデータ型以外はほとんど全てがオブジェクトです。例として console.log があり、これはconsoleオブジェクト内のlogメソッドを使っています。

次に自分で定義したオブジェクトは、主にデータ構造として使われます。例として、前述のpersonオブジェクトのように複数の項目をひとまとめにしたデータセットとしてオブジェクトを定義することで、見やすく便利にデータを記述できます。またサーバとブラウザでデータをやり取りする際にも使われ、よく使用されるデータ形式のフォーマットであるJSON(JavaScript Object Notation)とも深く関わりがあります。

そして、オブジェクトはJavaScriptで「オブジェクト指向プログラミング」をする際に使われます。しかしライブラリを自作したい場合は別ですが、実際の開発で使う場面は多くないです。

オブジェクトを理解する上での注意点

オブジェクト指向プログラミングを意識しすぎない

オブジェクト指向プログラミングをしようと考えてオブジェクトを勉強する方は、学習方法に注意が必要です。
例えば、JavaScriptでオブジェクト指向プログラミングを学習する際に「プロトタイプ」という用語が出てくることがあります。「プロトタイプ」はJavaScriptの重要な概念ですが、自分でコードを書く際にはそこまで意識をする必要はないですし、はじめは分からなくて大丈夫です。また、今の開発のトレンドは関数型プログラミングなので、そちらに注目してみるのも良いでしょう。

オブジェクト指向プログラミングをしたいならES6のclass構文を使うのがおすすめ

JavaやPython、Rubyなどのプログラミング言語ではクラスベースのオブジェクト指向プログラミングをサポートしており、一般的なオブジェクト指向プログラミングはクラスベースのものを指します。JavaScriptでもES6というバージョンからクラスベースのオブジェクト指向プログラミングが使えるようになりました。プロトタイプを使ったオブジェクト指向プログラミングを解説している参考書や技術ブログもありますがES6の書き方になるので、JavaScriptを深く学びたい方以外にはおすすめしません。今は、オブジェクト指向プログラミングをする際にはES6のclass構文を使うようにしましょう。

クラスベースやプロトタイプベースについて詳しく知りたい人は、こちらの記事を読んでみるのも良いでしょう。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

まとめ

今回はJavaScriptにおけるオブジェクトについて解説しました。次回はJSONについて解説していきます。

現役エンジニアが教える！実践JavaScript入門〜オブジェクト編〜