フロントエンジニアのメモ

普段フロントエンジニアしているやつが思ったことや書き残したいこと

electronでHello Worldを表示するまで

f:id:tf6533:20171119222903j:plain

こんばんわ!
先日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」が表示されると思います。

f:id:tf6533:20171119220357p:plain

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

最後に

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

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