JQueryを使用することの是非について

質問事項

JQueryをインポートして使用したいと考えているのですが、そもそもAngularアプリ内でJQueryを使用することに問題がないのかを懸念しています。
(JQueryとAngular側の処理でなにか競合が起きる等)
JQueryを使用することによる問題点や懸念される事項についてご存知の方がいらっしゃればご意見いただきたいです。

ちなみにインポートは以下の手順で実施しようと考えています。

インストールコマンド

npm install jquery --save
npm install --save-dev @types/jquery

Componentの実装

import * as $ from "jquery";
:
console.log($("#hoge")[0].className);

環境情報

Angular:13.0.2
JQuery:3.6.0(2021/12/03現在の最新)

「いいね!」 1

職場でやんごとなき事情があり、AngularでjQueryを使用している古いプロジェクトがありますが、一応インポートするだけならコンフリクトはしないはずです。

ただ jQuery に限らず、直接DOM操作/参照を多用しだすと Angular を使っている意味がなくなってしまいますので、多用は避けたほうがいいです。
利用するなら、例えば jQuery を前提とした UI ライブラリをどうしても使用する必要がある、どうしてもIEなど強烈に古いブラウザに対応する必要がありポリフィルもない機能を使いたい場合(あるかはわからないですが…)、などに限定したほうがいいと思います。

また jQuery を前提とした UI ライブラリや jQueryのプラグインと合わせて使うなら、jQueryのプラグイン側がグローバル変数として定義された $ または jQuery 変数がある前提で動くものが多いはずなので、ES Module形式でインポートすると動かない可能性があります。
その場合は angular.jsonscriptsjquery をバンドルするように指定してあげる必要があるはずです。

例えば↓のような感じ。

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js"
            ]
「いいね!」 3

ご意見ありがとうございます。
イベントバインド等基本的にAngularで機能として提供されている箇所についてはAngularで実装し、それ以外でどうしてもJQueryでなくては難しい箇所についてはJQueryで実装する方針としたいと思います。

jQueryが入っているだけで「jQueryの書き方(Angular管轄外のDOM操作)」が増えていって
メンテのコスト(実行時エラーの余地も生まれる)が見えないところでかさんでいくんではないでしょうか。

依存のあるUIライブラリについては代替手段を探すべきだと思います。
政治的な理由ならできるだけ説得したいですね。

既存プロジェクトの移行とかでコスト考えたときに大変すぎるなら〜〜〜残しておく方向に舵を切っちゃうかもなぁという気持ちもわかりますが……。

職場でやんごとなき事情があり、

気になる:eyes: