コンテンツにスキップ
Wails Blog

初めてのアプリケーション

このガイドでは、最初の Wails v3 アプリケーションの作成方法について、プロジェクトのセットアップ、ビルド、開発ワークフローをカバーして解説します。



  1. 新しいプロジェクトの作成

    Section titled “新しいプロジェクトの作成”

    ターミナルを開き、以下のコマンドを実行して新しい Wails プロジェクトを作成します：

    Terminal window
    wails3 init -n myfirstapp

    このコマンドは、必要なファイルすべてを含む myfirstapp という新しいディレクトリを作成します。

  2. プロジェクト構造の探索

    Section titled “プロジェクト構造の探索”

    myfirstapp ディレクトリに移動します。いくつかのファイルとフォルダが見つかります：

    • ディレクトリbuild/ ビルドプロセスで使用されるファイルが含まれます
      • appicon.png アプリケーションのアイコン
      • config.yml ビルド設定
      • Taskfile.yml ビルドタスク
      • ディレクトリdarwin/ macOS 固有のビルドファイル
        • Info.dev.plist 開発用設定
        • Info.plist 本番用設定
        • Taskfile.yml macOS ビルドタスク
        • icons.icns macOS アプリケーションアイコン
      • ディレクトリlinux/ Linux 固有のビルドファイル
        • Taskfile.yml Linux ビルドタスク
        • ディレクトリappimage/ AppImage パッケージング
          • build.sh AppImage ビルドスクリプト
        • ディレクトリnfpm/ NFPM パッケージング
          • nfpm.yaml パッケージ設定
          • ディレクトリscripts/ ビルドスクリプト
            • …
      • ディレクトリwindows/ Windows 固有のビルドファイル
        • Taskfile.yml Windows ビルドタスク
        • icon.ico Windows アプリケーションアイコン
        • info.json アプリケーションのメタデータ
        • wails.exe.manifest Windows マニフェストファイル
        • ディレクトリnsis/ NSIS インストーラーファイル
          • project.nsi NSIS プロジェクトファイル
          • wails_tools.nsh NSIS ヘルパースクリプト
    • ディレクトリfrontend/ フロントエンドアプリケーションファイル
      • index.html メイン HTML ファイル
      • main.js メイン JavaScript ファイル
      • package.json NPM パッケージ設定
      • ディレクトリpublic/ 静的アセット
        • …
      • Inter Font License.txt フォントライセンス
    • .gitignore Git の無視ファイル
    • README.md プロジェクトドキュメント
    • Taskfile.yml プロジェクトタスク
    • go.mod Go モジュールファイル
    • go.sum Go モジュールのチェックサム
    • greetservice.go 挨拶サービス
    • main.go メインアプリケーションコード

    これらのファイルを少し見て、構造に慣れてください。

  3. アプリケーションのビルド

    Section titled “アプリケーションのビルド”

    アプリケーションをビルドするには、以下を実行します：

    Terminal window
    wails3 build

    このコマンドは、アプリケーションのデバッグバージョンをコンパイルし、新しい bin ディレクトリに保存します。

    ビルドが完了したら、通常アプリケーションと同様に実行できます：

    Terminal window
    ./bin/myfirstapp

    アプリケーションの起点となるシンプルな UI が表示されます。デバッグバージョンのため、コンソールウィンドウにもログが表示されます。これはデバッグ目的で便利です。

  4. 開発モード

    Section titled “開発モード”

    アプリケーションを開発モードで実行することもできます。このモードでは、フロントエンドコードを変更しても、アプリケーション全体を再ビルドすることなく、実行中のアプリケーションに変更が反映されます。

    1. 新しいターミナルウィンドウを開きます。
    2. wails3 dev を実行します。アプリケーションはデバッグモードでコンパイルされ、実行されます。
    3. お好みのエディターで frontend/index.html を開きます。
    4. コードを編集し、Please enter your name below を Please enter your name below!!! に変更します。
    5. ファイルを保存します。

    この変更はアプリケーションに即座に反映されます。

    バックエンドコードへの変更は再ビルドをトリガーします：

    1. greetservice.go を開きます。
    2. return "Hello " + name + "!" が書かれている行を return "Hello there " + name + "!" に変更します。
    3. ファイルを保存します。

    アプリケーションは数秒以内に更新されます。

  5. アプリケーションのパッケージング

    Section titled “アプリケーションのパッケージング”

    アプリケーションが配布の準備ができたら、プラットフォーム固有のパッケージを作成できます：

    .app バンドルを作成するには：

    Terminal window
    wails3 package

    これにより、本番ビルドが作成され、bin ディレクトリ内の .app バンドルにパッケージ化されます。

    パッケージングオプションと設定に関する詳細な情報は、パッケージングガイド をご覧ください。

  6. バージョン管理とモジュール名の設定

    Section titled “バージョン管理とモジュール名の設定”

    プロジェクトはプレースホルダーモジュール名 changeme で作成されます。これはリポジトリの URL に一致するように更新することをお勧めします：

    1. GitHub（またはお好みの Git ホスト）に新しいリポジトリを作成します
    2. プロジェクトディレクトリで git を初期化します：
      Terminal window
      git init
      git add .
      git commit -m "Initial commit"
    3. リモートリポジトリを設定します（リポジトリ URL に置き換えてください）：
      Terminal window
      git remote add origin https://github.com/username/myfirstapp.git
    4. go.mod 内のモジュール名をリポジトリ URL に一致するように更新します：
      Terminal window
      go mod edit -module github.com/username/myfirstapp
    5. コードをプッシュします：
      Terminal window
      git push -u origin main

    これにより、Go モジュール名が Go のモジュール命名規則と一致し、コードを共有しやすくなります。

おめでとうございます！

Section titled “おめでとうございます！”

これで、初めての Wails アプリケーションの作成、開発、パッケージ化が完了しました。 これは、Wails v3 で実現できることの始まりに過ぎません。

次のステップ

Section titled “次のステップ”

Wails に初めて触れる方は、Wails の各種機能を実践的にガイドする チュートリアル を読むことをお勧めします。最初のチュートリアルは サービスを作成する です。

より上級者の方は、Wails の使用方法に関する詳細な情報については ガイド をご覧ください。