kyokutyo / javacript-style-guide

常に気をつけたい、JavaScriptへの正しい接し方

Home Page:http://mitsuruog.github.com/javacript-style-guide

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

元文書:https://github.com/airbnb/javascript

Airbnb JavaScript スタイルガイド() {

常に気をつけたい、JavaScriptへの正しい接し方

  1. オブジェクト
  2. 配列
  3. 文字列
  4. 関数
  5. プロパティ
  6. 変数
  7. 巻き上げ
  8. 条件式と等価式
  9. ブロック
  10. コメント
  11. 空白
  12. カンマ
  13. セミコロン
  14. 型変換と強制
  15. 命名規則
  16. アクセサ(Accessors)
  17. コンストラクタ
  18. イベント
  19. モジュール
  20. jQuery
  21. ES5 互換性
  22. テスト
  23. パフォーマンスについての参考資料
  24. 情報源
  25. 共鳴者
  26. 翻訳
  27. JavaScriptスタイルガイドへの手引き
  28. 貢献者
  29. ライセンス
  • プリミティブ型: プリミティブ型は、その値を直接操作します。

    • string
    • number
    • boolean
    • null
    • undefined
    var foo = 1,
        bar = foo;
    
    bar = 9;
    
    console.log(foo, bar); // => 1, 9
  • 参照型: 参照型は、参照を通して値を操作します。

    • object
    • array
    • function
    var foo = [1, 2],
        bar = foo;
    
    bar[0] = 9;
    
    console.log(foo[0], bar[0]); // => 9, 9

    [⬆]

  • オブジェクトを作成する際は、リテラル構文を使用してください。

    // bad
    var item = new Object();
    
    // good
    var item = {};
  • 予約語をキーとして使用しないでください。これはIE8で動作しません。参照→Issue

    // bad
    var superman = {
      default: { clark: 'kent' },
      private: true
    };
    
    // good
    var superman = {
      defaults: { clark: 'kent' },
      hidden: true
    };
  • 予約語の代わりに分かりやすい同義語を使用してください。

    // bad
    var superman = {
      class: 'alien'
    };
    
    // bad
    var superman = {
      klass: 'alien'
    };
    
    // good
    var superman = {
      type: 'alien'
    };

    [⬆]

  • 配列を作成する際は、リテラル構文を使用してください。

    // bad
    var items = new Array();
    
    // good
    var items = [];
  • 長さが不明な場合はArray#pushを使用してください。

    var someStack = [];
    
    
    // bad
    someStack[someStack.length] = 'abracadabra';
    
    // good
    someStack.push('abracadabra');
  • 配列をコピーする必要がある場合、Array#sliceを使用してください。参考(英語)→jsPerf

    var len = items.length,
        itemsCopy = [],
        i;
    
    // bad
    for (i = 0; i < len; i++) {
      itemsCopy[i] = items[i];
    }
    
    // good
    itemsCopy = items.slice();
  • Allay-LikeなオブジェクトをArrayに変換する場合は、Array#sliceを使用してください。

    function trigger() {
      var args = Array.prototype.slice.call(arguments);
      ...
    }

**[[⬆]](#TOC)**


## <a name='strings'>文字列</a> [原文](https://github.com/airbnb/javascript#strings)

- 文字列にはシングルクオート `''` を使用してください。

 ```javascript
 // bad
 var name = "Bob Parr";

 // good
 var name = 'Bob Parr';

 // bad
 var fullName = "Bob " + this.lastName;

 // good
 var fullName = 'Bob ' + this.lastName;
 ```

- 80文字以上の文字列は、文字列連結を使用して複数行にまたがって記述する必要があります。
- 注意: 文字連結を多用した場合、パフォーマンスに影響を与えることがあります。参考(英語)→[jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40)

 ```javascript
 // bad
 var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

 // bad
 var errorMessage = 'This is a super long error that \
 was thrown because of Batman. \
 When you stop to think about \
 how Batman had anything to do \
 with this, you would get nowhere \
 fast.';


 // good
 var errorMessage = 'This is a super long error that ' +
   'was thrown because of Batman.' +
   'When you stop to think about ' +
   'how Batman had anything to do ' +
   'with this, you would get nowhere ' +
   'fast.';
 ```

- プログラムにて文字列を生成する必要がある場合は、(特にIEは)文字列連結の代わりにArray#joinを使用してください。参考(英語)→[jsPerf](http://jsperf.com/string-vs-array-concat/2).

 ```javascript
 var items,
     messages,
     length, i;

 messages = [{
     state: 'success',
     message: 'This one worked.'
 },{
     state: 'success',
     message: 'This one worked as well.'
 },{
     state: 'error',
     message: 'This one did not work.'
 }];

 length = messages.length;

 // bad
 function inbox(messages) {
   items = '
';

   for (i = 0; i < length; i++) {
     items += '
' + messages[i].message + '
';
   }

   return items + '
';
 }

 // good
 function inbox(messages) {
   items = [];

   for (i = 0; i < length; i++) {
     items[i] = messages[i].message;
   }

   return '
' + items.join('
') + '
';
 }
 ```

 **[[⬆]](#TOC)**


## <a name='functions'>関数</a> [原文](https://github.com/airbnb/javascript#functions)

- 関数式

 ```javascript
 // 無名関数
 var anonymous = function() {
   return true;
 };

 // 名前付き関数
 var named = function named() {
   return true;
 };

 // 即時関数
 (function() {
   console.log('Welcome to the Internet. Please follow me.');
 })();
 ```

- (ifやwhileなど)ブロック内で、変数に関数を代入する代わりに関数を宣言しないでください。ブラウザはそのことを許可しますが、(それはまるで「頑張れベアーズ」の悪ガキ達のように)すべて違ったように解釈されます。
- **注意:** ECMA-262 では `block` はstatementsの一覧に定義されていますが、関数宣言はstatementsではありません。[この問題についてはECMA-262の記述を参照してください。](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).

 ```javascript
 // bad
 if (currentUser) {
   function test() {
     console.log('Nope.');
   }
 }

 // good
 if (currentUser) {
   var test = function test() {
     console.log('Yup.');
   };
 }
 ```

- パラメータに `arguments` を指定しないでください。これは、関数スコープに渡される `arguments` オブジェクトの参照を上書きしてしまうためです。

 ```javascript
 // bad
 function nope(name, options, arguments) {
   // ...stuff...
 }

 // good
 function yup(name, options, args) {
   // ...stuff...
 }
 ```

 **[[⬆]](#TOC)**



## <a name='properties'>プロパティ</a> [原文](https://github.com/airbnb/javascript#properties)

- プロパティにアクセスする場合は、ドット `.` を使用してください。

 ```javascript
 var luke = {
   jedi: true,
   age: 28
 };

 // bad
 var isJedi = luke['jedi'];

 // good
 var isJedi = luke.jedi;
 ```

- 変数を使用してプロパティにアクセスする場合は、角括弧 `[]` を使用してください。

 ```javascript
 var luke = {
   jedi: true,
   age: 28
 };

 function getProp(prop) {
   return luke[prop];
 }

 var isJedi = getProp('jedi');
 ```

 **[[⬆]](#TOC)**


## <a name='variables'>変数</a> [原文](https://github.com/airbnb/javascript#variables)

- 変数を宣言する際は、常に `var` を使用してください。使用しない場合、グローバル変数として宣言されます。グローバルな名前空間を汚染しないように、キャプテンプラネット(環境保護とエコロジーをテーマにしたスーパーヒーローアニメ)も警告しています。

 ```javascript
 // bad
 superPower = new SuperPower();

 // good
 var superPower = new SuperPower();
 ```

- 複数の変数を宣言する場合は、1つの `var` を使用し、変数ごとに改行して宣言してください。

 ```javascript
 // bad
 var items = getItems();
 var goSportsTeam = true;
 var dragonball = 'z';

 // good
 var items = getItems(),
     goSportsTeam = true,
     dragonball = 'z';
 ```

- 未定義変数を最後に宣言してください。これは、後ほど既に割り当て済みの変数のいずれかを、割り当てる必要がある場合に便利です。

 ```javascript
 // bad
 var i, len, dragonball,
     items = getItems(),
     goSportsTeam = true;

 // bad
 var i, items = getItems(),
     dragonball,
     goSportsTeam = true,
     len;

 // good
 var items = getItems(),
     goSportsTeam = true,
     dragonball,
     i, 
     length;
 ```

- 変数の割り当てはスコープの先頭で行ってください。これは、変数宣言と巻上げに関連する問題を回避するためです。

 ```javascript
 // bad
 function() {
   test();
   console.log('doing stuff..');

   //..other stuff..

   var name = getName();

   if (name === 'test') {
     return false;
   }

   return name;
 }

 // good
 function() {
   var name = getName();

   test();
   console.log('doing stuff..');

   //..other stuff..

   if (name === 'test') {
     return false;
   }

   return name;
 }

 // bad
 function() {
   var name = getName();

   if (!arguments.length) {
     return false;
   }

   return true;
 }

 // good
 function() {
   if (!arguments.length) {
     return false;
   }

   var name = getName();

   return true;
 }
 ```

 **[[⬆]](#TOC)**


## <a name='hoisting'>巻き上げ</a> [原文](https://github.com/airbnb/javascript#hoisting)

- 未割当ての変数は、そのスコープの先頭に巻き上げられます。

 ```javascript
 // (notDefinedがグローバル変数に存在しないと仮定した場合。)
 // これはうまく動作しません。
 function example() {
   console.log(notDefined); // => throws a ReferenceError
 }

 // その変数を参照するコードの後でその変数を宣言した場合、
 // 変数が巻上げられた上で動作します。
 // 注意:`true` という値自体は巻き上げられません。
 function example() {
   console.log(declaredButNotAssigned); // => undefined
   var declaredButNotAssigned = true;
 }

 // インタープリンタは変数宣言をスコープの先頭に巻き上げます。
 // 上の例は次のように書き直すことが出来ます。
 function example() {
   var declaredButNotAssigned;
   console.log(declaredButNotAssigned); // => undefined
   declaredButNotAssigned = true;
 }
 ```

- 無名関数の場合、関数が割当てされる前の変数が巻き上げられます。

 ```javascript
 function example() {
   console.log(anonymous); // => undefined

   anonymous(); // => TypeError anonymous is not a function

   var anonymous = function() {
     console.log('anonymous function expression');
   };
 }
 ```

- 名前付き関数の場合も同様に変数が巻き上げられます。関数名や関数本体は巻き上げられません。

 ```javascript
 function example() {
   console.log(named); // => undefined

   named(); // => TypeError named is not a function

   superPower(); // => ReferenceError superPower is not defined

   var named = function superPower() {
     console.log('Flying');
   };


   // 関数名と変数名が同じ場合も同じことが起きます。
   function example() {
     console.log(named); // => undefined

     named(); // => TypeError named is not a function

     var named = function named() {
       console.log('named');
     };
   }
 }
 ```

- 関数宣言は関数名と関数本体が巻き上げられます。

 ```javascript
 function example() {
   superPower(); // => Flying

   function superPower() {
     console.log('Flying');
   }
 }
 ```

- さらに詳細な情報を求める場合は[Ben Cherry](http://www.adequatelygood.com/)による[JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting)を参照してください。

 **[[⬆]](#TOC)**



## <a name='conditionals'>条件式と等価式</a> [原文](https://github.com/airbnb/javascript#conditionals)

- `==` や`!=`より `===` と `!==` を使用してください。 
- 条件式は `ToBoolean` メソッドにより厳密に比較されます。常にこのシンプルはルールに従ってください。

 + **オブジェクト** は **true** と評価されます。
 + **undefined** は **false** と評価されます。
 + **null** は **false** と評価されます。
 + **真偽値** は **boolean型の値** として評価されます。
 + **数値** は **true** と評価されます。しかし、 **+0, -0, or NaN** の場合は **false** です。
 + **文字列** は **true** と評価されます。 しかし、空文字 `''` の場合は **false** です。


 ```javascript
 if ([0]) {
   // true
   // 配列はオブジェクトなのでtrueとして評価されます。
 }
 ```

- 短縮形を使用してください。

 ```javascript
 // bad
 if (name !== '') {
   // ...stuff...
 }

 // good
 if (name) {
   // ...stuff...
 }

 // bad
 if (collection.length > 0) {
   // ...stuff...
 }

 // good
 if (collection.length) {
   // ...stuff...
 }
 ```

- さらに詳細な情報を求める場合はAngus Crollによる [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108)を参照してください。

 **[[⬆]](#TOC)**


## <a name='blocks'>ブロック</a> [原文](https://github.com/airbnb/javascript#blocks)

- 複数行のブロックには中括弧({})を使用してください。

 ```javascript
 // bad
 if (test)
   return false;

 // good
 if (test) return false;

 // good
 if (test) {
   return false;
 }

 // bad
 function() { return false; }

 // good
 function() {
   return false;
 }
 ```

 **[[⬆]](#TOC)**


## <a name='comments'>コメント</a> [原文](https://github.com/airbnb/javascript#comments)

- 複数行のコメントは`/** ... */` を使用してください。その中には説明とすべてのパラメータと戻り値についての型や値を記述してください。

 ```javascript
 // bad
 // make() returns a new element
 // based on the passed in tag name
 //
 // @param  tag
 // @return  element
 function make(tag) {

   // ...stuff...

   return element;
 }

 // good
 /**
  * make() returns a new element
  * based on the passed in tag name
  *
  * @param  tag
  * @return  element
  */
 function make(tag) {

   // ...stuff...

   return element;
 }
 ```

- 単一行コメントには`//` を使用してください。コメントを加えたいコードの上部に配置してください。また、コメントの前に空行を入れてください。

 ```javascript
 // bad
 var active = true;  // is current tab

 // good
 // is current tab
 var active = true;

 // bad
 function getType() {
   console.log('fetching type...');
   // set the default type to 'no type'
   var type = this._type || 'no type';

   return type;
 }

 // good
 function getType() {
   console.log('fetching type...');

   // set the default type to 'no type'
   var type = this._type || 'no type';

   return type;
 }
 ```

- 問題を指摘して再考を促す場合や、問題の解決策を提案する場合など、コメントの前に `FIXME` や `TODO` を付けることで他のデベロッパの素早い理解を助けることができます。これらは、何らかのアクションを伴うという意味で通常のコメントとは異なります。アクションとは `FIXME -- 解決策が必要` もしくは `TODO -- 実装が必要` です。


- 問題に対する注釈として `// FIXME:` を使用してください。

 ```javascript
 function Calculator() {

   // FIXME: グローバル変数を使用するべきではない。
   total = 0;

   return this;
 }
 ```

- 問題の解決策に対する注釈として `// TODO:` を使用してください。

 ```javascript
 function Calculator() {

   // TODO: total はオプションパラメータとして設定されるべき。
   this.total = 0;
   return this;
 }
**[[⬆]](#TOC)**
  • タブにはスペース2つを設定してください。

    // bad
    function() {
    ∙∙∙∙var name;
    }
    
    // bad
    function() {
    ∙var name;
    }
    
    // good
    function() {
    ∙∙var name;
    }
  • 重要な中括弧({})の前にはスペースを1つ入れてください。

    // bad
    function test(){
      console.log('test');
    }
    
    // good
    function test() {
      console.log('test');
    }
    
    // bad
    dog.set('attr',{
      age: '1 year',
      breed: 'Bernese Mountain Dog'
    });
    
    // good
    dog.set('attr', {
      age: '1 year',
      breed: 'Bernese Mountain Dog'
    });
  • ファイルの最後は空行を1つ入れてください。

    // bad
    (function(global) {
      // ...stuff...
    })(this);
    // good
    (function(global) {
      // ...stuff...
    })(this);
  • メソッドチェーンが長くなる場合は、適宜インデントしてください。

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
    .attr('width',  (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .class('led', true)
    .attr('width',  (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);
**[[⬆]](#TOC)**
  • 先頭のカンマは やめてください。

    // bad
    var once
      , upon
      , aTime;
    
    // good
    var once,
        upon,
        aTime;
    
    // bad
    var hero = {
        firstName: 'Bob'
      , lastName: 'Parr'
      , heroName: 'Mr. Incredible'
      , superPower: 'strength'
    };
    
    // good
    var hero = {
      firstName: 'Bob',
      lastName: 'Parr',
      heroName: 'Mr. Incredible',
      superPower: 'strength'
    };

- 末尾の余計なカンマも やめてください。 これはIE6/7とquirksmodeのIE9で問題を引き起こす可能性があります。 さらに、ES3のいくつかの実装において、余計なカンマがある場合、配列に長さを追加します。 これは、ES5の中で明らかにされました。(参考):

第5版では、末尾の余計なカンマが存在するArrayInitialiser(配列初期化演算子)であっても、配列に長さを追加しないという事実を明確にしています。 これは第3版から意味的な変更ではありませんが、いくつかの実装は以前よりこれを誤解していたかもしれません。

  // bad
  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn',
  };

  var heroes = [
    'Batman',
    'Superman',
  ];

  // good
  var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn'
  };

  var heroes = [
    'Batman',
    'Superman'
  ];

[⬆]

  • もちろん使いましょう。

    // bad
    (function() {
      var name = 'Skywalker'
      return name
    })()
    
    // good
    (function() {
      var name = 'Skywalker';
      return name;
    })();
    
    // good
    ;(function() {
      var name = 'Skywalker';
      return name;
    })();

    [⬆]

  • 文の先頭で型の強制を行います。

  • 文字列

    //  => this.reviewScore = 9;
    
    // bad
    var totalScore = this.reviewScore + '';
    
    // good
    var totalScore = '' + this.reviewScore;
    
    // bad
    var totalScore = '' + this.reviewScore + ' total score';
    
    // good
    var totalScore = this.reviewScore + ' total score';
  • 数値にはparseInt を使用てください。常に型変換のための基数を引数に渡してください。

    var inputValue = '4';
    
    // bad
    var val = new Number(inputValue);
    
    // bad
    var val = +inputValue;
    
    // bad
    var val = inputValue >> 0;
    
    // bad
    var val = parseInt(inputValue);
    
    // good
    var val = Number(inputValue);
    
    // good
    var val = parseInt(inputValue, 10);
  • 何らかの理由により parseInt がボトルネックとなっており、パフォーマンス的な理由でビッシフトを使用す必要がある場合、 やろうとしている事について、why(なぜ)とwhat(何を)の説明をコメントとして残してください。

    // good
    /**
     * parseIntがボトルネックとなっていたため、
     * ビットシフトで文字列を数値へ強制的に変換することで
     * パフォーマンスを改善させます。
     */
    var val = inputValue >> 0;
  • 真偽値

    var age = 0;
    
    // bad
    var hasAge = new Boolean(age);
    
    // good
    var hasAge = Boolean(age);
    
    // good
    var hasAge = !!age;

    [⬆]

  • 1文字の名前は避けてください。 名前から意図が読み取れるようにしてください。

    // bad
    function q() {
      // ...stuff...
    }
    
    // good
    function query() {
      // ..stuff..
    }
  • オブジェクト、関数、インスタンスにはキャメルケース(小文字から始まる)を使用してください。

    // bad
    var OBJEcttsssss = {};
    var this_is_my_object = {};
    var this-is-my-object = {};
    function c() {};
    var u = new user({
      name: 'Bob Parr'
    });
    
    // good
    var thisIsMyObject = {};
    function thisIsMyFunction() {};
    var user = new User({
      name: 'Bob Parr'
    });
  • クラスやコンストラクタにはパスカルケース(大文字から始まる)を使用してください。

    // bad
    function user(options) {
      this.name = options.name;
    }
    
    var bad = new user({
      name: 'nope'
    });
    
    // good
    function User(options) {
      this.name = options.name;
    }
    
    var good = new User({
      name: 'yup'
    });
  • プライベートなプロパティ名は先頭にアンダースコア _ を使用してください。

    // bad
    this.__firstName__ = 'Panda';
    this.firstName_ = 'Panda';
    
    // good
    this._firstName = 'Panda';
  • this の参照を保存する場合、 _this を使用してください。

    // bad
    function() {
      var self = this;
      return function() {
        console.log(self);
      };
    }
    
    // bad
    function() {
      var that = this;
      return function() {
        console.log(that);
      };
    }
    
    // good
    function() {
      var _this = this;
      return function() {
        console.log(_this);
      };
    }
  • 関数には名前を付けてください。これは、スタックトレースが追跡し易くなるためです。

    // bad
    var log = function(msg) {
      console.log(msg);
    };
    
    // good
    var log = function log(msg) {
      console.log(msg);
    };

    [⬆]

  • プロパティのためのアクセサ(Accessor)関数は必須ではありません。

  • アクセサ関数が必要な場合、getVal()setVal('hello') としてください。

    // bad
    dragon.age();
    
    // good
    dragon.getAge();
    
    // bad
    dragon.age(25);
    
    // good
    dragon.setAge(25);
  • プロパティが真偽値の場合、isVal()hasVal() としてください。

    // bad
    if (!dragon.age()) {
      return false;
    }
    
    // good
    if (!dragon.hasAge()) {
      return false;
    }
  • 一貫していれば、get()set() という関数を作成することも可能です。

    function Jedi(options) {
      options || (options = {});
      var lightsaber = options.lightsaber || 'blue';
      this.set('lightsaber', lightsaber);
    }
    
    Jedi.prototype.set = function(key, val) {
      this[key] = val;
    };
    
    Jedi.prototype.get = function(key) {
      return this[key];
    };

    [⬆]

  • 新しいオブジェクトでプロトタイプをオーバーライドするのではなく、プロトタイプオブジェクトにメソッドを追加してください。プロトタイプをオーバーライドすると継承が不可能になります。プロトタイプをリセットすることで、基底クラスをオーバーライドできます。

    function Jedi() {
      console.log('new jedi');
    }
    
    // bad
    Jedi.prototype = {
      fight: function fight() {
        console.log('fighting');
      },
    
      block: function block() {
        console.log('blocking');
      }
    };
    
    // good
    Jedi.prototype.fight = function fight() {
      console.log('fighting');
    };
    
    Jedi.prototype.block = function block() {
      console.log('blocking');
    };
  • メソッドの戻り値で this を返すことで、メソッドチェーンをすることができます。

    // bad
    Jedi.prototype.jump = function() {
      this.jumping = true;
      return true;
    };
    
    Jedi.prototype.setHeight = function(height) {
      this.height = height;
    };
    
    var luke = new Jedi();
    luke.jump(); // => true
    luke.setHeight(20) // => undefined
    
    // good
    Jedi.prototype.jump = function() {
      this.jumping = true;
      return this;
    };
    
    Jedi.prototype.setHeight = function(height) {
      this.height = height;
      return this;
    };
    
    var luke = new Jedi();
    
    luke.jump()
      .setHeight(20);
  • 独自のtoString()を作成することもできますが、正しく動作すること、副作用がないことだけは確認してください。

    function Jedi(options) {
      options || (options = {});
      this.name = options.name || 'no name';
    }
    
    Jedi.prototype.getName = function getName() {
      return this.name;
    };
    
    Jedi.prototype.toString = function toString() {
      return 'Jedi - ' + this.getName();
    };

    [⬆]

  • (DOMイベントやBackbone eventsのような独自の)イベントへペイロードの値を渡す場合は、生の値の代わりにハッシュ引数を渡してください。 こうすることで、後の開発者がイベントに関連する全てのハンドラを見つけて更新することなく、イベント・ぺイロードに値を追加することが出来ます。例えば、これの代わりに:

    // bad
    $(this).trigger('listingUpdated', listing.id);
    
    ...
    
    $(this).on('listingUpdated', function(e, listingId) {
      // do something with listingId
    });

    こちら方が好まれます。:

    // good
    $(this).trigger('listingUpdated', { listingId : listing.id });
    
    ...
    
    $(this).on('listingUpdated', function(e, data) {
    // do something with data.listingId
    });

[⬆]

  • モジュールは ! で始めてください。これは、文末のセミコロンを付け忘れたモジュールを連結した場合、実行時にエラーが発生しないためです。

  • ファイル名はキャメルケースを使用し、同じ名称のフォルダに格納してください。また、単独で公開する場合は、名前を一致させてください。

  • noConflict()という名称で、(名前衝突して上書きされる前の)モジュールを返すメソッドを追加してください。

  • 常にモジュールの先頭で'use strict'; を宣言してください。

    // fancyInput/fancyInput.js
    
    !function(global) {
      'use strict';
    
      var previousFancyInput = global.FancyInput;
    
      function FancyInput(options) {
        this.options = options || {};
      }
    
      FancyInput.noConflict = function noConflict() {
        global.FancyInput = previousFancyInput;
        return FancyInput;
      };
    
      global.FancyInput = FancyInput;
    }(this);

    [⬆]

  • jQueryオブジェクトの変数は、先頭に $ を付与してください。

    // bad
    var sidebar = $('.sidebar');
    
    // good
    var $sidebar = $('.sidebar');
  • jQueryの検索結果をキャッシュしてください。

    // bad
    function setSidebar() {
      $('.sidebar').hide();
    
      // ...stuff...
    
      $('.sidebar').css({
        'background-color': 'pink'
      });
    }
    
    // good
    function setSidebar() {
      var $sidebar = $('.sidebar');
      $sidebar.hide();
    
      // ...stuff...
    
      $sidebar.css({
        'background-color': 'pink'
      });
    }
  • DOMの検索には、 $('.sidebar ul')$('.sidebar > ul') のカスケードを使用してください。 参考(英語)→jsPerf

  • jQueryオブジェクトの検索には、スコープ付きの find を使用してください。

    // bad
    $('.sidebar', 'ul').hide();
    
    // bad
    $('.sidebar').find('ul').hide();
    
    // good
    $('.sidebar ul').hide();
    
    // good
    $('.sidebar > ul').hide();
    
    // good (slower)
    $sidebar.find('ul');
    
    // good (faster)
    $($sidebar[0]).find('ul');

    [⬆]

[⬆]

  • もちろん

    function() {
      return true;
    }

    [⬆]

[⬆]

まず、これを読んでください。

他のスタイルガイド

スタイルについての他の意見

参考文献

参考図書

Blogs

[⬆]

訳注: 原文は「in the wild:感染者」となっている。

これはこのスタイルガイドを使用している組織の一覧表です。このリストに追加して欲しい場合は、pull requestかissueを挙げてください。

このスタイルガイドは他の言語でも利用できます。

MITライセンス

著作権(c) 2012 Airbnb

このソフトウェアおよび関連する文書ファイル(以下「本ソフトウェア」という。)の複製物を取得するあらゆる者に対し、 以下の条件にしたがって本ソフトウェアを制限なしに扱うことを無償で許諾する。 そこには、本ソフトウェアの複製を使用し、複製し、改変し、結合し、公表し、頒布し、サブライセンスし、 および/または販売する権利、また、本ソフトウェアを与えられた者に上記のようにすることを許諾する権利を含むがそれらに限られない。

上記の著作権表示および本許諾表示は「本ソフトウェア」のすべての複製物または重要部分の中に含めなければならない。

「本ソフトウェア」は「現状のまま」で提供され、明示または黙示を問わず、 商品性、特定目的への適合性および非侵害を含むがそれに限られない、あらゆる種類の保証も伴わないものとする。 著作者または著作権者は、契約、不法行為またはその他の行為であるかにかかわらず、 ソフトウェアまたはソフトウェアの使用もしくはその他の取り扱いから、またはそれらに関連して生じた、 いかなるクレーム、損害賠償その他の責任を負わない。

[⬆]

};

About

常に気をつけたい、JavaScriptへの正しい接し方

http://mitsuruog.github.com/javacript-style-guide