TypeScript+React+Electronでデスクトップアプリを開発するその１（開発環境を構築する）

本日はTypeScriptの学習枠です。
TypeScript+React+Electronでデスクトップアプリを開発する手順を試してみました。
今回は開発環境の構築です。

TypeScriptはJavaScriptを拡張したプログラミング言語です。
JavaScriptに型(Type)を追加しているのが特徴で、型チェックによるエラーチェックや可読性の向上、自動補完などが利点になります。
www.typescriptlang.org

ReactはWebサイトやアプリの見た目(UI)を作るためのJavaScriptライブラリです。
Reactを使うと必要な部分だけを更新できるWebページを作ることができます。
github.com

Electronはデスクトップアプリを作るためのフレームワークです
Reactなどと組み合わせることでWebサイトの技術を使ってデスクトップアプリを作成できます。
www.electronjs.org

npmコマンドを使って環境構築を行うのでNode.jsのインストールが前提となります。
Node.jsのインストール手順は以下を参照ください。
bluebirdofoz.hatenablog.com

今回はVisualStudioCodeを利用して開発環境を構築してみました。
TypeScript+React+ElectronでHelloWorldの画面を表示するデスクトップアプリを作成します。

新規作成したプロジェクトフォルダで以下のコマンドを実行します。

npm init -y

npm initでは現在のフォルダに新しいNode.jsプロジェクトの初期設定ファイルpackage.jsonを自動生成します。
これがあることで依存パッケージやスクリプトを管理できるようになります

次にReactライブラリをインストールします。
以下のコマンドを実行します。

npm install react react-dom

Reactは画面表示を担当するレンダラープロセスで利用します。

次に以下のコマンドを実行して開発に必要なツールをまとめて入れます。

npm install --save-dev electron typescript @types/node @types/react @types/react-dom esbuild

ここでまとめてインストールしたセットは以下の通りです。

今回は開発環境のローカルインストール（--save-dev）として入れています。

次に以下のコマンドを実行してTypeScriptの設定ファイルtsconfig.jsonを初期化します。

npx tsc --init --rootDir src --outDir dist --strict --esModuleInterop

tsc --initはTypeScriptコンパイラの設定を自動生成するコマンドで、--rootDirはソースの場所、--outDirはコンパイル後の出力先を指定しています。
--strictと--esModuleInteropで型チェックを厳しくしつつ、モジュールの互換性も確保します。

次回はコードの作成を行います。
bluebirdofoz.hatenablog.com

MRが楽しい