開発

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

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

現在、Monaca+React環境でスマホアプリの開発に携わっております。
Monacaを使うのも初めてでしたが、それ以上にReactのコードに戸惑い四苦八苦。早1ヶ月がたち、やっと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プラグインを利用する方法

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

 

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

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

まとめ

今回は、Monaca+ReactフレームワークでjQueryプラグインを利用する方法を紹介しました。

せっかく業務でMonaca+Reactで開発していますので、今後も疑問に思った点や、解決した方法などを紹介したいと思います。個人的には、Flutterの勉強もしているので、そのあたりも記事にしてゆきたいと思います。

ではまたー!

 

ABOUT ME
ロッキーカナイ
ロッキーカナイ
iOSをメインに、SwiftやObjective-C言語の開発をしてます。趣味は猫と戯れる事、PHPを使ったサイト作成やAndroidの開発もしております。ちなみに名前のロッキーカナイはよく昼飯を食べる所w