TypeScript+React+Electronでデスクトップアプリを開発するその３（アプリケーションのビルドと実行）

本日はTypeScriptの学習枠です。
TypeScript+React+Electronでデスクトップアプリを開発する手順を試してみました。
今回はアプリケーションのビルドと実行です。

前回記事

以下の前回記事の続きです。
bluebirdofoz.hatenablog.com

アプリケーションのビルドと実行

TypeScriptのビルド設定を整えます。
tsconfig.jsonに以下の通り出力先（dist）、ソース配置（src）、JSX の扱い（react-jsx 方式）などの設定を行いました。

・tsconfig.json

{
  // コンパイラオプション
  "compilerOptions": {
    // TypeScriptが変換時に生成するJavaScriptのバージョンをES2020に設定
    "target": "ES2020",
    // 出力されるモジュール形式をCommonJS（Node.js向け）に指定
    "module": "CommonJS",
    // モジュール解決方法としてNode互換のアルゴリズムを採用
    "moduleResolution": "Node",
    // コンパイル後の出力ディレクトリをdistに指定
    "outDir": "dist",
    // ソースコードのルートディレクトリをsrcに指定
    "rootDir": "src",
    // 厳密な型チェックを有効化
    "strict": true,
    // ESモジュールとCommonJSモジュールの相互運用を有効化
    "esModuleInterop": true,
    // 型定義ファイルの型チェックをスキップしてビルド時間を短縮
    "skipLibCheck": true,
    // ファイル名の大文字小文字の一貫性を強制
    "forceConsistentCasingInFileNames": true,
    // JSXをReact 17以降向けのtransformで処理
    "jsx": "react-jsx"
  },
  // コンパイル対象ファイル
  "include": [
    // コンパイル対象のファイルとしてsrc配下を指定
    "src"
  ]
}

次に package.json のスクリプトを整えます。目的は以下のとおりです。

main：dist/main/main.js に変更し、Electron がビルド済みのメインプロセスを参照できるようにします。
build:main：TypeScript でメインプロセス (main) をコンパイルします。
build:renderer：esbuild で React 側 (renderer) をバンドルし、dist/renderer/index.js を生成します。
copy:html：Node.js のワンライナーで index.html を dist/renderer にコピーします（フォルダがなくても自動で作成）。
build：上記 3 つを順番に実行して、アプリ実行に必要な成果物をまとめて用意します。
start：ビルドを行ってから electron . でアプリを起動します。

・package.json

{
  "name": "helloelectronproject",
  "version": "1.0.0",
  "description": "",
  "main": "dist/main/main.js",
  "scripts": {
    "build:main": "tsc",
    "build:renderer": "esbuild src/renderer/index.tsx --bundle --outfile=dist/renderer/index.js --loader:.ts=ts --loader:.tsx=tsx --platform=browser",
    "copy:html": "node -e \"const fs=require('fs');fs.mkdirSync('dist/renderer',{recursive:true});fs.copyFileSync('src/renderer/index.html','dist/renderer/index.html');\"",
    "build": "npm run build:main && npm run build:renderer && npm run copy:html",
    "start": "npm run build && electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@types/node": "^24.10.0",
    "@types/react": "^19.2.2",
    "@types/react-dom": "^19.2.2",
    "electron": "^39.1.1",
    "esbuild": "^0.27.0",
    "typescript": "^5.9.3"
  }
}