JQuery のコーディング規約

オブジェクトの型チェック

• 文字列( String ): typeof object === "string"
• 数値( Number ): typeof object === "number"
• ブール( Boolean ): typeof object === "boolean"
• オブジェクト( Object ): typeof object === "object"
• Plain Object: jQuery.isPlainObject( object )
• 関数( Function ): jQuery.isFunction( object )
• 配列( Array ): jQuery.isArray( object )
• htmlエレメント( Element ): object.nodeType
• null: object === null
• null or undefined: object == null
• undefined:
• グローバル 変数: typeof variable === "undefined"
• ローカル 変数 : variable === undefined
• プロトタイプ: object.prop === undefined

null チェック

nullをチェックする場合は厳密等価演算子を利用すべきです。しかし、例外的にundefined と null を null として評価する場合に限り等価演算子を利用することができます。

// Check for both undefined and null values, for some important reason.
undefOrNull == null;

コメント

Comments are always preceded by a blank line. Comments start with a capital first letter, but don't require a period at the end, unless you're writing full sentences. There must be a single space between the comment token and the comment text.

Single line comments go over the line they refer to:

// We need an explicit "bar", because later in the code foo is checked.
var foo = "bar";

// Even long comments that span
// multiple lines use the single
// line comment form.
Multi-line comments are only used for file and function headers.

Inline comments are allowed as an exception when used to annotate special arguments in formal parameter lists or when needed to support a specific development tool:

function foo( types, selector, data, fn, /* INTERNAL */ one ) {
    // Do stuff
}

Do not write API documentation in comments. API documentation lives in its own repository.

引用符

jQuery ではダブルクォートを利用します.

var double = "I am wrapped in double quotes";

文字列の中にクォートを含む場合は必ずダブルクォートを外側にして内側をシングルクォートになるように書きます。

var html = "<div id='my-id'></div>";

命名規則

変数と関数は完全な単語である必要があります、そしてキャメルケースで記述し先頭の文字は小文字です。 すべての名前は説明的である必要がありますが過度にならないようにするべきです。 例外としてイテレーターなどは許可されている、たとえばループなどのインデックスにに使われる i です。 コンストラクタに関しても先頭の文字が大文字である必要はありません。

グローバル変数

プロジェクトごとに最大ひとつ存在する可能性があります

DOMノード ルール

.nodeName は常に .tagName に似せた状態で使わなければいけません。

.nodeType はノードの種類を分類するために利用してください。(.nodeName ではありません)。

Switch 構文

スイッチ文は推奨されます、ケースが多数ある場合に便利です。複数のケースが同じブロックで処理することができ、またはフォールスルーロジック（特にデフォルトの場合）を活用することができる。 Use a break for each case other than default. Align case statements with the switch.

switch ( event.keyCode ) {
case $.ui.keyCode.ENTER:
case $.ui.keyCode.SPACE:
    x();
    break;
case $.ui.keyCode.ESCAPE:
    y();
    break;
default:
    z();
}

LINTツールでチェックのできるもの

スペース、括弧のいれかた

// Bad
if(condition) doSomething();
while(!condition) iterating++;
for(var i=0;i<100;i++) object[array[i]] = someFn(i);

// Good
var i = 0;

if ( condition ) {
    doSomething();
} else if ( otherCondition ) {
    somethingElse();
} else {
    otherThing();
}

while ( !condition ) {
    iterating++;
}

for ( ; i < 100; i++ ) {
    object[ array[ i ] ] = someFn( i );
}

try {
    // Expressions
} catch ( e ) {
    // Expressions
}

Object と Array の宣言

// Bad
map = { ready: 9,
    when: 4, "you are": 15 };

array = [ 9,
    4,
    15 ];

array = [ {
    key: val
} ];

array = [ {
    key: val
}, {
    key2: val2
} ];

// Good
map = { ready: 9, when: 4, "you are": 15 };

array = [ 9, 4, 15 ];

array = [ { key: val } ];

array = [ { key: val }, { key2: val2 } ];

array = [
    { key: val },
    { key2: val2 }
];

// Good as well
map = {
    ready: 9,
    when: 4,
    "you are": 15
};

array = [
    9,
    4,
    15
];

array = [
    {
        key: val
    }
];

array = [
    {
        key: val
    },
    {
        key2: val2
    }
];

Array と 関数の呼び出しのスペースのつけ方

以下のように各所にスペースが入っている状態にする：

array = [ "*" ];
array = [ a, b ];
foo( arg );
foo( "string", object );
foo( options, object[ property ] );
foo( node, "property", 2 );
foo( [ a, b ], "property", { c: d } );

以下のようなものは例外とする：

// Function with a single line object or array as the sole argument:
// No space on either side of the argument
foo({ a: "alpha", b: "beta" });
foo([ a, b ]);

// Function with a multiline callback, object, or array as the sole argument:
// No space on either side of the argument
foo({
    a: "alpha",
    b: "beta"
});

// Function with a multiline callback, object, or array as the first argument:
// No space before the first argument
foo(function() {
    // Do stuff
}, options );

// Function with a multiline callback, object, or array as the last argument:
// No space after after the last argument
foo( data, function() {
    // Do stuff
});

複数行にわたる演算

計算式などが複数行にわたる場合、改行の前に演算子をおく必要があります。

// Bad
var html = "<p>The sum of " + a + " and " + b + " plus " + c
    + " is " + ( a + b + c );

// Good
var html = "<p>The sum of " + a + " and " + b + " plus " + c +
    " is " + ( a + b + c );

次のような演算の場合、読みやすさも考慮して以下のように改行する必要があります。

var baz = firstCondition( foo ) && secondCondition( bar ) ?
    qux( foo, bar ) :
    foo;

条件が1行に収まらない場合、条件式とボディを区別するために、1レベルをインデントする必要があります。

if ( firstCondition() && secondCondition() &&
            thirdCondition() ) {
        doStuff();
    }