年末まで毎日webサイトを作り続ける大学生 〜12日目 オブジェクト指向に触れる〜

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNを見て勉強していたんですが、とうとう中級編に突入しました。
そして出ましたオブジェクト指向！
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は12日目。(2019/10/30)
よろしくお願いします。

サイトURL

やったこと

テキスト入力欄に名前と趣味を書いたら、内部でオブジェクトを作って反応するようにしました。
作り方だけ学んで実装したので、もしかしたら、オブジェクトの使い方間違っている可能性がありますがご了承ください。

では動作から↓

内部はこうなっています↓

 <script>
        let createClick = document.getElementById('createHuman');
        createClick.addEventListener('click', createHuman);



        function Person(first, last, interest1, interest2) {
            this.name = {
                first: first,
                last: last
            };
            this.interest = {
                interest1: interest1,
                interest2: interest2
            };
        }


        function createHuman() {
            let lastName = document.forms.form1.lastName.value;
            let firstName = document.forms.form1.firstName.value;
            let interest1 = document.forms.form1.interest1.value;
            let interest2 = document.forms.form1.interest2.value;

            let test22 = new Person(firstName, lastName, interest1, interest2);
            let talk = '私の名前は' + test22.name.last + ' ' + test22.name.first + 'です。趣味は' + test22.interest.interest1 + 'と' + test22.interest.interest2 + 'です。';
            let human = document.getElementById('human');
            human.textContent = talk;
            let myNotification = new Notification('私の名前は' + test22.name.last + ' ' + test22.name.first + 'です。');
            myNotification;
        }

    </script>

function Personはコンストラクターです。これを使えば簡単にオブジェクトが生成されます。
ボタンを押したらcreateHumanが実行されます。
使い方間違ってる気しかしない。オブジェクトってこんなんじゃないよな・・・？コメントお待ちしています！

ちなみに

ちなみに、

let myNotification = new Notification('私の名前は' + test22.name.last + ' ' + test22.name.first + 'です。');
myNotification;

この2行でボタンが押されると通知を出すようにしています
組み込みAPIなんですが、newでインスタンスを生成しないと使えない珍しいタイプのものらしいです↓

感想

オブジェクト指向・・・。手ごわいだけにマスターすれば一気に効率が上がる予感がする。
目標のオセロアプリを作るためにもここは頑張らなければ。
そしてJavaScriptはまだまだ奥が深いのだろうか・・・？

最後までお読みいただきありがとうございます。
明日も投稿しますのでよろしくお願いします。

参考

1. JavaScript オブジェクトの基本 - Web 開発を学ぶ | MDN (https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics)

参考になりました！ありがとうございます！