【Monaca/React】Monaca+ReactフレームワークでjQueryプラグインを利用する方法

2019/02/02

React Zp社コラボ

WRITER

ロッキーカナイ

SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。

現在、Monaca+React環境でスマホアプリの開発に携わっております。
Monacaを使うのも初めてでしたが、それ以上にReactのコードに戸惑い四苦八苦。早１ヶ月がたち、やっとReactの全貌が見えてきて、コーディングが楽しくなってきました！

そんな最中（モナカじゃないですw）、タイトルにある通り、Monaca+React環境+ローカル環境での開発をしている際、jQueryのプラグインを使いたい状況になりました。
導入方法を調べていたら、該当する記事がなかったので、今回メモとしてここに残したいと思います。

尚、私の開発環境としては以下の通りです。

開発環境

Mac 10.14.1
Monaca
Reactフレームワーク
Monaca CLI

Monacaとは

Monaca

まずMonacaとはなんぞやって所ですが、

Monacaは、クラウドベースの開発プラットフォームです。HTML5とJavaScriptを用いることで、iOSとAndroidの両OSに対応したクロスプラットフォームなアプリ開発を実現しました。

また、MonacaではWebブラウザを通じて全サービスが提供されます。そのため、クライアントソフトのインストールなく、誰でも簡単にアプリ開発が行えます

Monaca Asialサイト

つまり、Monacaを使う事で一度のコーディングでiPhoneアプリとAndroidアプリの両方が開発できるって事ですね。

JSフレームワーク

ちなみにJavaScript言語単体での開発も可能ですが、JSフレームワークの利用も可能です。

Angular
Angular JS
React
Vue

私の携わっている開発では、フレームワークとしてReactを選択しているという事になります。

Monaca React環境でjQueryプラグインを使用する方法

では、本題です。

jQueryプラグインを利用する方法

src/public/index.html.ejsのheadタグ内に、<script type=”text/javascript” src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>を記述する。（必要に応じてjqueryのバージョンを変更）
jQueryプラグインをsrc/modulesなどに追加する。
利用するjsxファイル内で、jQueryプラグインのパス「import ‘../../modules/jquery-plugin.js’;」を追記する。

import React from 'react';
import '../../modules/jquery-plugin.js';

export default class test extends React.Component {

  componentDidMount() {
    $(function(){
        console.log("jquery Hellow World!");
    });
  }

  render() {
    return (
        <div>
        ...
        </div>
    );
  }
}

私の環境では以上の手順で、利用が出来ました。

ちなみに、jQueryのみの利用だと上記の①の記載追記だけで利用できます。