WordPressでJavaScriptをマスター：ベストプラクティスガイド

オープンバイト

3か月前

WordPressのJavaScriptコーディング標準をマスター：開発者のための総合ガイド

WordPress における JavaScript のコーディング標準は、テーマ、プラグインの開発、コアへの貢献のいずれにおいても、一貫性、可読性、高品質のコードを維持するために非常に重要です。これらの標準は、JavaScript が PHP、HTML、CSS とシームレスに統合され、多様なチーム間でのコラボレーションを促進することを保証します。すべての開発者がアクセスできるように、実践的な例を使ってこれらの標準を分解してみましょう。

概要jQueryの基盤の構築

WordPress JavaScript のコーディング標準は jQuery JavaScriptスタイルガイド当初は2012年に導入されました。当初はjQueryプロジェクトを対象としていましたが、その成功によりフレームワーク以外にも広く採用されるようになりました。しかし、WordPressはこれらの標準を独自に解釈しており、オリジナルのjQueryガイドとは若干異なっています。

主な違いは以下の通り：

弦楽器のシングルクォート:WordPress は文字列の宣言にシングルクォートを使用します。
ケース・ステートメントのインデント:WordPressでは、case文はswitchブロック内でインデントされます。
一貫した機能インデント:関数内のすべてのコンテンツは、ファイル全体のクロージャラッパーも含めてインデントされます。
線長制限の緩和:jQueryでは1行の文字数を100文字に制限していますが、WordPressでは100文字に制限することを推奨しています。

WordPress JavaScript 標準がカバーするコア領域

1.コードの書式とインデント

適切な書式とインデントは、読みやすく保守性の高いコードに不可欠です。WordPressの標準は次のことを強調しています：

インデンテーション:用途タブインデントにはスペースの代わりに各論理ブロックは、読みやすくするためにインデントされるべきです。タブは、特に異なる開発者が同じコードベースで作業している場合に、一貫性を保つのに役立ちます。

( function ( $ ) { )
    // ブロック式はインデントされます
    関数 doSomething() {
        // 関数コードもインデントされます
        console.log( 'Doing something' )；
    }
} )( jQuery )；

上記の例では、関数doSomething()とその内容がIIFEの一部であることを示すためにインデントされています。

上記の例では、関数doSomething()とその内容がIIFEの一部であることを示すためにインデントされています。

var html = '<p>a + ' と ' b + ' の和は ' ( a + b ) + ' です。</p>';

要素
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' )；

ここでは、チェーンの各メソッドが新しい行で始まるので、一連の操作が読みやすくなっています。

2.オブジェクトとアレイの間隔

オブジェクトと配列:特に複雑なデータ構造を扱う場合、一貫したスペーシングは視覚的にわかりやすくするために非常に重要です。スペーシングのガイドラインに従ってください：

// オブジェクトを宣言する正しい方法
var obj = {
    名前: 'John'、
    年齢: 27、
    身長: 179
};

// オブジェクトの宣言方法が間違っています（プロパティを凝縮しないでください）
var obj = { name: 'John', age: 27, height: 179 }；

// 配列も一貫した間隔に従うべき
var array = [ 1, 2, 3 ]；

オブジェクトや配列の間隔を適切にすることで、データ構造が視覚的に明確になり、デバッグやコードレビューの際に役立ちます。

3.セミコロン

常に セミコロン を使用してステートメントを終了します。セミコロンを省略すると、JavaScript の自動セミコロン挿入 (ASI) で予期せぬ問題が発生する可能性があります。

var array = [ 1, 2 ]；
console.log( 'Hello, world!' )；

JavaScriptはセミコロンを推測することができますが、特に複数のコードスニペットを組み合わせたり、チームプロジェクトに貢献したりする場合は、曖昧さを避けるためにセミコロンを明示的に含めるのがベストプラクティスです。

4.変数の宣言 コンスト, レットそして ヴァール

用途 コンスト を、値が変更されない変数に使用します。こうすることで偶発的な再割り当てを防ぐことができ、他の開発者にもあなたの意図を明確に伝えることができます。
用途 レット を使用します。これにより、変数のブロックスコープが確保され、ホイスティングに関連する問題を防ぐことができます。
**避けてくださいヴァール 関数スコープを持つため、ホイストによる意図しない動作につながる可能性があるためです。

const userName = 'Alice'; // 固定の値には const を使用します。
let userAge = 30; // 変わる可能性のある値には let を使用します。

使用 コンスト そして レット を適切に使用することで、コードの安全性が向上し、変数の寿命に関する推論が容易になります。

5.命名規則

一貫した命名規則は、コードをより読みやすく、保守しやすくします：

キャメルケース:用途 キャメルケース を変数名や関数名に使用します。例えば ユーザーID または フェッチユーザーデータ.
クラス:用途 アッパーキャメルケース (PascalCase)でクラス名を指定します。
定数:用途 スクリーミング_スネーク_ケース を定数として使用します。

const MAX_CONNECTIONS = 5；
クラス UserProfile {
    コンストラクタ( name ) {
        this.name = name；
    }
}

変数や関数の CamelCase は、クラスや定数との区別に役立ち、コードの明瞭化に貢献します。

6.平等性チェック

常に 厳密な等質/不等質 (===**** と !==) チェックを抽象的なもの（==や!）これにより、バグの原因となる予期せぬタイプの強制を避けることができます。

if ( 名前 === 'ジョン' ) { 。
    // 厳密な等号チェック
    console.log( 'Hello, John!' )；
}

if ( result !== false ) { // 厳格な不等号チェック
    // 厳密な不等式チェック
    console.log( '結果はfalseではありません' )；
}

厳密な等式は、型と値の両方が比較されることを保証し、コードをより予測しやすくします。

7.文字列の取り扱い

用途 シングルクォート ただし、文字列にシングルクォートが含まれている場合は、エスケープを避けるためにダブルクォートを使用します。

var greeting = 'Hello world!
var statement = "It's a nice day."；

このルールによってコードベース全体の一貫性が確保され、開発者が同じプラクティスに従うことが容易になります。

8.スイッチステートメント

Switch 文は休憩フォールスルーエラーを防止するため、各ケース（デフォルトを除く）。さらに ケース文のインデント は、スイッチ内の1つのタブでなければなりません。

switch ( event.keyCode ) {
    case $.ui.keyCode.ENTER：
    case $.ui.keyCode.SPACE：
        executeFunction()；
        break；
    case $.ui.keyCode.ESCAPE：
        cancelFunction()；
        break；
    default：
        defaultFunction()；
}

適切なインデントと改行の使用により、複数のケースを満たした場合の意図しない動作を防ぎます。

WordPressのJavaScript開発におけるベストプラクティス

1.グローバル変数を避ける

グローバル変数は 名前空間汚染 や他のスクリプトとの衝突の原因になります。代わりに、コードを 即時呼び出し関数式（IIFE） でローカルスコープを作成します。

( function() {
    const localVar = 'この関数にスコープ'；
    // ここでのコードはグローバル・スコープから保護されています。
} )();

コードをカプセル化することで、特に複数のサードパーティ・ライブラリがある環境で作業する場合に、競合のリスクを減らすことができます。

2.ドキュメンテーションとコメント

WordPressは JSDoc 3標準 JavaScript コードを文書化するためのものです。ドキュメントは、複雑なメソッドやクラス、関数の機能を理解するために非常に重要です。

単一行のコメント:用途 // 特に特定のコード行を説明する場合は、簡単な説明のために使用します。
複数行コメント:用途 /* */ より詳細な説明やコードのブロックを記述する場合。

/**
 * 二つの数値を加算します。
 *
 * @param {number} a - 1番目の数値．
 * @param {number} b - 2番目の数値．
 * return {number} a と b の和。
 */
関数 add( a, b ) {
    a + b を返します；
}

JSDocでコードを文書化することで、ツールが自動的に文書を生成し、開発者が実装に深く潜らなくてもコードを理解できるようになります。

3.エラー処理

用途 try...catch ブロックを使用して、潜在的なエラーを優雅に処理します。エラー処理は、予期しない問題がアプリケーション全体の失敗を引き起こさないようにします。

try {
    const data = JSON.parse( jsonString )；
} catch ( error ) {
    console.error( 'Invalid JSON:', error )；
}

適切なエラー処理はコードの回復力を高め、デバッグや保守を容易にします。

JavaScriptコーディングスタンダードの実践

あなたのJavaScriptコードがWordPressの標準に準拠していることを確認するには