ReactでjQuery使うと出る「ESLint:’$’ is not defined. (no-undef)」エラーの直し方

Development
この記事は約4分で読めます。
  • ESLint:’$’ is not defined. (no-undef)エラーが出た
  • ReactでjQueryって使っていいの?

Reactで構築していたシステムに、ふとjQueryを入れないと実現できないような要件が発生しました。   

そもそもReactjQueryを共用してもいいのか・・?   

そんな疑問を抱えながら、とりあえず使ってみたところ、[ESLint:’$’ is not defined. (no-undef)]ってエラーが出たので、直し方とかいろいろ調べてみました。

この記事でわかること
  • ReactjQueryを共用してもいいの?
  • ESLint:’$’ is not defined. (no-undef)エラーの直し方
スポンサーリンク

ReactとjQueryを共用してもいいの?

そもそもなんですが、ReactとjQueryを共用してもいいのか?

ざっっっくり調べた個人的解釈では、   

「使い方ちゃんとすれば別に大丈夫じゃない?」

というなんとも曖昧な感じ。 

結論から言うと、ライフサイクル等をちゃんと意識して使う分には問題ないと思います。

詳しくは以下のサイトがわかりやすかったのでご参照を。。   

React と jQuery を共存させる
GMOインターネット 次世代システム研究室が新しい技術情報を配信しています | GMO スマートリザーブに React を導入 フロントエンドのトレンドを追いかけている D.M. です。 2015年の初夏ごろに次世代システム研究室が GMO スマートリザーブの立ち上げをサポートしました。 http:
React と jQuery は共存可能なのか? - Qiita
jQueryをベースに書かれたフロントエンドをReactで書き直すことを検討中です。 検討の一環として、ReactとjQueryは共存可能か調べたのでメモを残しておきます。 はじめに Reactはチュートリアルを終えた段階で、ま...

注意するポイント 

「 jQuery は DOM が現れたり削除されたりするライフサイクルメソッド( componentDidMount, componentWillUnmount, componentDidUpdate )の中でだけ実行しなさい。」 

抜粋:https://recruit.gmo.jp/engineer/jisedai/blog/react-with-jquery/

かなと思ってます。 

かなり端的ですけど、理論上は納得ので可能な限りは準拠しようかと。   

ESLint:’$’ is not defined. (no-undef)のエラー解決策 

本題の解決策です

と言うことで、とりあえずやってみたら、ESLinさんに 

ESLint:’$’ is not defined. (no-undef)

と怒られました。

どうすりゃいいのか調べたら、ドンピシャで教えてくれてるブログを見つけました。 

ESLintに「"$" is not defined no-undef」と怒られた - メンチカツ
componentDidMount() { $.get('/data/hoge.json', function (result) { this.setState({ hogeList: result }); }.bind(this)); } 上記を定義したReactコンポーネントをESLintでテストすると怒られた。 ...

結論から言うと解決策は単純で、.eslintrcのenvにjqueryを追加すればOKです。   

こんな感じ。 

{ 
  "env": { 
    "es6": true, 
    "browser": true, 
    "node": true, 
    "jquery": true, 
  } 
}

※上記は例ですので、“jquery”: trueの記述さえあれば問題ありません。

いやー無知って怖い。   

[ブログ]メンチカツさん、ありがとうございます。 

ReactでjQueryを使う’$’ is not defined. (no-undef)エラーのまとめ


[jin_icon_book size=”18px” color=”#2c05f0″]オススメ本

コメント

タイトルとURLをコピーしました