初めてのアプリ

Wails の中核となる次の概念を示す、シンプルな挨拶アプリケーションを構築します。

• ロジックを管理する Go バックエンド
• Go 関数を呼び出すフロントエンド
• 型安全なバインディング
• 開発中のホットリロード

所要時間：10 分

プロジェクトを作成する

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Application entry point
├── greetservice.go      # Greet service
├── frontend/            # Your UI code
│   ├── index.html       # HTML entry point
│   ├── src/
│   │   └── main.ts      # Frontend TypeScript
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Frontend dependencies
│   ├── tsconfig.json    # TypeScript configuration
│   └── vite.config.ts   # Vite bundler config
├── build/               # Build configuration
└── Taskfile.yml         # Build tasks

wails3 dev

仕組み

この仕組みを実現するコードを見ていきましょう。

Go バックエンド

greetservice.go を開きます。

package main

import (
	"fmt"
)

type GreetService struct{}

func (g *GreetService) Greet(name string) string {
	return fmt.Sprintf("Hello %s, It's show time!", name)
}

主要な概念：

1. サービス — エクスポートされたメソッドを持つ Go 構造体
2. エクスポートされたメソッド — Greet は先頭が大文字であるため、フロントエンドから利用可能
3. シンプルなロジック — 名前を受け取り、挨拶を返す
4. 型安全性 — 入力型と出力型が定義されている

サービスを登録する

main.go を開き、サービスの登録箇所を探します。

err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... other options
})

これにより GreetService が Wails に登録され、エクスポートされたすべてのメソッドをフロントエンドから利用できるようになります。

フロントエンド

frontend/src/main.js を開きます。

import {GreetService} from "../bindings/changeme";

window.greet = async () => {
    const nameElement = document.getElementById('name');
    const resultElement = document.getElementById('result');

    const name = nameElement.value;
    if (!name) {
        return;
    }

    try {
        const result = await GreetService.Greet(name);
        resultElement.innerText = result;
    } catch (err) {
        console.error(err);
    }
};

主要な概念：

1. 自動生成されたバインディング — GreetService は生成されたコードからインポートされる
2. 型安全な呼び出し — メソッド名とシグネチャが Go コードと一致する
3. デフォルトで非同期 — すべての Go 呼び出しが Promise を返す
4. エラー処理 — Go からのエラーは try/catch で捕捉される

アプリをカスタマイズする

ワークフローを理解するため、新しい機能を追加してみましょう。

「Greet Many」機能を追加する

func (g *GreetService) GreetMany(names []string) []string {
    greetings := make([]string, len(names))
    for i, name := range names {
        greetings[i] = fmt.Sprintf("Hello %s!", name)
    }
    return greetings
}

window.greetMany = async () => {
    const names = ['Alice', 'Bob', 'Charlie'];
    const greetings = await GreetService.GreetMany(names);
    console.log(greetings);
};

本番環境向けにビルドする

アプリを配布する準備ができたら、次を実行します。

wails3 build

実行される処理：

• 最適化を有効にして Go コードをコンパイルする
• フロントエンドを本番環境向けにビルドする（ミニファイを実施）
• bin/ にネイティブ実行ファイルを作成する

ここまでに学んだこと

プロジェクト構成

• Go バックエンド用の main.go
• UI コード用の frontend/
• ビルドタスク用の Taskfile.yml

サービス

• エクスポートされたメソッドを持つ Go の構造体を作成
• application.NewService() で登録
• メソッドをフロントエンドから自動的に利用可能

バインディング

• TypeScript 定義を自動生成
• 型安全な関数呼び出し
• デフォルトで非同期（Promise）

開発ワークフロー

• ホットリロード用の wails3 dev
• Go の変更時に自動で再ビルドして再起動
• フロントエンドの変更を即座にホットリロード

質問がありますか？ Discord に参加して、コミュニティに質問してください。