ボクココ

個人開発に関するテックブログ

Electron アプリを Sass, BrowserSync, WebPack で開発

ども、@kimihomです。

最近話題の Electron というWeb技術でデスクトップアプリが作れるフレームワークに注目している。これを使えば、あらゆるHTML5の最新機能をブラウザの差異を気にせず開発でき、最終的にはWindowsやMacなどのデスクトップアプリとして公開できるという優れものだ。

Qiitaを中心としたネットで出回っている最初のチュートリアルでは、どうも自分でシンプルなHTML/CSS/JavaScript でセットアップするようなものが見受けられる。最低限Sassは入れたいし、LiveLoadなどの仕組みもできれば導入したいところである。

ということで、今回は Sass, BrowserSync, WebPackを最速で構築できる Generator を使って、Electronの開発環境を構築する。

npm install -g npm
npm -g install electron-prebuilt
npm install -g yo

// global で実行できるコマンドが必要なため別でインストール
npm install -g node-sass

npm install -g generator-electron-extra
yo electron-extra

// node_modules/electron-prebuilt/path.txt がないと怒られるので、最新を入れる
rm -rf node_modules/electron-prebuilt
npm install electron-prebuilt

さて、これで自動ロードするElectronの仕組みを構築できた。

npm start

とすると、Electronのアプリが起動し、SassやJavaScript、 HTML を更新するだけでElectronが自動でリフレッシュされる仕組みを導入できた。以下のようなものが自動で立ち上がる。ちょっとSassをいじったので色などが変わってる。

先人の技術をお借りするのは大事だ。自力ではこの環境を構築するだけで何週間もかかりそうだ。ありがたや。これから一気にElectronアプリを開発していきたい。