Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1594 lines (1173 sloc) 46.1 KB

元文書: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. ECMAScript 5 互換性
  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

    [⬆ ページのTopへ戻る]

オブジェクト 原文

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

    // 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'
    };
    

    [⬆ ページのTopへ戻る]

配列 原文

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

    // 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);
      ...
    }

    [⬆ ページのTopへ戻る]

文字列 原文

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

    // bad
    var name = "Bob Parr";
    
    // good
    var name = 'Bob Parr';
    
    // bad
    var fullName = "Bob " + this.lastName;
    
    // good
    var fullName = 'Bob ' + this.lastName;
  • 80文字以上の文字列は、文字列連結を使用して複数行にまたがって記述する必要があります。

  • 注意: 文字連結を多用した場合、パフォーマンスに影響を与えることがあります。参考(英語)→jsPerf & Discussion

    // 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.

    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 = '<ul>';
    
      for (i = 0; i < length; i++) {
        items += '<li>' + messages[i].message + '</li>';
      }
    
      return items + '</ul>';
    }
    
    // good
    function inbox(messages) {
      items = [];
    
      for (i = 0; i < length; i++) {
        items[i] = messages[i].message;
      }
    
      return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
    }

    [⬆ ページのTopへ戻る]

関数 原文

  • 関数式

    // 無名関数
    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の記述を参照してください。.

    // bad
    if (currentUser) {
      function test() {
        console.log('Nope.');
      }
    }
    
    // good
    var test;
    if (currentUser) {
      test = function test() {
        console.log('Yup.');
      };
    }
  • パラメータに arguments を指定しないでください。これは、関数スコープに渡される arguments オブジェクトの参照を上書きしてしまうためです。

    // bad
    function nope(name, options, arguments) {
      // ...stuff...
    }
    
    // good
    function yup(name, options, args) {
      // ...stuff...
    }

    [⬆ ページのTopへ戻る]

プロパティ 原文

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

    var luke = {
      jedi: true,
      age: 28
    };
    
    // bad
    var isJedi = luke['jedi'];
    
    // good
    var isJedi = luke.jedi;
  • 変数を使用してプロパティにアクセスする場合は、角括弧 [] を使用してください。

    var luke = {
      jedi: true,
      age: 28
    };
    
    function getProp(prop) {
      return luke[prop];
    }
    
    var isJedi = getProp('jedi');

    [⬆ ページのTopへ戻る]

変数 原文

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

    // bad
    superPower = new SuperPower();
    
    // good
    var superPower = new SuperPower();
  • 複数の変数を宣言する場合は、1つの var を使用し、変数ごとに改行して宣言してください。

    // bad
    var items = getItems();
    var goSportsTeam = true;
    var dragonball = 'z';
    
    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball = 'z';
  • 未定義変数を最後に宣言してください。これは、後ほど既に割り当て済みの変数のいずれかを、割り当てる必要がある場合に便利です。

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

    // 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;
    }

    [⬆ ページのTopへ戻る]

巻き上げ 原文

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

    // (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;
    }
  • 無名関数の場合、関数が割当てされる前の変数が巻き上げられます。

    function example() {
      console.log(anonymous); // => undefined
    
      anonymous(); // => TypeError anonymous is not a function
    
      var anonymous = function() {
        console.log('anonymous function expression');
      };
    }
  • 名前付き関数の場合も同様に変数が巻き上げられます。関数名や関数本体は巻き上げられません。

    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');
      }
    }
  • 関数宣言は関数名と関数本体が巻き上げられます。

    function example() {
      superPower(); // => Flying
    
      function superPower() {
        console.log('Flying');
      }
    }
  • さらに詳細な情報を求める場合はBen CherryによるJavaScript Scoping & Hoistingを参照してください。

    [⬆ ページのTopへ戻る]

条件式と等価式 原文

  • ==!=より ===!== を使用してください。

  • 条件式は ToBoolean メソッドによる強制型変換で評価され、常にこれらのシンプルなルールに従います。

    • オブジェクトtrue と評価されます。
    • undefinedfalse と評価されます。
    • nullfalse と評価されます。
    • 真偽値boolean型の値 として評価されます。
    • 数値true と評価されます。しかし、 +0, -0, or NaN の場合は false です。
    • 文字列true と評価されます。 しかし、空文字 '' の場合は false です。
    if ([0]) {
      // true
      // 配列はオブジェクトなのでtrueとして評価されます。
    }
  • 短縮形を使用してください。

    // 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を参照してください。

    [⬆ ページのTopへ戻る]

ブロック 原文

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

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

    [⬆ ページのTopへ戻る]

コメント 原文

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

    // 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;
    }
  • 単一行コメントには// を使用してください。コメントを加えたいコードの上部に配置してください。また、コメントの前に空行を入れてください。

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

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

    function Calculator() {
    
      // FIXME: グローバル変数を使用するべきではない。
      total = 0;
    
      return this;
    }
  • 問題の解決策に対する注釈として // TODO: を使用してください。

    function Calculator() {
    
      // TODO: total はオプションパラメータとして設定されるべき。
      this.total = 0;
      return this;
    }

    [⬆ ページのTopへ戻る]

空白 原文

  • タブにはスペース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'
    });
  • 制御構文(if文やwhile文など)の丸括弧(())の前にはスペースを1つ入れてください。関数宣言や関数呼び出し時の引数リストの前にはスペースは入れないでください。

    // bad
    if(isJedi) {
      fight ();
    }
    
    // good
    if (isJedi) {
      fight();
    }
    
    // bad
    function fight () {
      console.log ('Swooosh!');
    }
    
    // good
    function fight() {
      console.log('Swooosh!');
    }
  • 演算子の間はスペースを入れてください。

    // bad
    var x=y+5;
    
    // good
    var x = y + 5;
  • ファイルの最後は改行文字を1つ入れてください。

    // bad
    (function(global) {
      // ...stuff...
    })(this);
    // 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);
**[[⬆ ページのTopへ戻る]](#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'
  ];

[⬆ ページのTopへ戻る]

セミコロン 原文

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

    // bad
    (function() {
      var name = 'Skywalker'
      return name
    })()
    
    // good
    (function() {
      var name = 'Skywalker';
      return name;
    })();
    
    // good(即時関数を伴う2つのファイルを連結した場合に、引数となる部分を保護します。)
    ;(function() {
      var name = 'Skywalker';
      return name;
    })();

    詳細

    [⬆ ページのTopへ戻る]

型変換と強制 原文

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

  • 文字列

    //  => 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;
  • 注意: ビットシフトを使用する場合の注意事項。数値は64ビット倍精度として表現されていますが、ビットシフト演算した場合は常に32ビット単精度で返されます(エビデンス)。 32ビット以上の数値をビットシフトする場合、予期せぬ振る舞いを起こす可能性があります(議論)。符号付き32ビット整数の最大値は2,147,483,647です。

    2147483647 >> 0 //=> 2147483647
    2147483648 >> 0 //=> -2147483648
    2147483649 >> 0 //=> -2147483647
  • 真偽値

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

    [⬆ ページのTopへ戻る]

命名規則 原文

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

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

    // bad
    var OBJEcttsssss = {};
    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);
    };
    • 注意: IE8とそれ以下のものには、名前付き関数に関するいくつかの癖を持っています。さらに詳細な情報を求める場合はhttp://kangax.github.io/nfe/を参照してください。

    [⬆ ページのTopへ戻る]

アクセサ(Accessors) 原文

  • プロパティのためのアクセサ(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];
    };

    [⬆ ページのTopへ戻る]

コンストラクタ 原文

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

    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();
    };

    [⬆ ページのTopへ戻る]

イベント

  • (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
    });

[⬆ ページのTopへ戻る]

モジュール 原文

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

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

  • 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);

    [⬆ ページのTopへ戻る]

jQuery 原文

  • 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
    $('ul', '.sidebar').hide();
    
    // bad
    $('.sidebar').find('ul').hide();
    
    // good
    $('.sidebar ul').hide();
    
    // good
    $('.sidebar > ul').hide();
    
    // good
    $sidebar.find('ul').hide();

    [⬆ ページのTopへ戻る]

ECMAScript 5 互換性 原文

[⬆ ページのTopへ戻る]

テスト 原文

パフォーマンスについての参考資料 原文

[⬆ ページのTopへ戻る]

情報源 原文

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

他のスタイルガイド

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

参考文献

参考図書

Blogs

[⬆ ページのTopへ戻る]

共鳴者 原文

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

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

翻訳 原文

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

JavaScriptスタイルガイドへの手引き 原文

貢献者 原文

ライセンス 原文

MITライセンス

著作権(c) 2014 Airbnb
翻訳 2014 mitsuruog

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

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

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

[⬆ ページのTopへ戻る]

};