最初のMarionetteアプリを作る

Step 1

準備するもの

Goがインストールされ、ターミナルで go version を実行できることを確認します。

go version

Step 2

プロジェクトを作成する

作業用ディレクトリを作り、Go moduleを初期化します。

mkdir marionette-hello
cd marionette-hello
go mod init example.com/marionette-hello

Step 3

Marionetteを追加する

Marionetteを依存関係として追加します。

go get github.com/YoshihideShirai/marionette@latest

Step 4

Hello Worldを書く

main.go を作成し、次のコードを入れます。

package main

import (
    mb "github.com/YoshihideShirai/marionette/backend"
    mf "github.com/YoshihideShirai/marionette/frontend"
)

func main() {
    app := mb.New()

    app.Page("/", func(ctx *mb.Context) mf.Node {
        return mf.Container(mf.ContainerProps{
            MaxWidth: "2xl",
            Centered: true,
        },
            mf.Stack(mf.StackProps{Direction: "column", Gap: "4"},
                mf.PageHeader(mf.PageHeaderProps{
                    Title:       "Hello, Marionette",
                    Description: "Your first Go-powered UI is running.",
                }),
                mf.TextComponent(mf.TextProps{
                    Text: "Hello World",
                    Size: "lg",
                }),
            ),
        )
    })

    if err := app.Run("127.0.0.1:8080"); err != nil {
        panic(err)
    }
}

Step 5

起動して確認する

アプリを起動します。

go run .

ブラウザで http://127.0.0.1:8080 を開きます。

Step 6

Hot reloadを設定する

開発中は Air を使うと、Goファイルの変更時にアプリを自動で再ビルドして再起動できます。

まずAirをインストールします。

go install github.com/air-verse/air@latest

プロジェクト直下に .air.toml を作成します。

root = "."
tmp_dir = "tmp"

[build]
  cmd = "go build -o ./tmp/marionette-hello ."
  bin = "./tmp/marionette-hello"
  include_ext = ["go", "tpl", "tmpl", "html"]
  exclude_dir = ["tmp"]
  delay = 200
  stop_on_error = true

[log]
  time = true

以降は go run . の代わりに air を実行します。

air

main.go を編集して保存すると、Airが自動でアプリを再起動します。ブラウザは同じ http://127.0.0.1:8080 を開いたままで確認できます。

Step 7

ここで習得したこと

• mb.New() でMarionetteアプリを作成する
• app.Page でURLに表示内容を登録する
• frontend のコンポーネントで画面を組み立てる
• app.Run でローカルサーバーを起動する
• air で開発中の再ビルドと再起動を自動化する

次は 静的アセットを配信する に進みます。