七回目ーーundefined、まとめーー
現在アニメやゲームなどのオフィシャルサイトと言えばいいのでしょうか、色んなサイトのコードを見て自分でつくる勉強をしています。
その中で今習っているjavascriptを使ったスライドショーなどのコードが度々出てきます。というより、そのスクリプトがないサイトの方が少ないという感じでしょうか。
まだよく分かっておらず、森を抜けた先は森だったとか、丘を越えたら山の麓だったとか、知れば知るほど難しい事を理解でき、反面結果が出ることを楽しんで覚えています。
今回はまとめをします。
その前に少しあるので、まずはそこから始めていきたいと思います。
１．undefined
学んだのは配列(定数や変数に複数の値を入れる)やオブジェクト(プロパティという名前を付ける)という複数の要素を纏めて扱うものについてでした。
今まで触れてきませんでしたが、配列やオブジェクトにも存在しない(＝異なるインデックス番号やプロパティ)ものを指定するとどうなるのか。
そこをまずは学びます。
const animals = [“dog”,”cat”,”lion”];
console.log(animals[0]);……(出力は『dog』)
console.log(animals[5]);……(？)
const animals = {name:”犬”,count:3}
console.log(animals.name);……(出力は『犬』)
console.log(animals.age);……(？)
上記のことです。
ことなんですが、結論を言うと
『その答えが【undefined】なのです』
undefinedは『定義されていない』という意味を持ちます。
配列のコードでは、インデックス番号5の要素は存在しない、即ち定義されていない。
オブジェクトでは、ageというプロパティは存在しない、即ち定義されていない。
このようになるので、出力結果は『undefined』と出てきます。
しかし、undefined＝エラーではありません。
２．利用する。
例えば、囲いの中に犬がいるのは分かりますが、何匹いるのか数えきれないほどいるとします。
const animals = [
{name:”猫”,count:12},
{name:”ライオン”,count:3},
{name:”犬”}
];
猫とライオンの頭数に関しても入れた状態にしました。
この状態で『名称name。count匹います』、『名称name。たくさんいます』と出力させます。
ループ(for文)と分岐(if文)を使いコードを書きます。
まず条件式。
for (let i = 0; i < animals.length; i = i + 1)
いつも通りの条件式の下に、まずは『名称name。count匹います』というコードを書きます。
const animal = animals[i];
console.log(`種類${animal.name}。`);
次にundefinedとなった場合のif文を書きます。
と同時に、『count匹います』という文も書きます。
if (animal.count === undefined) {
console.log(“たくさんいます”);
} else {
console.log(`${animal.count}匹います`);
}
もしanimals.countがundefinedならば『たくさんいます』と出力し、そうでないなら『animal.count匹います』と出力する、という意味になります。
コードを繋げると
const animals = [
{name:"猫",count:5},
{name:"ライオン",count:3},
{name:"犬"}
];
for (let i = 0; i < animals.length; i = i +1) {
const animal = animals[i];
console.log(`種類${animal.name}。`);
if (animal.count === undefined) {
console.log("たくさんいます");
} else {
console.log(`${animal.count}匹います`);
}
}
見て分かる通り多少の応用はありますが、基本は全て習った物を組み合わせています。
HTML&CSSでも感じ、ホームページをコピー学習中の現在でもこれは同じだ、とはっと気づく部分が多くあります。
前書きでも触れているように、javascriptが使えると大きくデザインが富んだものに出来るので、この基礎部分は特に重要な所だと思って勉強しています。
３．まとめ
まとめですが、内容は上記のものと殆ど違いがありません。
上記のコード内容は動物の種類とその性別頭数を出力するものです。
まとめでは、そこに名称も出力出来る様にします。
名称は三行目に入れ、例文は猫を使いたいと思います。
const animal = {
type: “猫”,
gender: {
M: 3,
F: 2
},
name:[“A”,”B”,”C”,”D”,”E”]
}
console.log(`種類は${animal.type}`);
console.log(`オスは${animal.gender.M}匹で、メスは${animal.gender.F}匹です。`);
console.log(“各名称はこちらです。”);
for (let i = 0; i < animal.name.length; i = i + 1) {
console.log(animal.name[i]);
}
異なる部分は配列の中にまた配列があり、配列の中にオブジェクトがある二つの部分だと思います。
ですが、前回オブジェクトの中に配列を入れる、という応用をしたと思います。
書き方も見て分かる通り中に配列がぶち込まれているだけなので、注意点である『;、:』、『[]、{}』、『””』を間違えないようすることが重要です。
名称(name)を価格(price)に変えたいなら
price:[12,15,10,8,21]
と頭数分数値を書き、最後のコンソールコードを
console.log(`値段は${animal.price[i]}万円です。`);
とすれば変更できます。
形のイメージはまさにプログラミングと同じで、表示させたい画像のURLがある場所を指定するような階層型になっている、というところでしょうか。
似たものを見つけておくと覚えやすいのは勉強と同じですね。
あと、二つを組み合わせることも可能なので一気に応用が増え混乱することは必須です。
しかし、応用とは言っても書くことはパズルの様な組み合わせでしかありません。
まずは何が何の意味を持つコードなのだ、と理解することが大切で、その上で何度もコードを書いて結果を出す、という練習をしていくのが近道なのだと最近強く思っています。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
