ElectronとTypeScriptを使ったデスクトップアプリ開発環境の構築

これはなに

ElectronとTypeScriptを使ったデスクトップアプリの開発環境を構築する方法について説明する。

Electronとは

Electron は、ウェブ技術を用いてデスクトップアプリケーションを開発するためのフレームワークである。HTML、CSS、JavaScriptを使ってアプリケーションを構築できるため、ウェブ開発者にとって非常に手軽な開発環境が提供されている。

TypeScriptとは

TypeScript は、JavaScriptのスーパーセットであり、型システムやクラスベースのオブジェクト指向プログラミングを導入した言語である。TypeScriptはコンパイルされるとJavaScriptに変換されるため、ブラウザやNode.js環境で実行できる。

環境構築手順

必要な開発ツールのインストール

開発環境を構築するには以下のツールが必要である。

Node.js
npm（Node.jsのパッケージマネージャ）
Visual Studio Code（エディタ）

これらのツールがインストールされていることを確認し、最新バージョンにアップデートする。

本記事執筆時の環境は次のとおりである。

$ node -v
v18.15.0
$ npm -v
9.6.3

Electronプロジェクトの作成と初期設定

新しいプロジェクトディレクトリを作成し、次のコマンドを実行してnpmプロジェクトを初期化する。

mkdir my-electron-app
cd my-electron-app
npm init -y

これにより、package.jsonファイルが生成される。次に、ElectronとTypeScriptの依存関係をインストールする。

npm install --save-dev electron typescript @types/node

@types/nodeは、Node.jsのTypeScript型定義を提供するパッケージである。TypeScriptでNode.jsの機能を使用する場合に役立つ。今回のプロジェクトでは主にElectronを使用しているが、Node.jsのAPIを使用する場合がある。そのため、型定義が正確であることを確認するために、このパッケージのインストールを推奨する。

また、いくつかの記事ではts-nodeをインストールしている。ts-nodeは、TypeScriptコードをコンパイルせずに直接実行できるツールである。これにより、開発プロセスが簡略化され、コンパイルにかかる時間が節約される。ただし、今回のプロジェクトでは、Webpackを使用してコンパイルとバンドルを行っているため、ts-nodeを使わなくても開発できる。よってts-nodeはインストールしない。

TypeScriptの設定

TypeScriptをプロジェクトで使用するための設定をする。 tsconfig.jsonファイルをプロジェクトのルートディレクトリに作成し、以下の内容を記述する。

tsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",  // モジュールのフォーマットを指定
    "target": "ES2022",  // コンパイルされたJavaScriptのバージョンを指定
    "outDir": "dist",  // コンパイルされたファイルが出力されるディレクトリを指定
    "sourceMap": true,  // デバッグ時にTypeScriptファイルを参照できるようにする
    "moduleResolution": "node",  // モジュールのインポートを解決する方法をnode_modulesディレクトリを再帰的に探索するように指定
    "esModuleInterop": true,  // TypeScriptとECMAScriptモジュールとの相互運用性を向上させるための設定。インポート時の記述が簡潔になる。
    "strict": true,  // 厳格な型チェックを有効にする
    "forceConsistentCasingInFileNames": true,  // ファイル名の大文字と小文字の一貫性を強制する
    "noUnusedLocals": true,  // 未使用のローカル変数がある場合、エラーを発生させる
    "noUnusedParameters": true,  // 未使用の関数パラメータがある場合、エラーを発生させる
    "noFallthroughCasesInSwitch": true,  // switch文でbreakなしのフォールスルーがある場合、エラーを発生させる
    "resolveJsonModule": true,  // JSONファイルをモジュールとしてインポートできるようにする
  },
  "include": [
    "src/**/*.ts"
  ]
}

Electronの設定

Electronを設定する。srcディレクトリを作成し、その中にmain.tsファイルを作成する。次に、Electronのメインプロセスとなる以下のコードをmain.tsに追加する。

src/main.ts

import { app, BrowserWindow } from 'electron';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      webviewTag: false,
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

HTMLファイルの作成

index.htmlファイルをプロジェクトのルートディレクトリに作成し、次の内容を記述する。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello, Electron and TypeScript!</h1>
  </body>
</html>

実行スクリプトの設定

package.jsonファイルを開き、scriptsセクションに以下の行を追加する。

package.json

"scripts": {
  "start": "tsc && electron .",
}

これで、アプリケーションを起動する準備が整った。

アプリケーションの実行

コマンドラインから次のコマンドを実行して、アプリケーションを起動する。

npm start

デスクトップアプリが起動する。

起動したデスクトップアプリ

おまけ : アプリケーションのパッケージング

アプリケーションの配布のために、パッケージング環境も整える。

electron-builderのインストール

アプリケーションのパッケージングには、electron-builderを使用する。以下のコマンドでインストールする。

npm install electron-builder --save-dev

package.jsonにパッケージング設定を追加

package.jsonに、electron-builderの設定を追加する。以下の内容を追記する。