【ド基礎から始めるJS講座①】Objectが解ればJSの半分くらいは解った気になれる！

# はじめに

Monacaのハンズオンがあるらしくてですね。
https://ncmb.connpass.com/event/201388/

Monacaは御存知の通りJavaScriptで処理を書くので、JavaScriptの基礎的な知識を効率的に学べたら良いんじゃないかなーって思って、色々考えて、Object解れば半分くらい解った気になれるんじゃね？と思って筆を執った次第です。いや、キーボードで書いてるんですけど、こういうときの言い回しって何が正解なんですかね？
早速始めましょう。

# Objectって何？

こちらをチラチラしながら読むと良いかと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects

まずはコードで例を見てみましょう。

```javascript
const taki = {
    name: 'taki',
    sex: 'man',
    age: 17
};
```

`taki`って何？って思われたと思いますが、これはピエール瀧ではなくて、「君の名は。」の瀧くんです。
なんで瀧くんにしたかっていうのは、たまたま思いついたからで、深海作品は「天気の子」の方が5倍くらい好きです。

これ結局、キーと値で`:`を挟んでるだけなんですね。
PHPの連想配列によく似てますね。

```php
taki = [
    'name' => 'taki',
    'sex' => 'man',
    'age' => 17
];
```

よく似ては居るんですけど、厳密には違うんですって。
とは言えやっぱり使いみちはそんな感じだったりします。

要は、**1個の変数の中に沢山の値を名前付きで入れられる**ってことですね。
特に名前つけなくてもいいなーってときはArray（配列）を使います。

# Objectの中の個々の値（プロパティ）を呼んでみよう

さっそく、Object`taki`の中の値（これを**プロパティ**と呼びます）を呼んでみましょう。
**takiの名を呼んでみましょう。**

```javascript
console.log(taki.name); // taki
```

`console.log()`っていうのは、Webブラウザーについているデベロッパーツールのコンソールにその値を出力するおまじないです。
JavaScriptの開発をやるときには欠かせないやつです。
こんな感じに表示されると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57811/75bfa641-0ff8-8fa5-be81-12555f241652.png)

呼び出し方としては変数名とキー名を`.`（ドット）でつないであげるだけです。
つまり、takiの名は`taki.name`で呼び出せます。

ちなみにPHP風に`taki['name']`でも呼び出すことができます。
むしろこうじゃないと呼べないときもあるので、覚えておきましょう。

# Objectの中にObject

`taki.name`だと、`taki`の名字が表現されてないことに気づいたと思います。
`taki`が名字を持たない高貴な存在であればそれでも良いのですが、残念ながら瀧くんは一般ピープルです。
なので、`taki.name`でなんとか名字と名前を表現してみましょう。

```javascript
const taki = {
    name: {
        familyName: 'tachibana',
        firstName: 'taki'
    },
    sex: 'man',
    age: 17
}
```

なんと値のところにObjectをセットすることができるのです！
このとき、`taki`の名を呼ぶときは`taki.name.firstName`で呼び出すことができます。
そしてフルネームにしたかったら`taki.name.familyName + taki.name.firstName`で表現することができます。

# Objectの中に関数を作ろう

ただ、フルネーム呼ぶたびに`taki.name.familyName + taki.name.firstName`って毎回書くのかあ、って思うと気持ちが萎えますよね。
一つの解決策としては**関数を作る**っていうのはありますね。

```javascript
function getFullnameOfTaki(){
    return taki.name.familyName + taki.name.firstName;
}

getFullnameOfTaki();
```

ただ、こんなのを単体の関数にしてたらキリが無いし、増やしていくうちに見失いそうですよね。
Objectの中に入れられたら素敵だと思いませんか？　あ、思わないですかね？
まあ、でもできるんで、とにかくやってみましょうか。

```javascript
const taki = {
    name: {
        familyName: 'tachibana',
        firstName: 'taki'
    },
    sex: 'man',
    age: 17,
    getFullname: function(){
        return taki.name.familyName + taki.name.firstName;
    }
}

taki.getFullname();
```

どうですか？　Objectの中にObjectどころか、関数も作れてしまうわけです。
このObjectの中の関数を**メソッド**と呼びます。
メソッドを呼ぶときは、先程のプロパティとちょっと違って、最後にかっこ`()`を付けます。
関数呼び出すときと同じですね。

ちなみにこのメソッド、書き方はあと3種類ほどあります。

```javascript:アロー記法
const taki = {
    name: {
        familyName: 'tachibana',
        firstName: 'taki'
    },
    sex: 'man',
    age: 17,
    getFullname: () => {
        return taki.name.familyName + taki.name.firstName;
    }
}

taki.getFullname();
```

```javascript:アロー記法(更に省略)
const taki = {
    name: {
        familyName: 'tachibana',
        firstName: 'taki'
    },
    sex: 'man',
    age: 17,
    getFullname: () => taki.name.familyName + taki.name.firstName
}

taki.getFullname();
```

```javascript:メソッド定義
const taki = {
    name: {
        familyName: 'tachibana',
        firstName: 'taki'
    },
    sex: 'man',
    age: 17,
    getFullname() {
        return taki.name.familyName + taki.name.firstName;
    }
}

taki.getFullname();
```

# おわりに

Objectの基本的なところはこんなもんです。この考え方をしっかり抑えておくことによって、`class`などもわかるようになります。
次回はそのへんをやっていこうかと思います。

次回はこちら→ [【ド基礎から始めるJS講座②】Objectが解った気がするので調子に乗ってclassを作ってみる](https://qiita.com/layzy_glp/items/441d7813415f3b05dbb3)