JavaScriptおれおれAdvent Calendar 2014 – 06日目

メソッドに限らず関数オブジェクトをプロパティに設定する場合のプロパティ名についてです。こんな感じで命名してます。

メソッド

controller.start();
dialog.open();
informationView.showDetails();

関数オブジェクトを格納したプロパティって言うと、まあ普通はこれですね。

関数やメソッドは実行可能するものであるから、動詞にするのが自然だと思います。実際そうしてる人が多いと思う。

開始と終了、切り替え

openDialog()があればcloseDialog()も実装するし、必要ならtoggleDialog()も用意します。

ここで言いたいのは例えば”xxxDialog”という命名での統一が大切だという事です。関連するものなので、パッと見で「あ、これシリーズなんだな」てな事がわかるような命名だと良いかと思います。

値取得

var name = playlist.getCurrentSongName();

値を得るものは”get…”という命名に。

入出力

$input.val(123);
var val = $input.val();  // 123

値を入出力する場合は、例外で、動詞ではなく名詞だけでも良いかなと思ってる。

一言で言えばjQuery風の命名です。例えばgetVal()とsetVal()を用意するのではなく、val()だけ用意して引数の数で処理を切り替えるという実装。

Object.defineProperty()あたりで普通のプロパティ風のI/Fを用意するのも悪くないと思う。やった事ないけど。（これIE 9+なのか、もっと最近のものかと思っていた。）

もちろん、それが自然な場合ね。

確認系

// ログイン済みならメニュー表示
if (user.isLoggedIn()) {
    showMenu();
}

何と言うのかな、戻り値が真偽の場合。

isReady()とかhasClass()とかそういうの。疑問形にする、という表現で伝わるかな。

イベントリスナー

$('.js-the-great-form').on('submit', formView.onsubmit.bind(this));
$('button.js-play').on('click', player.onclickPlay.bind(this));

onclick()やonsubmit()のように”on”+イベント名に。イベント名は小文字で統一してます。正直長いときつらい。

同じイベント名が複数種ある場合は、動詞の目的語的に単語を連結して明確にする。ただし”button”等の単語は省略して、例えばonclickPlayButton()ではなくonclickPlay()で。

加えて、上記の例でも示した通り.bind(this)で運用してます。Backbone.JSなら.listenTo()を愛用。

他にも無名関数を使って実装するパターンもあるんだけど、「イベント時の処理」と「イベント時の処理の登録処理」は別かなーと思って、リスナー用に関数を用意する方が好み。ただし小さいコードを除く。

var that = this;
$play.on('click', function(event) {
    that.player.play();
});

あとはUnderscoreの_.bind()で事前にbindしておくとか。これはプロパティの参照先が変わって元の（bindされていない）関数オブジェクトへアクセスできなくなってしまうのであんまり好きじゃない……。（あ、それとも知らないだけでできるの？）

関数オブジェクト

makeUp: function(target) {
    target.doSomething = this.f_doSomething;
}

単純に関数オブジェクトが代入されているだけの場合、通常の命名に加えて接頭辞”f_”を付け区別してます。

メソッドとして利用する前提ではないという事ね。実行コンテキストが該当オブジェクト以外になり得る想定。obj.f_doSomething()みたいなコードを見かけたら「あ、間違った使い方だ」と判じてよろしい。

関数リテラルで、その場で生成して利用する事の方が多いと思う。特にコールバック。あんまり利用場面はないと思うんだけど、何かのコールバックに渡すとか、ライブラリーなら他のオブジェクトのメソッドとして利用される前提とか。ちょっと処理が長いなとか、明確に分割しておきたいとか、あとはパフォーマンスの問題で百万回も関数オブジェクトを生成してる暇がないときとか。

前項のイベントハンドラーも本当はこれに該当するけど、頻出なので特別扱いです。

ちなみに”f”ではなく”f_”なのは、本来の関数名部分がわかりやすいよう、小文字で始めるためです。大文字小文字違うと雰囲気変わるもんね。

コンストラクター

var sushi = new com.ginpen.Sushi();

newを伴って利用されるものは大文字始まりの名詞で始めます。普通だね。

名前空間的にプロパティに配置している場面。

特筆する事はないかなー。

そんな感じ

です。

まあとりあえず動詞になってればだいたい文句ないです、はい。