読者です 読者をやめる 読者になる 読者になる

kkana's blog

新米コーダーの忘れそうなことメモ

ES6のクラス構文を使ってみる

ECMAscript6

ES6のクラス構文を使ってみたのでまとめてみます。

対応状況

はここで確認

ECMAScript 6 compatibility table

クラスの定義

class Particle {
    //初期化
    constructor() {
            this.fillColor = 'rgba(54,59,123,0.8)';
            ・・・
        }
    //メソッド
    appllyForce(forceVector) {
        ・・・
    }
}

newなしで普通の関数の呼び出しのように呼ぶとエラーが出るみたい。

constructorはnew演算子で初期化するときに実行される。 その下に関数のブロックを書いていく。

var Particle = class {
  constructor() {
    this.fillColor = 'rgba(54,59,123,0.8)';
  }
};

このような式の書き方でも定義できる。

継承のしかた

継承するときは以下のように書く。 コンストラクタ内、メソッド内でsuperを使うと親のメソッドやプロパティを呼び出すことができる。 ビルドインオブジェクトも拡張できるそう。

//粒子クラスを継承したオレンジの丸い粒のクラス
class circleYellowParticle extends Particle {
    constructor() {
            //継承元のコンストラクタをsuper()で呼び出す
            super();
            this.fillColor = 'rgba(249,215,2,0.8)';
            ...
        }
        //力の足し算
    appllyForce(forceVector) {
        //継承元のメソッドもsuper()で呼び出す
            super.appllyForce(forceVector);
        }
}

ES5のjsしか触ったことが無かったので、ずいぶんすっきり書けることにびっくり・・・!
書いたものはこんな感じ↓

See the Pen particle by kana (@kanaparty) on CodePen.


余談

ES6のクラスの書き方を調べていたら
  • staticメソッド
  • ゲッター
  • セッター
    という言葉が出てきたのですがよくわからなかったので勉強します。。。
参考

すごくまとまっています。
私の場合はまずES5から!
どうやってECMAScript 6を学び始めるか

cavas要素は大きさをwidth height属性で指定する。

style属性で指定すると引き伸ばされたように見える。

var canvas = document.getElementById('canvas');
//これは引き伸ばされる
canvas.style.width = windowWidth + 'px';
//こっちが引き伸ばされない
canvas.setAttribute('width', windowWidth);