ビルドシステム

統一されたビルドシステム

Wails は 統一されたビルドシステム を提供しており、Go コードのコンパイル、フロントエンドアセットのバンドル、それらを単一の実行ファイルへの埋め込み、プラットフォーム固有のビルドの処理をすべて 1 つのコマンドで実行します。

bash
wails3 build

出力: すべてが埋め込まれたネイティブ実行ファイル。

ビルドプロセスの概要

[ビルドプロセスダイアグラムのプレースホルダー]

ビルドフェーズ

1. 解析フェーズ

Wails は Go コードをスキャンして、サービスの内容を理解します。

type GreetService struct {
    prefix string
}

func (g *GreetService) Greet(name string) string {
    return g.prefix + name + "!"
}

Wails が抽出する情報:

  • サービス名: GreetService
  • メソッド名: Greet
  • パラメータ型: string
  • 戻り値の型: string

用途: TypeScript バインディングの生成

2. 生成フェーズ

TypeScript バインディング

Wails は型安全なバインディングを生成します。

// Auto-generated: frontend/bindings/GreetService.ts
export function Greet(name: string): Promise<string> {
    return window.wails.Call('GreetService.Greet', name)
}

利点:

  • 完全な型安全性
  • IDE のオートコンプリート
  • コンパイル時のエラー検出
  • JSDoc コメント

フロントエンドビルド

フロントエンドのバンドラーが実行されます（Vite、webpack など）。

bash
# Vite の例
vite build --outDir dist

処理内容:

  • JavaScript/TypeScript のコンパイル
  • CSS の処理と圧縮
  • アセットの最適化
  • ソースマップの生成（開発環境のみ）
  • 出力先: frontend/dist/

3. コンパイルフェーズ

Go コンパイル

Go コードが最適化されてコンパイルされます。

bash
go build -ldflags="-s -w" -o myapp.exe

フラグ:

  • -s: シンボルテーブルの削除
  • -w: DWARF デバッグ情報の削除
  • 結果: より小さいバイナリ（約 30% の削減）

プラットフォーム固有の処理:

  • Windows: アイコンが埋め込まれた .exe
  • macOS: .app バンドル構造
  • Linux: ELF バイナリ

アセットの埋め込み

フロントエンドアセットが Go バイナリに埋め込まれます。

//go:embed frontend/dist
var assets embed.FS

結果: すべてが内部に含まれた単一の実行ファイル。

4. 出力

単一のネイティブバイナリ:

  • Windows: myapp.exe（約 15MB）
  • macOS: myapp.app（約 15MB）
  • Linux: myapp（約 15MB）

依存関係なし（システム WebView を除く）。

開発環境と本番環境

速度を最適化:

bash
wails3 dev

処理内容:

  1. フロントエンドの開発サーバーを起動（Vite、ポート 5173）
  2. 最適化なしで Go をコンパイル
  3. 開発サーバーを指してアプリを起動
  4. ホットリロードを有効化
  5. ソースマップを含める

特徴:

  • 高速なリビルド（フロントエンドの変更で <1 秒）
  • アセットの埋め込みなし（開発サーバーから提供）
  • デバッグシンボルを含める
  • ソースマップを有効化
  • 冗長なログ出力

ファイルサイズ: 大きい（デバッグシンボル込みで約 50MB）

ビルドコマンド

基本ビルド

bash
wails3 build

出力: build/bin/myapp[.exe]

特定のプラットフォーム向けビルド

bash
# Windows 向けビルド（どの OS からでも可能）
wails3 build -platform windows/amd64

# macOS 向けビルド
wails3 build -platform darwin/amd64
wails3 build -platform darwin/arm64

# Linux 向けビルド
wails3 build -platform linux/amd64

クロスコンパイル: どのプラットフォームからでも任意のプラットフォーム向けにビルド可能。

オプション付きビルド

bash
# カスタム出力ディレクトリ
wails3 build -o ./dist/myapp

# フロントエンドビルドをスキップ（既存のものを使用）
wails3 build -skipbindings

# クリーンビルド（キャッシュを削除）
wails3 build -clean

# 冗長出力
wails3 build -v

ビルドモード

bash
# デバッグビルド（シンボルを含む）
wails3 build -debug

# 本番ビルド（デフォルト、最適化済み）
wails3 build

# 開発ビルド（高速、非最適化）
wails3 build -devbuild

ビルド設定

Taskfile.yml

Wails はビルド設定に Taskfile を使用します。

# Taskfile.yml
version: '3'

tasks:
  build:
    desc: アプリケーションをビルド
    cmds:
      - wails3 build
  
  build:windows:
    desc: Windows 向けビルド
    cmds:
      - wails3 build -platform windows/amd64
  
  build:macos:
    desc: macOS 向けビルド（ユニバーサル）
    cmds:
      - wails3 build -platform darwin/amd64
      - wails3 build -platform darwin/arm64
      - lipo -create -output build/bin/myapp.app build/bin/myapp-amd64.app build/bin/myapp-arm64.app
  
  build:linux:
    desc: Linux 向けビルド
    cmds:
      - wails3 build -platform linux/amd64

タスクの実行:

bash
task build:windows
task build:macos
task build:linux

ビルドオプションファイル

永続的な設定のために build/build.json を作成します。

{
  "name": "My Application",
  "version": "1.0.0",
  "author": "Your Name",
  "description": "Application description",
  "icon": "build/appicon.png",
  "outputFilename": "myapp",
  "platforms": ["windows/amd64", "darwin/amd64", "linux/amd64"],
  "frontend": {
    "dir": "./frontend",
    "install": "npm install",
    "build": "npm run build",
    "dev": "npm run dev"
  },
  "go": {
    "ldflags": "-s -w -X main.version={{.Version}}"
  }
}

アセットの埋め込み

仕組み

Wails は Go の embed パッケージを使用します。

package main

import (
    "embed"
    "github.com/wailsapp/wails/v3/pkg/application"
)

//go:embed frontend/dist
var assets embed.FS

func main() {
    app := application.New(application.Options{
        Name:   "My App",
        Assets: application.AssetOptions{
            Handler: application.AssetFileServerFS(assets),
        },
    })
    
    app.Window.New()
    app.Run()
}

ビルド時:

  1. フロントエンドが frontend/dist/ にビルドされる
  2. //go:embed ディレクティブでファイルが含まれる
  3. ファイルがバイナリにコンパイルされる
  4. バイナリにすべてが含まれる

実行時:

  1. アプリが起動
  2. アセットがメモリから提供される
  3. アセットのディスク I/O は発生しない
  4. 高速な読み込み

カスタムアセット

追加のファイルを埋め込みます。

//go:embed frontend/dist
var frontendAssets embed.FS

//go:embed data/*.json
var dataAssets embed.FS

//go:embed templates/*.html
var templateAssets embed.FS

ビルドの最適化

フロントエンドの最適化

Vite（デフォルト）:

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,  // console.log を削除
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],  // ベンダーバンドルを分離
        },
      },
    },
  },
}

結果:

  • JavaScript の圧縮（約 70% の削減）
  • CSS の圧縮（約 60% の削減）
  • 画像の最適化
  • ツリーシェイキングの適用

Go の最適化

コンパイラフラグ:

bash
-ldflags="-s -w"
  • -s: シンボルテーブルの削除（約 10% の削減）
  • -w: DWARF デバッグ情報の削除（約 20% の削減）

追加の最適化:

bash
-ldflags="-s -w -X main.version=1.0.0"
  • -X: ビルド時に変数の値を設定
  • バージョン番号やビルド日時に有用

バイナリの圧縮

UPX（オプション）:

bash
# ビルド後
upx --best build/bin/myapp.exe

結果:

  • サイズの約 50% 削減ビルドについて質問がありますか？ Discord で質問するか、ビルドの例 を確認してください。
Edit page

Last updated: