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

• ESLint:’$’ is not defined. (no-undef)エラーが出た
• ReactでjQueryって使っていいの？

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

そもそもReactとjQueryを共用してもいいのか・・？   

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

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

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

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

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

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

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

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

GMOインターネットグループ　グル…

React と jQuery を共存させる – GMOインターネットグループ グループ研究開発本部 GMO スマートリザーブに React を導入 フロントエンドのトレンドを追いかけている D.M. です。 2

Qiita

React と jQuery は共存可能なのか？ – Qiita jQueryをベースに書かれたフロントエンドをReactで書き直すことを検討中です。検討の一環として、ReactとjQueryは共存可能か調べたのでメモを残しておきます。はじめにReac…

注意するポイント 

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

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

かなと思ってます。 

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

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

本題の解決策です

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

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コンポーネントをESLi…

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

こんな感じ。 

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

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

いやー無知って怖い。   

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

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

おすすめ本

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

created by Rinker

• Kindleで探す
• Amazonで探す
• 楽天市場で探す
• Yahoo!ショッピングで探す