はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Objectの中にObject

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

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って毎回書くのかあ、って思うと気持ちが萎えますよね。
一つの解決策としては関数を作るっていうのはありますね。

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

getFullnameOfTaki();

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

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種類ほどあります。

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

taki.getFullname();

const taki = {
    name: {
        familyName: 'tachibana',
        firstName: 'taki'
    },
    sex: 'man',
    age: 17,
    getFullname: () => taki.name.familyName + taki.name.firstName
}

taki.getFullname();

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を作ってみる