Webエンジニア目指して#18 - misokatsu

どうも激眠マンです

ブログ見返したら#15抜けてますね。下書きのまま眠ってました

--------------

1時間ほど苦戦したSassの導入ですが、無事成功しました。
ただMacの権限が厳しいだけでした。灯台下暗し？
ルートユーザーとしてログインしとかないとこういう環境構築はできないんで
ね...Windowsと違ってAdminでも内部をいじる権限はありませんでした。

--------------

JSの学習メモ残す際に、試してもないもの載せるのはどうなんだと思ったんで、今後は書いたものを実際に実行していくようにします。

ではProgateのJavaScript IVの続きです。

メソッド

任意の文字列を使ってクラスの中で使います。
ぶっちゃけやってることはクラスの中に関数作ってるだけです
constructorはインスタンス生成時に実行されプロパティの値を決めたりしますが、メソッドは生成時に実行されないため、呼び出して使います。クラスごとの動作・処理に使うみたいです。

下記のクラスの中の赤文字がメソッドに当たります。
その外は呼び出しです。普通に関数ですね

例では使ってませんが戻り値も使えます。

class Sample{
  constructor(name){
    this.name=name;
    console.log(`${this.name}が生成されました`)
  }
  greet(){
     console.log(`どうも、${this.name}です`);
  }
}
const sample= new Sample("tikuwa");
sample.greet();
const sample2=new Sample("karaage");
sample2.greet();


実行結果
----------
tikuwaが生成されました
どうも、tikuwaです
karaageが生成されました
どうも、karaageです
----------

調べ物してて良く見るコードの見た目覚えたんで使ってみました。

また、下記のようにメソッドで別のメソッドを呼び出すこともできます。


class sample{
  greet(){処理};
  info(){
    this.greet();
  }

クラスの継承


    class Mihon extends Sample{
      greet(){
        console.log(`やあ、${this.name}だよ`);
    }

これでクラス作成時に既にあるクラスから中身を継承できます。

継承元を親クラス、継承先を子クラスといいます。子クラスで定義したメソッドなどは親クラスでは使えません。

上の例では既にSampleにあるメソッドを定義していますが、継承したクラスで同じメソッドを定義すると上書きされ、子クラスでそのメソッドを呼び出したときは上書きされた子クラスのメソッドを実行します。

また、下のように、constructorも変更する場合はsuper(親クラスの引数);を記述する必要があります。

試しに親クラスの引数もsuperも書かずに実行しましたが、super書けやハゲって怒られました。


class Rei extends Sample{
  constructor(name,price){
    super(name);
    this.price=price;
    console.log(`値段は${this.price}円です`);
  }
}

親の引数とsuperさえ書いておけばあとは追記するだけです。ちゃんと親のconstructorも実行されます。

これでJavaScript　IVは終わりです。ではでは

2019/12/20追記:せっかくインプットした内容を試したのに載せてませんでした。


class Sample{
 constructor(name){
   this.name=name;
   console.log(`${this.name}が生成されました`)
 }
  greet(){
    console.log(`どうも、${this.name}です`);
  }
  func1(){
    this.greet();
  }
}
const sample= new Sample("tikuwa");
sample.greet();
const sample2=new Sample("karaage");
sample2.func1();

class Rei extends Sample{
  constructor(name,price){
    super(name);
    this.price=price;
    console.log(`値段は${this.price}円です`);
  }
  
}
const rei=new Rei("wasabi",999);
    
    
実行結果
----------
tikuwaが生成されました
どうも、tikuwaです
karaageが生成されました
どうも、karaageです
wasabiが生成されました
値段は999円です
----------