PIYO - Tech & Life -

Electron完全に理解したわー（棒）となるまでに学んだこと

Electron JS

ここ3年ぐらいElectronでなんかデスクトップアプリ作りたい！と思って、でもなんとなくJSの環境周りが変わっていくので敬遠してました。

今回機会があって触り始めたら、難しく考えなくていいことがわかったんで、完全に理解したわーという気持ちになりました。

まあ、実際にはメインプロセスとレンダラープロセスでどう処理を分けるべきなのかとか、データの永続化ってどうするの？とかいろいろ知らないことは当然あります。が、それはまあおいおい学んで行こうと思います。

Webページと何も変わらないよという理解

僕がそもそもJS環境を整えることにそんなに慣れていないので、一番最初はElectronだけを入れました。いずれwebpackerだとかbabelだとか、あとで使いたくなりそうなものがたくさんありますが、最初はそちらに手を出さないほうが良いと思います。というか、僕は一気にやろうとしてハマリました。

ミニマムで始めるにはこちらの公式ドキュメントが適切です。

Quick Start | Electron
www.electronjs.org

最低2つのファイルがあればElectronのアプリを動かすことができます。

一つはメインプロセスを動かすためのJSのコードで、Windowを作ったりメニュー操作を定義したりとネイティブ側のためのコードだと思っとくとよさげです。

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

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

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

↑を見るとウィンドウを作ってHTMLを指定しているだけですね。

そしてもう一つはHTMLファイルで、これは作ったWindowの中にレンダリングするHTMLファイルです。ちなみに、最低限の話にするために↓のHTMLは公式ドキュメントから内容を削っています。

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

これでウィンドウもできたし、内容も定義できることがわかりました。

UIをつくる

こっから先はUIを作っていくわけです。まずはメインプロセスのことは忘れて普通のWebサイトだとして、JSのコードをロードしてみます。

<body>
  <script src="./app.js"></script>
</body>

// app.js
var val = 1 + 2;
console.log(val);

コードとしてはなんの意味もないですが、これでアプリをリロードするとデベロッパーコンソールにちゃんとログが出るはずです。

あとは通常のWebサイトと全く同じ作り方をすることができますので、例えばWeb APIを利用したGUIクライアントアプリみたなものであれば、本当にWeb開発と全く変わらないですね。HTMLにcssやjsをロードして、ボタンを押したらほにょほにょみたいなことができるわけです。

bootstrapを入れたり、Reactを入れたり、なんら変わりがありません。なんとなく敬遠してたのよくなかったなーと思ったものの、今いろいろ試せるのでめちゃくちゃ楽しいです。