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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Q&A

解決済

1回答

1488閲覧

Electronでrequireをすると、おそらく内部エラーを起こしている

ganariya

総合スコア50

Electron

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

0グッド

2クリップ

投稿2019/09/04 06:45

前提・実現したいこと

現在
Electronでアプリケーションを作ってみよう
を実行しながらElectronの勉強をしていました。

しかし、Electronでアプリケーションを作ってみよう - アプリっぽくの項目で、エラーを内部で吐いているようです。

現在の自分のファイルはGanariya githubに置かせていただいています。

発生している問題・エラーメッセージ

上記の参考Qiitaのサイトでは、
node_modulesのREADMEすべてをindex.htmlでウィンドウにレンダリングしようとしていました。

そこで、自分で書きながら
index.jsの部分を書いていました。

javascript

1'use strict'; 2 3const electron = require('electron'); 4const remote = electron.remote; 5const fileUtil = remote.require('./lib/fileUtil'); 6 7fileUtil.fetchReadmeList(function(err, matches) { 8 if(!err) document.write(matches.join()); 9});

このindex.jsは、レンダリングするindex.htmlから読み込んでいます。
しかし、index.htmlに映らないため以下のように動作確認を行っていました。

javascript

1'use strict'; 2 3document.getElementById("can_write").innerText = "first"; 4 5//const electron = require('electron'); 6//const remote = electron.remote; 7//const fileUtil = remote.require('./lib/fileUtil'); 8 9document.getElementById("can_write").innerText = "second";

上記の状態では以下のようにレンダリングされました。
secondがfirstを上書きできている
この状態なら、can_writeDivタグのinnerTextにfirstがまず入り
その後、secondで上書きしている、つまり、止まっていません。
正常に作動できていました。


しかし、以下のように書き換えてみました。

javascript

1'use strict'; 2 3document.getElementById("can_write").innerText = "first"; 4 5const electron = require('electron'); 6//const remote = electron.remote; 7//const fileUtil = remote.require('./lib/fileUtil'); 8 9document.getElementById("can_write").innerText = "second";

electronのせいでとどかない

すると、innerTextがsecondに書き換えられていません。
よって、index.html内から読み出すindex.js内でelectronをrequireすると、内部でエラーを吐いているようです。

考えている原因

私が考えている原因としては
Electronのバージョンが変わって、

**html内からelectronが読み出せなくなったのでは?**と考えています。
もしくは、require自体を行うだけで止まるのでは?と考えています。

Webpackを入れればrequireを、変換してくれるのでしょうか。
それとも原因は別なのでしょうか。

補足情報(FW/ツールのバージョンなど)

package.json

json

1{ 2 "name": "electron-example", 3 "version": "1.0.0", 4 "description": "electron-example", 5 "main": "main.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "repository": { 10 "type": "git", 11 "url": "git+https://github.com/Ganariya/electron-example.git" 12 }, 13 "keywords": [], 14 "author": "", 15 "license": "ISC", 16 "bugs": { 17 "url": "https://github.com/Ganariya/electron-example/issues" 18 }, 19 "homepage": "https://github.com/Ganariya/electron-example#readme", 20 "dependencies": { 21 "electron": "^6.0.7", 22 "glob": "^7.1.4", 23 "webpack": "^4.39.3", 24 "webpack-cli": "^3.3.7", 25 "webpack-dev-server": "^3.8.0" 26 } 27} 28

Electronのバージョン情報
v6.0.2

(package.jsonでは6.0.7と指定していますが、グローバルインストールしているelectronは6.0.2になっています。
ローカルにもインストールしている理由は、Webpack上で補完を効かせるために、インストールしています。
)

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

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

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

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

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

gentaro

2019/09/04 07:09

Qiitaの記事出して質問をしてくる人、ほぼ元記事にコメントして質問してないのは何故なんだろう…。
guest

回答1

0

自己解決

投稿2019/09/05 02:22

ganariya

総合スコア50

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問