Windowsにnode.js+Electronを入れてwindowsアプリを作る方法

Windowsにnode.jsとElectronを入れる方法をメモしておく。

一応、公式サイトを参考にしてやってみたが少し説明不足気味だったので、他サイトも参考にした。

参考記事:Writing Your First Electron App | Electron

Node.jsをインストール

もし、Node.jsをインストールしていなければ、Node.jsのダウンロードをする。 Node.jsをインストールしているかどうかのチェックは、コマンドプロテクトで以下のコマンドを打てば良い。

node -v

もし、インストールしていない場合は、以下のリンクからインストールしよう。

参考記事:ダウンロード | Node.js

アプリのディレクトリを作成する

次に、作成するアプリのディレクトリ(フォルダ)を作成する。(今回はsampleディレクトリを作成。名前は何でも良い)

mkdir sample
cd sample

この段階でディレクトリを作成する理由は、ディレクトリ事にElectronのバージョン管理をしたいからだ。

例えば、sample1とsample2の2つのアプリを作ったとする。もし、全てのアプリで同じElectronを使っていて、Electronをバージョンアップをした時にsample1は何の問題もなく動くが、sample2に不具合が生じた場合、sample2のためにsample1も前のバージョンのElectronに戻して使う必要が出てしまう。

そのため、ディレクトリ事にElectronをダウンロードして管理していくことで、sample1は最新バージョン、sample2は前のバージョンのElectronで運用が可能になるのだ。

Electronをダウンロードする

Node.jsを入れると、npm(Node Package Manager)と言うJavaScriptのパッケージ(ライブラリ)をダウンロードしたり、バージョン管理を出来たりする物も一緒にインストールされる。

前の手順でアプリのディレクトリ(例で言うと、/sample)に移動していると思うので、以下のコマンドを入力。

npm i -D electron

これでElectronがインストールされる。ちなみに、コマンドの -D は –save-devの略。

上手く行くと、sampleディレクトリ内にnode_modulesディレクトリ(この中にelectronが入っている)とpackage.jsonが入っているはず。

参考記事:npx electron ./src

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

SNS Shere

Related Post

JavaScriptのソースコードを読む時に知っておきたいモジュールパターン

JavaScriptの配列で参照渡しではなく値渡しをする方法と注意点

JavaScriptにおける短絡演算子(ショートカット演算子)の実践的な使い方

Javascript+HTML5を使って画像アップロードのプレビュー機能を実現する方法

Javascriptの書き方パターン

JavaScriptを使ってスクロールでメニューを固定・追従させる方法