開発日誌

日々の中で得た知識を書き溜めていくブログです

Electronを試してみる

electron

最近のお気に入りのエディタはVisual Studio Codeです。
そのVisual Studio Codeで採用されているElectronを試してみました。

Electronとは？

ElectronはHTML+CSS+JavascriptといったWeb技術でデスクトップアプリが開発できるフレームワークです。 Javascriptの実行エンジンにV8、レンダリングエンジンにChromiumを使用しています。 V8なので、ES2015の記法で書けるし、Node.jsが組み込まれているのでnpmも使用できます。 もちろん、ReactやVue.jsのフレームワークも使用できます。

ElectronでHello World

Electronをインストールします。

$ npm install electron -g

package.jsonを作成します。

$ npm init

メイン処理のindex.jsを作成します。

const {app, BrowserWindow} = require('electron')

app.on('ready', () => {
  let mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL(`file://${__dirname}/index.html`)
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

loadURLメソッドで指定しているindex.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

アプリを起動してみます。

$ electron .

f:id:H7kayama:20170722143001p:plain

Hello Worldが表示されます。簡単ですね。
これから色々と弄っていきたいと思います。