Zenn
👋

【イラスト付き】JavaScriptオブジェクト【丁寧に解説】

2024/09/02に公開
JavaScript
tech

はじめに

皆さんこんにちは。

今回はJavaScriptのオブジェクトの宣言の仕方と使い方についてをご紹介します。

JavaScriptはオブジェクト指向プログラミング言語です。オブジェクトを多用し、それらを組み合わせて処理を成り立たせています。それほどオブジェクトは頻出でかつ重要なものです。

こんな人にオススメ

  • 初めてJavaScriptに触れる方
  • JavaScriptのオブジェクトの関する基本的な文法を把握したい

初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。

😋 JavaScriptは様々なオブジェクトを扱います♪

オブジェクトリテラル

まずポイントをチェック

  • 中カッコでオブジェクトを宣言
  • プロパティは名前と値の組み合わせで宣言
  • メソッドは２種類の宣言方法
    • プロパティの値として関数を指定する方法
    • メソッド宣言の独自書式

オブジェクトリテラルとは自分でオブジェクトを宣言する方法です。

オブジェクトの書き方

  • 中カッコでオブジェクトの宣言
  • 中カッコ内にプロパティやメソッド記述
  • オブジェクトは変数に代入しても、直接関数の引数に記述してもOK
const 変数名 = { プロパティ, メソッド };

プロパティの宣言は、プロパティ名と値の組み合わせで行います。

プロパティの書き方

  • プロパティ名と値の間はコロンを記述
  • 複数のプロパティを配置する場合はカンマで区切る
{
    id: 10,
    name: 'sample'
}

メソッドの宣言は２通りの書き方があります。性能の違いはありませんので、好みやチームのルールに合わせた書き方をしましょう。

メソッドの書き方

  • １つ目の書き方
    • プロパティの宣言と同様に、プロパティの値として関数を指定
  • ２つ目の書き方
    • メソッド名を指定して、関数宣言のように記述
{
    method1: ()=>alert('sample'),
    method2(){
         alert('sample');
    }
}

// 人物を表すオブジェクト
const person = {
    name: 'taro',
    age: 20,
    sayHello: function () {
        console.log('Hello')
    },
    sayBye: () => console.log('Bye'),
    sayMessage(message) {
        console.log(message);
    }
};

😋 オブジェクトリテラルで独自のオブジェクトを用意できます♪

プロパティの参照

まずポイントをチェック

  • オブジェクト.プロパティ名で参照
  • オブジェクト[‘プロパティ名’]で参照

オブジェクト内のプロパティを参照する方法は２種類あります。

プロパティ参照の書き方

  • ドットでプロパティ名を指定する方法
  • 角カッコでプロパティ名の文字列を指定する方法
オブジェクト.プロパティ名
オブジェクト[プロパティ名文字列]

ドットを使う方法はオブジェクトを指定しドットでプロパティ名を続けて記述するだけのシンプルな方法です。角カッコでの指定は文字列を利用するため、変数を使ったプロパティの指定が可能です。ドットを使う方法の方が利用頻度が高い書き方です。

またプロパティに値を代入することで更新することができます。

// プロパティ名を指定して参照
person.name;
person['name'];

// プロパティを更新
person.name = 'kotaro';

😋 プロパティ名を指定して参照できます♪

メソッドの利用

まずポイントをチェック

  • オブジェクト.メソッド名(引数)で実行
  • オブジェクト.メソッド名で参照

オブジェクト内のメソッドを利用するにはメソッド名を指定します。

メソッド利用の書き方

  • メソッドの実行
    • メソッド名の後ろに丸カッコで引数を指定
  • メソッド定義の参照
    • メソッド名のみを指定
オブジェクト.メソッド名(引数); // 実行
オブジェクト.メソッド名; // 実行はされない

メソッドの実行方法は関数の実行と同じですので、戻り値がある場合は変数で受け取るなどします。メソッド名のみを指定すると、メソッドの定義を参照します。つまり、実行はされません。メソッドを値として取り出すことができますが、あまり利用する機会はありません。

// メソッドの実行
person.sayHello();
// メソッドの参照
person.sayHello;

😋 メソッドの実行は関数の実行とほとんど同じです♪

組み込みオブジェクト

まずポイントをチェック

  • window.オブジェクト名で組み込みオブジェクトを指定する
  • window.は省略することができる

JavaScriptにはあらかじめ用意されているオブジェクトや関数が存在し、組み込みオブジェクトや組み込み関数と言います。

組み込みオブジェクトや組み込み関数には、値の操作に便利な機能や様々なAPI（ブラウザ自体の機能をJavaScriptから使うためのオブジェクトなど）が用意されています。

利用するにはwindow.で関数名やオブジェクト名を指定します。

// Number関数を利用
Number('100');
window.Number('100');

// fetch関数を利用
fetch('http://xxxxx');
window.fetch('http://xxxxx');

// documentオブジェクトを利用
document.getElementById('xxx');
window.document.getElementById('xxx');

😋 JavaScriptは組み込みのオブジェクトや関数も沢山使います♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

オブジェクトの宣言と呼び出しについて確認をしていただきました。プロパティとメソッドどちらも利用する際は、オブジェクト名と使うものの名前を指定します。オブジェクトは頻繁に利用しますので、早めに慣れましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（MDN Web Docs のリンク）

JavaScript オブジェクトの基本：https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics

Discussion