JavaScript Coding Guideline.md

JavaScript Coding Guideline.md

ここで定められていることは最低限のルールです。ここで定められていないことで気になることが出た場合はについては Google JavaScript Style Guide / Google JavaScript Style Guide 和訳 を参考にするものとします。

JavaScriptのスタイルルール

変数の宣言

var 宣言する

var をつけずに宣言した変数はグローバルスコープに配置されます。 予期せぬ動作を防ぐためにも必ず var 宣言をしましょう。

// Not recommended
misicTitle = 'XXXXXXXX';

// Recommended
var misicTitle = 'XXXXXXXX';

スコープの先頭でまとめて宣言

JavaScript では変数の宣言がコード中のどこにあろうとも、実行時にスコープの先頭に巻き上げられます。 予期せぬ動作を防ぐためにも必ずスコープの先頭で宣言するようにしましょう。

// Not recommended
function hogeFunc() {

  for (var i = 0; i < 10; i++) {
    if (i % 2) {
      var str = '奇数だよ♡';
    } else {
      var str = '偶数だよ♡';
    }
    console.log(str);
  }
}

// Recommended
function hogeFunc() {
  var i, str;

  for (i = 0; i < 10; i++) {
    if (i % 2) {
      str = '奇数だよ♡';
    } else {
      str = '偶数だよ♡';
    }
    console.log(str);
  }
}

変数、関数、プロパティの命名

アルファベットの小文字で命名し、複数の単語を組み合わせる場合にはローワーキャメルケースとする。

// Not recommended
function GetFlowerName(Flower) {
  return Flower.name;
}
var Flowers_array = [
  {
    name: 'Orchid',
    color: 'Red'
  },
  {
    name: 'Lily of the valley',
    color: 'White'
  }
];

// Recommended
function getFlowerName(flower) {
  return flower.name;
}
var flowersArray = [
  {
    name: 'Orchid',
    color: 'Red'
  },
  {
    name: 'Lily of the valley',
    color: 'White'
  }
];

定数の命名

アルファベットの大文字で命名し、複数の単語を組み合わせる場合には _ （アンダースコア）でつなげる。

// Not recommended
var myUserID = 'XXXXXXXX';

// Recommended
var MY_USER_ID = 'XXXXXXXX';

コンストラクタ関数の命名

コンストラクタ関数としてインスタンスを生成する関数は通常の関数と区別するため、アッパーキャメルケースで命名する。

// Not recommended
function flower() {
}
var hoge = new flower();

// Recommended
function Flower() {
}
var flower = new Flower();

JavaScriptの書式ルール

インデント

半角スペース2つでインデントすること。 タブの使用やタブとスペースを混在させるのは NG です。

// Not recommended
if (hoge === 7) {
  for(i = 0; i < 10; i++) {
 console.log(i);
     }    
}

// Recommended
if (hoge === 7) {
  for(i = 0; i < 10; i++) {
    console.log(i);
  }
}

コードの終端

コードの終端には必ず ; （セミコロン）を書くこと。

// Not recommended
obj.method = function() {
  console.log(arguments)
}

// Recommended
obj.method = function() {
  console.log(arguments);
};

JavaScriptのメタルール

Strictモードを利用

Strict モードを利用することで、通常モードだとそのまま素通りされ見過ごしやすいミスに対して例外がスローされます。

// Not recommended
(function(){
  var color = 'Red';
})();

// Recommended
(function(){
  'use strict'
  var color = 'Red';
})();

コメント

必要に応じてコードを説明します。全てを説明しなくてよいです。

MEMOコメント

コードに MEMO: をコメントとして記述します。

※ 特記すべき内容の場合に使用します。

// MEMO: Aパターン表示用のコードです。現在Bパターンを表示しているためコメントアウトしています
// var pattern = new Pattern(A);
var pattern = new Pattern(B);

TODOコメント

コードに TODO: をコメントとして記述します。

※ 複雑な内容は、別途 Git で issue を立ててください。

// TODO: 商品 10個以下でしか動かないので、数に左右されない汎用性のあるものに書き直したい ** issue #4
var itemCarousel = new ItemCarousel();
itemCarousel.start();