36
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

electron + Reactで5分でHelloWorldする

研究でデスクトップアプリケーションを作る必要があったので、試しにelectronを触ってみました。

環境

  • macOS High Sierra 10.13.6
  • Zsh
  • Node.js v10.13.0

Node.jsのインストール

今回はnodebrewを使ってインストールします。

$ brew install nodebrew
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc`
$ mkdir -p ~/.nodebrew/src
$ nodebrew install v10.13.0
$ nodebrew use v10.13.0

インストールできたか確認。

$ node -v
v10.13.0

良さそうです。

特にバージョンの指定はないですが、公式ダウンロード の推奨板がv10.13.0だったのでこれにしました。(他のパッケージ等でエラーが出たら別バージョンに変えようと思います...)

Yarnのインストール

npmの代わりとして今回はyarnを使います。

$ brew install yarn

インストールできたか確認。

$ yarn -v
1.12.1

良さそう。

create-react-app を使う

コマンドで1つでReactアプリケーションの雛形が作れる強いパッケージです。今回はこれを使用します。

$ yarn global add create-react-app
$ create-react-app electron_sample

アプリが作成されました。起動してみます。

$ cd electron_sample
$ yarn start

localhost:3000にアクセスして、こんな感じになったらOKです。

electronを導入する

yarn を使ってインストールします。

$ yarn add electron --dev

次にpackage.jsonを編集します。

package.json
{
  "name": "electron_sample",
  "version": "0.1.0",
  "private": true,
  "main": "src/electron-starter.js",
  "dependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-scripts": "2.1.1"  
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron ."
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "electron": "^3.0.7"
  }
}

"main": "src/electron-starter.js","electron": "electron ."の2行を追加する感じです。

続いてsrc/electron-starter.jsを作成し編集していきます。
(こちらのソース からコピペしました)

src/electron-starter.js
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('http://localhost:3000');

    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow()
    }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

$ yarn startしながら別ウィンドウで$ yarn electronすると、デスクトップアプリのウィンドウが起動します。

OK!! 良さそうです。

参考記事

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
36
Help us understand the problem. What are the problem?