【挫折ポイント解説】JavaScriptのクラス、オブジェクトについて①

こんにちは！りんごです。

皆さま、プログラミング言語を扱う上で何かしらの”壁”というものにぶつかってしまった経験はおありでしょうか？

ほぼどんな言語においても、みんな揃って

オブジェクト思考難しい！！

と言いますよね。
JavaScriptにおいても、コードを読んでいると急に

class Hoge {}

が出てきたりしてビビっちゃいます。

この記事では、他とは少し違う切り口からクラスとオブジェクトの関係性に関して書いてみようと思います。
(オブジェクト思考に入る前段階としてお読みください。)

では肩の力を抜いて、行ってみましょう〜！

まず皆さま、これ使ったことありますか？

let animals = {}

この{}に関してどのように説明を受けたか、どのように扱ってきたのか分かりませんが、これはオブジェクトと呼ばれるものです。

何でも詰め込めるため、

let animals = {
  fox: "キツネ",
  cat: "猫",
  dog: "犬"
}

のように連想配列として扱ってきた方は多いと思います。

しかし注意して欲しいのが、
前述した通り何でも詰め込めるので下記のように書くことも可能です。

let animals = {
  fox: "キツネ",
  cat: "猫",
  dog: "犬",
  bark: function() {
    console.log("ワン！！")
  }
}

そうです、関数も入れられます。
※ちなみにこの関数の呼び方はanimals.bark()です。

これがまず最初に初心者の方が？？？となるポイントだと思います。

今まで連想配列だと思って扱っていたものに、何で関数が？？

と悩むわけですね。
そして、ここをしっかり理解する前に難しいところに進んでしまう。

何度も言いますが、{}の正体は連想配列ではなくオブジェクトです。
ただし[] は配列です。処理は​入れられません。

let animals = ["狐","猫","犬"]  // これはok
let animals = ["狐","猫","犬",console.log("ニャン！！")]  // これはダメ

では次に、オブジェクトとは何でしょうか？
定義はわたしも詳しくは知りませんが、正体は知っています。

let animals = new Object()

こいつです。ここでもnewが出てきましたね。
これはObjectクラスから空のオブジェクトを作る時の記述です。

つまり、下記は同義ということです。

let animals = {} // 下の省略形
let animals = new Object()

もっと言うと、
文字列の初期化式などもnew String()が動いています。
意識はしていないと思いますが・・

let animal = "" // 下の省略系
let animal = new String()

…ちょっと話が難しく感じましたかね？

言いたかったこととしては、実は皆さん
知らず知らずのうちにクラスを使いこなしていた
と言うことです。

その知らずに使っていたものを今度は自ら作る

と言う話になり、
問題が表面化して分からなくなってきたと言う訳ですね。

…では自ら作るとはどう言うことでしょうか？

クラスを作ると言うことは、言い換えると
new Object() に変わるものを自分で作ると言うことです。

new Object() は何でも詰め込めるオブジェクトを作る際の記述ですよね。

でも何でも詰め込めると、逆に不安じゃないですか？

そのオブジェクトが何を持っているのか分からなくないですか？

そのオブジェクトが何を持つことが出来るか、設計図が欲しくないですか？

…はい、少し強引でしたね笑
つまりこう言うことです。

let fox = {
  kind: "fox",
  age: "1",
  name: "コン助"
}

これは、動物情報を格納したオブジェクトを変数foxに代入しています。

動物、しかもキツネの情報を扱っているのは中身を見れば分かるため、迷わず変数名をfoxにしました。

しかし、もしこの中身がどこか別のところで作られたもので、それが渡ってきた場合はどうでしょうか。

let data2 = data

このdataの出処が分からないと、おいそれとfoxには入れられませんよね。
怖いからdata2と言う変数を作って入れちゃってます笑

dataがどういった意図で作られたものなのか分かれば、その後の処理も書きやすそうです。

次の例です。

let fox = {
  kind: "fox",
  age: "1",
  name: "コン助"
}

fox.job = "エンジニア"

ここでは、foxの職業にエンジニアを入れてしまっていますね。
普通に考えたら有り得ない代入ですが、ただのオブジェクト（＝何でも詰め込める）なので、これが出来ちゃいます。

どういった情報を持ち得るのか、ということが分かればこういったミスも起きないですよね。

最後の例です。

let fox = {
  kind: "fox",
  age: "1",
  name: "コン助"
}
　
let cat = {
  kind: "cat",
  age: "2",
  name: "ニャオ美"
}
 
let dog = {
  kind: "dog",
  age: "10",
  name: "ワンダフル"
}

…はい、もう面倒くさいです。
同じようなことを3回書くのも嫌なのに、これが10匹もいたら大変ですよね。

途中で誤ってエイリアンが混ざるリスクもあるかもしれないです。

やっぱり似たような情報を扱うならば再利用したいですよね。

クラスを自分で定義することで、
これらの問題を全て解決出来てしまいます！

知りたくなりましたよね！

…とこのまま続きを書きたいところですが、記事が長くなってしまったので一旦ここで区切ります。

次の記事ではクラスの作り方から入ります。
ではでは！ここまでにおける質問、フォローなどお待ちしています！