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

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

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

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

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

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

electronjs.org →https://electronjs.org/docs/tutorial/first-app

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

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

 1const {app, BrowserWindow} = require('electron')
 2
 3function createWindow () {
 4  // Create the browser window.
 5  win = new BrowserWindow({width: 800, height: 600})
 6
 7  // and load the index.html of the app.
 8  win.loadFile('index.html')
 9}
10
11app.on('ready', createWindow)

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

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

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="UTF-8">
 5    <title>Hello World!</title>
 6  </head>
 7  <body>
 8    <h1>Hello World!</h1>
 9  </body>
10</html>

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

UIをつくる

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

1<body>
2  <script src="./app.js"></script>
3</body>

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

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

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

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