目次

はじめに
Electronとは
準備するもの
nodistのインストール
Node.jsのインストール
Electronのインストール
npmコマンドの紹介
次回予告

はじめに

クロスプラットフォーム開発と言えばモバイルアプリケーションを思い浮かべますが、モバイルだけではなく、デスクトップアプリケーションでもクロスプラットフォームでの開発を行うフレームワークが存在します。
本テーマでは、そんなクロスプラットフォームに対応したデスクトップアプリケーション開発の世界をご紹介します。

古くはJavaが主流でしたが、昨今はWebの開発技術を利用したElectronやNW.jsといったフレームワークが人気となっています。
直近では.NET Core 3.0にてWinForm/WPFを用いたクロスプラットフォームのデスクトップアプリ開発がサポートされており、c#好きな私としては気になるところではありますが、また別の機会に触れるとして今回はElectronを紹介したいと思います。

Electronとは

Electronとは、HTML、CSS、JavaScriptといったWebテクノロジーを利用して、クロスプラットフォームのデスクトップアプリケーションが作成できるフレームワークです。
GitHubが「Atom」を作成するために開発したオープンソースのフレームワークで、「Atom」の他に「GitHub Desktop」や「Visual Studio Code」もElectronを用いて開発されています。

ElectronはChromium（Googleが開発しているオープンソースのWebブラウザ）とNode.jsを用いているため、Webの開発技術を使って開発が可能で、Webの開発経験があればノウハウを生かして学習コストを低く抑えることができます。

準備するもの

	バージョン
Windows10	–
nodist	0.9.1
Node.js	11.15.0
Electron	6.0.10

nodistのインストール

今回はNode.jsをそのままインストールせず、nodistを利用してNode.jsのバージョン管理を行います。
※Node.js のバージョンが違うとビルドに失敗するなどの影響があるので、nodistでバージョン管理できるようにし、プロジェクトに合わせてバージョンを変えれるようにすることをお勧めします。

nodistは以下のURLよりインストーラーをダウンロードしてインストールします。

Node.js単体でのインストールは以下の記事を参考にしてください。

インストーラーの指示に従いインストールが終わったら、確認のためコマンドプロンプトにてコマンドを入力します。

nodist -v

今回は「NodistSetup-v0.9.1.exe」をインストールしましたので、「0.9.1」と表示されました。

Node.jsのインストール

次に、nodistを使用してNode.jsの任意のバージョンをインストールします。
下記コマンドを入力することで、使用可能なNode.jsのバージョンが一覧で表示されます。

nodist dist

以下のような一欄が表示されます。

・・・ 
  13.0.0
  13.0.1
  13.1.0
  13.2.0
  13.3.0
  13.4.0
  13.5.0
  13.6.0
  13.7.0
  13.8.0
  13.9.0
  13.10.0
  13.10.1
  13.11.0

今回は‘v11.15.0‘をインストールします。

nodist + 11.15.0

複数バージョンをインストールした場合は、以下のコマンドで使用するバージョンを指定します。

nodist 11.15.0

※指定したバージョンがインストールされていない場合、以下のようなエラーが表示されるので、その場合はインストールコマンドを入力してください。

Version spec, "11.15.1", didn't match any version.
Sorry.

Node.jsのインストールとバージョン指定が完了していることを確認します。

node -v

無事インストールが出来ていれば「v11.15.0」と表示されます。

Electronのインストール

Node.jsをインストールすると、Node.jsのパッケージを管理するツール（npm： Node Package Manager）が使用できます。
npmを使ってelectronをインストールします。

npm install -g electron

Electronがインストールされたことを確認します。

npm list -g electron

正常にインストールが出来ていれば「`– electron@6.0.10」と表示されます。

npmコマンドの紹介

Node.jsを利用した開発では、npmコマンドを頻繁に利用します。ここで、よく使うnpmコマンドを紹介しておきます。

npmのバージョンを確認する

npm -v

package.jsonを作成する

npm init
npm init -y

「-y」オプションをつけることでpackage.jsonの中身が自動で生成されます。

プロジェクトにパッケージをインストールする

npm install
npm install パッケージ名

パッケージ名の指定をしないnpm installは、package.jsonのdependenciesを元にプロジェクトにパッケージがインストールされます。
パッケージ名を指定した場合、package.jsonに存在しないパッケージを追加する場合に使用します。

グローバルにパッケージをインストールする

npm install -g パッケージ名

※npmのパッケージはグローバルまたはプロジェクトのどちらかにインストールが可能です。
今回は説明のため、グローバルにインストールをしていますが、プロジェクトによって動作しなくなることを避けるため、プロジェクトにインストールすることをお勧めします。

バージョンを指定してインストールする

※グローバルにインストールする場合は「-g」オプションを利用します。

npm install パッケージ名@x.x.x
npm install -g パッケージ名@x.x.x　※グローバルの場合

パッケージをアップデートする

npm update パッケージ名
npm update パッケージ名@x.x.x　　　※バージョン指定版
npm update -g パッケージ名　　　　 ※グローバル指定版
npm update -g パッケージ名@x.x.x　※グローバル指定かつバージョン指定版

※npm自身のアップデートもnpmコマンドを使用します。

パッケージをアンインストールする

npm uninstall パッケージ名
npm uninstall -g パッケージ名

インストールされたパッケージを表示する

npm ls
npm ls -g
npm ls パッケージ　　　　※パッケージ名を指定して個別に表示
npm ls -g パッケージ　　※グローバル指定版

次回予告

今回はElectron開発のための事前準備を行いました。
次回から、実際にプロジェクトを作成してみたいと思います。