概要
本書は、 Electron を利用したマルチプラットフォーム・デスクトップアプリケーションを、 React-Redux で作成するワークショップです。
言語には、 JavaScript ではなく、 TypeScript を利用します。
これらの技術を組み合わせることで、中～大規模開発においても非常に効率よく設計・実装ができるようになります。
1日目では、それぞれの技術の概要の説明と、npm / yarn を使ったライブラリの導入まで行います。
対象者
- Web開発の経験があり、ある程度 JavaScript は知っている人。
- Electron を試してみたい人。
前提条件
Node.js がコンピューターにインストールされていることが必要です。
執筆時点の Node.js のバージョンの最新版は、 12.16.2 です。ある程度古いものでも大丈夫と思いますが、うまくいかない場合は、このバージョン違いを疑ってみてください。
Node.js のインストールには、各OS(Windows, macOS, Linux)にnodeのバージョン管理ツールがあるので、それらを活用するのをお勧めします。
各技術の概要
ワークショップに入る前に、利用するプラットフォーム、ライブラリ、ツール等の説明をします。
参考: Webアプリケーション開発のツールやライブラリのまとめ - Qiita
Node.js
公式サイト: Node.js
Site: サーバー、デスクトップ上で動作する、 JavaScript 動作環境です。
ブラウザ上で動作するものと異なり、動作しているコンピューター上のファイルやプロセス、デバイスなどへのアクセスが可能でです。
Web サーバーとしても利用されることが多いですが、クライアント PC でのバッチ処理等でも活用できます。
npm
公式サイト: npm
Node Package Manager の略で、主に JavaScript のライブラリを管理するものです。
オープンソースのライブラリを利用するときに、 .js ファイルをダウンロードして自分のディレクトリにコピーするような作業は必要なく、npm のサーバーに多くのライブラリが登録されており、npm installのようなコマンドでダウンロードやアンインストール、アップデートなどができます。
最近では JavaScript だけでなく、normalize-scss - npm のようにCSSやHTMLといったWebで使うリソースも登録されています。
以下のライブラリも、全て npm でインストールすることができます。
Yarn
公式サイト: Yarn
npm だけでも良いのですが、それを更に便利（早い、コマンドを短縮できる、など）にした yarn を利用することも多いです。
参考: npm vs yarnどっち使うかの話 - Qiita
インストールは、公式サイトからインストーラーをダウンロードするか、npm からもインストールできます。グローバル(-g)でインストールするのを忘れないでください。
> npm install -g yarn
以降のパッケージャのコマンドは、npm と yarn を併記します。
Electron
公式サイト: Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.
HTMLやJavaScriptといったWebの技術で、マルチプラットフォームのデスクトップアプリケーションを作成できるフレームワークです。
対応するプラットフォームは、windows, macOS, Linuxで、これらのアプリを ほぼ 1ソースで作成することができます。
JavaScriptの実行エンジンには、 Node.js が利用されているため、OSのファイルやプロセスにアクセスでき、C#やJavaで作成するアプリと遜色ない機能を持つアプリを作ることができます。
HTMLやCSSのレンダリングには、Google Chrome で採用されている Chromium が採用されており、HTML5やCSS3の最新の仕様を利用することができる。当然、IE対応などブラウザ間の差異に悩まされることはありません。
React
公式サイト: React - A JavaScript library for building user interfaces
React はFacebook社が開発した、オープンソースのWebUIフレームワークです。
特徴としては、DOMを直接操作するのではなく、JavaScriptでコンポーネントと呼ばれるパーツを作って、ページを組み立てます。
コンポーネントには、データを渡すことで動的に振舞いを変えることができます。
AngularJS などと異なり、 React がサポートするのはMV*(C)で言うところの V（view）の部分だけで、データのバインドは1方向です。データの変更にはコーディングが必要になりますが、そのおかげでシンプルな構造を保てます。
参考:
出来る限り短く説明するReact.js入門 - Qiita
Reactを使うとなぜjQueryが要らなくなるのか
Redux
公式サイト: Read Me - Redux
Redux は、データの状態を管理するフレームワークで、MV*(C)で言うところの M や C の部分を担当します。V には React を使うことが多いですが、別のフレームワークやライブラリも利用できます。
特徴としては、Reducer->Store->View->Reducer という1方向のデータの流れを作るもので、これは Flux というアーキテクチャ思考です。
これにより部品ごとにデータとその処理を管理することができ、大規模になってもシンプルな構造が保てます。
詳しい説明は追って行います。
TypeScript
公式サイト: TypeScript - JavaScript that scales.
マイクロソフト社が開発・メンテナンスする、オープンソースのプログラミング言語で、コンパイルすることで、 JavaScript を出力する、いわゆる ALT JavaScript言語です。
JavaScript（正確には ECMAScript）の完全なスーパーセットで互換性を保ちつつ、C#やJavaのような静的型付けとインターフェース、クラス設計、null-safety なコーディングができることがなど特徴です。
これにより、10万ステップを超えるような大規模な開発でも効率の良い継続開発が可能です。
webpack
公式サイト: webpack
webpack は JavaScript が持たないモジュール依存（あるJSファイルが他のJSファイルを参照すること）を解決するためのツールです。
各種 loader を利用することで、さまざまな変換やJavaScriptへの変換ができるようになります。
上記以外には、 html や JavaScript のミニファイ、sass -> css 変換など、また CSS や 画像ファイル を JavaScript にも変換することができます。
loader 一覧: Loaders
npmプロジェクトの作成
npm コマンドを利用してライブラリの管理を行うには、package.jsonファイルが必要です。
このファイルが有るディレクトリが npm プロジェクトのディレクトリとなります。
- 下記コマンドで、
package.jsonを作成します。
$ npm init
# or
$ yarn init
とりあえず全て[enter]キーを押して先に勧めます。
-
package.jsonを開き、mainの値をmain.jsに書き換えます。{ "main": "main.js", }main.jsは後に作成する、Electronのメインプロセスの起動ファイル（エントリーポイント）を指定しています。
必要なライブラリをインストールする
electron, React, Redux, TypeScriptコンパイラなどをインストールします。
ここでは、基本的なライブラリのみをインストールすることにします。
他にも多くのライブラリを利用しますが、必要になるたびにインストールします。
- 実行時に必要なライブラリをインストールします。下記コマンドを実行します。
$ npm install --save react react-dom redux react-redux
# or
$ yarn add react react-dom redux react-redux
- 各ライブラリの概要:
- react: React 上で説明済み
- react-dom: ReactのコンポーネントをDOMに紐付けるために必要
- redux: Redux 上で説明済み
- react-redux: React と Redux を連携させるライブラリ
- 開発時に必要なライブラリをインストールします。
$ npm install --save-dev electron typescript eslint prettier eslint-config-prettier eslint-plugin-prettier webpack webpack-cli ts-loader
# or
$ yarn add -D electron typescript eslint prettier eslint-config-prettier eslint-plugin-prettier webpack webpack-cli ts-loader
- 各ライブラリの概要:
- electron: Electron ライブラリ
- typescript: TypeScript コンパイラ
- webpack: モジュールバンドラ JSが持たないモジュールの依存関係を解決するツール
- ts-loader: webpackのTypeScript処理オプション・ライブラリ
- 各ライブラリのTypeScript用の型定義ファイルをインストールします。
$ npm install --save-dev @types/react @types/react-dom @types/redux @types/react-redux
# or
$ yarn add -D @types/react @types/react-dom @types/redux @types/react-redux
electron の型定義は、ライブラリに含んでいるので、別途のインストールは必要ありません。
npm / yarn で入れたライブラリについて
npm installでインストールされたモジュールは、node_modulesに入ります。
git などのソースコード管理において、そのディレクトリは、大抵、ファイル数が非常に多くサイズも大きくなり、そもそも開発者が修正したりするものではないので、管理対象からこのディレクトリを外します。
従って、複数人で開発する場合や異なる環境で開発する場合、それごとに必要なライブリをインストールする必要がありますが、npm でライブラリを管理している場合、必要なライブラリを下記コマンドで一括インストールする事ができます。
$ npm install
# or
$ yarn install # `yarn` だけでも可
package.json ファイルを開いてみてください。dependenciesとdevDependenciesが追加され、その中にnpm installで追加したライブラリ名が入っています。
package.jsonがあるディレクトリで、npm installを実行すると、dependenciesとdevDependenciesにあるライブラリを一括でインストールすることができるわけです。
package.jsonを git などのソースコード管理ツールに含めることで、環境毎に開発環境を揃えることができます。
次回
次は、アプリ開発のための各種定義を作っていきたいと思います。