含まれているライブラリの使用

テーマを構築する際に含めたい便利なJavaScriptライブラリがたくさんあります。WordPressには人気のあるライブラリが数十個バンドルされていることをご存知でしたか？こちらのWordPressに含まれているデフォルトスクリプトのリストをご覧ください。

初心者のテーマやプラグイン開発者が犯す一般的な間違いは、自分のバージョンのライブラリをテーマやプラグインにバンドルすることです。これは、WordPressにバンドルされているバージョンをエンキューする他のプラグインと競合する可能性があります。ベストプラクティスとして、WordPressに含まれているお気に入りのライブラリのバージョンと互換性のあるテーマを作成してください。

すでにバンドルされているJavaScriptライブラリの独自のバージョンを使用しようとしないでください。そうすると、コア機能が壊れたり、プラグインと競合したりする可能性があります。

もしWordPressのバージョンを自分のものに置き換えなければならないと感じた場合…まあ…答えはやはり：やめておくべきです。WordPressが使用するJavaScriptライブラリのバージョンには、WordPressが動作するために必要なカスタム調整が含まれている場合があります。これらのライブラリをオーバーライドするたびに、WordPressインスタンスが壊れるリスクがあります。さらに、他の著者によって作成されたプラグインも、これらのライブラリのWordPressバージョンと互換性があるように記述されるべきです。独自のバージョンを追加すると、プラグインと競合する可能性があります（そして、しばしば競合します！）。

標準JavaScript

JavaScriptはウェブ開発者の間で人気が高まっており、さまざまなタスクを達成するために使用されています。JavaScriptを書く際に使用するためのベストプラクティスは以下の通りです。

  • グローバル変数を避ける
  • JavaScriptを目立たないように保つ
  • クロージャーとモジュールパターンを使用する
  • コーディングスタイルを守る。WordPress JavaScriptコーディング標準を使用してください。
  • コードを検証し、リントする – ESLint.com
  • まずJavaScriptなしでサイトが正常に動作することを確認し、その後追加機能を提供するためにJavaScriptを追加します。これはプログレッシブエンハンスメントの一形態です。
  • すぐに必要でないアセットは遅延読み込みする。
  • 必要がない場合はjQueryを使用しないでください—プレーンなJavaScriptで一般的なタスクを実行する方法を示す素晴らしいサイトがあります – jQueryが必要ないかもしれません

jQuery

テーマにjQueryを含める

jQueryは、JavaScriptを使用する際に、ブラウザ間での作業をより簡単かつ信頼性の高いものにするための人気のあるJavaScriptライブラリです。jQueryを使用する場合は、JavaScriptを含めるためのハンドブックガイドラインに従ってください。テーマのエンキューされた.jsファイルにarray( 'jquery' )の依存配列を与えることで、jQueryスクリプトがダウンロードされ、テーマのコードの前に読み込まれることを保証します。

$の使用

WordPressに含まれているjQueryのコピーはnoConflict()モードで読み込まれるため、テーマの.jsファイルで「$」を「jQuery」にマッピングするためにこのラッパーコードを使用してください： 

  1. ( function( $ ) {
  2. // Your code goes here
  3. } )( jQuery );

このラッパー（即時実行関数式、またはIIFEと呼ばれます）は、最下行で変数—jQuery—を渡し、内部で「$」という名前を付けることを可能にします。このラッパー内では、$を使用して通常通り要素を選択できます。

セレクタ

jQueryで要素を選択するたびに、ドキュメントのマークアップを通じてクエリが実行されます。これらのクエリは非常に速いですが、時間がかかります—新しいクエリを使用する代わりにjQueryオブジェクトを再利用することで、サイトの応答を速くすることができます。したがって、セレクタを繰り返すのではなく： 

  1. // Anti-pattern
  2. $('.post img').addClass('theme-image');
  3. $('.post img').on('click', function() { ... });

返された要素を再利用できるようにセレクタをキャッシュすることをお勧めします。これにより、検索プロセスを繰り返す必要がなくなります： 

  1. var $postImage = $('.post img');
  2. // All image tags within posts can now be accessed through $postImage
  3. $postImage.addClass('theme-image');
  4. $postImage.on('click', function() { ... });

イベント処理

  3. ``````bash
  4. // Anti-pattern
  5. $('a').click( logClick );
  6. `

これは機能しますが、内部ではjQueryにページ上のすべてのリンクに対して新しいイベントハンドラーを作成するように依頼しています。

イベントデリゲーションは、オーバーヘッドを減らしながら同じ効果を達成する方法です。jQueryではイベントが「バブル」するため—つまり、リンクでクリックイベントが発火し、その後リンクの周囲の<p>タグ、divコンテナ、そしてdocumentオブジェクト自体にまで及ぶため—ページ構造の上部に単一のイベントハンドラーを配置し、すべてのリンクのクリックイベントをキャッチすることができます： 

  1. // Bind one handler at the document level, which is triggered
  2. // whenever there is a "click" event originating from an "a" tag
  3. $(document).on('click', 'a', logClick);