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

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

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

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

コーディング規約

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

Q&A

解決済

5回答

6679閲覧

JavaScriptのコーディング規約

tony

総合スコア86

JavaScript

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

コーディング規約

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

0グッド

11クリップ

投稿2015/01/27 14:18

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ベストアンサー

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

投稿2015/01/28 03:49

otn

総合スコア84798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tony

2015/01/28 15:11

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

0

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

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

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

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

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

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

投稿2015/01/27 14:48

Seiji_Ogawa

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tony

2015/01/28 15:36

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

0

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

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

投稿2015/01/28 00:53

maisumakun

総合スコア145208

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tony

2015/01/28 15:07

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

0

AirbnbのJavaScript Style Guide
日本語訳

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

投稿2015/02/03 05:04

nishioka

総合スコア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

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tony

2015/01/28 15:26

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

2015/01/29 08:45

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問