はじめに

Web制作の現場では、新規構築だけでなく既存サイトの改修案件を担当することも少なくありません。
特に数年前に制作されたサイトでは、jQueryを利用した実装が数多く残っています。
私自身もWordPressサイトやコーポレートサイトの保守・改修を担当する機会がありますが、jQuery案件は「少し修正するだけ」のつもりが思わぬところで影響が出ることがあります。

そこで今回は、私がjQuery改修案件を担当する際に必ず確認しているポイントをまとめます。
これから古いサイトの保守や改修を担当する方の参考になれば幸いです。

まず最初に確認するのはjQueryのバージョン

私が最初に確認するのは、現在読み込まれているjQueryのバージョンです。
例えば以下のようなケースがあります。

• jQuery 1.12系
• jQuery 2系
• jQuery 3系
• jQuery Migrateあり
• jQuery Migrateなし

同じコードでも、バージョンによって動作が変わることがあります。
Chromeの開発者ツールを開き、Consoleで以下を実行すると確認できます。

jQuery.fn.jquery

例えば、

2.1.3

のように表示されます。

古い案件では1系や2系が使われていることも珍しくありません。
特にjQuery 3系へアップデートする場合は、非推奨メソッドの影響を受けることがあるため注意が必要です。

Consoleエラーを確認する

修正作業を始める前に、必ずブラウザのConsoleを確認します。
意外と多いのが、

• JavaScriptエラーが既に発生している
• プラグインエラーが出ている
• 読み込み順がおかしい

というケースです。

サイト公開中でもエラーが放置されていることがあります。
Consoleエラーがある状態では、本来の改修内容とは関係のない部分で動作不良が発生することがあります。
まずは現状把握を行いましょう。

読み込み順を確認する

jQuery案件では読み込み順も重要です。
例えば以下のような順番になっている場合があります。

<script src="custom.js"></script>
<script src="jquery.min.js"></script>

これではjQueryを使うスクリプトが先に実行されてしまいます。

正しくは、

<script src="jquery.min.js">
</script><script src="custom.js"></script>

です。

また、

• jQuery本体
• jQueryプラグイン
• カスタムJS

の順番になっているかも確認します。

jQueryが二重読み込みされていないか確認する

古いWordPress案件でよく遭遇するのが、jQueryの二重読み込みです。

例えば、

<script src="jquery.min.js"></script>

と

wp_enqueue_script('jquery');

の両方が存在するケースです。

二重読み込みがあると、

• プラグインが動かない
• イベントが消える
• スライダーが停止する

などの不具合につながります。

Networkタブで確認すると見つけやすいです。

イベントの付与方法を確認する

古いサイトでは以下のようなコードをよく見かけます。

$('.btn').click(function(){
});

これ自体は動きますが、Ajaxや動的生成要素との相性が良くありません。

現在では、

$(document).on('click', '.btn', function(){
});

の方が安全なケースもあります。

改修時はイベントの付与方法も確認しています。

プラグイン依存を把握する

jQuery案件で最も怖いのは、見えない依存関係です。

例えば、

• Slick
• Swiper
• Lightbox
• Colorbox
• bxSlider

などが使われている場合があります。

修正箇所が一見関係なさそうでも、実際にはプラグインの初期化処理に影響していることがあります。
私はまずソース内で、

$('.slider')

や

$('.modal')

などを検索して関連処理を確認します。

---

display:none状態で初期化されていないか確認する

スライダーやタブコンテンツでよくあるトラブルです。

例えば、

<div style="display:none;">

の中でSwiperやSlickを初期化すると、

• 幅計算がおかしい
• 高さが崩れる
• 位置がずれる

ことがあります。

改修前に要素の表示状態を確認しておくと原因特定が早くなります。

WordPress特有の問題を疑う

WordPress案件では、

• プラグイン競合
• テーマ依存
• キャッシュ
• 管理画面設定

も確認します。

JavaScriptの問題だと思ったら、実はキャッシュプラグインが原因だったということもあります。
特に以下は要注意です。

• WP Rocket
• LiteSpeed Cache
• Autoptimize

これらはJSの結合や圧縮を行うため、改修後の動作確認が必要です。

いきなりコードを書き換えない

私が特に意識しているのはこれです。

改修依頼を受けると、すぐにコードを修正したくなります。
しかし実際には、

• 現状確認
• 原因調査
• 影響範囲確認

を先に行います。

原因を特定せずに修正すると、

別の箇所を壊してしまうことがあります。

古い案件ほど慎重に進めるようにしています。

Gitやバックアップを取る

小規模な修正でもバックアップは必須です。

実際に、

「ボタン文言だけ変更する予定だった」

にもかかわらず、

• JS圧縮エラー
• レイアウト崩れ
• プラグイン競合

が発生することもあります。

何かあったときに戻せる状態を作っておくことで、安心して作業できます。

私がまず見るチェックリスト

jQuery改修案件では、以下の順番で確認しています。

1. Consoleエラー確認
2. jQueryバージョン確認
3. 読み込み順確認
4. 二重読み込み確認
5. プラグイン依存調査
6. display:noneの有無確認
7. キャッシュ確認
8. バックアップ取得

この流れで確認するだけでも、調査時間をかなり短縮できます。

まとめ

jQuery改修案件では、コードを書く前の調査が非常に重要です。

特に古いサイトでは、

• jQueryのバージョン差異
• プラグイン依存
• 読み込み順
• キャッシュ

など、さまざまな要因が絡みます。

個人的には、

「まずjQueryのバージョンを見る」

という癖を付けるだけでも、多くのトラブルを早期発見できると思っています。

派手なテクニックよりも、現状を正しく把握することが改修案件では何より大切です。

今後も実務で遭遇した事例があれば、随時追記していきたいと思います。

この記事は実際の制作会社ブログでも十分通用する内容ですが、さらにHidetoさんらしさを出すなら、実際に遭遇した「Swiperが動かなくなった」「jQuery 2.1.3のまま放置されていた」「WordPressアップデートで壊れた」などの実例を2〜3個入れると、かなりオリジナリティが強くなります。