0

書籍"Electronではじめるアプリ開発"のchapter4の始めで詰まってしまいました。
(5)表示される画像に(4)で書いているHello, Electron and React JSXが表示されることを期待しているのですが、なぜ出ないか?
どなたか教えてくださいませんか。

(1)entryのindex.js

import { app } from "electron";
import createMainWindow from "./createMainWindow";

let mainWindow = null;

app.on("ready", () => {
    mainWindow = createMainWindow();
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin"){
        app.quit();
    }
});

app.on("activate", (_e, hasVisibleWindows) =>{
    if (!hasVisibleWindows){
        mainWindow = createMainWindow();
    }
});

(2)createMainWindow.js

import { BrowserWindow } from "electron";

class MainWindow{
    constructor(){
        this.windows = new BrowserWindow({ width: 800, height: 600 });
        this.windows.loadURL('file://${__dirname}/../../index.html');
        this.windows.on("closed", ()=>{
            this.windows = null;
        });
    }
}

function createMainWindow(){
    return new MainWindow();
}

export default createMainWindow;

(3)loadするhtml

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="node_modules/photon/dist/css/photon.css">
    <style type="text/css">
      #app {
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 8px;
        right: 8px;
      }
    </style>
  </head>
  <body>
    <div class="window">
      <div id="app" class="window-content"></div>
    </div>
    <script>require("./dist/renderer/app.js")</script>
  </body>
</html>

(4)app.jsx

import React from "react";
import { render } from "react-dom"

render(<div>Hello, Electron and React JSX</div>, document.getElementById("app"));

(5)表示される画像
表示される画面

2
  • 1
    (2)createMainWindow.js の this.windows.loadURL のところの、シングルクォート ( ' ) をバッククォート ( ` ) にしたらどうでしょうか。テンプレートリテラルと呼ばれる js の構文です。
    – wata
    Commented 2019年3月5日 2:50
  • できました。ありがとうございます。 なるほど、こういう書き方があるんですね。(最近JavaScript勉強しだしたので。。。。) Commented 2019年3月5日 14:28

1 件の回答 1

1

以下の記述のシングルクォートをバッククォートにしないと動かないかと思います!

'file://${__dirname}/../../index.html'
1
  • すみません!! コメントを読んでおりませんでした。。。
    – user44376
    Commented 2021年3月17日 8:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。