- ESLint:’$’ is not defined. (no-undef)エラーが出た
- ReactでjQueryって使っていいの?
Reactで構築していたシステムに、ふとjQueryを入れないと実現できないような要件が発生しました。
そもそもReactとjQueryを共用してもいいのか・・?
そんな疑問を抱えながら、とりあえず使ってみたところ、[ESLint:’$’ is not defined. (no-undef)]ってエラーが出たので、直し方とかいろいろ調べてみました。
- ReactとjQueryを共用してもいいの?
- ESLint:’$’ is not defined. (no-undef)エラーの直し方
ReactとjQueryを共用してもいいの?
そもそもなんですが、ReactとjQueryを共用してもいいのか?
ざっっっくり調べた個人的解釈では、
「使い方ちゃんとすれば別に大丈夫じゃない?」
というなんとも曖昧な感じ。
結論から言うと、ライフサイクル等をちゃんと意識して使う分には問題ないと思います。
詳しくは以下のサイトがわかりやすかったのでご参照を。。
![](https://www.gmo-jisedai.com/wp-content/uploads/2019/02/01-150x150.jpg)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVhY3QlMjAlRTMlODElQTglMjBqUXVlcnklMjAlRTMlODElQUYlRTUlODUlQjElRTUlQUQlOTglRTUlOEYlQUYlRTglODMlQkQlRTMlODElQUElRTMlODElQUUlRTMlODElOEIlRUYlQkMlOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTU4YzMwNzc2Y2I0NWY5ZWI3OGNkNjczMTc1ZjFlMjMw&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3Rhcm9pdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQyOWEwYzVmN2I1Y2FiOTlkYjZjYTViNDNjOWNjNDlh&blend-x=142&blend-y=486&blend-mode=normal&s=d0fdcf5f08cddc403e1685f9081d8594)
注意するポイント
「 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)
と怒られました。
どうすりゃいいのか調べたら、ドンピシャで教えてくれてるブログを見つけました。
結論から言うと解決策は単純で、.eslintrcのenvにjqueryを追加すればOKです。
こんな感じ。
{
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
}
}
※上記は例ですので、“jquery”: trueの記述さえあれば問題ありません。
いやー無知って怖い。
[ブログ]メンチカツさん、ありがとうございます。
ReactでjQueryを使う’$’ is not defined. (no-undef)エラーのまとめ
- ReactでjQueryを使っても良いが、ライフサイクル等をちゃんと意識しなければならない
- ‘$’ is not defined. (no-undef)のエラーは“jquery”: trueとESLintのenvに追記すればOK
コメント