はじめに
この記事は「Qiita Advent Calendar 2023 Go言語」の22日目の記事です。
ゴール
Windows11上に構築したWSLでGoデスクトップアプリケーションを構築し、開発モードでアプリを起動できるところまでを目指します
前提
前記事 に基づいて、Windows上にWSL+Docker+VSCode の開発環境が出来ているものとします
公式手順
全体の流れ
- VSCodeで開発コンテナーを開く
- npmのインストール
- ブラウザを開くためのライブラリインストール
- Wails のインストール
- 実行中のコンテナーにアタッチする
- Wails プロジェクトの実行
VSCodeで開発コンテナーを開く
npmのインストール
- cURL(CLIダウンロードツール) をインストールする
sudo apt-get install curl
- nvm(Node.jsバージョン管理ツール) をインストールする
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
- ターミナルを立ち上げ直し、nvm コマンドを実行してみる
nvm --version
- 安定バージョンのNode.js をインストールする
nvm install --lts
- Node.js と npm のインストールを確認する
node --version
npm --version
ブラウザを開くためのライブラリインストール
sudo apt install xdg-utils
Wails のインストール
- 依存ライブラリをインストールする
sudo apt update -y
sudo apt install libgtk-3-dev libwebkit2gtk-4.0-dev
-
新しいターミナルを立ち上げる
-
Wails CLI をインストールする
go install github.com/wailsapp/wails/v2/cmd/wails@latest
(キャプチャ忘れ)
- Wails のシステムチェックを行う
wails doctor
実行中のコンテナーにアタッチする
- コンテナーアイコン(><)から「実行中のコンテナーにアタッチ…」を選択
- コンテナーを選択する
Wails プロジェクトの実行
- お好みのフレームワークで初期化
wails init -n hello_wails -t vue-ts
- go.mod 内のモジュール名 (デフォルト:
changeme
) を任意のモジュール名に修正する
- プロジェクトのディレクトリに入って、アプリをライブ開発モードで実行する
cd hello_wails
wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src
おわりに
本当はexe作成まで行きたかったんですけど、権限周りで苦戦中ですw
また記事を上げられるよう頑張ります~
Merry Christmas & Happy New Year !!!