jQuery 3 → 4 移行の影響
プリザンターのフロントエンドを jQuery 4.0 に移行した場合の影響を、本体コードと同梱プラグインに分けて調査した結果です。 結論として、本体コードは削除済み API を使っておらず、改修は 14 箇所程度の機械的な置換で済むため jQuery Migrate は不要です。一方、同梱プラグインは合計 78 箇所で削除・非推奨 API を使っており、特に jQuery File Upload（19 箇所、リポジトリはアーカイブ済み）が最大のブロッカーです。プラグイン向けには jQuery Migrate を一時的に導入する方針が推奨されます。
対象バージョン
バージョン 1.5.1.0 を対象にした調査です。スクリプトやプラグインのファイル数・箇所数はこのバージョンでの値です。
プリザンターの jQuery 依存状況
jQuery のバージョン
フロントエンドには 2 つの jQuery 参照があります。
| 参照元 | バージョン | 用途 |
|---|---|---|
plugins/jquery-3.6.0.min.js | 3.6.0 | レガシー側（静的ファイル直接参照） |
package.json の dependencies | 3.7.1 | PleasanterFrontend（npm + Vite ビルド） |
レガシー側では、C# コード（HtmlScripts.cs）に jquery-3.6.0.min.js のファイル名がハードコードされています。確認したソースでも同じです（HtmlScripts.cs、package.json の jQuery も 3.7.1）。
// jQuery 3.6.0 のファイル名がハードコードされている
"assets/plugins/jquery-3.6.0.min.js"PleasanterFrontend では、Vite ビルドにより node_modules の jQuery 3.7.1 が vendor チャンクにバンドルされています。
同梱 jQuery プラグイン
すべて wwwroot/src/plugins/ 配下に格納されています。
| プラグイン | バージョン | 用途 | メンテナンス状態・備考 |
|---|---|---|---|
| jQuery UI | v1.13.2 | ソート、ドラッグ、タブ、メニューなど | 活発 |
| jQuery Validate | v1.21.0 | フォームバリデーション | 活発 |
| jquery.datetimepicker | 不明（xdsoft） | 日時ピッカー | 停止（flatpickr に置換済） |
| jQuery File Upload | 不明（blueimp） | ファイルアップロード | アーカイブ済 |
| jQuery MultiSelect | 不明（eric hynds） | 複数選択 UI | 停止 |
| Lightbox | v2.11.4 | 画像表示 | 活発 |
| flatpickr | v4.6.13 | 日時ピッカー（新） | v1.4.18.0 で導入 |
datetimepicker は flatpickr に置換済み
jquery.datetimepicker は v1.4.18.0（2025 年 5 月のコミット）で flatpickr に置き換えられています。デフォルト設定（UseOldDatepicker = false かつテーマ v2.0 以上）では flatpickr が使われ、旧実装はレガシーフォールバックとして残されています。
スクリプトの構成
| ディレクトリ | ファイル数 | 言語 | jQuery 依存度 |
|---|---|---|---|
generals/ | 112 | JavaScript | 高（jQuery ベース） |
generals/modal/ | 2 | TypeScript | 低（$p.modal 参照のみ） |
generals/grid-container/ | 1 | TypeScript | なし（vanilla DOM + Web Component） |
modules/ | 15 | TypeScript | 低（橋渡し程度） |
generals/ 配下が jQuery を中心としたレガシーコード、modules/ 配下が vanilla DOM API と Web Components によるモダンなコードです。
jQuery 4.0 の主な破壊的変更
プリザンターに影響しそうなものを抜粋します。
削除された非推奨 API
| 削除 API | 代替手段 |
|---|---|
$.isArray() | Array.isArray() |
$.parseJSON() | JSON.parse() |
$.trim() | String.prototype.trim() |
$.type() | typeof / instanceof |
$.now() | Date.now() |
$.isFunction() | typeof x === 'function' |
$.isNumeric() | 自前実装 |
$.isWindow() | 自前実装 |
$.camelCase() | 自前実装 |
$.nodeName() | element.nodeName.toLowerCase() |
その他の変更
| 分類 | 変更点 | 影響 |
|---|---|---|
| イベント | event.which の shim 削除 | jQuery が keyCode / charCode から自動合成しなくなる |
| イベント | event.fixHooks 削除 | イベント正規化の低レベル API が廃止 |
| イベント | focusin / focusout 発火順序変更 | ネイティブの focus / blur との順序が変わる |
| CSS | .css() 数値渡し時の px 自動付与ルール変更 | $.cssNumber リストの変更・削除 |
| AJAX | $.ajaxSetup 非推奨の強化 | 将来的に削除される可能性 |
| AJAX | JSONP サポートの削除 | dataType: 'jsonp' が使えなくなる |
| ビルド | Slim ビルドの廃止 | 通常ビルドのみ提供 |
| その他 | .bind() 削除 | .on() に移行が必要 |
| その他 | jQuery プロトタイプの配列メソッド削除 | .push() / .sort() / .splice() が jQuery オブジェクトで使えなくなる |
| その他 | toggleClass(boolean) 削除 | クラス名の指定が必須に |
本体コード（generals/）への影響
削除済み非推奨 API は未使用
jQuery 4.0 で削除される非推奨 API（$.isArray / $.parseJSON / $.trim / $.type / $.now / $.isFunction / $.isWindow / $.camelCase / $.nodeName / $.cssNumber / $.cssProps）は、本体コードではいずれも 0 件でした。ネイティブ JavaScript の標準メソッドで書かれています。
影響箇所と改修内容
| リスク | 対象 | ファイル数 | 箇所数 | 改修内容 |
|---|---|---|---|---|
| 高 | event.which 使用 | 2 | 3 | event.key === 'Enter' に置換 |
| 高 | .css() 数値渡し | 5 | 11+ | 数値に + 'px' を付与 |
| 中 | $.ajaxSetup 使用 | 2 | 3 | 個別の $.ajax オプションに移行 |
| 中 | .bind() 使用 | 1 | 1 | .on() に置換 |
| 中 | $.ajaxSettings.xhr() 参照 | 1 | 1 | 標準の XMLHttpRequest を使用 |
| 中 | async: false（同期 AJAX） | 1 | 1 | Promise ベースの非同期処理に移行 |
| 低 | focusin イベント順序変更 | 1 | 1 | テストで確認 |
| 低 | event.keyCode 使用 | 3 | 3 | event.key への移行を推奨（jQuery 4.0 でも動作する） |
| 低 | $(document).ajaxComplete() | 1 | 1 | テストで確認 |
event.which（高リスク）
generals/searchevents.js と generals/keyevents.js で使われています。e.which === 13 を e.key === 'Enter' に置き換えます。
確認したソースでは、これに加えて generals/crosstabdrilldown.js でも e.which !== 13 && e.which !== 32（Enter / Space 以外）の判定に使われており、3 ファイル 4 箇所になっています（crosstabdrilldown.js）。こちらは e.key !== 'Enter' && e.key !== ' ' に置き換えます。
// 修正前
if (e.which === 13) {
// Enter キーでフォームのボタン発火
}
return e.which !== 13;
// 修正後
if (e.key === 'Enter') {
// Enter キーでフォームのボタン発火
}
return e.key !== 'Enter';event.keyCode について
event.keyCode は jQuery ではなくブラウザのネイティブ API です。jQuery 4.0 で shim が削除されるのは which のみなので、keyCode は引き続き動作します。ただし event.key への移行が望ましいです。
.css() の数値渡し（高リスク）
jQuery 3.x では .css('top', 100) のように数値を渡すと "100px" に自動変換されましたが、jQuery 4.0 ではこのルールが変わるため、長さプロパティには明示的に px を付ける必要があります。z-index のような単位を持たないプロパティは安全です。
| 区分 | ファイル | プロパティ | 修正方針 |
|---|---|---|---|
| 安全 | tenants.js / bulkupdate.js | z-index（110） | 不要 |
| 安全 | kamban.js | z-index（2） | 不要 |
| 要修正 | responsive.js | bottom | parseInt(...) + 'px' |
| 要修正 | viewfilterslabelevents.js | top, left | offset().top + ... + 'px' |
| 要修正 | jqueryui.js | top, left | offset().top + ... + 'px' |
| 要修正 | gridevents.js | top, left, width, marginTop | 各値に + 'px' |
| 要修正 | gantt.js | height | 計算結果に + 'px' |
// 修正前
$('#Menu').css('top', $header.offset().top + $header.outerHeight());
$('#Menu').css('left', $header.offset().left);
// 修正後
$('#Menu').css('top', $header.offset().top + $header.outerHeight() + 'px');
$('#Menu').css('left', $header.offset().left + 'px');_dispatch.js の動的な .css()
_dispatch.js には .css(json.Name, json.Value) のように、サーバーサイドから動的にプロパティ名と値を受け取るパターンがあります。レスポンスに px 付きの文字列が含まれていれば安全ですが、数値だけの場合はリスクがあります。
$.ajaxSetup / .bind()（中リスク）
$.ajaxSetup は CSRF トークンの設定（_ajax.js）と同期/非同期の切り替え（_api.js）に使われています。将来的には個別の $.ajax オプションへの移行が推奨されます。
// CSRF トークン設定
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('RequestVerificationToken', token);
}
});// 同期/非同期切替
$.ajaxSetup({ async: args.async });.bind() は confirmevents.js の 1 箇所です。
// 修正前
$(window).bind('beforeunload', function () { ... });
// 修正後
$(window).on('beforeunload', function () { ... });modules/（TypeScript）は影響なし
modules/ 配下は主に vanilla DOM API と Web Components で構成され、jQuery の使用は $p.set($(element), value) や $p.display() などプリザンター独自のグローバル API への橋渡しに限られます。jQuery 4.0 の破壊的変更に該当するパターンは検出されませんでした。
同梱プラグインへの影響
圧縮済みファイルのエイリアス
圧縮済みファイルでは jQuery がエイリアス変数に代入されている場合があります（jQuery UI → V、jQuery Validate → a、datetimepicker → L など）。調査ではこれらのエイリアスも考慮しています。
非推奨 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 |
プラグイン別の評価
| リスク | プラグイン | jQuery 4.0 対応版 | 評価 |
|---|---|---|---|
| 高 | jQuery File Upload | なし | $.type() / $.isArray() が動作しない。リポジトリは 2023 年 12 月にアーカイブ済み。ただし非圧縮で格納されているためパッチは容易 |
| 中 | jQuery UI 1.13.2 | v1.14.x で対応 | event.which 3 箇所はネイティブの KeyboardEvent.which として動作するため直ちには壊れない。1.13.2 は公式には jQuery 4.0 未サポートのため、1.14.x へのアップデートを推奨 |
| 中 | jQuery MultiSelect | なし | 使用しているのは event.which のみ（キーボードナビゲーション）。メンテナンス停止 |
| 低 | Lightbox 2.11.4 | 不明 | event.which 3 箇所のみ（Esc / 矢印キー）。継続的にメンテナンスされている。jQuery 4.0 対応版の有無は Lightbox 側の情報であり、プリザンターのソースからは判断できない |
| 低 | jQuery Validate 1.21.0 | ほぼ互換 | event.which 1 箇所（onkeyup ハンドラ内）のみ。Array.isArray() / ネイティブ trim() への移行は完了済み |
| — | jquery.datetimepicker | なし | 37 箇所で全プラグイン中最多。$.isFunction() 15 箇所（コールバックの存在チェック）は jQuery 4.0 で TypeError になる。ただし flatpickr に置換済みのため、影響を受けるのはレガシー設定（UseOldDatepicker = true）の環境のみ |
jQuery File Upload のファイル別内訳は次のとおりです。
| ファイル | 非推奨 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 |
datetimepicker の新旧切り替えは HtmlControls.cs で制御されています。
return !Parameters.General.UseOldDatepicker && context.ThemeVersionForCss() >= 2.0M ?
hb.DateField(...) // 新: flatpickr（<date-field> Web Component）
: hb.Div(...) // 旧: jquery.datetimepicker（.datepicker クラス）jQuery Migrate の要否
jQuery Migrate は、削除された $.isFunction() や $.type() などを一時的に復活させるポリフィルを提供し、コンソールに修正が必要な箇所の警告を出すプラグインです。
| 対象 | jQuery Migrate | 理由 |
|---|---|---|
本体コード（generals/） | 不要 | 削除済み API の使用がゼロ。高リスク箇所も 14 箇所の直接修正で対応可能。Migrate 自体が不要なポリフィルのオーバーヘッドになる |
| プラグイン | 一時的に導入 | File Upload（19 箇所）のために必要。datetimepicker はデフォルト設定では影響なし |
WARNING
jQuery Migrate はあくまで一時的な橋渡しです。最終的にはすべてのプラグインを修正・更新し、jQuery Migrate を除去する必要があります。
移行方針
対応フロー
図を読み込み中…
4 段階の進め方
| Phase | 内容 | 主な作業 |
|---|---|---|
| 1 | 本体コードの直接修正（Migrate は使わない） | event.which → event.key（3）、.css() に + 'px'（11+）、.bind() → .on()（1）、$.ajaxSetup → 個別オプション（3、やや複雑）、event.keyCode → event.key（3、推奨） |
| 2 | 対応版があるプラグインの更新 | jQuery UI 1.13.2 → 1.14.x、jQuery Validate と Lightbox は最新版で互換確認 |
| 3 | メンテ停止プラグインの対応 | P0: jQuery File Upload をフォークして 19 箇所パッチ／P1: jQuery MultiSelect の event.which → event.key（15 箇所）／datetimepicker はレガシー設定の場合のみフォーク + 37 箇所パッチ |
| 4 | jQuery Migrate の除去 | すべてのプラグインの修正・更新完了後に除去 |
サーバーサイドの変更
JavaScript に加えて C# コード側のファイルパスも更新が必要です。jQuery 4.0 では Slim ビルドが廃止されているため、Slim ビルドを使っている場合は通常ビルドへの切り替えも必要です。
// 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') { ... }
// $.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 */ }$.type() は 'array' / 'date' / 'regexp' などより細かい型を返すため、用途によっては Array.isArray() や instanceof との組み合わせが必要です。
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） | 一時的に導入 |
| datetimepicker（flatpickr 置換済） | 37 件 | — | デフォルトでは不要 |
| 合計 | 78 件 | 33 箇所 | — |