LoginSignup
2
2

More than 3 years have passed since last update.

JS標準スタイルで自動整形

Posted at

はじめに

JavaScriptでは数多くのコーディング規約がありますが,
ここでは,JavaScript Standard Styleの規則について簡単に紹介します.
また,自動整形する方法を備忘録として記述します.

JS標準スタイルの代表的な規則

  • インデントはスペース2つ.タブは使わない
  • 文字列表現は基本的に,クォートで囲む
  • 未使用の変数は記述しない
  • セミコロンは記述しない
  • 制御構文などキーワードを記述するとき,単語の後ろにはスペースを入れる
  • 関数定義の時,関数名の後ろはスペースを入れる
  • 値の比較は==ではなく===を利用する
  • 代入や演算のための記号の前後にはスペースを入れる
  • 配列などカンマで値を列挙するとき,カンマの後ろにスペースを入れる
  • if文でelseを書くときは,elseの前に改行しない
  • 複数行のif文を記述するときは,..を省略しない
  • コールバック関数で,エラー処理が必要な時,省略しない
  • ブラウザーのグローバルオブジェクトはwindowsを諸略しないで記述すること
  • 2行以上の空行を書かない
  • 変数宣言をすること,一度に複数の変数を宣言しない
  • 変数はキャメルケース(hugeFuga形式)で命名する.
  • クラス名の一文字目は大文字とする,同様にコンストラクタ関数も名前の一文字目を大文字とする
  • eval()を使わない

規約の特徴

セミコロンは記述しない

JavaやC言語などでは,文末にセミコロンを書くことが多いですが,JavaScriptではセミコロンを記述しなくても問題ないです.
あるコーディング規約には,セミコロンを書くことが推奨されていますが,極力不要ものは書かないとい意味で,セミコロン省略は潔く,プログラムが明快になるというメリットがあります.

インデントはスペース2つ

インデントはタブを使用せず,スペース2つで表現します.インデントについての論争がなされていますが,完全な好みによる部分が多く,明確な答えは見つかっていません.Js標準スタイルでは,スペースが2つとされています.

関数名の後ろにスペースを入れるか否か

JS標準スタイルでは関数名の後ろにスペースを入れるときと,入れないときがあります.
関数定義を行う際は,関数名を後ろにスペースを入れ,関数呼び出しを行うときは,関数名の後ろにスペースを入れません.

//関数名にスペースを入れるとき
fuction func (a, b) {
  return a + b
}

//関数名にスペースを入れないとき
func(2, 3)

比較演算子は==ではなく===を使用する

JavaScriptの比較演算子の=====では,異なる意味があります.
==は等価演算子と呼ばれ,数値と文字列を比較するとき,文字列が数値に変換されます.そのため,例えば"01"==1はTrueとなります.
一方,===は厳密等価演算子と呼ばれ,型変換は行われず,オブジェクトの型と値を比較します,そのため,例えば"01"===1はFalseになります.

自動的にスタイルを確認・整形する

コードを記述した後に,自動的にスタイルを変換してくれるツールstandardがあります.

standardをインストール

npm install standard --sava-dev:プロジェクトにスタイルを適用する場合
npm install standard --global:グローバルにツールを導入する場合

Js標準スタイルに合致していない部分を検索

$standard

CLIで自動整形

次のようにコマンド入力すると,自動で問題を解決して,Js標準スタイルに修正してくれます.

$standard --fix

参考文献

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2