JavaScriptのコーディング規約

Question

みなさんはJavaScriptを記述するときに
チームや個人でコーディング規約などは設けていますでしょうか？

おすすめのコーディング規約があれば、下記のように単発でも結構ですのでご教示願いたいです。

例）
・変数宣言のときにvar x=10, y=5; などカンマを利用して連続しての記述はしない
・文字列の変数に数値を足さない

できれば効能を書いていただけると非常に助かります。
宜しくお願いいたします。

Answer 1

Google JavaScript Style Guide 和訳
が、「何故そういうルールなのか」という理由まで書いてあって参考になるかと思います。

Comments

[tony]

これはかなり実用的ですね！
チームで組むときもそのまま適用しちゃっていいレベルです。
解説もしっかりしていて勉強になる。
日本語訳してくださった方に感謝。

Answer 2

職場でエディタはSublime Text2って一応決められてるんで、JsHintのパッケージ入れてますよ（JsLintは厳しすぎるのでJsHintくらいがちょうどよい感じ）。

行番号の横に赤い丸で警告が表示されます。行番号クリックすると、ステータスバーに英語で説明がでます。
大体ほとんどが以下の様なエラーが多いですね。

• ネーミングはスネークケースじゃなくてキャメルケース
• カンマのあとはスペース空ける
• ダブルクオートは使わずシングルクオート

などなど。
あとは1行の文字数が多すぎだよ、とか。

実際にやってみるとわかりますが、
他人のコードを見た時に読みやすいとは思いますね。

個人的にあまり神経質になることはないと思いますが、スペースを空けるのはかなり有効かと。

Comments

[tony]

JsHint知らなかったので少し調べてみましたが結構便利そうです。
SublimeTextにインストールしてコーディングすれば鬼に金棒ですね。
あと、やっぱり「ダブルクオートは使わずシングルクオート」なんですねー。Google JavaScript Style Guide にも書いてありました。

Answer 3

よほどの事情がない限り、（jQueryであれば）ready関数の冒頭に、'use strict';を書いています。

高速化の恩恵はよくわかりませんが、変数宣言の抜けがあった場合でも勝手にグローバルを生成せず、ReferenceErrorで落ちてくれるのはデバッグに便利です。

Comments

[tony]

いわゆる厳格モードですね。
たしかVBAにも似たものがありましたね。
JavaScriptにも存在するとは正直知りませんでした。
すみません、まだ数日前から勉強はじめた素人なもので。。

Answer 4

AirbnbのJavaScript Style Guide
日本語訳

そのように書くべき理由やパフォーマンスの影響まで書かれているところが良いです。

Answer 5

私は個人でコードを書くことが多いのでコーディング規約と言っていいのかわかりませんが参考になれば。

・ローカルを分かりやすく。
ローカル変数などには_(アンダースコア)を付けます。このことにより影響範囲を把握しやすくなります。また予約語と名前が被ることを防ぐ効果がわずかながらあります。

・早期return
引数などに不正な値を受け取った場合、関数の先頭でそれを判定して場合に応じてreturnする

function Addition(_a,_b){
  if(isNaN(_a-0)||isNaN(_b-0)){
    return;
  }
  return _a-0+_b-0;
}

console.log(Addition(5,15));//20

この場合、文字列、undefinedなら処理を停止。空、nullなどは0に丸めています。
問題がない限り、早期returnの形になるようにしています。また必要に応じて判定部分を関数に切り分けることもあります。
これは処理部をifで囲うような形を回避できる、処理の流れを掴みやすいと考えています。

・アッパーキャメルケース(パスカルケース)
これはこだわりと言いますか良いのかどうかはなんとも言えませんが……。

function OutputConsole(_String){
    console.log(_String);
}

一応効果としてあるのが自分で定義した物であるのが分かりやすい(JavaScriptのメソッドなどはローワーキャメルケース)ことと組み込みのメソッドなどと名前が被らないことですかね。
デメリットはコンストラクタの場合、分かりにくいと感じる人がいる可能性があるということですかね。

・即時関数
グローバルである必要のないものは即時関数内で処理します。

//継承してDOMにイベントセットするような処理
(function (){
    var _Slide=new Slide("contents");
    _Slide.Init();
}());

こうすることで変数などを減らすことができる、名前の衝突のリスクが減る。変数などのスコープについて考えやすくなるなどのメリットがあります。

またコメントについてですが見てわかるコードにはコメントを付けていません。
(userNameに値をセットするメソッドなど処理内容が明確なもの。そもそもメソッドとしての役割が薄すぎる気もしますが)
この理由としてとあるサイトで見た言葉がありまして。
「DRY(don't repeat yourself)原則はコードの重複を避けるものですがそもそもコードが明確に処理内容を示すのであれば過剰なコメントはコードとコメントで重複していることになる。不必要なコメントが過剰に書かれたコードはコメントとコードが一致しているかの確認を必要とし、余計なコストがかかり可読性を逆に下げる」
というものです。
しかしコードが明快なものでない場合はコメントをきちんと書きます。

function Addition(_a,_b){
  //引数-0で型を数字にする。文字列であればNaNに変化するのでisNaNでそれを判定する。
  if(isNaN(_a-0)||isNaN(_b-0)){
    return;
  }
  return _a-0+_b-0;
}

console.log(Addition(5,15));//20

・無駄を省く
以上のコードに重複している部分があるのでまとめます。

function Addition(_a,_b){
  //引数-0で型を数字にする。
  var _A=_a-0;
  var _B=_b-0
  //文字列であればNaNに変化するのでisNaNでそれを判定する。
  if(isNaN(_A)||isNaN(_B)){
    return;
  }
  return _A+_B;
}

console.log(Addition(5,15));//20

またfunction (){}の後ろに;を付けない記法だったのですが即時関数を使う際に不具合が出る場合を確認したので、;を付けることも今後徹底しようかと考えています。

Comments

[tony]

早期returnはアサーションチェックのようなものでしょうか。テスト段階では便利ですよね。Javaをやっていたので、リリース時にはアサーションチェック機能は無効にしていた記憶がありますがJavaScriptではそこはいかがでしょう？
コメントに関しては個人はともかく、チームで組む場合はなかなか統一がとりにくいものですよね。

[Cf_cwd]

やっていることはアサーションチェックに近そうですね。

ただJavaScriptではユーザーから入力値を受け取るような場合があり(HTMLのformなど)、その際に不正(バグや致命的なリスクの原因になるコード)な値を受け取った際に処理を実行しない目的でこのような記述をして残してあることが多いのではないでしょうか。
(別の対処法としてライブラリなどを使用して入力時に値が正しいかを判別している物をよくみますね。不正であれば処理本体にその値が渡らないようにするか、無害化するなど)
値が送信するデータならなおさらJavaScript側で最低限のサニタイズをかけたりしているのではないでしょうか(もちろん受け取る側でもサニタイズをしていると思うのですが)