みなさんはJavaScriptを記述するときに
チームや個人でコーディング規約などは設けていますでしょうか?
おすすめのコーディング規約があれば、下記のように単発でも結構ですのでご教示願いたいです。
例)
・変数宣言のときにvar x=10, y=5; などカンマを利用して連続しての記述はしない
・文字列の変数に数値を足さない
できれば効能を書いていただけると非常に助かります。
宜しくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答5件
0
ベストアンサー
Google JavaScript Style Guide 和訳
が、「何故そういうルールなのか」という理由まで書いてあって参考になるかと思います。
投稿2015/01/28 03:49
総合スコア85607
0
職場でエディタはSublime Text2って一応決められてるんで、JsHintのパッケージ入れてますよ(JsLintは厳しすぎるのでJsHintくらいがちょうどよい感じ)。
行番号の横に赤い丸で警告が表示されます。行番号クリックすると、ステータスバーに英語で説明がでます。
大体ほとんどが以下の様なエラーが多いですね。
- ネーミングはスネークケースじゃなくてキャメルケース
- カンマのあとはスペース空ける
- ダブルクオートは使わずシングルクオート
などなど。
あとは1行の文字数が多すぎだよ、とか。
実際にやってみるとわかりますが、
他人のコードを見た時に読みやすいとは思いますね。
個人的にあまり神経質になることはないと思いますが、スペースを空けるのはかなり有効かと。
投稿2015/01/27 14:48
総合スコア112
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
よほどの事情がない限り、(jQueryであれば)ready関数の冒頭に、'use strict';
を書いています。
高速化の恩恵はよくわかりませんが、変数宣言の抜けがあった場合でも勝手にグローバルを生成せず、ReferenceErrorで落ちてくれるのはデバッグに便利です。
投稿2015/01/28 00:53
総合スコア145779
0
AirbnbのJavaScript Style Guide
日本語訳
そのように書くべき理由やパフォーマンスの影響まで書かれているところが良いです。
投稿2015/02/03 05:04
総合スコア25
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
私は個人でコードを書くことが多いのでコーディング規約と言っていいのかわかりませんが参考になれば。
・ローカルを分かりやすく。
ローカル変数などには_(アンダースコア)を付けます。このことにより影響範囲を把握しやすくなります。また予約語と名前が被ることを防ぐ効果がわずかながらあります。
・早期return
引数などに不正な値を受け取った場合、関数の先頭でそれを判定して場合に応じてreturnする
lang
1function Addition(_a,_b){ 2 if(isNaN(_a-0)||isNaN(_b-0)){ 3 return; 4 } 5 return _a-0+_b-0; 6} 7 8console.log(Addition(5,15));//20
この場合、文字列、undefinedなら処理を停止。空、nullなどは0に丸めています。
問題がない限り、早期returnの形になるようにしています。また必要に応じて判定部分を関数に切り分けることもあります。
これは処理部をifで囲うような形を回避できる、処理の流れを掴みやすいと考えています。
・アッパーキャメルケース(パスカルケース)
これはこだわりと言いますか良いのかどうかはなんとも言えませんが……。
lang
1function OutputConsole(_String){ 2 console.log(_String); 3}
一応効果としてあるのが自分で定義した物であるのが分かりやすい(JavaScriptのメソッドなどはローワーキャメルケース)ことと組み込みのメソッドなどと名前が被らないことですかね。
デメリットはコンストラクタの場合、分かりにくいと感じる人がいる可能性があるということですかね。
・即時関数
グローバルである必要のないものは即時関数内で処理します。
lang
1//継承してDOMにイベントセットするような処理 2(function (){ 3 var _Slide=new Slide("contents"); 4 _Slide.Init(); 5}());
こうすることで変数などを減らすことができる、名前の衝突のリスクが減る。変数などのスコープについて考えやすくなるなどのメリットがあります。
またコメントについてですが見てわかるコードにはコメントを付けていません。
(userNameに値をセットするメソッドなど処理内容が明確なもの。そもそもメソッドとしての役割が薄すぎる気もしますが)
この理由としてとあるサイトで見た言葉がありまして。
「DRY(don't repeat yourself)原則はコードの重複を避けるものですがそもそもコードが明確に処理内容を示すのであれば過剰なコメントはコードとコメントで重複していることになる。不必要なコメントが過剰に書かれたコードはコメントとコードが一致しているかの確認を必要とし、余計なコストがかかり可読性を逆に下げる」
というものです。
しかしコードが明快なものでない場合はコメントをきちんと書きます。
lang
1function Addition(_a,_b){ 2 //引数-0で型を数字にする。文字列であればNaNに変化するのでisNaNでそれを判定する。 3 if(isNaN(_a-0)||isNaN(_b-0)){ 4 return; 5 } 6 return _a-0+_b-0; 7} 8 9console.log(Addition(5,15));//20
・無駄を省く
以上のコードに重複している部分があるのでまとめます。
lang
1function Addition(_a,_b){ 2 //引数-0で型を数字にする。 3 var _A=_a-0; 4 var _B=_b-0 5 //文字列であればNaNに変化するのでisNaNでそれを判定する。 6 if(isNaN(_A)||isNaN(_B)){ 7 return; 8 } 9 return _A+_B; 10} 11 12console.log(Addition(5,15));//20
またfunction (){}の後ろに;を付けない記法だったのですが即時関数を使う際に不具合が出る場合を確認したので、;を付けることも今後徹底しようかと考えています。
投稿2015/01/27 16:33
総合スコア730
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/28 15:26
2015/01/29 08:45
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/28 15:11