質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15885questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • コーディング規約

    47questions

    コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

JavaScriptのコーディング規約

解決済

回答 5

投稿

  • 評価
  • クリップ 11
  • VIEW 3,357

tony

score 79

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+5

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/29 00:11

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

    キャンセル

+4

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/29 00:36

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

    キャンセル

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/29 00:07

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

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/29 00:26

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

    キャンセル

  • 2015/01/29 17:45

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

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

    キャンセル

+1

AirbnbのJavaScript Style Guide
日本語訳

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15885questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • コーディング規約

    47questions

    コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。