ReactとJQueryを共存

ReactでJQueryを使用できるのか？
- ReactでJQueryを使用する正しい方法
  - JQuery CDNリンク
  - 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

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

import $ from "jquery"

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

dev-k.hatenablog.com

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

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

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

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

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

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

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>