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

# 概要
JavaScriptの理解を深めるため、
[<img width="200" alt="51vlB3JskRL.jpg" src="https://m.media-amazon.com/images/I/41vZUGXaYML._SX350_BO1,204,203,200_.jpg">](https://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8BJavaScript-%E6%96%B0%E7%89%88-%E6%A1%9C%E5%BA%AD-%E6%B4%8B%E4%B9%8B/dp/4798173266/ref=sr_1_15?crid=341O9294X80Z7&keywords=javascript&qid=1679238835&sprefix=javas%2Caps%2C185&sr=8-15)
で学習した内容を記載していく。

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

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

#### プロパティとは
「本」というオブジェクトを例にとってみると、タイトルは「吾輩は猫である」、著者は「夏目漱石」、ページ数「６２０」と、オブジェクトを特徴づけるデータを持っている。このデータの１つひとつのことを、`プロパティ`という。プロパティは`キ`(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オブジェクトのメソッド
```date_methods_js
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);
```