本文へスキップ
Web制作

jQuery重複でDatepickerが動かない原因と防ぎ方

jQueryの重複は、Datepickerが表示されない原因になります。

予約フォームや相談フォームの日付欄でカレンダーが開かないと、ユーザーは申し込みを完了できません。

見た目は小さな不具合でも、見込み顧客の離脱につながる可能性があります。

特にWordPressでは、テーマ、プラグイン、外部タグがそれぞれjQueryを読み込んでしまい、知らないうちに重複することがあります。

この記事では、jQueryの重複でDatepickerが動かなくなる理由、すぐ確認できるチェック方法、WordPressでの正しい直し方、再発防止のルールを整理します。

「カレンダーが出ない」で終わらせず、申し込み導線を守るための確認項目として読んでください。

jQuery重複でDatepickerが動かない原因

jQuery重複でDatepickerが動かない主な原因は、Datepickerを登録したjQueryが、あとから読み込まれた別のjQueryで上書きされることです。

Datepickerは、jQuery UIが提供するカレンダー機能です。

jQuery UI公式では、Datepickerは入力欄に紐づき、フォーカス時に小さなカレンダーを表示する部品として説明されています。

つまり、日付入力フォームにとっては「ただの飾り」ではありません。

ユーザーが希望日を選ぶための操作部品です。

jQueryを後から読み直すとDatepickerが消える

Datepickerは、jQuery本体に後から追加されるプラグインです。

そのため、読み込み順はとても重要です。

たとえば、次のような順番だと問題が起きやすくなります。

  1. WordPress本体のjQueryを読み込む
  2. jQuery UI Datepickerを読み込む
  3. フォームの日付欄にDatepickerを設定する
  4. テーマや外部タグが別のjQueryをもう一度読み込む

この場合、最初のjQueryにはDatepickerが登録されています。

しかし、後から別のjQueryを読み直すと、jQuery.fn.datepicker がない状態に戻ることがあります。

その結果、日付欄をクリックしてもカレンダーが表示されません。

Consoleには、次のようなエラーが出ることがあります。

$(...).datepicker is not a function

これは「Datepickerの関数が見つからない」という意味です。

フォーム側のHTMLが壊れているのではなく、JavaScriptの読み込み順や重複が原因になっている可能性があります。

カレンダー不具合は申し込み機会に直結する

Datepickerの不具合が怖いのは、見た目の崩れで済まないことです。

予約フォームや相談フォームでは、日付入力が申し込みの途中にあります。

そこでカレンダーが開かないと、ユーザーは次のように感じます。

  • 申し込み方法が分からない
  • 希望日を選べない
  • フォームが壊れているように見える
  • いったん離れて、戻ってこない

特にスマホでは、日付入力が少し面倒になるだけで離脱しやすくなります。

つまり、jQuery重複は技術者だけの問題ではありません。

見込み顧客が申し込みを完了できるかどうかに関わる問題です。

実際にあった事例｜同じテーマなのに一部のページだけ動かない

実際に確認した事例では、同じテーマを使い回している予約フォーム付きのページ群のうち、一部のページ種別だけでDatepickerが動かなくなっていました。

原因は、単純な「jQueryの二重読み込み」ではなく、もう一歩踏み込んだところにありました。

  • 一部のページは、通常のWordPressのページ生成の仕組み（wp_enqueue_scriptなど）を経由しない、独立したテンプレートファイルとして作られていた
  • 残りのページは、通常のWordPress固定ページとして作られていた

通常のWordPress固定ページ側では、WordPress本体が自動でjQueryを読み込む。ただしWordPressは仕様上、読み込んだjQueryから$という略記のエイリアス（別名）を意図的に外す（jQuery.noConflict()相当の挙動）。正式名のjQueryは使えるが、$は使えない状態になる。

一方、独立したテンプレート側は、この仕組みを経由しないため、$が外されずにそのまま使えていた。

同じフォーム機能のコードを両方のページ種別で使い回していたが、コード自体は$という略記で書かれていたため、通常のWordPressページの方だけ$ is not a functionのエラーになっていた。

さらにここで一度、「対象範囲を広げてjQueryをもう1つ読み込む」形で直したところ、今度はdatepicker is not a functionではなく、

Cannot read properties of undefined (reading 'setDefaults')

という別のエラーが出た。ブラウザの検証ツールでスクリプトを数え直すと、jQuery本体が2つ読み込まれる状態になっており、Datepickerは片方のインスタンスにしか登録されず、コード側が参照している$はもう片方のインスタンスを指す、という食い違いが起きていた。

最終的な直し方は、jQueryをもう1つ追加で読み込むのではなく、WordPress標準のjQueryが読み込まれた直後に、$というエイリアスをもう一度結び直すという方法だった（具体的な直し方は後述）。

この事例からの教訓は次の2つ。

  1. 「エラーが消えた」だけで確認を終えると、見えにくい形で壊れたままになっていることがある。実際に日付を選択してカレンダーが開くところまで確認して初めて直ったと言える
  2. 同じ機能・同じコードでも、ページの生成経路（通常のCMSページか、それを経由しない独立したテンプレートか）が違うと、jQueryの前提条件がまったく変わることがある

まず確認したい4つのポイント

Datepickerが表示されないときは、フォーム設定を触る前に、JavaScriptの読み込み状態を確認します。

原因を切り分けずにフォームプラグインを入れ替えると、別の不具合を増やすことがあります。

まずは次の4つを見ます。

Consoleにエラーが出ていないか

ブラウザの検証ツールを開き、Consoleを確認します。

次のようなエラーがあれば、jQueryやDatepickerの読み込みに問題がある可能性があります。

Uncaught TypeError: $(...).datepicker is not a function
jQuery is not defined
$ is not a function

この時点で、フォーム管理画面だけを見ても原因は分かりません。

ページ上で読み込まれているJavaScriptを確認する必要があります。

jQueryが何回読み込まれているか

Networkタブで jquery と検索します。

同じページでjQuery本体が複数回読み込まれていれば、重複の疑いがあります。

Consoleでも、次のコードで確認できます。

[...document.scripts]
  .map((script) => script.src)
  .filter((src) => /jquery/i.test(src));

ここに複数のjQuery本体が出てくる場合は、テーマ、プラグイン、外部タグのどこかで重複読み込みが起きていないか確認します。

Datepickerが登録されているか

次に、Datepickerが現在のjQueryに登録されているか確認します。

Consoleで次を実行します。

typeof jQuery.fn.datepicker;

結果が function なら、Datepickerは登録されています。

undefined なら、Datepickerが読み込まれていないか、後から読み込まれたjQueryで上書きされている可能性があります。

jQueryのバージョンも確認しておきます。

jQuery.fn.jquery;

想定していないバージョンが出る場合は、外部から別のjQueryが読み込まれているかもしれません。

コード側が$という略記で書かれている場合は、$とjQueryが同じ実体を指しているかも確認します。

window.$ === window.jQuery;

trueであれば同じものです。falseの場合、$とjQueryは別々のjQueryインスタンスを指しており、Datepickerがどちらか一方にしか登録されていない可能性があります。これは、jQueryが完全に二重読み込みされている場合よりも見つけにくい状態です（jQueryの方は正常に見えるため）。

フォーム送信まで確認できているか

Datepickerが表示されるだけでは、確認としてはまだ不十分です。

申し込み導線としては、次の流れまで確認します。

  1. 日付欄をクリックする
  2. カレンダーが表示される
  3. 日付を選択できる
  4. 入力欄に日付が入る
  5. 必須項目を入力して送信できる
  6. 完了画面または完了メッセージが表示される

カレンダーが表示されても、送信時に日付形式で弾かれることがあります。

そのため、表示確認と送信確認は分けて行うのがおすすめです。

WordPressでの正しい直し方

WordPressでは、jQueryをHTMLに直書きせず、wp_enqueue_script() で依存関係を指定して読み込むのが基本です。

WordPress公式でも、JavaScriptをページへ読み込む推奨方法として wp_enqueue_script() が説明されています。

WordPressには、jquery や jquery-ui-datepicker などのスクリプトハンドルも登録されています。

これを使えば、読み込み順をWordPressに管理させられます。

直書きのjQueryを外す

まず避けたいのは、テーマファイルにjQueryを直接書くことです。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

このような記述が header.php、footer.php、固定ページのHTML、タグ管理ツールに入っていると、WordPress本体やプラグインのjQueryと重複することがあります。

WordPressでは、基本的に本体が用意している jquery ハンドルを使います。

やむを得ず独自のjQueryを使う場合でも、影響範囲を分け、既存のプラグインが壊れないか検証が必要です。

ただし、通常のサイト制作では、jQuery本体を別途読み込まないほうが安全です。

wp_enqueue_scriptで依存関係を指定する

Datepickerを使うスクリプトは、jquery と jquery-ui-datepicker に依存させます。

例として、テーマ側で日付欄を初期化する場合は次のようにします。

function theme_enqueue_booking_scripts() {
	wp_enqueue_script( 'jquery-ui-datepicker' );

	wp_enqueue_script(
		'booking-datepicker',
		get_template_directory_uri() . '/assets/js/booking-datepicker.js',
		array( 'jquery', 'jquery-ui-datepicker' ),
		'1.0.0',
		true
	);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_booking_scripts' );

JavaScript側では、WordPressのjQueryに合わせて jQuery(function($) {}) の形で書きます。

jQuery(function($) {
  $('.js-datepicker').datepicker({
    dateFormat: 'yy/mm/dd'
  });
});

この書き方なら、$ が別ライブラリとぶつかるリスクを減らせます。

jQuery公式でも、jQuery本体とプラグインはjQuery名前空間の中に入るという考え方が説明されています。

WordPressでは、この前提を崩さない読み込み方にすることが重要です。

Datepicker用CSSも確認する

DatepickerはJavaScriptだけでなく、表示用のCSSも必要です。

JavaScriptは動いているのに見た目が崩れている場合は、CSS不足の可能性があります。

たとえば、次のような状態です。

  • 日付欄をクリックすると何かは出る
  • カレンダーの位置や見た目が崩れている
  • 月移動のボタンが見えない
  • z-indexの影響でフォームの裏に隠れている

この場合は、jQuery重複ではなくCSSの問題かもしれません。

typeof jQuery.fn.datepicker が function なのにカレンダーが見えない場合は、CSS、z-index、親要素の overflow: hidden も確認します。

$が使えなくなっているケースの直し方

window.$ === window.jQuery が false になる場合、jQuery自体は存在していても$という略記が使えなくなっています。これは、WordPress標準のjQueryが$エイリアスを外す仕様になっているために起きます。

この場合、もう1つ別のjQueryを読み込んで$を復活させるのではなく、すでに読み込まれているWordPress標準のjQueryに、$という別名を結び直す方法を検討します。

add_action( 'wp_enqueue_scripts', function () {
	wp_add_inline_script( 'jquery-core', 'window.$ = window.jQuery;' );
}, 100 );

jquery-core は、WordPress標準のjQuery本体に割り当てられているハンドル名です。この処理を、WordPress標準のjQueryが出力された直後に差し込むことで、$をそのjQueryに結び直します。優先度を通常より遅めにしておくと、他の処理に上書きされにくくなります。

念のため、フォーム側のスクリプトの先頭にも、次のような保険を入れておくとさらに安全です。

if (!window.$ && window.jQuery) { window.$ = window.jQuery; }

$が使えない場合だけ、その場でjQueryから作り直す、という二重の安全策です。

同じ不具合を起こさないためのルール

Datepickerの不具合は、直すことよりも再発させない運用が大事です。

一度直しても、プラグイン更新、テーマ改修、タグ追加で再発することがあります。

公開前と更新後のチェックに組み込んでおきましょう。

公開前チェックにカレンダー操作を入れる

フォームの確認では、送信完了だけでなく、日付選択もチェックします。

最低限、次の項目を確認します。

  • PCで日付欄をクリックできるか
  • スマホで日付欄をタップできるか
  • カレンダーが画面内に表示されるか
  • 日付を選ぶと入力欄に反映されるか
  • 必須項目エラーが正しく出るか
  • 送信完了まで進めるか

「フォームが表示されている」だけでは確認不足です。

ユーザーが申し込みを完了できるところまで見る必要があります。

プラグイン更新後にフォームを再確認する

WordPressでは、プラグイン更新でJavaScriptの読み込み順が変わることがあります。

特にフォーム、予約、カレンダー、ポップアップ、解析タグ系のプラグインを更新した後は注意が必要です。

更新後は、次の3つだけでも確認します。

  1. Consoleにエラーが出ていないか
  2. Datepickerが表示されるか
  3. フォーム送信が完了するか

この3つを確認するだけでも、公開後の大きな取りこぼしを減らせます。

外注時はJavaScriptの読み込み方まで確認する

外注や引き継ぎで多いのが、動けばよいという判断で外部CDNのjQueryを直書きしてしまうケースです。

その場では動いても、別のプラグインや既存機能に影響することがあります。

依頼時や納品時には、次の確認を入れておくと安心です。

  • jQuery本体をHTMLに直書きしていないか
  • WordPress標準の jquery ハンドルを使っているか
  • Datepickerの依存関係を指定しているか
  • 管理画面や他ページのJavaScriptに影響していないか
  • Consoleエラーがない状態で納品されているか

技術的には小さな確認ですが、申し込み導線を守るうえでは大切です。

よくある質問

Q. jQueryが重複しているかどうかは、管理画面だけで分かりますか？

A. 管理画面だけでは分からないことが多いです。実際のページを開き、ブラウザの検証ツールでNetworkやConsoleを確認する必要があります。

Q. datepicker is not a function は何が原因ですか？

A. Datepickerが読み込まれていないか、Datepickerを登録した後に別のjQueryが読み込まれて上書きされた可能性があります。

Q. WordPressでjQueryをCDNから読み込んではいけませんか？

A. すべてが禁止ではありませんが、通常のサイト制作ではWordPress標準の jquery ハンドルを使うほうが安全です。CDNを直書きすると、プラグインとの重複や読み込み順の問題が起きやすくなります。

Q. Datepickerが表示されるのに見た目が崩れる場合は？

A. JavaScriptではなくCSSの問題かもしれません。Datepicker用CSS、親要素の overflow、z-index を確認してください。

Q. 制作者に何を確認してもらえばよいですか？

A. jQuery本体の重複、jquery-ui-datepicker の読み込み、Datepicker初期化コード、Consoleエラー、スマホでの日付選択、送信完了までを確認してもらうのがおすすめです。

jQuery重複でDatepickerが動かない原因と防ぎ方について、この記事では次の内容を整理しました。

  • jQueryを後から読み直すと、Datepickerが登録されていない状態になることがある
  • Datepickerが動かないと、予約・相談フォームの申し込み導線に影響する
  • Console、Network、typeof jQuery.fn.datepicker で原因を切り分けられる
  • WordPressでは wp_enqueue_script() で依存関係を指定する
  • 公開前と更新後に、日付選択から送信完了まで確認する

Datepickerの不具合は、技術的にはJavaScriptの読み込み問題です。

ただし、事業側から見ると、見込み顧客が申し込みを完了できない問題です。

「カレンダーが出ない」で済ませず、フォーム全体の確認フローに組み込んでおきましょう。

Webサイトの不具合確認・改善相談はこちら

フォームの不具合は、見た目では気づきにくいまま申し込み機会を減らしてしまうことがあります。

筆者はフリーランスのWebディレクターとして、WordPressサイトの確認、改善、制作進行を行っています。

問い合わせフォーム、予約フォーム、導線設計、表示崩れの切り分けまで、公開後の機会損失を減らす視点で整理できます。

気になる不具合がある方は、お気軽にご相談ください。

お問い合わせはこちら

RELATED POSTS

Web制作 2026.06.17

WordPressサイト制作でSEOを意識するために最初に決めること
Web制作 2026.06.17

Web制作会社とフリーランスの違いと選び方
Web制作 2026.06.27

コーポレートサイト制作で失敗しやすいポイント5つ
小松 直

小松 直

LP・コーポレートサイト・ECサイトの制作ディレクションを行うフリーランスWebディレクター。Web制作歴5年、ディレクション歴2年。

プロフィールを見る →
← コラム一覧に戻る