WindowsデスクトップアプリをGoで作成する①　～WSL+Docker+Wails～

## はじめに

この記事は「[Qiita Advent Calendar 2023 Go言語](https://qiita.com/advent-calendar/2023/go)」の22日目の記事です。

## ゴール

Windows11上に構築したWSLでGoデスクトップアプリケーションを構築し、開発モードでアプリを起動できるところまでを目指します

## 前提

[前記事](https://qiita.com/miu200521358/private/a668da62bc208f40b121) に基づいて、Windows上にWSL+Docker+VSCode の開発環境が出来ているものとします

## 公式手順

[Wails: Getting Started](https://wails.io/ja/docs/gettingstarted/installation)

## 全体の流れ

1. VSCodeで開発コンテナーを開く
1. npmのインストール
1. ブラウザを開くためのライブラリインストール
1. Wails のインストール
1. 実行中のコンテナーにアタッチする
1. Wails プロジェクトの実行

## VSCodeで開発コンテナーを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/e1159675-2ed5-e0ee-6165-cf45d7621015.png)

## npmのインストール

1.  cURL（CLIダウンロードツール） をインストールする

```bash
sudo apt-get install curl
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/6c0a134e-b9b3-930c-9e48-19cf30ca8389.png)

1. nvm（Node.jsバージョン管理ツール） をインストールする

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/77fc3cdc-66ff-d38e-eb15-a544e0cfff97.png)

1. ターミナルを立ち上げ直し、nvm コマンドを実行してみる

```bash
nvm --version
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8e3a52f6-18d3-0842-d0ed-664470235798.png)

1. 安定バージョンのNode.js をインストールする

```bash
nvm install --lts
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/f010eb0b-f90c-bddb-f7e7-bec168c9223c.png)

1. Node.js と npm のインストールを確認する

```bash
node --version
npm --version
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/1785aa91-9eb5-9312-049d-e7555c270d73.png)

## ブラウザを開くためのライブラリインストール

```
sudo apt install xdg-utils
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/a081c5c9-3f6e-de2f-876c-f2f5072e3eaf.png)

## Wails のインストール

1. 依存ライブラリをインストールする

```bash
sudo apt update -y
sudo apt install libgtk-3-dev libwebkit2gtk-4.0-dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/814a14df-5dca-e0fa-7880-1f509a232565.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/307b3f17-1569-5d60-93a2-fb353186f1db.png)

1. 新しいターミナルを立ち上げる

1. Wails CLI をインストールする

```bash
go install github.com/wailsapp/wails/v2/cmd/wails@latest
```

(キャプチャ忘れ）

1. Wails のシステムチェックを行う

```bash
wails doctor
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/75641d9e-130b-994b-bd39-008cbabd511b.png)

## 実行中のコンテナーにアタッチする

1. コンテナーアイコン（＞＜）から「実行中のコンテナーにアタッチ…」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/1302515a-c36e-f6a2-69a3-552cd0b8829a.png)

1. コンテナーを選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/21298582-f7f7-fd88-14ee-6d41bc04b888.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/532bbc2f-c55f-ef99-b0ab-2e72c28ce9c0.png)

## Wails プロジェクトの実行

1. お好みのフレームワークで初期化

```
wails init -n hello_wails -t vue-ts
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/ce0b2bea-e98a-7819-c196-bfa0b9ceedc7.png)

1. go.mod 内のモジュール名 (デフォルト：`changeme`) を任意のモジュール名に修正する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/1e2f550f-8fb1-4b4e-7c9b-db040d3fbe16.png)

1. プロジェクトのディレクトリに入って、アプリをライブ開発モードで実行する

```
cd hello_wails
wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8c64cf61-3f0f-b253-deb0-2ea78d46803a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/56ed012e-4618-283b-8e6c-e74a848fffb2.png)

## おわりに
本当はexe作成まで行きたかったんですけど、権限周りで苦戦中ですｗ
また記事を上げられるよう頑張ります～

Merry Christmas & Happy New Year !!!

## 参考URL

- [Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl)
- [WSLでxdg-openする（備忘録）](https://qiita.com/arrow2nd/items/5c02a8cdf8197ae15cb7)