JavascriptのObject,Class,Constructorを27分57秒で完璧に理解する記

JavascriptはObjectで出来ている

JavaScriptをやればやるほど、JavaScriptの全てがオブジェクトで出来ている事を思い知らされる。
データを保存したり、キープする際にはオブジェクトを使うし、APIやデータベースとやりとりする際につかうJSONフォーマットもオブジェクトだし、各種ライブラリもオブジェクトとして配布されているし、DOMのノードもオブジェクトとして、DOCUMENTオブジェクトに入ってるし、JavaScriptのビルトイン関数やプロパティも全てオブジェクトとして保存されてるし、プロミスもオブジェクトで返ってくる。
JavaScriptを理解したければ、オブジェクトを理解するのは必須で、オブジェクトを意識してJavaScriptを書けば、理解のスピードも桁違いだ。

で、自分も理解しているつもりだったんだけど、この動画をみてさらに理解が深まったというか、目からウロコが落ちて見通しがさらにくっきりした様な気分になったので、是非JavaScriptを勉強中の諸君にもシェアしたいと思い、これを書いているのです。

動画のスンダー・ピチャイ似のオッサンはP5.jsというJavaScriptライブラリを使っているので見慣れない関数なんかが出てくるけど、本質は同じなので、あんまり気にせずに、コアの部分を理解してもらえれば良いと思うで。
動画では、例として、泡のアニメーションを作ってらっしゃる。

オブジェクトとクラスを理解する

今更だけど、オブジェクトってこれのことね。属性や動き（関数）をひとまとめに保持しておける。

const inokiObject = {
   name : 'Antonio Inoki',
   age : 18,
   occupancy : 'wrestler',
   country : 'japan',
   waza : 'cobra twist',
  
   bombaye(){ 
       return this.name + " Bombaye!!!, 1, 2, 3, Daaaaaaaaa!!!!!" ; 
   } 
}

例えば、無数の泡が動き回る様なアニメーションを作りたい場合、その泡オブジェクト一個一個の属性を設定し、関数を設定していたら、大変なことになる。
泡の原型を一個作って、それをコピー出来たら良いよね。
で、そうゆう時に便利なのが、クラスとコンストラクタで、それを使って、泡クラスを作るのだ。

クラス（オブジェクト指向）の基本は”カプセル化”。 あるモノの情報をひとまとめのパッケージにして、カプセルの中に入れておける。
で、まず”泡とは何なのか”？という事を定義しないといけない。哲学的だね。
大きさは？ポジションは？色は？赤ちゃんバブルはどうやって生まれるのか？どんな風に動くのか？
で、それをクラスの中に定義する。

class Bubble {
 
泡とはこういうものやで
 
}

で、それを元にこうやってインスタンスを作る。簡単だよね。

const bubble1 = new Bubble();

重要なのは、クラスはいわば設計図。情報が書かれているだけで、実体はない。
そこから作られたインスタンスになって、初めて実態になる。
例えれば、クラスはクッキーカッターで、その型で抜かれて初めてクッキーっていう実態になる。

インスタンスを生成する時には、newキーワードをつける。そうすると、後に続くクラスの中の関数が起動する。どの関数か？constructor関数である。 で、Bubbleちゃんが形を伴って召喚されるわけだ。

では、実際にどういう風に書いていくかを説明するよ。

class Bubble{
   constructor(){
       this.x = 100;
       this.y = 100;
       this.size = 2;
   }
}

constructor()関数は、属性をセットアップする特殊な関数で、前述の様に、newキーワードによって、起動する。
thisは、このオブジェクト内(インスタンス)のという意味。
これで、泡のポジションと大きさという属性がセット出来たね。

で、次は泡がどう動くのかという動きの部分を定義しよう。

class Bubble{
   constructor(){
       this.x = 100;
       this.y = 100;
       this.size = 2;
   }
 
   move(){
       this.x = this.x + random(-5, 5);
       this.y = this.y + random(-5, 5);
   }
 
   show(){
       stroke(255);
       strokeWeight(4);
       noFill();
       ellipse(this.x, this.y, 24, 24);
   }
}

泡がどの様に動くかと、どの様に現れるのかを定義。いたって普通の関数。
これで、泡がどうゆう形態のもので、どうゆう動きをするかという設計図が出来た。

で、その設計図から、newキーワードで幾らでも泡（インスタンス）を生成し、動かすことが出来る。

const bubble1 = new Bubble();
const bubble2 = new Bubble();
 
function draw(){
   background(0);
   bubble1.move();
   bubble1.show();
   bubble2.move();
   bubble2.show();
}
 
draw();

引数の設定

ここからは、少し応用というか、コンストラクタに引数を使って、もっとランダムな泡がランダムに動く様にしてみよう。

class Bubble{
   constructor(x, y, r){
       this.x = x;
       this.y = y;
       this.r = r;
   }

   move(){
       this.x = this.x + random(-5, 5);
       this.y = this.y + random(-5, 5);
   }
 
   show(){
       stroke(255);
       strokeWeight(4);
       noFill();
       ellipse(this.x, this.y, this.r * 2);
   }
}

const bubble1 = new Bubble(200, 200, 40);
const bubble2 = new Bubble(400, 200, 20);

function draw(){
   background(0);
   bubble1.move();
   bubble1.show();
   bubble2.move();
   bubble2.show();
}
 
draw();

これで、２つの違う大きさを持った泡が生成され、ランダムに動くアニメーションが出来た。

オリジナルの動画はこちら↓儂の書いた拙文を読んだ上で見ると、分かりやすいと思うぞ。