初めてのElectron+React+DevContainer【開発環境編】

# Electron の開発環境を作ってみた
## 結論
下記のリポジトリを参照していただければ、動く環境になっています。
https://github.com/aismszy/electron

## 前提条件
- VSCode の DevContaeinr を利用しています
- https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gui-apps こちらのサイトからGUIアプリの設定をしてください。
- 初めてなので大目に見てください。

## DevContainer の準備
こちらから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532683/3be9793a-2c45-198f-1826-aee1f9c8ce6f.png)

Node.js & Typescript を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532683/51889633-10ad-75a3-eb61-04c1fc304888.png)

devcontainer.json が作成されるので、postCreateCommand にコマンドを追加します。
※こちらGUIアプリを動かすために必要なライブラリのようです。

```
"postCreateCommand": "sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2",
```

全体はこちらです。
``` json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": "sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}
```

準備は終わったので、コンテナを立ち上げましょう。

## Electron のテンプレート準備

立ち上げた devContainer 環境で下記コマンドを叩いてください。

``` bash
npm create electron-webpack
```

色々聞かれるので、自分の使いたい通りに選択してください。

ソースが履かれるので準備完了です。

## 立ち上げてみよう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532683/8f0588cb-a744-4d47-8c94-8e3fd19b73ea.png)

このような構成になっているかと思います。
自分の画像だと electron フォルダの中で下記コマンドを実行します。

``` bash
yarn dev
```

Counter のアプリが動けば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532683/9037817a-195c-746d-578c-553798a79f99.png)

※画像はResetボタンを追加していますので、無視してください。

# Windows の exe を作成する方法
devcontainer.json の postCreateCommand を追記する

``` diff
- "postCreateCommand": "sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2",
+ "postCreateCommand": "sudo dpkg --add-architecture i386 && sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 wine64 wine32",
```

package.json に 下記を追加
```
"build:win": "electron-packager . --platform=win32 --arch=x64 --overwrite"
```

下記コマンドで作成
``` bash
yarn build:win
```

# 日本語フォント導入
``` diff
- "postCreateCommand": "sudo dpkg --add-architecture i386 && sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 wine64 wine32",
+ "postCreateCommand": "sudo dpkg --add-architecture i386 && sudo apt update && sudo apt -y install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2 wine64 wine32 fonts-takao",
```