YeomanでElectronプロジェクトを作る #Electron

面倒なWebプロジェクトを簡単に作成してくれるYeomanでElectronプロジェクトを作成してみました。

Yeomanとは

Yeomanは主にWebプロジェクトの雛形を作成してくれるツールです。Yeomanでは様々なプロジェクトのGeneratorが公開されており必要なGeneratorをnpmでインストールできます。

Generatorの中にはプロジェクトを生成したあとにもModelやViewのファイルを作成するコマンドを持っているものもあります。

今回はelectrionで検索した中で一番GitHubでスターが多かったgenerator-electronを利用します。確認したバージョンはgenerator-electron@1.14.0になります。

Yeomanと付き合うコツ

人様が作ってくれたGeneratorを使うと、どうしても相容れない部分が生じます。いつも使っているファイル階層ではなかったり、テストライブラリが違ったり、ライブラリのバージョンが違ったり・・・

自分の場合、Electronに限らず個人や社内でしか使わないような小さなツールか、デモやプロトタイプ、勉強のためのサンプルなどの一過性のプロジェクト生成に対して使うケースが多いです。

そしてYeomanを使う場合はこだわりを捨てて、Generatorから与えられたものをなるべくそのまま使うようにしています。自分好みにカスタマイズしていくとキリがなく、それだとすぐ始められるというYeomanを使うメリットが薄れるからです。

逆にいうとこだわりを捨てられないプロダクションではなかなかYeomanを使う機会はありません。

Yeomanのセットアップ

Node.jsのセットアップについては割愛します。

Yeomanのインストールは以下のようになります。

npm install -g yo bower grunt-cli gulp

実際のところ generator-electron はBowerもGrunt・Gulpを使っていなかったのでインストールしなくてもよいかもしれません。多くのWebプロジェクトのGeneratorはこれらに依存しています。

generator-electronのインストールは以下のようになります。

npm install -g generator-electron

yo --helpでAvailable Generators一覧に表示されればセットアップは成功です。

$ yo --help
Usage: yo GENERATOR [args] [options]
(中略)
Available Generators:
  electron

Electronプロジェクトの生成

Yeomanではyo <generator名>コマンドで カレントディレクトリ にプロジェクトを生成します。以下のように先にディレクトリを作成して実行すると良いです。

mkdir electron-yo-quick-start
cd electron-yo-quick-start
yo electron

プロジェクト名などいくつか対話式の入力を行ったあと、プロジェクトの生成と npm install が行われます。

プロジェクトの構成

generator-electronは非常にシンプルな構成になっています。

.
├── index.css
├── index.html
├── index.js
├── license
├── node_modules/
├── package.json
└── readme.md

依存ライブラリは以下のようになっています。開発用のツールしかないのでここからUIや機能を肉付けしていこうとするといろいろライブラリを追加していく必要があります。

package.json

{
  "dependencies": {
    "electron-debug": "^0.5.0"
  },
  "devDependencies": {
    "electron-packager": "^5.0.0",
    "electron-prebuilt": "^0.36.0",
    "xo": "^0.12.0"
  },
}

scriptsプロパティの指定は以下のようになっています。

package.json

{
  "scripts": {
    "test": "xo",
    "start": "electron .",
    "build": "electron-packager . $npm_package_productName --out=dist --ignore='^/dist$' --prune --asar --all --version=$npm_package_electronVersion"
  },
}

従って以下のタスクが利用できます。

npm start でアプリケーションの実行 (electron-prebuiltを利用)
npm run build でアプリケーションパッケージの作成 (electron-packagerを利用)
npm test でソースコードの検証 (xoを利用)

まとめ

Yeomanとgenerator-electronを利用して、Electronプロジェクトを作成する方法を紹介しました。

今回使ったGeneratorが作成するプロジェクトは非常にシンプルな内容であるため凝ったアプリを開発をする場合はここから多くの肉付けが必要です。逆に余計なものが何も入っていないからこそGeneratorの中でも支持されているのかもしれません。

Electronを始めたいけどどうプロジェクトを作り始めて良いかわからない場合など、勉強目的で触る時にYeomanでプロジェクトを作成するのは有効だと思います。