質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1989閲覧

jsファイルの中で別jsファイルのメソッドを呼び出す方法について

TOFU0920

総合スコア12

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2019/01/17 02:51

編集2019/01/17 03:31

Electronの練習でJavaScriptを書いています。
表題の通り、jsファイルの中で別jsファイルを呼び出したいのですが、createWindowメソッドを呼び出したところでReferenceErrorが出てしまいます。

ReferenceError:createWindow is not defined at App.

該当のソースコード

下記がメインのコードになります。

JavaScript

1//index.js 2"use strict"; 3 4var electron = require("electron"); 5var app = electron.app; 6//var setAppMenu = electron.setApq pMenu; 7require("./createWindow.js"); 8//const setAppMenu = require('./setAppMenu_'); 9//const createWindow = require('./createWindow'); 10 11app.on("ready", function () { 12 createWindow(); 13}); 14 15app.on("window-all-closed", function () { 16 if (process.platform !== "darwin") { 17 app.quit(); 18 } 19}); 20 21app.on("activate", function (_e, hasVisibleWindows) { 22 if (!hasVisibleWindows) { 23 createWindow(); 24 } 25});

下記が呼び出したいメソッドのあるコードになります。

JavaScript

1//createWindow.js 2"use strict"; 3 4var electron = require("electron"); 5var BrowserWindow = electron.BrowserWindow; 6 7var win = void 0; 8function createWindow() { 9 win = new BrowserWindow(); 10 win.loadURL("file://" + __dirname + "/../../index.html"); 11 win.on("close", function () { 12 win = null; 13 }); 14} 15 16exports.default = createWindow;

試したこと

require関数で呼び出せると書いてありましたが、上記エラーになってしまい呼び出せませんでした。

どなたかご教授いただけますでしょうか。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2019/01/17 03:28 編集

JavaScriptの前にElectronでしたか、 それなら内部で動いているのはNode.jsなのでrequireは使えますね。 Electronのタグを追加しておいてください。
TOFU0920

2019/01/17 03:33

失礼しました。追加致しました。 requireは使えており、正しく該当ファイルも読めているようなのですが、肝心の関数が呼び出せないといった状況です。 よろしくお願いいたします。
guest

回答1

0

ベストアンサー

ReferenceError:createWindow is not defined at App.

エラー文読め&Node.jsもうちょっと勉強しろ案件です。
もう少しこの2つに詳しくなれば簡単に自己解決できるようになるかと思いますが、今回は軽く解説します。

コードを読んだところ、メインではrequire("./createWindow.js");を実行しており、
createWindow.jsは最終的に
exports.default = createWindow;を実行しています。

ん?exports.default???
これNode.jsのrequireの書き方じゃないんだけど何処情報なんだ?
これだとメインのコードにはconst createWindow = require("./createWindow.js").default;という書き方しないと取り出せないですね。


ざっくり説明しておくと、
Node.jsでrequire関数を実行した場合、module.exportsへの代入を持ち帰ってきます。
勝手に変数領域が拡張されたりしないので、自分でconst createWindow = require(ファイル名)等として変数宣言しながら持ち帰る必要があります。

exportsmodule.exportsのエイリアスなので、exports.defaultへ代入した場合、
module.exports.defaultへの代入という扱いになります。
なのでrequire(ファイル名)から更に.defaultプロパティにアクセスしなければ値を取り出せません。


Node.js流儀に従うなら下記のように書き換えましょう。

createWindow.js

JavaScript

1// 最後のexports以外の箇所はそのまま 2 3// exports.default = createWindow; 4module.exports = createWindow;

メインのコード

JavaScript

1const createWindow = require("./createWindow.js");

投稿2019/01/17 03:34

編集2019/01/17 03:39
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TOFU0920

2019/01/17 03:46

ご回答、およびご説明ありがとうございます。 エラーが出ていたコードだと、module.exportsへの代入内容がなかったという事なんですね。 大変勉強になります。 ご教授いただきありがとうございました。
miyabi-sun

2019/01/17 04:06 編集

まぁ完全に駄目という感じではなく、 exports.defaultはES2015で実装されたESModulesに沿った書き方だよ。 蛇足だから覚えなくて良いけど一応紹介しておくね。 Node.jsが開発された2010年前後にはESModulesというものはなかった。 でもNode.jsはサーバーサイドJSなので実現するには外部ファイル読み込み機能が必要。 そこでFirefox作ってる団体が提案してたCommonJSという思想を使ってrequire関数と共に外部ファイル読み込み機能を実装した。 で、2015年になってJavaScriptの仕様作ってるECMAという団体が、 ES2015というバージョンのJavaScript仕様で、ESModulesとして外部ファイルを読み込む仕様を正式に決定した。 でもNode.jsはサーバーサイドの言語として大絶賛可動中、CommonJSと後から作られたESModuleという2つの仕様が混在してしまった。 なので、開発者側で混乱しないように、 ESModuleで書かれたプログラムをNode.jsで使えるrequireに変換して使ってたりするのだけど、 この辺の折衷案的な書き方がexports.defaultという書き方。 ESModuleは`exports default 関数名`みたいに書いて別ファイルで`import モジュール名`で取り出す想定だったかな。 多分この辺を考えつつ、この使い方を記述してるんだと思うのだけど、もし気になったら参考にしたサイトをもう一度読んでみてね。
TOFU0920

2019/01/17 04:17

ご説明いただきありがとうございます。 なるほど・・・!CommonJS、ESModule二つの仕様が混在してしまっているんですね。 今回のコードにあったexports.defaultはESModuleの仕様に則った書き方で、そもそもNode.jsでの書き方とは別という事ですね。 Node.js側から呼び出せるようにモジュール側(ESModule)でrequireに変換するという認識で合っていますでしょうか?
miyabi-sun

2019/01/17 04:30

この辺はNode.jsの対応が相当不味かった ちょっと調べたら下記のページが経緯としてよく書かれてる https://blog.jxck.io/entries/2017-08-15/universal-mjs-ecosystem.html で、.mjsってなんだよ、こんな拡張子使ってるWebサイト未だかつて見たこと無いぞということで呆れ返って、 ES準拠で書きたい人は、今の所BlowserifyやWebPack、BabelみたいなツールでESModuleで書かれたコードを静的コンパイルしてNode.js流儀のCommonJSに変換して実行している感じだね。 でもまぁ、所詮移行期間で中途半端な`exports.default = モジュール名`の書き方にしててもいつかは死ぬ運命にあるから、 別にNode.jsで採用されている普段どおりの書き方で良いと思う。 Node.jsから乗り換える時に`module.exports = モジュール名`の部分をエディタか何かで置換してしまえばいいしね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問