(Go, Golang) Wails に入門する

経緯

ここ最近忙しくてデスクトップアプリ開発環境として Tauri (Rust) をまともに触れていませんでした (Cargo でバージョンを多少上下させてみましたが解決せず)。

が、必要に迫られたので久々に新規プロジェクトを立ち上げようとしました。

しかし、開発環境の Rust のバージョンと Crate のパッケージのバージョンで依存関係と互換性の問題が生じてしまい、エラーになってしまいました。

  • 元々自分用のアプリを作る程度の極小規模の開発でしか使わなかったのでその割に開発コストが高い (型が厳密過ぎてとりあえず動くものをサクッと作ることに向かない) と感じていたこと
  • 以前作成したアプリをもう少しの間は使用したいのでそのメンテのために今のバージョンは保持しておきたいこと

これら2点を鑑みて、「別に Tauri (Rust) でなくても良いか……」となったので、もう少し楽に作れそうな開発環境を考えてみることにしました。

Tauri を選定した理由も「Rust は流行り的に一回くらいは触っておきたかった、ちょうど Tauri も安定板が出た頃だったので触ってみるにはちょうど良い頃合だと感じた」程度で、「Rust が必要条件」というわけではない、ということも挙げられます。

そうして Tauri ではない方法を模索し始めたのですが、問題は「代替案として何を使用するか」です。

そこで少し調べた結果、 Rust を触り始めるときにいったん候補に挙がった Go が再候補に挙がり、ちょうど同じようなWebの言語でフロントエンドを開発できるフレームワークとして Wails というものがある、ということが分かったので Wails を触ってみることにしました。

環境構築

ということで早速開発環境構築をしていきます。

といっても難しいことはなく (Rust の開発環境を構築するときは結構手間暇かかったのですが) 、 Go の実行環境をインストールをして、 Wails を入れるくらいでした。

※元々開発環境PCには Node.js, npm がインストールされている前提。

手順は公式のドキュメントを参考にして、

こちらもしくは

こちらからインストーラをダウンロード。今回は Windows 端末なので「go1.22.4.windows-amd64.msi」を選択。

Golang インストールウィザードを起動
Golang インストールウィザードを起動

ダウンロードが終わったら、インストールウィザードを起動。基本的に「Next」で進めていくだけです。

Golang インストールパスを選択
Golang インストールパスを選択

インストールパスを選択。マスコットキャラクターの Gopherくん が右上にいますね。

Golang インストール完了
Golang インストール完了

インストールパス完了。

>go version
go version go1.22.4 windows/amd64

ここでコマンドプロンプトを起動して go version を叩いてみます。きちんとバージョン情報が表示され、インストール完了したことが分かります。

Visual Studio Code(VSCode) 上の PowerShell は VSCode 起動時の情報を持ってしまっているため、いったん全ての VSCode のウインドウを閉じてから起動し直して同じく go version でバージョン情報が表示されることを確認。

> node --version
v20.12.0
> npm --version
10.5.0

Node.js と npm のバージョンはとりあえず現状この値。大きく問題にはならないと思うのでそのまま行きます。

> go install github.com/wailsapp/wails/v2/cmd/wails@latest
go: downloading github.com/wailsapp/wails v1.16.9

## 略

>

Wails インストール。OKです。 Windows の場合、 WebView2ランタイム が入っていることが条件、と Wails 公式ドキュメントにあるので wails doctor で確認します。

> wails doctor


          Wails Doctor



# Wails
Version | v2.8.2

# System
┌──────────────────────────────────────────────────────────────────────────────────────┐
| OS           | Windows 10 Pro                                                        |

## 略

└──────────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌───────────────────────────────────────────────────────┐
| Dependency | Package Name | Status    | Version       |
| WebView2   | N/A          | Installed | 125.0.2535.85 |
| Nodejs     | N/A          | Installed | 20.12.0       |
| npm        | N/A          | Installed | 10.5.0        |
| *upx       | N/A          | Available |               |
| *nsis      | N/A          | Available |               |
└─────────────── * - Optional Dependency ───────────────┘

# Diagnosis
Optional package(s) installation details:
  - upx : Available at https://upx.github.io/
  - nsis : More info at https://wails.io/docs/guides/windows-installer/

 SUCCESS  Your system is ready for Wails development!

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony


>

WebView2 はインストール済みでした。OKです。

プロジェクト作成

環境が構築できたので続いてプロジェクトを作成します。

> wails init -n ShriekingSixties -t react-ts
Wails CLI v2.8.2


# Initialising Project 'ShriekingSixties'
go: downloading github.com/matryer/is v1.4.0

## 略

Project Name      | ShriekingSixties
Project Directory | Path\To\Project\ShriekingSixties
Template          | React + Vite (Typescript)
Template Source   | https://wails.io

Initialised project 'ShriekingSixties' in 20.895s.

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

>

OK。プロジェクトができました。ちなみに今回は React + TypeScrypt 環境を選択しています。

> git init
Initialized empty Git repository in Path\To\Project\ShriekingSixties

ちなみに Git管理 はデフォではないので自分で git init します。

> wails dev
Wails CLI v2.8.2

Executing: go mod tidy
  • Generating bindings: Done.
  • Installing frontend dependencies: Done.
  • Compiling frontend: Done.

> frontend@0.0.0 dev
> vite


  VITE v3.2.10  ready in 1183 ms

Vite Server URL: http://localhost:5173/
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Running frontend DevWatcher command: 'npm run dev'
Building application for development...
  • Generating bindings: Done.
  • Generating application assets: Done.
  • Compiling application: Done.
 INFO  Wails is now using the new Go WebView2Loader. If you encounter any issues with it, please report them to https://github.com/wailsapp/wails/issues/2004. You could also use the old legacy loader with `-tags native_webview2loader`, but keep in mind this will be deprecated in the near future.

Using DevServer URL: http://localhost:34115
Using Frontend DevServer URL: http://localhost:5173/
Using reload debounce setting of 100 milliseconds
INF | Serving assets from frontend DevServer URL: http://localhost:5173/
DEB | WebView2 Runtime Version '125.0.2535.85' installed. Minimum version required: 94.0.992.31.
DEB | [DevWebServer] Serving DevServer at http://localhost:34115
Watching (sub)/directory: Path\To\Project\ShriekingSixties


To develop in the browser and call your bound Go methods from Javascript, navigate to: http://localhost:34115
DEB | [AssetHandler] Handling request '/' (file='.')

## 略

wails dev でホットリロードできます。

Golang, Wails ホットリロードで画面が起動
Golang, Wails ホットリロードで画面が起動

難なく画面が開けました。ひとまずこれで開発環境構築~プロジェクト作成までできました。

後は構文等を調べつつ実装していくだけですね。

参考

Wails

Go のインストーラ

Wails

go.mod, go.sum

ファイル読み込み

dotenv, 環境変数

zap, logger

(オマケ) Go のマスコットキャラクター「Gopherくん」について

今回「掘る」ことに関連したアプリを想定していたので、ホリネズミをマスコットキャラクターとする Go を選定したのは偶然の一致か、はたまた必然だったのか……。

この記事を書いた人

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。