作成日

2017/11/10

最終更新

2021/12/27

記事区分

一般公開

バージョン 1 の AngularJS で jQuery を内部的に利用できるのと同様に、React でも jQuery を内部的に利用した component を作成できます。本ページでは実際に jQuery プラグインをラップした簡単な React component のサンプルコードを示します。

jQuery 単体を利用する例

簡単な例として、jQuery プラグインではなく jQuery 単体を利用する React component を考えます。jQuery 本体や jQuery プラグインのソースコードは JSX や ES6 を利用しておらず、Babel によるコンパイルは不要であることに注意します。ただし、import や require を利用している場合は Browserify から jQuery 本体や jQuery プラグインのソースコードが参照できることが必要です。そのためには npm コマンドでインストールすると簡単です。

インストール可能なバージョン一覧を調べます。

npm view jquery versions --json

jQuery 3.2.1 をインストールする場合は以下のようにします。@ を指定しない場合は最新版がインストールされます。

npm install jquery@3.2.1 --save

アンインストール時は以下のようにします。

npm uninstall jquery@3.2.1 --save

うまく動作しない場合はキャッシュをクリアしてみると解消することがあります。

npm cache clear

package.json の dependencies に追加されます。

   "dependencies": {
+    "jquery": "^3.2.1",

React のソースコードは以下のように記述します。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

registerServiceWorker();

MyComponent.js

import React from 'react';
import $ from 'jquery';

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    this.$span = $(this.span);
    this.$span.on('click', this.handleClick);
  }

  componentWillUnmount() { // メモリリークを避けるために不要なリソースは解放します。
    this.$span.off('click', this.handleClick);
  }

  handleClick(e) {
    this.$span.text(this.$span.text() + ' クリックされました');
  }

  render() { // `ref` でコールバック関数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    // を登録しています。DOM ノード span を指す el を this.span に保存して、
    // render 後に実行されるライフサイクルフック `componentDidMount` 内で
    // jQuery オブジェクト化 `$()` します。
    return (
      <div>
        <span ref={el => this.span = el}>文字列</span>
      </div>
    );
  }
}

export default MyComponent;

クリックイベントを jQuery からハンドリングできています。

CDN

本ページでは特に create-react-app を利用していますが、他の環境でも同様です。CDN を利用した方法の場合は以下のようになります。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    this.$span = $(this.span);
    this.$span.on('click', this.handleClick);
  }

  componentWillUnmount() {
    this.$span.off('click', this.handleClick);
  }

  handleClick(e) {
    this.$span.text(this.$span.text() + ' クリックされました');
  }

  render() {
    return (
      <div>
        <span ref={el => this.span = el}>文字列</span>
      </div>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

</script>
</body>
</html>

jQuery プラグインを利用する例

select2

jQuery プラグインの例として select2 を React component でラップしてみます。ここでは先程と同様に npm で提供されているものを利用します。

npm install jquery@3.2.1 --save
npm install select2@4.0.5 --save

React のソースコードは以下のように記述します。

index.js

MyComponent の props として、値が変更された場合に発火するコールバック関数、初期状態で選択されている項目、選択項目一覧、をそれぞれ指定しています。

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <MyComponent onChange={value => console.log(value)} selectedValue="Y">
    <optgroup label="グループ A">
      <option value="X">XXX</option>
    </optgroup>
    <optgroup label="グループ B">
      <option value="Y">YYY</option>
    </optgroup>
  </MyComponent>,
  document.getElementById('root')
);

registerServiceWorker();

MyComponent.js

node_modules/ にローカルインストールされたファイル群から必要なファイルを import して利用します。MyComponent の外部から props.children を指定しているため、React 内で props.children が変更された際に componentDidUpdate ライフサイクルフックで jQuery にも変更されたことを知らせる必要があることに注意します。また、React における form 要素の value 属性は要素の値を拘束します。jQuery を利用する場合は form 要素の状態を React ではなく jQuery で制御したいため value ではなく defaultValue を利用します。チェックボックスやラジオボタンでは defaultChecked が利用できます。

import React from 'react';
import $ from 'jquery';
import 'select2/dist/css/select2.min.css';
import 'select2/dist/js/select2.min.js';

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.$select = $(this.select);
    this.$select.select2({
      width: '300px'
    });
    this.$select.on('change', this.handleChange);
  }

  componentDidUpdate(prevProps) { // React が DOM を変更した場合は jQuery にもその旨通知します。
    if (prevProps.children !== this.props.children) {
      // https://select2.org/programmatic-control/add-select-clear-items#selecting-options
      this.$select.trigger('change');
    }
  }

  componentWillUnmount() { // メモリリークを避けるために不要なリソースは解放します。
    this.$select.off('change', this.handleChange);
    // https://select2.org/programmatic-control/methods#destroying-the-select2-control
    this.$select.select2('destroy');
  }

  handleChange(e) { // 外部から渡されたコールバック関数を実行します。
    this.props.onChange(e.target.value);
  }

  render() { // `defaultValue` で初期値を指定できます。`value` と異なり初期値としてのみ機能します。
    return (
      <div>
        <select ref={el => this.select = el} defaultValue={this.props.selectedValue}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

export default MyComponent;

以下のような表示になります。

chosen

比較的古い記法が利用された jQuery プラグインの例として chosen を React component でラップしてみます。npm で提供されているものを利用します。

npm install jquery@3.2.1 --save
npm install chosen-js@1.8.2 --save

React のソースコードは以下のように記述します。

index.js

MyComponent の props として、値が変更された場合に発火するコールバック関数、選択項目一覧、をそれぞれ指定しています。

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <MyComponent onChange={value => console.log(value)}>
    <option></option>
    <option>vanilla</option>
    <option>chocolate</option>
    <option>strawberry</option>
  </MyComponent>,
  document.getElementById('root')
);

registerServiceWorker();

MyComponent.js

node_modules/ にローカルインストールされたファイル群から必要なファイルを読み込んで利用します。chosen が $ ではなく jQuery を利用するため window.jQuery = $ などとして回避する必要があります。そのため import ではなく require を利用しています。また、select2 の場合と同様に MyComponent の外部から props.children を指定しているため、React 内で props.children が変更された際に componentDidUpdate ライフサイクルフックで jQuery にも変更されたことを知らせる必要があることに注意します。

import React from 'react';
import $ from 'jquery';
window.jQuery = $;
require('chosen-js/chosen.min.css');
require('chosen-js/chosen.jquery.min.js');

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.$select = $(this.select);
    this.$select.chosen({
      width: '300px'
    });
    this.$select.on('change', this.handleChange);
  }

  componentDidUpdate(prevProps) { // React が DOM を変更した場合は jQuery にもその旨通知します。
    if (prevProps.children !== this.props.children) {
      // https://harvesthq.github.io/chosen/#change-update-events
      this.$select.trigger("chosen:updated");
    }
  }

  componentWillUnmount() { // メモリリークを避けるために不要なリソースは解放します。
    this.$select.off('change', this.handleChange);
    // https://harvesthq.github.io/chosen/#change-update-events
    this.$select.chosen('destroy');
  }

  handleChange(e) { // 外部から渡されたコールバック関数を実行します。
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <div>
        <select ref={el => this.select = el} data-placeholder="選択してください">
          {this.props.children}
        </select>
      </div>
    );
  }
}

export default MyComponent;

以下のような表示になります。

その他の JavaScript ライブラリの利用例

jQuery に依存していない JavaScript ライブラリの資産を利用する例を記載します。

sweetalert2

SweetAlert2 は高機能なポップアップを提供するライブラリです。ここでは npm で提供されているものを利用します。

npm install sweetalert2@6.11.5 --save

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

registerServiceWorker();

MyComponent.js

import React from 'react';
import swal from 'sweetalert2/dist/sweetalert2.all.min.js';

class MyComponent extends React.Component {

  render() {
    return (
      <button onClick={() => swal(
          'Good job!',
          'You clicked the button!',
          'success')}>
        ポップアップを表示するボタン
      </button>
    );
  }
}

export default MyComponent;

以下のように表示されます。

参考 createRef

16.3 以降のバージョンにおいては createRef の利用が推奨されています。

suzu

フロントからバックエンドまで、幅広い技術をカバーしています。

フォロー

記事の執筆者にステッカーを贈る

有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、記事の読者は、執筆者に有料のステッカーを贈ることができます。

>>さらに詳しくステッカーを贈る

Feedbacks

ログインするとコメントを投稿できます。

ログインする

JavaScriptにおける関数定義
function文で定義します。 sample.js function fact(n) { return (n==0) ? 1 : n*fact(n-1); } for(var i=0; i<7; ++i) console.log(i +'!='+ fact(i)); 実行例 $ node sample.js 0!=1 1!=1 2!=2 3!=6 4!=24 5!=120 6!=...
Kazu11/4/2015に更新
0
- JavaScript
Date オブジェクトの使用例 (JavaScript)
コンストラクタ // 現在時刻 var d = new Date(); console.log(d); // システムのタイムゾーンに変換して出力 (この例では JST) //=> Thu Jan 29 2015 23:45:21 GMT+0900 (東京 (標準時)) // システムのタイムゾーン (以下の例では JST) での日付指定 d = new Date('2000/01/01')...
すももちゃん5/4/2017に更新
0
- JavaScript
AngularJS が提供するユーティリティ
AngularJS では JavaScript の言語仕様として不足のある汎用的な処理を補うためにユーティリティが提供されています。代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> ...
そらいろエンジニア10/26/2017に更新
0
- AngularJS
- JavaScript
JavaScript のグラフ描画ツール Dygraph の使用例
ダウンロードこちらのページから dygraph-combined.js をダウンロードします。サンプルコードチュートリアルより。 <html> <head> <script type="text
旅するエンジニア9/12/2017に更新
0
- JavaScript
サービス (AngularJS)
AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...
旅するエンジニア9/7/2021に更新
0
- AngularJS
- JavaScript