【JavaScript】JavaScriptまとめ⑤（オブジェクト）

概要

JavaScriptの理解を深めるため、

で学習した内容を記載していく。

本記事では、オブジェクト、標準組み込みオブジェクトについて記載する。

オブジェクトの考え方

オブジェクトとは

オブジェクトは日本語で、ものや対象物という意味である。例えば「人物」「自転車」「本」などは、すべてオブジェクトとして捉えることができる。
人物オブジェクトであれば、名前、年齢というデータを持っている。自転車は色、インチ、値段というデータを持っている。このようにオブジェクトは複数のデータをひとまとめにしたものである。

プロパティとは

「本」というオブジェクトを例にとってみると、タイトルは「吾輩は猫である」、著者は「夏目漱石」、ページ数「６２０」と、オブジェクトを特徴づけるデータを持っている。このデータの１つひとつのことを、プロパティという。プロパティはキ(key)と値(value)のペアから成り立っていて、例えば「タイトル」がキーで、「吾輩は猫である」が値となる。また、このキーのことをプロパティ名とも呼ぶ。

メソッドとは

オブジェクトはデータだけではなく、振る舞いを持つこともできる。
ここでは人物というオブジェクトを考えてみる。人物オブジェクトは名前や年齢というデータを持つが、「挨拶をする」や「本を読む」などの行動をとることができる。
このように、オブジェクトに関する振る舞いを表現するものがメソッドである。振る舞いは単なるデータとは違い、何かしらの処理を行うものなので、プログラム中では関数として記述される。

オブジェクトの作り方

{
    キー１：　値１,
    キー２：　値２,
    キー３：　値３,
}

オブジェクトは全体を{}で囲み、その中にキー：　値のようにプロパティのキーと値のペアをカンマ（,）区切りで並べる。
例えば、「本」オブジェクトは以下のように書くことができる。

object.js

const book = {
    title: '吾輩は猫である',
    author: '夏目漱石',
    pages: 620
}

console.log(book);

プロパティへのアクセス方法

下の例は、bookオブジェクトのtitleプロパティの値を表示する方法である。

properties.js

const book = { title: '吾輩は猫である' }

console.log(book.title); // ドット表記法
console.log(book['title']); // ブラケット表記法

プロパティを取り出すだけでなく、新しいプロパティの追加や、プロパティの上書きができる。

properties_update.js

const book = { title: '吾輩は猫である' }
book.author = '夏目漱石'; // 新しいプロパティの追加
book['pages'] = 620; // 新しいプロパティの追加
console.log(book);

const person = { name: 'Alice', age: 20 }
person.name = 'Bob'; //　プロパティを上書き
person['age'] = 25; // プロパティを上書き
console.log(person);

変数を使ってプロパティにアクセスする（properties_access.js)

const book = { title: '吾輩は猫である' }
const a = 'title';
console.log(book[a]);

メソッドの書き方

「人物」オブジェクト(object_person.js)

const person = {
    name = 'アリス',
    age = 20,
    interests: ['読書', '料理'],
    greet: function() { console.log('こんにちは'); } // この行がメソッドの記述
}

person.greet(); // メソッドの呼び出し

personオブジェクトに「挨拶をする処理」をメソッドとして付与するために、greetというキーを用意し、その値を関数に設定している。
また、このキーのことを、メソッド名という。

const オブジェクト名 = {
    プロパティ名:　値,
    メソッド名:　関数式
}

メソッドを呼び出す場合は、オブジェクトに続けて.メソッド名()と書く。

オブジェクト名.メソッド名(実引数)

メソッドのthisについて

メソッド内部のthisは「メソッドを呼び出すオブジェクト自身」を指す。

thisを使うメリット

// 改善の余地があるコード
const person = {
    name = 'Alice',
    greet: function() { console.log('こんにちは、私はAliceです。'); } 
}

greet()メソッド内のこんにちは、私はAliceですという文章には、nameプロパティの値である、Aliceを含んでいる。もし、名前をAliceからBobに変更したい場合、nameプロパティとgreet()メソッドの2箇所を書き換えなくてはならない。そのような手間をかけないために、以下のようにnameプロパティを参照するようなコードを書きたいところ。

// うまく動作しないコード
const person = {
    name = 'Alice',
    greet: function() { 
        console.log(`こんにちは、私は${name}です。`); // 意図した動作にならない
    } 
}

person.greet();

しかし、greet()メソッド内部から、他のプロパティであるnameを直接参照することはできない。この問題を解決してくれるのがthisである。thisは「メソッドを呼び出すオブジェクト」を指すので、そのオブジェクトを経由してプロパティにアクセスすることができる。

object_person_this_ok.js

// うまく動作するコード！
const person = {
    name = 'Alice',
    greet: function() { 
        console.log(`こんにちは、私は${this.name}です。`); // 意図した動作をする
    } 
}

person.greet();

またnameプロパティが変更された場合は、自動的にgreet()メソッドの結果も連動して変更される。

object_person_this_update.js

const person = {
    name = 'Alice',
    greet: function() { 
        console.log(`こんにちは、私は${this.name}です。`);
    } 
}

person.name = 'Bob'; // nameプロパティを上書き
person.greet();

標準組み込みオブジェクト

Math

Javascriptにはもともと用意されているオブジェクトが存在する。これらのオブジェクトを標準組み込みオブジェクトという。

Mathは数学的なデータの取り扱いを便利にしてくれるオブジェクトである。Math自体が１つのオブジェクトなので、このオブジェクトにプロパティやメソッドが用意されている。

円周率π

数学の円周率3.14159...というデータはMathのプロパティに用意されている。

円周率を表示する(pi.js)

console.log(Math.PI);

絶対値の計算

絶対値を計算したいときはabs()メソッドを使う。abs()は引数で与えられた数値の絶対値を返す。

abs.js

console.log(Math.abs(-10));

四捨五入/切り捨て/切り上げ

小数点を四捨五入する場合はround()、小数点以下を切り捨てる場合はfloor()、切り上げる場合はceil()が使える。

round_floor_ceil.js

console.log(Math.round(1.4)); // 四捨五入
console.log(Math.floor(10.3)); //　切り捨て
console.log(Math.ceil(10.3)); // 切り上げ

ランダムの数を生成

０以上１未満の範囲でランダムな値を返すrandom()メソッドがある。random()メソッドは引数をとらず、以下のように呼び出すたびに異なる値を返す。

random.js

console.log(Math.random());

Date

日付の情報をオブジェクトとして扱えるようにしたものがDateオブジェクトである。

new演算子を使ったオブジェクト生成

　Dateオブジェクトを生成するにはnew演算子というものを使う。

new Date()

new演算子に続いてDate()と書くことで、Dateオブジェクトを生成することができる。

now.js

const now = new Date();
console.log(now);

上のように、引数を渡さずDateオブジェクトを生成した場合、現在時刻情報を持ったオブジェクトとなる。
　以下のように日時に関する情報を引数として渡すことで、特定の日時の情報を持ったDateオブジェクトを作ることができる。

the_day.js

const theDay = new Date(2030, 3, 1, 5, 20, 0);
console.log(theDay);

引数を６つ渡しており、左から、年、月、日、時、分、秒を表している。直感的でわかりやすいが、「月」のデータだけは、０〜１１の範囲で指定する必要がある。

Dateオブジェクトのメソッド

const theDay = new Date(2030, 3, 9, 5, 20, 0);

console.log(theDay.getFullYear()); // 年を取得する
console.log(theDay.getMonth()); // 月を取得する
console.log(theDay.getDate()); // 日を取得する

日付をわかりやすく表示する

Dateオブジェクトで日付データを扱えることはわかったが、これだけでは表記がMon Apr 01 2030 GMT+0900のようになり不便である。このような日付データを整えるには、toLocaleString()やIntl.DateTimeFormat()などを使う。

show_date.js

const today = new Date().toLocaleString('ja-JP', {
    dateStyle: long
});
console.log(today);

const formatter = Intl.DateTimeFormat('ja-JP', {
    dateStyle: long
});
const today = formatter.format(new date());
console.log(today);