jQueryが読み込まれるまで待機して実行する

2022.07.31 篠原隆司

新規で作成するときは気にすることが無くなってきましたが、古いWebサイトの改修のときに使いたくなる裏技です。

前提条件

メンバーの最低限の知識として、HTMLとjavascriptの両方を分かっていることが前提となります。

分業が進んでいて「HTML + CSS 担当」「javascript担当」みたいに分かれている場合は怒られると思います。

ですが、小規模なサイトや趣味サイトの場合、分業は足かせになります。
簡単な例でいうと単純に費用が増えます。
もちろん大規模になってくると逆転しますが、結局のところケースバイケースです。

どっちが良い / 悪い、じゃなく、そのときに適したほうを選択すべきです。

HTMLに続けてjavascriptを記述する

ということで、先に全体を見てみましょう。

<!-- 途中省略 -->

<!-- このフォームが追加になった -->
<form id="form-main" action="?" method="post">
    <p>
        データ更新を行います。<br>
        よければボタンを押してください。
    </p>
    <p>
        <input disabled type="submit" name="submit" value="データ更新を行う" />
    </p>
    <input type="hidden" name="action" value="data-update" />
</form>
<!-- ▲ HTMLに続けてjavascriptを続ける -->
<script>
    (function(){
        const wait_jquery = function()
        {
            // jQuery が読み込まれるのを待つ
            if (typeof jQuery === 'undefined') {
                setTimeout(wait_jquery, 50);
                return;
            }

            // フォーム
            const $form = jQuery('#form-main');

            // disabled を解く
            $form.find('input[name="submit"]').each(function(){
                this.disabled = false;
            });

            // ボタン押下で、ajaxで送信させる
            $form.submit(function(){
                jQuery.ajax({
                    // パラメータ省略
                });
                return false;
            });
        };

        wait_jquery();
    })();
</script>

<!-- 途中省略 -->

<!-- script は下部にまとめるスタイル -->
<script src='https://code.jquery.com/jquery-3.6.0.min.js?ver=3.6.0'></script>
</body>
</html>

古いWebサイトの改修であるあるなパターンの１つです。

既にできているページがあって、途中に何かを挿入するケースです。
ここでは、フォームを使って更新ボタンを追加しています。

この更新ボタンは、単純に Submit するのではありません。

ボタンクリックを検知したら、ajax で送信させたいってパターンです。

解説

大事なところにはコメントも記していますし見たままなので説明は不要かと思いますので簡単に。

</body> の直前に jQuery を読み込んでいるので、最初の <script> の時点では jQuery はundefined でエラーとなります。

なので、次のように wait_jquery を setTimeout させて見つかるまで再帰させます。

(function(){
    const wait_jquery = function()
    {
        // jQuery が読み込まれるのを待つ
        if (typeof jQuery === 'undefined') {
            setTimeout(wait_jquery, 50);
            return;
        }

        // jQueryが読み込まれたあとの処理
    };

    wait_jquery();
})();

jQuery が読み込まれたら undefined じゃなくなるので、後ろの処理が実行されます。

ここで、本当にしたかったことを行います。

重要なポイント

ということで、セオリー通りで行くと、HTMLを追加するところまでは良いとして、<script> ～ </script> は良くない見本ですよね。

javascript は〇〇.js というファイルを作り、そちらに記述するべきです。

ですが、今回は分かっていてセオリーを無視するパターンです。

なぜか？

再利用する可能性が低いため

まず第１に再利用する可能性が低いです。
仮に再利用するケースが発生したら、その時に関数化するなり再利用可能な形に作り変えたら良いです。

変に再利用可能な形にしてしまうと、そもそも再利用するケースなんてなかった、とか、不要になったときに他に使っているものがないか確認するコストが発生します。

誰がどうみてみ再利用してない、って簡単に判断できるなら、変なこと気にせずさくっと消すだけですみます。

長く使わない場合もある

お正月シーズン、ゴールデンウィーク特集、キャンペーンのように一定期間だけのために制作・改修することがあります。

長く使わないことが分かっているときに、長期間運用が前提の作り方は正しいとは言えない場合もあります。

1カ所にまとめるため

次に、関連のある部品はできるだけ近くに置いておくほうが後から読んだ時に理解しやすいです。

理解しやすいということは、時間が掛からない、間違いが起きにくい、といったことに繋がります。

費用削減のため

そして費用削減ですが、上にあげたとおりで、つまりは色々な労力・時間を短縮できることになるので、費用に反映されてきます。

長く運用しているWebサイトのメンテナンス承ります

ということで宣伝です。

弊社ではPHP・MySQL・javascriptを使ったWebサイトを得意としています。
これらは2005年頃から触り続けてきていることもあり得意中の得意です。

大幅なリニューアルではなく、現在の状態を生かしつつ効果のある施策を加えていくのが賢明なやり方です。

特にプログラム開発が必要になるようなカスタマイズは遠慮なくご相談ください。

フロントの見た目に関わるところはデザイン会社が担当、裏方の技術部分を弊社が担当するケースもあり柔軟に対応することができます。

メールやSNSなどのメッセージで簡単に連絡いただいたあとで、電話していただけると確実です。（お問い合わせ）

1つ上の階層のページ