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

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

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

型
オブジェクト
配列
文字列
関数
プロパティ
変数
巻き上げ
条件式と等価式
ブロック
コメント
空白
カンマ
セミコロン
型変換と強制
命名規則
アクセサ（Accessors）
コンストラクタ
イベント
モジュール
jQuery
ECMAScript 5 互換性
テスト
パフォーマンスについての参考資料
情報源
共鳴者
翻訳
JavaScriptスタイルガイドへの手引き
貢献者
ライセンス

型 原文

プリミティブ型: プリミティブ型は、その値を直接操作します。
- 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 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へ戻る]

関数 原文

関数式

// 無名関数
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へ戻る]

巻き上げ 原文

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

// （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 と評価されます。
- undefined は false と評価されます。
- null は false と評価されます。
- 真偽値 は 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へ戻る]

空白 原文

タブにはスペース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)**

命名規則 原文

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へ戻る]

イベント

（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へ戻る]

ECMAScript 5 互換性 原文

Kangaxの ES5 互換表を参照してください。

[⬆ ページのTopへ戻る]

テスト 原文

もちろん
```
function() {
  return true;
}
```
[⬆ ページのTopへ戻る]

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

String vs Array Concat
Try/Catch Cost In a Loop
Bang Function
jQuery Find vs Context, Selector
innerHTML vs textContent for script text
Long String Concatenation
Loading...

[⬆ ページのTopへ戻る]

情報源 原文

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

注釈付き ECMAScript 5.1

他のスタイルガイド

Google JavaScript Style Guide
jQuery Core Style Guidelines
Principles of Writing Consistent, Idiomatic JavaScript

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

Naming this in nested functions - Christian Johansen
Conditional Callbacks
Popular JavaScript Coding Conventions on Github

参考文献

Understanding JavaScript Closures - Angus Croll
Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
You Might Not Need jQuery - Zack Bloom & Adam Schwartz
ES6 Features - Luke Hoban

参考図書

JavaScript: The Good Parts - Douglas Crockford
JavaScript Patterns - Stoyan Stefanov
Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
Maintainable JavaScript - Nicholas C. Zakas
JavaScript Web Applications - Alex MacCaw
Pro JavaScript Techniques - John Resig
Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
Human JavaScript - Henrik Joreteg
Superhero.js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
JSBooks
Third Party JavaScript - Ben Vinegar and Anton Kovalyov

Blogs

DailyJS
JavaScript Weekly
JavaScript, JavaScript...
Bocoup Weblog
Adequately Good
NCZOnline
Perfection Kills
Ben Alman
Dmitry Baranovskiy
Dustin Diaz
nettuts

[⬆ ページのTopへ戻る]

共鳴者 原文

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

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

Aan Zee: AanZee/javascript
Airbnb: airbnb/javascript
American Insitutes for Research: AIRAST/javascript
Compass Learning: compasslearning/javascript-style-guide
DailyMotion: dailymotion/javascript
Digitpaint digitpaint/javascript
ExactTarget: ExactTarget/javascript
Gawker Media: gawkermedia/javascript
GeneralElectric: GeneralElectric/javascript
GoodData: gooddata/gdc-js-style
Grooveshark: grooveshark/javascript
How About We: howaboutwe/javascript
Intent Media: intentmedia/javascript
Mighty Spring: mightyspring/javascript
MinnPost: MinnPost/javascript
ModCloth: modcloth/javascript
Money Advice Service: moneyadviceservice/javascript
Muber: muber/javascript
National Geographic: natgeo/javascript
National Park Service: nationalparkservice/javascript
Orion Health: orionhealth/javascript
Peerby: Peerby/javascript
Razorfish: razorfish/javascript-style-guide
reddit: reddit/styleguide/javascript
REI: reidev/js-style-guide
Ripple: ripple/javascript-style-guide
SeekingAlpha: seekingalpha/javascript-style-guide
Shutterfly: shutterfly/javascript
TheLadders: TheLadders/javascript
Userify: userify/javascript
Zillow: zillow/javascript
ZocDoc: ZocDoc/javascript

翻訳 原文

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

🇩🇪 ドイツ語: timofurrer/javascript-style-guide
🇯🇵 日本語: mitsuruog/javascript-style-guide
:br: ポルトガル語: armoucar/javascript-style-guide
🇨🇳 中国語: adamlu/javascript-style-guide
🇪🇸 スペイン語: paolocarrasco/javascript-style-guide
🇰🇷 韓国語: tipjs/javascript-style-guide
🇫🇷 フランス語: nmussy/javascript-style-guide
🇷🇺 ロシア語: uprock/javascript
:bg: ブルガリア語: borislavvv/javascript

ライセンス 原文

MITライセンス

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

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

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

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

[⬆ ページのTopへ戻る]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

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

目次

型 原文

オブジェクト 原文

配列 原文

文字列 原文

関数 原文

プロパティ 原文

変数 原文

巻き上げ 原文

条件式と等価式 原文

ブロック 原文

コメント 原文

空白 原文

カンマ 原文

セミコロン 原文

型変換と強制 原文

命名規則 原文

アクセサ（Accessors）原文

コンストラクタ 原文

イベント

モジュール 原文

jQuery 原文

ECMAScript 5 互換性 原文

テスト 原文

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

情報源 原文

共鳴者 原文

翻訳 原文

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

貢献者 原文

ライセンス 原文

};

Files

README.md

Latest commit

History

README.md

File metadata and controls

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

};