ES6 Classを使う

Javascriptの歴史もいろいろ変遷していて面倒なんですが、PrototypeよりES6でClass書いた方がシンプルでいい感じです。
こんな感じの構成にします。main.jsで実行してlib以下にclassファイルをおいてゆく感じがシンプルでいいと思います。

assets/js
├── main.js
└── lib
    └── sample.js

基本

import export

classをエクスポートしてmain.jsでインポートするといいです。
インポート側ではこんな感じ。

// assets/js/main.js
import Sample from './lib/sample';

const sample = new Sample({
    name: 'foo',
    item: 'bar'
});

sample.alertEvent();

エクスポート側。

// assets/js/lib/sample.js
export default class Sample {
    constructor (opts = {}) {
        this.name = opts.name;
        this.item = opts.item;
        console.log(this.name);
        console.log(this.item);
    }
    alertEvent() {
        alert("hello");
    }
};

大雑把な構造はこんなふうにしておくと後々楽です。実行結果は「hello」とアラートが出るわけですが、ちょっと違和感のあるところが、
– importはファイルパスを指定するものの拡張子なし、その上なんか代入っぽい感じでなんかやってます。あんまりよくわかってないけど、prototypeよりわかりやすいかと。

jQuery

なんだかんだでjQuery使わないと私は書けないので、入れておきます。’jquery’で読み込めるんだかよくわかりません。
インポート側。

// assets/js/main.js
import Sample from './lib/sample';
import $ from 'jquery';

const sample = new Sample({
    name: 'foo',
    item: 'bar'
});

//sample.alertEvent();
sample.test();

エクスポート側。

// assets/js/lib/sample.js
export default class Sample {
    constructor (opts = {}) {
        this.name = opts.name;
        this.item = opts.item;
        console.log(this.name);
        console.log(this.item);
    }
    alertEvent() {
        alert("hello");
    }
    test() {
        $(function(){
            $('body').on('click',function(){
                var rand = Math.floor( Math.random() * (999 + 1 - 100) ) + 100 ;
                console.log("click! " + rand);
            });
        });
    }
};

こんな感じでjQueryが使えます。簡単なクリックイベントのみですが。

Last update: 2018.01.30 (火)