今回はWebアプリケーション開発の知識しかないエンジニアでもGUIアプリケーションを簡単に作れてしまうことで話題沸騰中のElectronについての記事です。
ElectronでもBootstrapなどのようなデザインを使用したい場面が多々あったので、Web開発のときと同じようにjQueryなど必要なライブラリをインポートしていったものの、以下のようなエラーが発生してしまいます。

「Uncaught ReferenceError: $ is not defined」はjQueryを使っていると本当によく出てくるおなじみのエラーです。
これまでこのエラーに何度悩まされたことか・・・・
ということでこのエラーの解決策を原因を探っていきます。
原因: jQueryが正しく読み込めていない
jQueryやBootstrapなどをインポートするときには、基本的に</body>の直前に以下のようにライブラリを並べていくと思います。
1 2 3 4 5 |
<script src="jQueryの読み込み"></script> <script src="Bootstrapの読み込み"></script> <script src="その他ライブラリの読み込み"></script> |
Webでサイトを作っているときにはこれで動くはずなのですが、どうやらElectronではこれでもエラーが出てきてしまうので、何かしらの問題でまだjQueryがちゃんと読み込めていないことが分かります。
解決策: jQueryを正しく読み込むためのコードを追加する
とりあえずこの問題を直すためには、以下のようにjsを読み込んでいる部分の前後にコードを追加してあげてください。
1 2 3 4 5 6 7 |
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> jQueryやBootstrapなどのいろんなjsコードを読み込み・・・・ <script>if (window.module) module = window.module;</script> |
これは何をしているのかというと、moduleに格納されたデータをwindow.moduleに一時的に退避させています。
ここから先は原因を詳しく理解したい人だけ読んでもらえればいいのですが、
英語で詳しくこの問題が解説されています。
このバグは、”jQuery isn’t set globally because “module” is defined”すなわち「moduleが定義されているからjQueryがグローバルにセットされない」から発生しているというわけですね。
問題発生のクリティカルな部分は以下のコードになります。
1 2 3 4 5 6 7 |
if ( typeof module === "object" && typeof module.exports === "object" ) { // set jQuery in `module` } else { // set jQuery in `window` } |
ElectronでjQueryを読み込もうとしたときに、何かしらの処理で既にmoduleが定義しまっているので、jQuery側でif文で違う分岐に流れてしまうということですね。
これはjQuery側になんとか対応してほしい気がしますね・・・・
まとめ
今回のバグは普通にネットに解決策がありましたが、英語で書かれているということで日本語でも記事にすることにしました。
この類のものを解決しようとしたらjQuery側の実装まで確認する必要があるので、海外記事を読める程度の英語力があるかどうかはエンジニアとしてかなり重要なのではないかと思いました。
最後まで読んでいただきありがとうございました!!