tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【javascript】クラスという機能があるんだ

今日は椎名林檎の「旬」が脳内ループしてて、頭の中が忙しい一日でした。

テトリスのコードとにらめっこ。どこかにclassを使って掛ける部分があるのではないか。 そう思ったけど、どこに使えるか分からず。とりあえず、es6で新しく使えるようになったらしいclassのおさらいをしましょう。

class とは

オブジェクト志向の考え方で、いわゆる物を作るための設計書の事になります。 ある日神様がヒトを設計しました。コードに書くとこうなります。

class human { } // human クラスの定義

インスタンスとは

神様が設計書を使ってヒトを生み出します。一般にクラスによって生み出される物がインスタンスと呼ばれています。

const human1 = new Human ();  //インスタンス human1 の作成
const human2 = new Human ();

国民総背番号制ですね、すごい世の中になりそうです。

コンストラクタ とは

それぞれ名前や性格が違います。 それぞれの特徴を記述するためのインターフェイスになるのがコンストラクタです。

class human {
  constructor(  ){
    // これで特徴を指定できます!!
  }
}

では.... 名前、性格、年齢 を特徴としましょう。 となるとコンストラクタ内に設定を書いていく必要があります。

class human {
  constructor(name, personality, age  ){
    this.name = name
    this.personality = personality
    this.age = age
  }
}
  const human1 = new Human ('椎名林檎', '艶やか','不詳');  //インスタンス human1 に特徴を記述
  const human2 = new Human ('わたし', 'げんき', '24'); 

thisの隣が特徴で、constructorの隣は引数、つまりインスタンスを作る際に特徴を引数に入れて、引数を代入することで情報を格納できます。

メソッド

それぞれ格納した情報の処理を実行する関数を作ることができます。その関数がメソッドと呼ばれます。

class human {
  constructor(name, personality, age  ){
    this.name = name
    this.personality = personality
    this.age = age
  }
    introduce(  ){     
      console.log(`${this.name}です。${this.age}歳です。`);
   }
}
   const human1 = new Human ('わたし', 'げんき', '24'); 
   human1.introduce();  // メソッドの実行

どうぶつの森的なゲームができそうですね笑
んーテトリスにどう応用すべきか未だ分からず笑

おしまい