プログラミング初心者のための入門ブログエンジニアが未来を切り開く。ReactとJQueryを共存する方法と注意点この広告は、90日以上更新していないブログに表示しています。最後にJQueryは、JavaScript開発者が使用する最も有名なライブラリの1つであり、長年にわたって開発者に役立ってきました。このライブラリは、DOM操作やアニメーションなどを簡単に実行する方法を提供します。その人気のため、多くのWeb開発者はそれに精通しており、できる限りJQueryを使用することを好みます。Reactとフレームワーク(Next.jsなど)は、コードのパフォーマンスと保守性を支援するためのより最新の機能を提供しています。ほとんどの分野でJQueryよりも優れており、Reactの未来の方が明るいので、開発者はもっと早くReactに移行しなければならないかもしれません。Reactは間違いなくJQueryよりも最新であり、より多くの機能を備えています。ReactでJQueryを使用できるのか?ReactアプリでJQueryを使用することは可能です。導入する前に注意点がございます、どうかできるだけReact内部でJQueryを使用しないようにしてください。React内でjQueryを使用することが推奨されない理由についてはございます。詳しくは後ほど解説致します。基本的にはnpm経由でJQueryをインストールします。jqueryそして、JQueryをJQueryパッケージの$としてインポートします。"jquery"ES6のインポート/エクスポートの構文に慣れていない場合は、下記の記事をお読みください。dev-k.hatenablog.comJQueryとReactはDOM操作に関連する2つのライブラリです。JQueryがReactに干渉しないようにするために、Reactによって更新されないコンポーネントを作成する必要があります。どのように正しく作成できるのか?Reactコンポーネントは、StateまたはPropsが変更されると再レンダリングします。そのため、StateとPropsを持たないコンポーネントを構築する必要があります。ステートレスコンポーネントの作成です。ReactとJQueryにはイベントの処理に違いがございます。JQueryでは、要素にイベントを関連付けることができます。ボタンがある場合はクリックイベントを関連付けることができます。誰かがボタンをクリックすると、イベントハンドラーが実行されます。処理...});下記では、ボタンタグがクリックされたときにコードを実行します。CodePen.ReactがAppコンポーネントのDOMを更新しないようにするため、状態を開始せず、Props値も使用しません。return文は、静的なラッパーとボタン要素で構成されています。することで、jQueryプラグインがDOMを操作します。JQueryはuseEffectフック内で必ず使用して下さい。[]);useEffectを使用しない場合、Reactコンポーネントが初回レンダリング後に、JQueryを使用してDOM要素を操作することはできません。これは、Reactがコンポーネントの状態やプロパティに基づいてDOMをレンダリングするためです。このフック内で使用する事により、コンポーネントがレンダリングされた後にJQueryを使用してDOM要素を操作する事が可能となります。下記では、val()メソッドでvalue値を取得し、ボタンをクリックするとアラートでそれを通知させます。CodePen.では、要素の表示および非表示の場合です。React単体では、useState()フックを使用して状態を管理できます。要素を表示または非表示にする場合は、コンポーネントで状態を定義します。CodePen.しかし、React内部でJQueryを使用する場合は状態を持つ事はしません。JQueryでは、要素を表示または非表示にするために.show()および.hide()メソッドまたは.slideToggle()を使用できます。$("#element").show();$("#element").hide();$("#element").slideToggle();下記にReact内部でJQueryを使用して、アニメーション付き表記および非表示をするためのslideToggleを使用したコードを示します。CodePen.下記では、.show()および.hide()メソッドとなります。CodePen.単純に<p>タグを表示および非表示にしているだけとなります。これらがReact内部でJQueryを使用する方法となります。JQueryとReactが競合して問題を引き起こす場合があります。うまくいくかもしれませんが、ReactとJQueryの両方がDOMから動作しているため、そしてReactがシャドウ(Shadow)DOMを管理しているため、問題が発生する可能性があります。jQueryのイベントハンドラ(onclickなど)が機能しない場合がございます。CDNをリンクすることです。このメソッドは、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.comJQueryを使用し仮想DOMの外部でブラウザのDOMを変更すると、React状態、イベント、UIレンダリングなど様々なレンダリング処理はされず変更は認識されなくなる可能性があります。デバッグも困難となります。ソフトウェアの基本原則のひとつである単一責任はご存知でしょうか?単一責任の原則(SRP)とは、オブジェクト指向プログラミング(OOP)の単一オブジェクトは、1つの特定の機能のために作成する必要があるという概念です。プログラム内のすべてのクラス、モジュール、または関数はプログラム内で1つの責任と目的を持つべきだというものです。その基本原則である単一責任が崩れてしまいます。これは副作用につながり、最終的にはアプリケーション全体を崩壊させることに繋がります。したがって、JQueryを使用してDOMを操作すると、Reactが混乱してしまいます。useRefフックを除くReactではDOM要素に直接アクセスすることはありません。そのため、通常の状況ではReactでJQueryを使用することは悪い習慣と見なされますが、例外はあります。これはJQueryを適切に使用し、その配置を慎重に選択する限り、Reactでも可能という事です。最後にあなたがReact内部でJQueryを使用する事を検討しているのであれば、もしプロジェクトで両方が使用されている場合は、開発者はそれぞれが何をしているのか、そしてもう一方がそれをどのように処理するのかをしっかりと明確に知っておく必要があります。React内部でJQueryを使用すると、バグが発生する可能性があるので、適切に扱って下さい。Reactには、ほとんどの場合にDOMを操作できる機能が組み込まれています。&Reactで十分補えます。下方向へスライドするアニメーションを適用するJSXのクラスを要素に追加するだけで、対象の要素にアニメーションを適用することができます。Reactを使用するときにJQueryが必要であることに気付いた場合、あなたはReactの使用方法を間違っている事に気付いて下さい。自ら、仮想DOMを台無しにする必要はありません。現在ではプロのWeb開発者がJQueryを最新のWebアプリケーションに組み込むことは、ほとんどありません。ツールの使い方を知っている限り、どのような作業でも正しいツールを使用することは決して悪い考えではありません。ほとんどのクライアントは、Webサイトが確実に動作し、適度なパフォーマンスを発揮する場合では内部にあるものを気にしません。複雑なWebアプリを開発する必要がある場合、最新のサードパーティのJQueryライブラリに依存している場合、または作業内容が他の人によって維持される場合は、他のツールを学習することを検討する価値があります。この一般的な見方は、JQueryの時代は終わったということでもあります。あなたにとって、最も価値のある選択をしてください。本日は以上となります。最後までこの記事を読んで頂きありがとうございます。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。