おみくじプログラムの改造の続き

昨日の続きを考える。もう一度レッスン動画を見直していると#17 オブジェクトを使ってみようというレッスンを発見した。要素をペアのように書いている。これはオブジェクトというらしい。

オブジェクト

コンストラクタは、与えられた値のオブジェクトラッパーを生成します。値が null や undefined である場合、空のオブジェクトを生成して返します。それ以外の場合は、与えられた値と一致する型のオブジェクトを返します。

ノンコンストラクタコンテキストにおいて呼び出されたときは、 Object は、同じように振舞います

何を言ってるのか全くわからないが、とにかくオブジェクトは利用できそうなので試してみた。


function getOmikuji() {
var omikuji = {
A: 1,
B: 2,
C: 3,
};
var result = Math.floor(Math.random() * omikuji.length);
document.getElementById('text_stage').innerHTML = omikuji[result];
}


結果は何度試してもundefinedだった。タイプミスはない。undefinedは定義されていないという意味だったはずだがvar omikujiの中にきちんと書いているので定義されているはずだ。定義って何かね。調べてみるとオブジェクトはlengthが動かないのでkeyというメソッドを使うらしい。


function getOmikuji() {
var omikuji = {
A: 1,
B: 2,
C: 3,
};
var result = Object.keys(omikuji);
for (var i = 0, len = result.length; i < len; i++) {
console.log(result[i]);
}
}


コンソールログにはA,B,Cが表示された。1歩進んだ気がする。ただ、なぜここでfor文が使われるのかがわからない。var result = Object.keys(omikuji);これでresultの中には何が入ったのだろう。予想だけど、この時点ではresultの中にはAしか入っておらずfor文で1つずつ要素が足されてCまで到達したらconsole.log(result[i]);が実行されているのか？

半歩進んだので、これをランダムで表示してみたい。ただ、ここで詰まった。Math.floor(Math.random() * result.length);をどこに書いてもランダムにならない。var result = Math.floor(Math.random() * Object.keys(omikuji));こんな書き方を試しても動かない。

そもそもプロパティの値という名前の1,2,3の扱いはどうなったのか。全く顔を出す様子がないので不安になる。悩むこと山のごとし。


function getOmikuji() {
var omikuji = {
A: 1,
B: 2,
C: 3,
};
var result = Object.keys(omikuji);
console.log(result["0"]);
}


試しにこう書いてみたところコンソールにはAが表示された。result[1]ではBが表示されresult[2]ではCが表示された。ならばとresult[A]書いてみたところA is not definedが表示されたのだがresult["A"]ではエラー表示では無く中身がundefindと表示された。

そこでundefindを調べてみた。

未定義である事を意味する値

var omikujiで定義してると思うんだけどこれは違うのだろうか。謎は深まる。今のところわかっているのは添え字を書けばプロパティ名は表示させることができるということと、プロパティの値の表示方法はわからないということ。

というわけで「オブジェクト プロパティ 値」でググる。プロパティの値の取得は簡単で、今回の場合はconsole.log(omikuji.A);と書くだけでいい。[]ではなく.だったのか。コンソールログには1と表示され、無事にプロパティの値を取得することができた。ん？ということは、ひょっとしてこれならば・・・？

console.log(Math.floor(Math.random() * omikuji.length));

結果はNaNだった。これは数値ではないという意味らしい。ということは文字列？ならば整数に変換するMath.floorが邪魔なのかと考えconsole.log(Math.random() * omikuji.length);と書いてみるが結果は同じくNaNだった。ここでプロパティの値をランダムに取得する方法を調べようと思ったのだが、なかなか思うような記事を見つけることができず断念。

今日のまとめ

オブジェクトとは

キーと値の組み合わせ。「トマト（キー）は100円（値）」のようなもの。
Object

オブジェクトにはlengthが利用できない

lengthの代わりにObject.keysを利用する
keys

総評

前回のおみくじプログラムの改造の完成には至らなかったが他のことが勉強になった。困ったことに、わからないことや調べたいことがあるとき、どういうキーワードで調べればいいのかという部分で壁に当たる。プログラムの経験、知識が全くないために「何がわからないのか」がわかっていないことが多々ある。そして、これが一番困るのだ。MDNのような場所で調べると専門用語を多用しているため、何を言っているのかさっぱりわからないことも迷宮入りに拍車をかける。

壁に当たって止まっていても仕方がないので、おみくじプログラムの改造は一度ストップして、次は別の簡単なプログラムに挑戦してみようと思う。