# 中本 どうも辛いラーメン中本大好きなエンジニア前田です。 このチャンネルはそんな私が感じたこと、考えたこと、学んだことをアウトプットしていくチャンネルです。 さて今日は中本とプロトタイプベースというテーマでお話をしていきます。 では早速雑談ですね。 雑談が先かいという感じですが、中本ですね。 最初に話した辛いラーメン中本、こちらがですね東京と埼玉と神奈川ですかね 関東圏にだけある辛いラーメンで有名なお店になりますが、僕はここのラーメンがめちゃめちゃ大好きだっていう話をね ちょっと冒頭していきたいとおもいます。 僕ね辛さとね野菜がね 野菜の旨味っていうんですかね、あんまりより詳しくないので できそうなこと言ってるかもしれないですが、この組み合わせがね個人的にマジで最高だなと思っています。 いつも野菜大盛りで冷やし味噌野菜っていうねラーメンを僕は頼むんですが、もうこの組み合わせが最高だなと思っています。 で、僕はこのラーメンのねほぼ中毒みたいな感じだと思うんですが、先週金曜日にこのね中毒がねわかるような経験があったんで、それをちょっと雑談で話しておこうと思います。 先週の金曜日は普通に会社に出社しまして、18時くらいに家に帰っていくっていう感じで予定をしていました。 で実際18時に会社出て電車乗ったんですが、おかちまち駅ですね。おかちまち駅という駅をね途中通過するんですけども、ここの駅のアナウンスですね。 おかちまち駅、おかちまち駅みたいなアナウンスがあると思うんですけれども、そのアナウンスがねすごく耳に入ってきまして、はって耳に入ってきて、 あもう中本って頭の中でなって、でもう電車を勝手にね、体がね動いてましたね。勝手に降りてました。いやもうねすごいですねアスリートみたいな経験をしましたね。 まあもう降りてしまったからにはね、そのまま中本をね食べて満足して帰っていったっていう話ですね。 もうこれがやっぱ中毒さをね表すのにね、なんかすごく実感しましたね。そのおかちまち駅にたどり着くまでにいくつか駅をね通過しているはずなんですよね。 会社の最寄りの会社の最寄り駅から乗っていくつか駅を通過しておかちまち駅なんですが、その通過した駅のアナウンスはね全く聞こえなかったんですよね。 別に何も余儀ることなく、ただおかちまち駅っていうのが聞いた瞬間にもうビビッときて降りてましたね。 まあ金曜日ということもあってね、疲れがあって辛さを欲してたのかなと思います。中本の雑談でした。 # プロトタイプベース では、ここから本題です。 少し私にとってはチャレンジングな説明にアウトプットになっています。 プロトタイプベースのオブジェクト思考という話をしていきます。 まず最初に、なんでこれを話そうと思ったのか、そのいきさつからお話をします。 単純にこの辺の知識足りてないなという話ではあるんですが、 今、個人開発でウェブアプリケーションを作るときに、基本的にリアクトを使ってフロントエンドは作成しています。 シンプルなアプリケーションであれば、リアクトを使って作ることができるんですけれども、 JavaScriptの本当に深い部分というのまで理解できているかというと、正直怪しいなと思いながら作っていました。 なんでこの基礎の部分を勉強していこうと思ったためです。 今はリアクトという書籍ですね。 ひらがなでリア、カタカナでクト、びっくりマークがあるのでリアクトって読むのかな。 多分読み方あっているんですが、このリアクトという本で勉強をしています。 これは結構深い部分まで教えてくれる書籍だなと思っています。 なんでこの本を選んではいますと。 この本を読んでいく中で、全然知らないことがあったので、そのうち2つを紹介していこうと思っています。 まだ読み途中ではあります。 その1つ目が、JavaScriptは本来プロトタイプベースという仕組みで動いているという話です。 そもそもプロトタイプベースという言葉もあんまり分かってはいなかった。 この本を読んで、そうなってんのってなったんですが。 なのでプロトタイプベースの説明をここからしていきます。 そもそもオブジェクト思考には2種類ありまして、そのうちの1つがプロトタイプベース。 そのうちもう1個がクラスベースっていうことになっているらしいですね。 クラスベースっていうことの方が僕は馴染みがあるので先に紹介するんですけど、 こっちがRubyとかJavaですね。クラスベースの言語になっているわけです。 クラス、つまり抽象概念から設計図っていうところからインスタンス、実体を作っていくよっていうのがクラスベースですね。 プロトタイプベースが何かっていうと、JavaScriptがこれを採用していると。 オブジェクトからオブジェクトを作るっていうのがプロトタイプベースの世界ですね。 クラスベースでいうその抽象概念、クラス設計図みたいなものがなくて、オブジェクトからオブジェクトが生まれるという仕組みですと。 初めて知りました。プロトタイプっていう言葉の意味が親の要素、親のオブジェクトっていう意味らしいですね。 これがそもそも初めて知ったというところでびっくりしていますと。 なんで今までこのプロトタイプベースを僕は知らずに、ただJSをなんとなくかけてきていたのかっていうところも紹介したいと思います。 これがクラス構文っていうものが導入されているかららしいですね。 JavaScriptの中に。 このクラス構文っていうものが何かっていうと、等位構文、もしくはシンタックスシュガーとかっていうふうに言われています。 等位構文の漢字なんですけども、等類の等ですね。 甘いもの等の衣等位構文っていうふうな漢字になっています。 この言葉ですが、おそらく等以上っていうものがあるので、そこから来ているんだと思っています。 薬ですね、等以上。 薬を飲むときに苦い、薬飲むときって苦いじゃないですか。 それを苦い部分を甘い衣で覆って飲み込めば苦さ感じないよねっていうのが等以上だと思うんですが、 同じことをやっているんだと思っています。 プロトタイプベースが苦いものと認識しているんですかね、ここでは。 苦いものとしてそれをクラスベースっていうもので覆って、 つまりプロトタイプベースっていうものを感じずに私たちが飲み込める、扱えるようにしているのがクラス構文です。 だからクラスベースっぽく書かせてくれているものになっているということも初めて知りました。 これが一つ目の驚きだったというポイントです。 ちょっと詳しい話はね、まだ理解が怪しい部分あるのでちょっとできないですが、概念的な話です。 あと一つ、ここからは若干具体が入ってくるんですが、 プリミティブ値からメソッドを生やすっていう話をしていきたいと思っています。 JavaScriptでは、具体の話をするんですけども、数値の100ですね。 100、JavaScriptだとナンバー型だと思うんですけど、 100、これを文字列に変換するってなったときに、.toStringとかって書くと思うんですけれども、 これ、この100っていうもの自体がtoStringっていうメソッドを持っていないっていうことが初めて知りました。 先にクラスベースの話をしておこうと思います。僕は馴染みがあるので。 例えばRubyの話ですと、数値はインテジャー型ですかね。 ちょっとナンバー型とちょっと違うのであれかもしれないですが、 Rubyで数字の100ってやると、インテジャー型クラスからそこから実体、印刷を作ったというような感じだと思います。 それに対して.toUnderbarSってメソッドが生やせると思います。 100.toSって生やせると思うんですけども、これが生やせる理由っていうのが、 インテジャークラスの中にこのtoUnderbarSメソッドが定義されているから、 そのクラスから実体化したもの、あのインスタンスもtoSメソッドが使えるよねっていうような話だと思います。 JavaScriptはこうはなっていないというところらしいですね。 プリミティブ値100自体は、こいつ自体はメソッドを持っておらず、 じゃあどうやってそのtoStringっていうのをやっているかというと、 その100.toStringっていうのが実行されるときに、そのナンバー100、ナンバーオブジェクトっていうのを一瞬作るらしいんですね。 そうすると、ナンバーオブジェクトっていうのは、それをラップしているラッパーオブジェクトっていうものがあって、 そのラッパーオブジェクトがtoStringメソッドを持っているから使えるっていうような仕組みになっているらしいです。 これを初めて知りましたし、なんか理解するのにだいぶ時間がかかりました。 さらにここで、この仕組み自体を理解するのに欠かせないのが、プロトタイプチェーンと呼ばれる仕組みです。 何かっていうと、このJavaScriptのオブジェクトがメソッドとかプロパティを実行するってなったときに探すらしいんですね。 まず、ジブジーシンを見ますと、今の例でいくと、ナンバーオブジェクトですね。 ナンバーオブジェクト100がtoStringメソッドを探しに行きます。 ナンバーオブジェクト自体にtoStringメソッドはないらしいです。 ないので、じゃなかったら次どうするかっていうと、プロトタイプを見ていく。 つまり、親の要素を見に行くらしいですね。 今の場合でいくと、ナンバーオブジェクトをラッパーしているなんかのオブジェクトがあるらしいんですね。 そのラッパーオブジェクトがそこでtoStringメソッドを持っているから、 さっきの100.toStringっていうのが実行できるっていうような形らしいですね。 これがプロトタイプチェーンですね。 もう一回言いますが、まず自分自身を見て、メソッドがあれば実行します。 ただ、なければその親であるプロトタイプですね。 プロトタイプを見て、そこにメソッドがあるかないかを探す。あれば実行する。 なければさらにその親、さらにその親っていうふうにどんどん上に上っていく仕組みのことをプロトタイプチェーンというらしいです。 だいぶ私は勉強になりました。 ちょっと具体的な話までは説明ができない部分もあるんですが、私としてはここが限界でしょう。 今日はありがとうございました。 また間違っていることとか、ここもっとこうだよってことあればコメントとかいただけるとすごく嬉しいです。 今日は以上です。ありがとうございます。