WordPress:wp_register_scriptとwp_enqueue_scriptの違いを把握する

WordPressでscriptタグを出力するとき、wp_register_script関数とwp_enqueue_script関数の使用が推奨されます。
しかしこの二つの関数は構文が似ていて違いがよくわかりません。
いったいどんな違いがあるのでしょうか。

なおstyleについては、次の記事で書いています。

WordPress:wp_register_styleとwp_enqueue_styleの違いを把握する

各関数の構文

まずはwp_register_scriptとwp_enqueue_scriptの構文を確認してみます。

wp_register_scriptの構文

wp_register_scriptは次のようになっています。

引数名	内容	省略	規定値
$handle	登録するスクリプト情報の名前。重複しない任意の文字列。	必須	-
$src	スクリプトファイルのパス。	必須	-
$deps	スクリプトが依存している$handleの値を要素に持つ配列。	省略可能	array()
$ver	スクリプトファイルのパスにバージョンとして付加される文字列。	省略可能	false(付加しない)
$in_footer	trueのときwp_footer()で、falseのときwp_head()で出力される。	省略可能	false

wp_enqueue_scriptの構文

次はwp_enqueue_scriptの構文を確認してみます。

引数名	内容	省略	規定値
$handle	登録するスクリプト情報の名前。重複しない任意の文字列。	必須	-
$src	スクリプトファイルのパス。	必須	-
$deps	スクリプトが依存している$handleの値を要素に持つ配列。	省略可能	array()
$ver	スクリプトファイルのパスにバージョンとして付加される文字列。	省略可能	false(WordPressのバージョン番号を付加)
$in_footer	trueのときwp_footer()で、falseのときwp_head()で出力される。	省略可能	false

構文が同じ

二つの関数を並べてみるます。

wp_register_script( $handle, $src, $deps, $ver, $in_footer )
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

緑色の箇所が、異なる部分です。
関数名が違うだけで、受け取る引数の数と内容が同じです。

これでは、二つの関数の違いがよくわからないという疑問が出てくるのも仕方がないですね。

wp_register_scriptとwp_enqueue_scriptの違い

二つの関数名で特徴的な部分はregisterとenqueueです。
registerは「登録」、enqueueは「キューに入れる」という意味を持っています。

ここで「キュー」とは、scriptタグとして出力する前に、スクリプトファイルのパスなどを保存しておくデータ領域を指します。

「登録」も「キューに登録」というイメージを持つかもしれませんが、ここでは、キューに入れる候補をキューとは別のデータ領域に保存しています。

つまりwp_register_script関数を実行しただけではscriptタグとして出力されません。
出力するには、次のコードのように同じ$handleに対してwp_enqueue_script関数を実行して、「登録」されている情報を「キューに入れる」必要があります。

実行すると、headタグ内に次のscriptタグが出力されます。

<script type='text/javascript' src='http://xxxx.com/js/a1.js?ver=5.9' id='a1-js'></script>

WordPressの作法としては、「登録」してから「キューに入れる」のが正しいです。
その点からいうと、上のコードは非常に分かりやすいですね。

しかし僕たちを混乱させるのが、次のコードのように、wp_enqueue_scriptだけでもscriptタグを出力できる点ですね。

「wp_register_scriptいらないじゃん！」と思いますね。

使い分ける基準があるのでしょうか。

wp_register_scriptとwp_enqueue_scriptの使い分け

キューを使ったscriptタグの出力は、次の二つの方法があります。

• wp_register_scriptで「登録」して、wp_enqueue_scriptで「キューに入れる」
• wp_enqueue_scriptで直接「キューに入れる」

どちらでもいい

二つの方法の使い分けですが、「好きなほうを使えばいい」が正解です。
それというのも、wp_enqueue_script関数を実行したとき、wp_register_script関数で「登録」されていないハンドルが指定された場合、wp_register_script関数と同じロジックで「登録」されるからです。

つまり、上記の二つの方法は全く同じ結果になります。
あとは、関数を2回呼び出すのをムダととるかどうかで、これはプログラマー側の判断次第です。

お勧めしない使い方

WordPressは、wp_register_script関数で使用する可能性があるスクリプトを全て登録しておいて、実際に使用するものだけwp_enqueue_script関数を実行しています。

テーマやプラグインの開発者側も同じような使い方をしようと考えるかもしれませんが、これはおすすめできません。

理由を説明する前に、WordPressが管理しているスクリプトで、「登録」されているものと「キュー」に入っているものの数をカウントしてみます。

僕の環境では、次のように表示されました。

登録されているスクリプト数：221
キュースクリプト数：0

221も登録しておいて、実際に使用しているのは0です。
非常に無駄なことをしている印象を持ってしまいますね。

ただこれは、必要な措置ともいえます。
複雑な依存関係が構築されていて、スクリプトをキューにいれると関連するスクリプトも出力されます。
例えば自作のスクリプトがjQueryに依存している場合、wp_enqueue_script関数の3つ目の引数$depsに ['jquery'] を指定すると依存関係を辿って、最終的にjquery.min.jsとjquery-migrate.min.jsを読み込むタグを出力してくれます。

テーマがjQueryを使用していなくても、プラグインが使用しているケースも考えられます。
その際、複数のプラグインが独自にjQueryを読み込むと、同じ目的のタグがいくつも出力されることになります。
統一させるという意味でも、スクリプトをあらかじめ登録しておくことはムダではないのです。

テーマやプラグインの開発者側も、何らかの合理的な理由があるなら、使用する可能性があるスクリプトを全て登録しておくような使い方をしてもいいと思います。
しかし特に理由がないなら、必要になったときに必要なものだけ登録すべきです。
使用しないのに登録するのはムダです。ムダはできる限り排除しましょう。

wp_deregister_scriptとwp_dequeue_scriptの違い

wp_register_script関数またはwp_enqueue_script関数で登録した情報は、それぞれwp_deregister_script関数とwp_dequeue_script関数で削除できます。

それぞれの関数がどのように対応しているかは名前を見れば一目瞭然ですが、一応表にしておきます。

登録関数	対応する削除関数	内容
wp_register_script	wp_deregister_script	「登録」と「キュー」から削除
wp_enqueue_script	wp_dequeue_script	「キュー」から削除

wp_enqueue_script関数で登録したハンドル名で、wp_deregister_script関数を実行しても問題ありません。
その場合、「キュー」から削除から削除されますが、「登録」は残ります。

ちなみに、依存するスクリプトが指定されていて、そのスクリプトが登録されていない場合はタグを出力しない仕様になっています。
そのため依存するスクリプトが次のコードのように「登録」から削除された場合、scriptタグとして出力されません。

ただし、WordPressが登録しているハンドルのうち下記のものは、「登録」から削除できないようになっています。

'jquery'を削除すれば、jQueryに関連するscriptタグを全て排除できそうな気がしましたが、ムリですね。

なお、上のリストはWordPress5.9で調査しています。
他のバージョンは異なるかもしれません。

「登録」または「キュー」済みの情報を一覧する

wp_register_script関数またはwp_enqueue_script関数で登録した情報を、後から一覧で表示できると不必要なスクリプトを見つけることに役立ちます。
一覧方法について次の記事で紹介しているので、読んでみてください。

WordPress: enqueueされているscriptとstyleの一覧を表示してみる