ElectronのインストールからHello Worldまで

## はじめに 
Electronの概要と、インストールから[Quick Start](https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md)を参考にHello Worldを動かすところまでを説明します。
最後にNode.js、npm、Electronの概要と仕組みを簡単にまとめます。
npmのWindows環境でのアップデート手順以外はリンク集で参考URLの概要を３行でまとめています。

## サマリ
- インストール
  - Node.jsをインストールする。npmは、一緒に入ります。  
  - [Electron](https://electron.atom.io/)のページからインストーラーをダウンロードし実行します。
  - npmを更新する手順を書いています。

- Quick Start
  - Electronの概要説明と、アーキテクチャ説明が最初に記述されているページです。
  - その後、最小構成(package.json, main.js, index.html)で動作させるHello Worldアプリケーションの説明です。

## [Electron](https://electron.atom.io/)の概要
- Electronとは
  - クロス(マルチ)プラットフォームで動作するアプリケーションを作るビルド環境です。
  - JavaScript, HTML5, CSSを使って開発することができます。
  - 開発環境にはNode.jsとnpmが必要になります。実行環境に、Electron, Node.jsは必要ありません。
- 参考URL
  - [@IT Electronとは？ アーキテクチャ／API／インストール方法／初期設定](http://www.buildinsider.net/enterprise/electron/01)
  - [Electronプログラミング入門 — インストールからミニブラウザ構築まで](https://html5experts.jp/yosuke_furukawa/20841/)

## インストール
- Node.jsをインストールします。  
  公式ページから、最新LTS版(Long Term Support=長期間サポート版）をインストールします。
- npmは自動で入ります。  
  ただし、GitHubなどで公開されているものを入れようとするとnpm installでエラーになることがあるため、必要に応じて以下のコマンドで更新します。
  <pre>npm update -g npm</pre>
  Windows7と8の場合(10は不明)は、更新を行っても正しく更新(*1)されなかったため(2017/5/13時点では
  Node.jsがLTS6.10.3のときnpmは3.10.10が入っています)、下の手順が必要になりました。
  バージョンの確認は、コマンドプロンプトで以下のように行います。
  <pre>npm --version</pre>
  Windowsでアップデートしたのに、3.10.10のままで表示された場合は、<https://www.npmjs.com/package/npm-windows-upgrade>から、npm-windows-upgradeを使って、以下のコマンドを管理者権限で起動したPower Shellから実行して更新します。
<pre>Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install --global --production npm-windows-upgrade
npm-windows-upgrade
</pre>
- Electronをインストールします。  
  公式ページ<https://electron.atom.io/>のGet Startedの「Download for OS名」ボタンからダウンロードし、インストーラーを起動します。

(*1) 詳細な解説は[Qiita-windows環境でnpmアップデート](http://qiita.com/alalwww/items/8da8edb068682ee501e9)の記事参照。

## Hello Worldを作る
- 公式サイトの[Quick Start](https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md)に従います。
  以下の最小構成のファイルを作成します。Quick Startにあるpackage.json,main.js,index.htmlのファイルの中身をコピーしてください。package.jsonについての説明は後述します。
<pre>your-app/
├── package.json
├── main.js
└── index.html</pre>

- Hello Worldの起動
  main.jsのあるディレクトリ(your-app)に移動し、以下のコマンドを実行します。
<pre>electron .</pre>起動すると、Hello Worldとnode,chrome,Electronのバージョンがデバッグモードで表示されます。
![Hello World](https://d3dr1ze7164817.cloudfront.net/items/1h352Z1f03160Z133i2s/quickstart.PNG)

## Electronの仕組み
#### アーキテクチャ
- GUIにChromeのブラウザエンジンであるChromium, JavaScriptのランタイムにはNode.jsが使用されます。 
  Chromiumのブラウザエンジンはオープンソースで、プラットフォーム依存していないためクロスプラットフォームのアプリケーションが使えます。また、Node.jsを使用しているため豊富なモジュールを使用することができます。
- 2つのプロセスから構成されています。
 メインプロセスは、main.jsから起動されるプロセスです。このプロセスから各画面ごとにレンダラ―プロセスが実行されます。
- プロセス間の通信に、IPCを使用します。

![Architecture](https://d3dr1ze7164817.cloudfront.net/items/2E050B2q0H1e2V0S182v/architecture.PNG)

#### Node.jsとは
- Node.jsは、サーバーサイドのJavaScript実行環境です。Electronを使えばクライアントでも動作させることができます。
- 以下の特徴を持っています。
  - シングルスレッドプロセス  
  リクエストに対してスレッドを作らないためTomcatのようなマルチスレッドプロセスで、クライアントが増えた際にスレッドが増え、サーバーのリソースを消費しきることもありません。
  - ノンブロッキングIO  
    コストの高いIO処理などを非同期で実行します。リクエストを待たせないということです。
    処理の修了はコールバックを呼び出して対応します。
  - イベントループ  
    リクエストの受付、リクエストの処理が終了したときのコールバック呼び出しをイベントとしてループ処理します。古い作りでいうとWindowプロシージャの構造に近いでしょうか。

- 参考URL  
  - [いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール](http://www.atmarkit.co.jp/ait/articles/1501/09/news040.html)

#### npmとは
- Node.jsのモジュールを管理するツールです。
- 簡単な使い方は以下の通りです。
<pre>npm init   ... カレントディレクトリにpackage.jsonを作成します。
npm install ... package.jsonに書かれたnodeのモジュールをインストールします。
npm run   ... package.json内に書かれたシェルを実行します。
</pre>
package.jsonは、参考URLに書いてある通り、そのディレクトリをnpmの管理下とするということを表すイファイルです。Quick Startで作成した際にコピーで作成しましたが、npm initで対話形式に作ることもできます。
- ノードモジュールのパッケージ名指定してインストールすることもあります。
インストールする際に指定できるスコープにはいくつかあります。
<pre>npm install パッケージ名   ... package.jsonのあるディレクトリにインストールします。
npm install --save パッケージ名   ... package.jsonに追加してインスト―ルします。
npm install --save-dev パッケージ名   ... テストなどに使うものとしてpackage.jsonに追加しインストールします。
npm install -g パッケージ名   ... グローバルにインストールします。
</pre>

- 参考URL
  - [Qiita-フロントエンド開発の３ステップ（npmことはじめ）](http://qiita.com/hashrock/items/15f4a4961183cfbb2658)
  - [Qiita-ちゃんと使い分けてる? dependenciesいろいろ。](http://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95)

#### Electronの公式デモ
[Electron](https://electron.atom.io/)の公式ページの中ほどにあるGet Started→Explore the Electron APIsからダウンロードすることができます。
セットアップしてすぐ動かすことができる＋ソースコードも含めたデモの説明も見れるので参考になると思います。
![electron-demo](https://d3dr1ze7164817.cloudfront.net/items/291j393g3y0l2K2M1B2I/electron-demo.PNG)