はじめに
前編ではプリザンター本体の JavaScript コード(generals/ 配下)に対する jQuery 4.0 の影響を調査しました。結果として、本体コードの改修箇所は 14箇所程度と限定的で、jQuery Migrate も不要という結論でした。
しかし、プリザンターには複数のサードパーティ製 jQuery プラグインが同梱されています。後編ではこれらのプラグインの互換性を調査し、jQuery Migrate の導入判断と移行の全体方針を整理します。
| 記事 | 内容 |
|---|---|
| 前編 | プリザンター本体の JavaScript コードへの影響調査、jQuery Migrate の要否判断 |
| 後編(この記事) | 同梱 jQuery プラグインの互換性調査、jQuery Migrate の導入判断、移行の全体方針 |
バージョン 1.5.1.0 を対象にしています
同梱プラグイン一覧
プリザンターが同梱するプラグインは wwwroot/src/plugins/ 配下に格納されています。
| プラグイン | バージョン | ファイル | メンテナンス状態 |
|---|---|---|---|
| jQuery UI | v1.13.2 | jquery-ui.min.js |
活発 |
| jQuery Validate | v1.21.0 | jquery.validate.min.js |
活発 |
| jquery.datetimepicker | 不明(xdsoft) | jquery.datetimepicker.full.min.js |
停止(flatpickr に置換済) |
| jQuery File Upload | 不明(blueimp) |
jquery-file-upload/*.js(8ファイル + vendor) |
アーカイブ済 |
| jQuery MultiSelect | 不明(eric hynds) | jquery.multiselect*.min.js |
停止 |
| Lightbox | v2.11.4 | lightbox.min.js |
活発 |
ファイル形態も異なっており、圧縮済み(min.js)のものと非圧縮のものが混在しています。
圧縮済みファイルでは jQuery がエイリアス変数に代入されている場合があります(jQuery UI → V、jQuery Validate → a、datetimepicker → L など)。調査時にはこれらのエイリアスも考慮しています。
各プラグインの jQuery 4.0 互換性
1. jQuery UI v1.13.2
| 非推奨 API | 検出数 | 備考 |
|---|---|---|
event.which |
3 | キーボード/マウスイベント判定 |
| その他 | 0 |
$.isFunction 等は使用なし |
jQuery UI 1.13.x では $.isFunction() から typeof への移行など、モダナイズが既に実施されています。event.which の 3箇所も、ブラウザネイティブの KeyboardEvent.which として動作するため、直ちに壊れることはありません。
ただし、jQuery UI 1.13.2 は公式には jQuery 4.0 をサポートしていません。jQuery 4.0 を公式サポートする jQuery UI 1.14.x(2024年リリース)へのアップデートが推奨されます。
互換性リスク: 中 — バージョンアップで解消可能
2. jQuery Validate v1.21.0
| 非推奨 API | 検出数 | 備考 |
|---|---|---|
event.which |
1 |
onkeyup ハンドラ内 |
| その他 | 0 |
Array.isArray() を使用済み |
v1.21.0 では $.isArray() → Array.isArray()、$.trim() → ネイティブ trim() への移行が完了しており、モダナイズ対応済みです。event.which も1箇所のみで、実質的な影響はほぼありません。
互換性リスク: 低 — ほぼそのまま動作
3. jquery.datetimepicker(xdsoft)
このプラグインは v1.4.18.0(2025年5月)で flatpickr に置き換え済み です。デフォルト設定(UseOldDatepicker = false + テーマ v2.0 以上)では flatpickr が使用されます。旧実装はレガシーフォールバックとして残されているため、影響分析は参考情報として記載します。
| 非推奨 API | 検出数 | 用途 |
|---|---|---|
$.isFunction() |
15 | コールバック関数の存在チェック全般 |
$.isArray() |
10 | 配列引数のバリデーション |
$.trim() |
5 | 入力値のトリミング |
$.type() |
3 | 型判定による分岐ロジック |
event.which |
2 | マウスホイール/キーボードイベント |
event.fixHooks |
2 | mousewheel イベントの正規化パッチ |
| 合計 | 37 |
非推奨 API の使用数は全プラグイン中最多の 37箇所 です。$.isFunction() の 15箇所はすべてコールバックオプション(onShow, onClose, onSelectDate 等)の呼び出し前チェックに使用されており、jQuery 4.0 では TypeError が発生します。
さらに、event.fixHooks は jQuery 3.3 で既に非推奨化された低レベル API で、mousewheel プラグイン部分で使用されています。jQuery 4.0 では完全に削除されます。
このプラグインは 開発が停止 しており、jQuery 4.0 対応バージョンは存在しません。
ただし、プリザンターとしては既に flatpickr への移行が完了しているため、新規環境ではこのリスクの影響を受けません。レガシー設定(UseOldDatepicker = true)で運用している環境のみ注意が必要です。
切り替えの仕組みは C# コード(HtmlControls.cs)で制御されています。
return !Parameters.General.UseOldDatepicker && context.ThemeVersionForCss() >= 2.0M ?
hb.DateField(...) // 新: flatpickr(<date-field> Web Component)
: hb.Div(...) // 旧: jquery.datetimepicker(.datepicker クラス)
互換性リスクとしては、デフォルト設定では 実質なし(flatpickr 使用時)、レガシー設定では 高 と判断しました。
4. jQuery File Upload(blueimp)
| ファイル | 非推奨 API | 検出数 |
|---|---|---|
jquery.fileupload.js |
$.type() |
9 |
jquery.fileupload.js |
$.isArray() |
2 |
jquery.fileupload-validate.js |
$.type() |
2 |
jquery.fileupload-process.js |
$.type() |
1 |
jquery.fileupload-image.js |
$.type() |
1 |
jquery.fileupload-audio.js |
$.type() |
1 |
jquery.fileupload-video.js |
$.type() |
1 |
jquery.fileupload-ui.js |
$.isArray() |
1 |
jquery.iframe-transport.js |
$.isArray() |
1 |
| 合計 | 19 |
$.type() が 14箇所、$.isArray() が 4箇所で使用されており、jQuery 4.0 では動作しません。$.type() は主にオプション値の型判定($.type(option) === 'string' 等)に使用されています。
blueimp/jQuery-File-Upload の GitHub リポジトリは 2023年12月にアーカイブ済みで、jQuery 4.0 対応版は確認できません。ただし、ファイルが非圧縮で格納されているため、パッチの適用は比較的容易です。
互換性リスク: 高 — ただしパッチは容易
5. jQuery MultiSelect(Eric Hynds)
| ファイル | 非推奨 API | 検出数 |
|---|---|---|
jquery.multiselect.min.js |
event.which |
11 |
jquery.multiselect.filter.min.js |
event.which |
4 |
| 合計 | 15 |
使用している非推奨 API は event.which のみです。キーボードナビゲーション(矢印キー、Enter、Esc 等)の判定に使われていますが、event.which はブラウザのネイティブ KeyboardEvent.which プロパティとして存在するため、モダンブラウザでは直ちに動作しなくなることはないと考えられます。
このプラグインもメンテナンスが停止しています。
互換性リスク: 中 — event.which のみのため影響は限定的
6. Lightbox v2.11.4
| 非推奨 API | 検出数 | 用途 |
|---|---|---|
event.which |
3 | キーボードイベント(Esc / 矢印キー) |
| その他 | 0 | — |
event.which のみの使用で、MultiSelect と同様に実質的な影響は小さいです。Lightbox2 は GitHub で継続的にメンテナンスされているため、最新版への更新で対応が期待できます。
互換性リスクとしては 低 と判断しました。
プラグイン影響度の全体像
非推奨 API 別の使用状況
プラグイン全体で 78箇所 の非推奨 API 使用が見つかりました。
| 非推奨 API | jQuery UI | Validate | datetimepicker | File Upload | MultiSelect | Lightbox | 合計 |
|---|---|---|---|---|---|---|---|
$.type() |
0 | 0 | 3 | 15 | 0 | 0 | 18 |
$.isFunction() |
0 | 0 | 15 | 0 | 0 | 0 | 15 |
$.isArray() |
0 | 0 | 10 | 4 | 0 | 0 | 14 |
$.trim() |
0 | 0 | 5 | 0 | 0 | 0 | 5 |
event.which |
3 | 1 | 2 | 0 | 15 | 3 | 24 |
event.fixHooks |
0 | 0 | 2 | 0 | 0 | 0 | 2 |
| 合計 | 3 | 1 | 37 | 19 | 15 | 3 | 78 |
リスク別整理
| リスク | プラグイン | 非推奨 API 数 | jQuery 4.0 対応版 | メンテナンス | 備考 |
|---|---|---|---|---|---|
| 高 | jQuery File Upload | 19 | なし | アーカイブ | |
| 中 | jQuery UI | 3 | v1.14.x で対応 | 活発 | |
| 中 | jQuery MultiSelect | 15 | なし | 停止 | |
| 低 | Lightbox | 3 | 未確認 | 活発 | |
| 低 | jQuery Validate | 1 | ほぼ互換 | 活発 | |
| — | jquery.datetimepicker | 37 | なし | 停止 | flatpickr に置換済 |
jQuery Migrate を使うべきか?
ここまでの調査結果を総合して、jQuery Migrate の導入を判断します。
jQuery Migrate とは
jQuery Migrate は、jQuery のメジャーバージョンアップ時に削除された API のポリフィルを提供するプラグインです。削除された $.isFunction() や $.type() を一時的に復活させ、既存コードが動作するようにしてくれます。同時にコンソールに警告を出力し、修正が必要な箇所を教えてくれます。
判断:プラグイン向けに最小限で導入
| 対象 | jQuery Migrate | 理由 |
|---|---|---|
本体コード(generals/) |
不要 | 削除済み API の使用がゼロ。高リスク箇所も 14箇所の直接修正で対応可能 |
| プラグイン | 一時的に導入 | File Upload(19箇所)のために必要。datetimepicker は flatpickr に置換済みのためデフォルト設定では影響なし |
本体コードは jQuery Migrate に頼らず直接修正し、プラグイン向けに jQuery Migrate を一時的な互換策として導入する方針が推奨されます。
jQuery Migrate はあくまで 一時的な橋渡し です。最終的にはすべてのプラグインを修正・更新し、jQuery Migrate を除去する必要があります。
移行の全体方針
調査結果を踏まえた、jQuery 3→4 移行の全体方針を整理します。
対応フロー
具体的なアクションプラン
Phase 1:本体コードの直接修正
前編で特定した本体コードの影響箇所を修正します。jQuery Migrate は使わず直接修正します。
| 対象 | 箇所数 | 修正内容 | 難易度 |
|---|---|---|---|
event.which → event.key
|
3 | 機械的な置換 | 簡単 |
.css() 数値渡し → + 'px'
|
11+ | 機械的な置換 | 簡単 |
.bind() → .on()
|
1 | 機械的な置換 | 簡単 |
$.ajaxSetup → 個別オプション |
3 | リファクタリング | やや複雑 |
event.keyCode → event.key
|
3 | 機械的な置換(推奨) | 簡単 |
Phase 2:対応版があるプラグインの更新
| プラグイン | アクション | 工数 |
|---|---|---|
| jQuery UI 1.13.2 → 1.14.x | バージョンアップ | 小 |
| jQuery Validate | 最新版で jQuery 4.0 互換確認 | 小 |
| Lightbox | 最新版で jQuery 4.0 互換確認 | 小 |
Phase 3:メンテ停止プラグインの対応
ここが最も工数がかかる部分です。
| 優先度 | プラグイン | 推奨アクション | 工数 |
|---|---|---|---|
| P0 | jQuery File Upload | フォークして 19箇所パッチ(非圧縮のため修正容易) | 中 |
| P1 | jQuery MultiSelect |
event.which → event.key へパッチ(15箇所) |
小~中 |
| — | jquery.datetimepicker | 対応不要(flatpickr に置換済)。レガシー設定の場合のみフォーク + 37箇所パッチ | — |
Phase 4:jQuery Migrate の除去
すべてのプラグインの修正・更新が完了したら、jQuery Migrate を除去します。
サーバーサイドの更新
JavaScript の修正に加えて、C# コードの変更も必要です。
// jQuery ファイルパスの更新
"assets/plugins/jquery-3.6.0.min.js"
// ↓
"assets/plugins/jquery-4.0.0.min.js"
// jQuery Migrate を一時的に追加する場合
"assets/plugins/jquery-migrate-4.0.0.min.js"
各非推奨 API の具体的な修正パターン
プラグインをフォーク/パッチする場合に必要となる修正パターンを整理します。
$.isFunction() → typeof
// 修正前
if ($.isFunction(callback)) { callback(); }
// 修正後
if (typeof callback === 'function') { callback(); }
$.isArray() → Array.isArray()
// 修正前
if ($.isArray(items)) { ... }
// 修正後
if (Array.isArray(items)) { ... }
$.type() → typeof / カスタム関数
// 修正前
if ($.type(option) === 'string') { ... }
// 修正後
if (typeof option === 'string') { ... }
$.type() はより細かい型判定('array', 'date', 'regexp' 等)を返すため、用途に応じて Array.isArray() や instanceof との組み合わせが必要な場合もあります。
$.trim() → String.prototype.trim()
// 修正前
var value = $.trim(input);
// 修正後
var value = input.trim();
event.which → event.key
// 修正前
if (e.which === 13) { /* Enter */ }
if (e.which === 27) { /* Esc */ }
// 修正後
if (e.key === 'Enter') { /* Enter */ }
if (e.key === 'Escape') { /* Esc */ }
event.fixHooks → jQuery.event.addProp()
// 修正前(datetimepicker の mousewheel 部分)
$.event.fixHooks[name] = { props: ['detail', 'deltaX', ...] };
// 修正後
jQuery.event.addProp('detail');
jQuery.event.addProp('deltaX');
移行影響の全体サマリー
本体コードとプラグインの影響を合わせた全体像です。
| 領域 | 非推奨 API 使用 | 高リスク箇所 | jQuery Migrate 要否 |
|---|---|---|---|
本体コード(generals/) |
0件 | 14箇所(.css + event.which 等) |
不要 |
modules/(TypeScript) |
0件 | 0箇所 | 不要 |
| プラグイン(5個、datetimepicker 除く) | 41件 | 19件(File Upload 19) | 一時的に導入 |
| datetimepicker(flatpickr 置換済) | 37件 | — | デフォルトでは不要 |
| 合計 | 78件 | 33箇所 | — |
まとめ
前後編を通して、プリザンターの jQuery 3→4 移行影響を調査しました。
- 本体コードは非推奨 API を使用しておらず、改修箇所は 14箇所程度と限定的
- jquery.datetimepicker は v1.4.18.0 で flatpickr に置換済み のため、デフォルト設定では影響なし
- 最大のブロッカーは jQuery File Upload(19箇所の非推奨 API + リポジトリアーカイブ済)。ただし非圧縮ファイルのためパッチは容易
- jQuery UI は v1.14.x へのアップデートで対応可能
- jQuery Migrate は本体コードには不要、プラグイン向けに一時的に導入 が推奨
- 移行は4段階(本体修正 → 対応版更新 → メンテ停止プラグイン対応 → Migrate 除去)で進める
当初は jquery.datetimepicker(37箇所の非推奨 API)が最大のブロッカーと思われましたが、プリザンターでは v1.4.18.0 で既に flatpickr への移行が完了しており、デフォルト設定ではこのリスクを回避できます。実質的な課題は jQuery File Upload(19箇所)と jQuery MultiSelect(15箇所)のパッチ対応に集約されます。開発が停止しているプラグインについては、フォーク+パッチの維持コストと代替ライブラリへの移行コストを天秤にかけて判断する必要があるでしょう。