みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

最近JavaScriptを書くときに心がけていること

そろそろ、飛び込み営業からフロントエンジニアに転職してから5年が経ちます。

つい最近、2年前ぐらいに書いたコードを読み返し、そのごちゃごちゃしていてびっくりしました。
0からのスタートだったので、毎年毎年コードの書き方が微妙に変化していることも原因の1つだと思ったので、2年後の自分に向けて最近の心情をここに記しておこうと思います。



インデント

昔はスペース4つ派だったのですが、いまはスペース2つ派になりました。
HTML / CSS / JS すべてスペース2つです。

Google HTML/CSS Style Guide でスペース2つが推奨されていたこととが変化のきっかけですね。



for文

昔は var宣言 を1つにまとめないと気がすまなくて、for文の中でつかう i や length も関数の先頭で宣言していました。

function loop(arr) {
  var i = 0,
      length = arr.length;

  for (; i < length; i++) {
    console.log(i);
  }
}

が、宣言と実行が離れすぎてわからなくなる時があったので、

function loop(arr) {
  for (var i = 0, length = arr.length; i < length; ++i) {
    console.log(i);
  }
}

という感じに変えてみました。
地味に ++ の位置も変わっています。



引数のない new

昔は括弧を省略して、

var instance = new Klass;

と書いていましたが、
lintをかけたときに毎回Warningが吐かれるのが嫌になって略さなくなりました。

var instance = new Klass();



継承

昔は、

function SubKlass() {
  SuperKlass.apply(this, arguments);
}

SubKlass.prototype = new SuperKlass();
SubKlass.prototype.constructor = SubKlass;

と prototype で親クラスを new してましたが、Object.createをつかうようになりました。
Object.createが無いときはObject.createをつくってます。

function SubKlass() {
  SuperKlass.apply(this, arguments);
}

SubKlass.prototype = Object.create(SuperKlass.prototype);
SubKlass.prototype.constructor = SubKlass;

kimizuka.hatenablog.com



クラス内でのインスタンスの参照

self → that → _this ときて that に戻りました。

function Klass() {
  var that = this;

  SuperKlass.apply(that, arguments);
}

_thisになったときはCoffeeScriptのコンパイル結果に合わせようと思ってたんですが、いつのまにかthatに戻ってました。



インスタンスメソッド

昔は、

function Klass() {

}

Klass.prototype.hoge = function() {

}

Klass.prototype.fuga = function() {

}

Klass.prototype.piyo = function() {

}

と無形関数でつくっていたのですが、最近では、

function Klass() {

}

Klass.prototype.hoge = hoge;
Klass.prototype.fuga = fuga;
Klass.prototype.piyo = piyo;

function hoge() {

}

function fuga() {

}

function piyo() {

}

という感じでインターフェイスと実装を分けるようにしています。



シングルトンパターン

めっきり使わなくなりました。シングルトンクラスが必要になった時は一度設計を考えなおすようになりました。



イベントハンドラ

昔はこんな感じで書いていたのですが、

function Klass(elm) {
  elm.addEventListener("click", this._handleClickElm.bind(this), false);
}

Klass.prototype._handleClickElm() {
    alert(this.getAttribute("data-name"));
}

いまは、コールバック関数を呼び出すだけのイベントハンドラを用意するようにしています。

function Klass(elm) {
  var that = this;

  elm.addEventListener("click", _handleClickElm, false);

  function _handleClickElm() {
    that._sayDataName();
  }
}

Klass.prototype._sayDataName() {
    alert(this.getAttribute("data-name"));
}


以上です。2年後の自分がこの記事を読んだときどう思うのかが楽しみです。