初めてのアプリ

ここでは、Wailsのコアコンセプトを示すシンプルな挨拶アプリケーションを構築します。

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

所要時間: 10分

プロジェクトの作成

プロジェクトの生成
Terminal window
```
wails3 init -n myapp
cd myapp
```
これにより、デフォルトのVanilla + Viteテンプレート（Viteバンドラーを使用したプレーンなHTML/CSS/JS）で新しいプロジェクトが作成されます。

お好みのフレームワークには -t react、-t vue、または -t svelte を試してみてください。利用可能なすべてのテンプレートを表示するには wails3 init -l を実行してください。

プロジェクト構造の理解

myapp/
├── main.go              # アプリケーションのエントリポイント
├── greetservice.go      # 挨拶サービス
├── frontend/            # UIコード
│   ├── index.html       # HTMLエントリポイント
│   ├── src/
│   │   └── main.js      # フロントエンドJavaScript
│   ├── public/
│   │   └── style.css    # スタイル
│   ├── package.json     # フロントエンドの依存関係
│   └── vite.config.js   # Viteバンドラー設定
├── build/               # ビルド設定
└── Taskfile.yml         # ビルドタスク

アプリの実行
Terminal window
```
wails3 dev
```
初回実行では、フロントエンドの依存関係のインストール、バインディングの生成などを行うため、予想よりも時間がかかる場合があります。2回目以降の実行ははるかに高速です。

アプリが挨拶インターフェースを表示して開きます。名前を入力して「挨拶」をクリックすると、Goバックエンドが入力を処理して挨拶を返します。

仕組みの理解

これがどのように動作しているのか、コードを見てみましょう。

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)
}

重要なコンセプト：

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

サービスは、フロントエンドに機能を公開する自己完結型のGoモジュールです。これらは、アプリケーション設定の Services フィールドに登録する、エクスポートされたメソッドを持つ通常のGo構造体です。

バインディングは、フロントエンドがこれらのサービスを呼び出せるようにする自動生成されたTypeScript/JavaScript SDKです。wails3 dev または wails3 build を実行すると、Wailsは登録されたサービスを解析し、frontend/bindings/ に型安全なバインディングを生成します。

サービスをバックエンドAPI、バインディングをそれと通信するクライアントライブラリと考えると良いでしょう。

サービスの登録

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);
    }
};

重要なコンセプト：

自動生成されたバインディング - GreetService は生成されたコードからインポートされます
型安全な呼び出し - メソッド名とシグネチャはGoのコードと一致します
デフォルトで非同期 - すべてのGo呼び出しはPromiseを返します
エラーハンドリング - Goからのエラーはtry/catchでキャッチされます

アプリのカスタマイズ

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

「複数挨拶」機能を追加

GreetServiceにメソッドを追加

これを greetservice.go に追加します：

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
}

アプリが自動的に再ビルドされます

ファイルを保存すると、wails3 dev がGoコードを自動的に再ビルドし、アプリを再起動します。

Goコードの変更は自動再ビルドと再起動をトリガーします。フロントエンドの変更は再起動なしでホットリロードされます。
フロントエンドで使用

これを frontend/src/main.js に追加します：
frontend/src/main.js
```
window.greetMany = async () => {
    const names = ['Alice', 'Bob', 'Charlie'];
    const greetings = await GreetService.GreetMany(names);
    console.log(greetings);
};
```
ブラウザのコンソールを開き、greetMany() を呼び出します - 挨拶の配列が表示されます。

本番用ビルド

アプリを配布する準備ができたら：

wails3 build

これが行うこと：

Goコードを最適化してコンパイル
本番用のフロントエンドをビルド（ミニファイ）
build/bin/ にネイティブ実行ファイルを生成

出力: build/bin/myapp.exe

ダブルクリックして実行。依存関係は不要です（WebView2はWindowsの一部です）。

出力: build/bin/myapp.app

アプリケーションフォルダにドラッグするか、ダブルクリックして実行します。

出力: build/bin/myapp

./build/bin/myapp で実行するか、ランチャー用の .desktop ファイルを作成します。

学んだこと

プロジェクト構造

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

サービス

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

バインディング

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

開発ワークフロー

ホットリロード用 wails3 dev
Goの変更は自動再ビルドと再起動
フロントエンドの変更は即時ホットリロード

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