ReactとJQueryを共存する方法と注意点

 ReactとJQueryを共存

JQueryは、JavaScript開発者が使用する最も有名なライブラリの1つであり、長年にわたって開発者に役立ってきました。

このライブラリは、DOM操作やアニメーションなどを簡単に実行する方法を提供します。

その人気のため、多くのWeb開発者はそれに精通しており、できる限りJQueryを使用することを好みます。

ただし、Reactとフレームワーク(Next.jsなど)は、コードのパフォーマンスと保守性を支援するためのより最新の機能を提供しています。

ほとんどの分野でJQueryよりも優れており、Reactの未来の方が明るいので、開発者はもっと早くReactに移行しなければならないかもしれません。

Reactは間違いなくJQueryよりも最新であり、より多くの機能を備えています。

ReactでJQueryを使用できるのか?

ReactアプリでJQueryを使用することは可能です。

ですが、導入する前に注意点がございます、どうかできるだけReact内部でJQueryを使用しないようにしてください。

React内でjQueryを使用することが推奨されない理由についてはございます。

詳しくは後ほど解説致します。

ReactでJQueryを使用する正しい方法

基本的にはnpm経由でJQueryをインストールします 。

npm install jquery

そして、JQueryJQueryパッケージの$としてインポートします。

import $ from "jquery"

ES6のインポート/エクスポートの構文に慣れていない場合は、下記の記事をお読みください。

dev-k.hatenablog.com

JQueryとReactはDOM操作に関連する2つのライブラリです。

JQueryがReactに干渉しないようにするために、Reactによって更新されないコンポーネントを作成する必要があります。

どのように正しく作成できるのか?

Reactコンポーネントは、StateまたはPropsが変更されると再レンダリングします。

そのため、StatePropsを持たないコンポーネントを構築する必要があります。

つまり、ステートレスコンポーネントの作成です。

ReactとJQueryにはイベントの処理に違いがございます。

JQueryでは、要素にイベントを関連付けることができます。

たとえば、ボタンがある場合はクリックイベントを関連付けることができます。

誰かがボタンをクリックすると、イベントハンドラーが実行されます。

$("button").click(function() {
 // 処理…
});

下記では、ボタンタグがクリックされたときにコードを実行します。

import $ from "jquery";
import {useEffect} from "react";

const App = () => {
  useEffect(() => {
    $("button").click(function () {
     alert("Jquery in React.JS??");
    });
  }, []);

  return (
    <div>
      <button type="button">Click me</button>
    </div>
  );
};

export default App;

See the Pen React in JQuery by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


ReactがAppコンポーネントのDOMを更新しないようにするため、状態を開始せず、Props値も使用しません。

return文は、静的なラッパーとボタン要素で構成されています。

こうすることで、jQueryプラグインがDOMを操作します。

JQueryはuseEffectフック内で必ず使用して下さい。

  useEffect(() => {
    $("button").click(function () {
     alert("Jquery in React.JS??");
    });
  }, []);

useEffectを使用しない場合、Reactコンポーネントが初回レンダリング後に、JQueryを使用してDOM要素を操作することはできません。

これは、Reactがコンポーネントの状態やプロパティに基づいてDOMをレンダリングするためです。

このフック内で使用する事により、コンポーネントレンダリングされた後にJQueryを使用してDOM要素を操作する事が可能となります。

下記では、val()メソッドでvalue値を取得し、ボタンをクリックするとアラートでそれを通知させます。

import $ from "jquery";
import {useEffect} from "react";

const App = () => {
 useEffect(() => {
    $("button").click(function () {
      alert($("button").val());
    });
  }, []);

  return (
    <div>
      <button value="Jquery in React.JS??">Click me</button>
    </div>
  );
};

export default App;

See the Pen React in JQuery ② by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


では、要素の表示および非表示の場合です。

React単体では、useState()フックを使用して状態を管理できます。

たとえば、要素を表示または非表示にする場合は、コンポーネントで状態を定義します。

import { useState } from "react";

const App = () => {

   const [isShown, setIsShown] = useState(true);

  return (
    <div>
 <button type="button" onClick={() => setIsShown(!isShown)}>Click me</button><br />
 {!isShown && "Hello!"}
    </div>
  );
}

See the Pen React フック 状態を持つ 論理積 条件 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


しかし、React内部でJQueryを使用する場合は状態を持つ事はしません。

JQueryでは、要素を表示または非表示にするために.show()および.hide()メソッドまたは.slideToggle()を使用できます。

$("#element").show();

$("#element").hide();

$("#element").slideToggle();

下記にReact内部でJQueryを使用して、アニメーション付き表記および非表示をするためのslideToggleを使用したコードを示します。

import $ from "jquery";
import {useEffect} from "react";

const App = () => {
  useEffect(() => {
    $("#showBtn").click(function () {
      $("p").slideToggle(1000);
    });
  }, []);

  return (
    <div>
      <button id="showBtn" type="button">
        Click me
      </button>
      <p>Hello!</p>
    </div>
  );
};

See the Pen React in JQuery 表示と非表示 ② by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


下記では、.show()および.hide()メソッドとなります。

import $ from "jquery";
import {useEffect} from "react";

const App = () => {
  useEffect(() => {
    $("#showBtn").click(function () {
      $("p").show(1000);
    });
  }, []);

  useEffect(() => {
    $("#hideBtn").click(function () {
      $("p").hide(1000);
    });
  }, []);

  return (
    <div>
      <button id="showBtn" type="button">
        Show
      </button>

      <button id="hideBtn" type="button">
        Hide
      </button>
      <p>Hello!</p>
    </div>
  );
};

See the Pen React in JQuery 表示と非表示 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.


単純に<p>タグを表示および非表示にしているだけとなります。

これらがReact内部でJQueryを使用する方法となります。

ですが、JQueryとReactが競合して問題を引き起こす場合があります。

うまくいくかもしれませんが、ReactとJQueryの両方がDOMから動作しているため、そしてReactがシャドウ(Shadow)DOMを管理しているため、問題が発生する可能性があります。

jQueryイベントハンドラ(onclickなど)が機能しない場合がございます。

JQuery CDNリンク

2番目の方法は、publicフォルダにある index.htmlファイルからJQuery CDNをリンクすることです。

このメソッドは、JQuery依存関係を製品バンドルにバンドルしないことに注意してください。

// public/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

使い方は、先述の例と同じですが、 import $ from "jquery "の呼び出しがありません。

ReactでJQueryが推奨されない理由

ReactでJQueryを使用する際の主な制限は、JQueryが手動でDOMを更新することです。

JQueryはその場でリアルDOMを直接的に操作する方法ですが、一方でReactにはDOMを変更するための独自のシステムがあります。

Reactでは、実際のリアルDOMではなく、仮想DOMと呼ばれる概念を使用している為です。

仮想DOMでは、コンポーネントの状態変化が発生した後に、調整プロセスを通してメモリに保持され、リアルDOMと同期されます。

そのプロセス中、Reactは更新された状態を保持する仮想DOMを再構築し変更前の仮想DOMと変更後の仮想DOM同士で比較(差分)し必要なDOM更新のみを計算でき、その後コンポーネントの状態変化に応答します。

それにより、コストのかかる実際のリアルDOM更新を劇的に削減し、Reactを非常に高速にします。

詳しくは下記で解説しております。

dev-k.hatenablog.com

JQueryを使用し仮想DOMの外部でブラウザのDOMを変更すると、React状態、イベント、UIレンダリングなど様々なレンダリング処理はされず変更は認識されなくなる可能性があります。

もちろんですが、デバッグも困難となります。

ソフトウェアの基本原則のひとつである単一責任はご存知でしょうか?

単一責任の原則(SRP)とは、オブジェクト指向プログラミング(OOP)の単一オブジェクトは、1つの特定の機能のために作成する必要があるという概念です。

つまり、プログラム内のすべてのクラス、モジュール、または関数はプログラム内で1つの責任と目的を持つべきだというものです。

その基本原則である単一責任が崩れてしまいます。

これは副作用につながり、最終的にはアプリケーション全体を崩壊させることに繋がります。

したがって、JQueryを使用してDOMを操作すると、Reactが混乱してしまいます。

useRefフックを除くReactではDOM要素に直接アクセスすることはありません。

そのため、通常の状況ではReactでJQueryを使用することは悪い習慣と見なされますが、例外はあります。

これはJQueryを適切に使用し、その配置を慎重に選択する限り、Reactでも可能という事です。

最後に

あなたがReact内部でJQueryを使用する事を検討しているのであれば、もしプロジェクトで両方が使用されている場合は、開発者はそれぞれが何をしているのか、そしてもう一方がそれをどのように処理するのかをしっかりと明確に知っておく必要があります。

React内部でJQueryを使用すると、バグが発生する可能性があるので、適切に扱って下さい。

Reactには、ほとんどの場合にDOMを操作できる機能が組み込まれています。

例えば、アニメーションの表示と非表示のスライドをしたいのであれば、JQueryではなくCSSフレームワークのTailwind CSS &Reactで十分補えます。

animate-slide-up: 上方向へスライドするアニメーションを適用する

animate-slide-down: 下方向へスライドするアニメーションを適用する

JSXのクラスを要素に追加するだけで、対象の要素にアニメーションを適用することができます。

Reactを使用するときにJQueryが必要であることに気付いた場合、あなたはReactの使用方法を間違っている事に気付いて下さい。

自ら、仮想DOMを台無しにする必要はありません。

現在ではプロのWeb開発者がJQueryを最新のWebアプリケーションに組み込むことは、ほとんどありません。

ですが、ツールの使い方を知っている限り、どのような作業でも正しいツールを使用することは決して悪い考えではありません。

ほとんどのクライアントは、Webサイトが確実に動作し、適度なパフォーマンスを発揮する場合では内部にあるものを気にしません。

しかし、複雑なWebアプリを開発する必要がある場合、最新のサードパーティJQueryライブラリに依存している場合、または作業内容が他の人によって維持される場合は、他のツールを学習することを検討する価値があります。

この一般的な見方は、JQueryの時代は終わったということでもあります。

あなたにとって、最も価値のある選択をしてください。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].