管理画面から jQuery UI への依存を解消する
- Dominant language
- PHP
- Stars
- 788
- Forks
- 719
- Avg merge
- 4d 4h
- Merged PRs (30d)
- 39
Description
## 概要
管理画面のアセット (`html/bundle/admin.bundle.js`) が依存している jQuery UI を撤去したい。
動機はバンドルサイズの削減ではなく、**EOL・脆弱性対応の観点**です。jQuery UI は [2021 年以降メンテナンスモード](https://blog.jqueryui.com/2024/04/plans-for-jquery-ui-1-14-dropping-support-for-ui-1-12-in-the-download-builder/)で、セキュリティ修正と jQuery 新版への追随のみが行われ、新規の機能開発は行われていません。[1.14.0 のリリース](https://blog.jqueryui.com/2024/08/jquery-ui-1-14-0-released/)にあたっては 1.13.x 系のサポートが終了し、`ui/core.js` を含む複数ファイルが削除されました (この破壊的変更で #6921 のビルドが実際に落ちています)。将来的に完全な EOL を迎えた場合、脆弱性が公表されても上流の修正が期待できず、EC-CUBE 側で抱え込むことになります。
## 現状の依存範囲
`html/template/admin/assets/js/bundle.js` は jQuery UI から 6 モジュールを読み込んでいますが、実際に呼び出されているのは以下の通りです (4.4 ブランチで調査)。
| ウィジェット | 呼び出し箇所 | 備考 |
|---|---|---|
| `sortable` | 管理画面 twig 8 ファイル + `html/template/admin/assets/js/layout_design.js` の計 9 箇所 | 実質的な依存の本体 |
| `resizable` | `Content/{css,js,page_edit,block_edit}.twig` / `Setting/Shop/mail.twig` の計 6 箇所 (Ace エディタのリサイズ) | |
| `tooltip` | **利用なし (デッドコード)** | Bootstrap 5.3 が `defineJQueryPlugin` により `$.fn.tooltip` を DOMContentLoaded 時に上書きするため、jQuery UI 版は読み込まれるだけで使われていない。テンプレート側の `tooltip('_fixTitle')` 等も Bootstrap の API 前提 |
| `position` / `widget` / `mouse` | 上記ウィジェットの内部依存のみ | 直接の利用なし |
`$.ui.keyCode` / `disableSelection` / `:tabbable` / `:focusable` といった `ui/core.js` 由来のユーティリティを、管理画面のテンプレート・JS から直接呼んでいる箇所はありませんでした。
参考値として、jQuery UI の読み込みを全て外して `npm run build` した場合、`admin.bundle.js` は 1,340KB → 1,164KB (-176KB) になります。
## 進め方 (案)
BC への影響度が異なるため、3 段階に分けたいと考えています。
1. **`tooltip` の読み込み削除** — 誰にも使われていないため影響なし。
2. **`resizable` の撤去** — `$("#editor").resizable({resize: () => editor.resize()})` は CSS の `resize: vertical` と `ResizeObserver` で代替可能。追加ライブラリ不要。twig 内の `.ui-resizable-se` のスタイル指定も不要になる。
3. **`sortable` の代替 (要議論)** — [SortableJS](https://github.com/SortableJS/Sortable) への置換を想定。単一リストの並べ替え (`items` + `update`) はほぼ機械的に対応するが、`layout_design.js` は複数コンテナ間の移動 (`connectWith`)・`placeholder`・`ui.sender` 判定を使っており、`group` / `ghostClass` / `onAdd` への設計の読み替えが必要。
## 論点: プラグイン互換
3 の実施にあたっては後方互換の判断が必要です。
- `admin.bundle.js` はグローバルに `$.fn.sortable` を生やしているため、これに依存しているプラグインが存在し得る。
- `Content/layout.twig` は `ui-sortable` クラスをマークアップに直接記述しており、`updateUpDown()` もこのクラスを親セレクタとして参照している。事実上の公開インターフェイスになっている可能性がある。
撤去する場合、どのバージョンで、どのような告知とともに行うかを決める必要があります。
## 補足
- 直近の #6921 (jquery-ui 1.13.3 → 1.14.2) は、1.14 の破壊的変更への追随として `require('jquery-ui/ui/core')` の削除のみを行っており、本 issue のスコープとは切り離しています。
- 動作確認では E2E の `admin-contents.spec.ts` (レイアウト管理の drag & drop) と `admin-basicinfo.spec.ts` が関連します。
Contributor guide
Research direction
Start by reading html/template/admin/assets/js/bundle.js and the listed admin Twig files plus layout_design.js to map the sortable and resizable calls. Run npm run build, then inspect the related E2E tests admin-contents.spec.ts and admin-basicinfo.spec.ts. Done means the jQuery UI dependency is removed without breaking the documented admin interactions or the compatibility decision for sortable plugins.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- build-system, frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100