はじめに
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などもわかるようになります。
次回はそのへんをやっていこうかと思います。