Javascriptをきれいに書きたい

毎回ビクビクしながJavascriptを書いてる松井です。
去年も言ってた気がしますが、今年(こそ)はJavascriptの勉強を頑張りたいです。

今までコピペメインだったので、自分で一から書くとなると、
この書き方でいいの?ってシーンがちらほらあります。
そんなわけで、Javascriptのコーディングルールについて調べて書いてみます。

JavaScript style guide

JavaScript style guide

Mozilla/Firefox向けのものです。
いくつかピックアップしてみました。

ホワイトスペース

  • インデントはスペース2つ(タブNG)
  • 1行は80文字以下(折り返すときは前の行と合わせる)
  • 2項演算子はスペースで離す
  • コンマやセミコロンの後ろにスペースを入れる
  • キーワードの後ろにスペースを入れる 例 if (x > 0)
  • 定義のブロックの間には空行を1つ(もしくは2つ)
    大きなコードのブロックも空行で分割する
  • ファイルの最後には改行

命名規則

  • 名前や列挙値には interCaps(camelCase)
    定数は UPPER_CASE 大文字アンダースコア
  • プライベートメンバは _ から始める
  • イベントハンドラ関数は on という語から始める(具体的には onLoad、onDialogAccept、onDialogCancel )
  • ローカル変数はできるかぎりそれが使用されるところの近くで宣言する
  • すべての変数を初期化する

  • 変数の宣言の重複しないこと
  • 配列を作るときは混乱しやすい new Array(value1, value2) よりも [value1, value2] を使用
  • 真偽値を true や false と比較しない

Google JavaScript Style Guide

  • varは絶対つける
  • セミコロンを省かない
  • ファイル名は小文字(_ よりも – を使用)
  • 文字列の括りは” よりも ‘
  • データ型(string,number.boolean)のラッパオブジェクトは使用しない
  • 名前空間を利用してグローバルレベルの名前は最小限に抑える
  • ブロックを表す{・・・}の前は改行しない
  • eval関数はデシリアライズのみ使用
  • ビルトインオブジェクトのプロトタイプを書き換えてはいけない
  • with命令は利用しない
  • for…in命令は連想配列/ハッシュのみ利用

ホワイトスペースについて

普段あまり意識せず使っていたのですが、
下記のときにに空白を置くことが多いみたいです。
参考:Jacascriptパターン

  • 演算子とオペランドの間
  • ”{ ”の前
  • セミコロンやカンマ、カンマの後
  • 無名関数の後のfunctionの後
例
for (var i = 0; i < 10; i += 1) {...}
var a = [1, 2, 3];
var o = {a: 1, b: 2};
myFunc(a, b, c)
function myFunc() {}
bar myFunc = function() {};

JS内での命名規則について

基本キャメルケースで書いとけば問題ないだろと思ってた私ですが、
実は、状況によって色々命名規則があります。

  • 関数やメソッドは小文字キャメルケース
    例 myFunction()
  • 関数名は動詞+名詞の形式が一般的
    例 showMessage
  • 値を変更して欲しくない変数はすべて大文字
  • コンストラクタの頭文字は、普通の関数と区別するために大文字キャメルケース
    例 var mem = new Member();
  • オプション引数(省略できる引数)には最初にopt_ を付ける
    例 win = opt_win;
  • 可変長の引数(引数の個数があらかじめ決まっていない関数のとき使う)をとる場合,
    最後の引数を var_args とする。(参照するときはargumentsオブジェクト経由でアクセスする)
    例 goog.bind = function(fn, thisObj, var_args) {
    ...
    };
  • プライベートメンバ(クラスの内部からのみ呼び出せるプロパティやメソッド)には頭に _ を付ける

きれいなソースを書くために

上記に書いたルールが絶対というわけではないですが、
読みやすくて、一貫性があるソースを書くことは大事なことだと思うので
今後気をつけていこうと思いました。

JavaScriptのソースコードをチェックでは、JSLint が有名ですが、
普段使ってるツールでもチェックできるものを設定をしておくと良さげかと思います。

普段はSublime Textを使ってますが、
JSを書くのであればWebStormのほうが機能は充実してるっぽいですね。

あとは、JSの良書やイケテルコードを読むことで、
なるべくきれいなコードを書けるよう努めていきたいです。