Electron & React & Redux & TypeScript アプリ作成ワークショップ 1日目

• 1日目（この記事）
• 2日目
• 3日目
• 4日目
• 5日目
• 6日目
• 7日目
• 8日目
• 9日目

概要

本書は、 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のバージョン管理ツールがあるので、それらを活用するのをお勧めします。

参考: Node.jsのバージョンを管理する - Qiita

各技術の概要

ワークショップに入る前に、利用するプラットフォーム、ライブラリ、ツール等の説明をします。

参考: 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 というアーキテクチャ思考です。

これにより部品ごとにデータとその処理を管理することができ、大規模になってもシンプルな構造が保てます。

詳しい説明は追って行います。

参考: Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita

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 プロジェクトのディレクトリとなります。

1. 下記コマンドで、package.jsonを作成します。

$ npm init
# or
$ yarn init

とりあえず全て[enter]キーを押して先に勧めます。

参考: 初期化処理を行う！npm initの使い方【初心者向け】 | TechAcademyマガジン

1. package.jsonを開き、main の値をmain.jsに書き換えます。

   {
   "main": "main.js",
   }
   

   main.jsは後に作成する、Electronのメインプロセスの起動ファイル（エントリーポイント）を指定しています。

必要なライブラリをインストールする

electron, React, Redux, TypeScriptコンパイラなどをインストールします。

ここでは、基本的なライブラリのみをインストールすることにします。
他にも多くのライブラリを利用しますが、必要になるたびにインストールします。

1. 実行時に必要なライブラリをインストールします。下記コマンドを実行します。

$ 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 を連携させるライブラリ

1. 開発時に必要なライブラリをインストールします。

$ 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処理オプション・ライブラリ

1. 各ライブラリの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 などのソースコード管理ツールに含めることで、環境毎に開発環境を揃えることができます。

次回

次は、アプリ開発のための各種定義を作っていきたいと思います。