JavaScriptのベストプラクティス

2020.04.08 2020.04.08

TOPICS

翻訳元記事はこちらです。

多くのテーマでは、対話性やアニメーション、その他の機能強化のために JavaScript を使用しています。これらのベストプラクティスは、コードが効率的に動作し、コンテンツやプラグインとの競合を起こさないようにするのに役立ちます。

既存のライブラリを使用する

テーマを構築する際に入れておきたい便利なJavaScriptライブラリがたくさんあります。WordPressには、人気のあるライブラリが多数バンドルされていることをご存知でしたか？WordPress に同梱されているデフォルトのスクリプトのリストをチェックしてみましょう。

テーマやプラグインの開発を始めたばかりの人がよくする間違いは、テーマやプラグインを独自のバージョンのライブラリでバンドルしてしまうことです。これは、WordPress にバンドルされているバージョンを読み込む他のプラグインと競合する可能性があります。
ベストプラクティスとして、WordPress に同梱されているお気に入りのライブラリのバージョンとテーマを互換性のあるものにしましょう。

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

もしあなたが WordPress のバージョンをあなた自身のものに置き換えなければならないと感じているのであれば……まあ…答えはまだあります: それをしないでください。

WordPress が使用している JavaScript ライブラリのバージョンには、WordPress が動作するために必要なカスタムの微調整が含まれている場合があります。これらのライブラリをオーバーライドすると、WordPress のインスタンスが壊れてしまう危険性があります。さらに、他の作者が作成したプラグインも、これらのライブラリの WordPress のバージョンと互換性があるように書かれている必要があります。独自のバージョンを追加すると、プラグインと競合する可能性があります。（そして、多くの場合、競合します！）

標準のJavaScript

ウェブ開発者の間では、Javascriptの人気が高まっており、様々なタスクに使用されています。ここでは、JavaScript を書く際に使用するベストプラクティスをいくつか紹介します。

グローバル変数を避ける
目立たないようにする
クロージャーとモダンパターンを使用する
コーディングスタイルにこだわる。WordPress Javascript Coding Standardを使用してください。
コードをLintを使ってチェックする（JSLint.com）
あなたのサイトが JavaScript を使用しなくても動作することを確認してから、JavaScript を追加して追加機能を提供してください。
画像などは、遅延読み込みを使用してください。
必要なければjQueryを使わないでください。

jQuery

jQueryを読み込む

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

$を使う

WordPress に含まれる jQuery のコピーは (リンクが必要) noConflict() モードでロードされるため、テーマの .js ファイルでこのラッパーコードを使用して “$” を “jQuery” にマッピングします。

( function( $ ) {
    // Your code goes here
} )( jQuery );

このラッパー (Immediately Invoked Function Expression、または IIFE と呼ばれる) は、変数 – jQuery – を最下行に渡し、内部的に “$” という名前を与えます。このラッパーの中では、いつものように要素を選択するために $ を使用することができます。

セレクター

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

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

セレクタをキャッシュすることが推奨されています。

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

イベントハンドリング

.bind や .click などの jQuery メソッドを使用すると、jQuery は要求されたイベントの処理を処理するために新しいブラウザイベントオブジェクトを作成します。
新しいイベントを作成するたびに少量のメモリを必要としますが、バインドするイベントの数が増えるほど必要なメモリ量は増えていきます。100個のアンカータグを持つページがあり、ユーザーがリンクをクリックした時に logClick イベントハンドラを発行したい場合、このようなコードを書くのは非常に簡単です。

// Anti-pattern
$('a').click( logClick );

これは動作しますが、ページ上のリンクごとに新しいイベントハンドラを作成するように jQuery に命令することになります。

イベントデリゲーションは、より少ないオーバーヘッドで同じ効果を達成する方法です。jQuery のイベントは「バブル」であるため、クリックイベントはリンク上で発生し、次にリンクの周囲の <p> タグ上で発生し、次に div コンテナ上で発生し、さらにドキュメントオブジェクト自体まで発生することになります。

// documentにハンドラーをバインドします。
// "a" タグからの "クリック" イベントがある場合にトリガーされます。
$(document).on('click', 'a', logClick);