electronでHello Worldを表示するまで

こんばんわ！
先日electronを初めて使用して「Hello World」まで表示させたのですが、
ものすごく簡単だったので、ブログに残します。

electronとは??

Javascriptでデスクトップアプリケーションを作る際に使用するツールです。
Atom、VS Code、SlackもElectronでできています。
詳しくはググればいくらでも記事が出てきます。

公式サイトを見るのが一番良いでしょう。

electronjs.org

electronで「Hello World」を表示させる。

早速本題に入ります。

electronで「Hello World」を表示するのに必要最低限なファイルは以下の通りです。

index.html
index.js
pacage.json

今回はelectron公式が用意している、electron-quick-startを使用します。

github.com

上記の公式ページにあるとおり実行

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

これだけでChromiumブラウザが起動し「Hello World」が表示されると思います。

あとはelectron-quick-startでcloneしたファイルを使ってカスタマイズしていくだけです。

最後に

「Hello World」を表示させるまでは物凄く簡単でした。
ですが、色々とやり込もうと思えば奥は深いと思います。
幸いにもドキュメントは豊富で、これを見れば様々なことがあまり苦労せずできそうです。 electronjs.org

Qiitaなどを参考にしても良いのですが、やはり動かないサンプルコードなどが存在していました。 公式を見るのをオススメします。