Go fiberでのHTMLテンプレートの使い方を解説する

fumi

後でサムネ作成します。

はじめに

最近GoのfiberでHTMLテンプレートを使ってサーバーを実装しているのでそこで学んだことを解説していきたいと思います。

前提

この記事ではHTMLテンプレートをどのように使うかについて解説するのでfiber自体の解説やgoでのHTMLテンプレートの記述方法は説明しません。

では早速説明していきます！

2つの扱い方

2つの扱い方とはHTMLをgoのバイナリに組み込むかどうかです。

goの1.16からembedという機能が追加されました。それはgoのビルド時のバイナリにファイルを組み込めるというようなライブラリです。
fiberではテンプレートに対してこのembed機能を使うことができます。ただし現状で読み込みしかできないのでページの内容を変更する必要がある場合はこの手法は使えません。

組み込まない方法は単純にgoのバイナリの外にHTMLファイルを置いて読み込むといった方法です。

今回は両方書き方を紹介していきます。

embedを使わない場合

まず使わない場合から説明していきます。

簡単なコードを紹介していきます。
jsの読み込み方も紹介しているので必要に応じて応用してcssや画像などを読み込んでください。

ディレクトリ構造は以下のような形にします。

.
├── go.mod
├── go.sum
├── main.go
└── views
    ├── index.html
    └── index.js
// main.go

package main

import (
	"log"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/template/html"
)

func main() {
	engine := html.New("./views", ".html")

	app := fiber.New(fiber.Config{
		Views: engine,
	})

	app.Get("/", func(c *fiber.Ctx) error {
		return c.Render("index", fiber.Map{
			"Message": "Hello World!",
		})
	})

	app.Static("/js", "./views/index.js")

	log.Fatal(app.Listen("127.0.0.1:3000"))
}

// index.js

console.log('javascript!');
// index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Index</title>
    <script src="js"></script>
  </head>
  <body>
    {{.Message}}
  </body>
</html>

この状態でmain.goを動かして3000番ポートにアクセスするとHello World!が表示されたと思います。コンソールをみるとしっかりjsが読み込めたことを確認できたと思います！

embedを使う場合

使う場合も紹介していきます。少し複雑です。先ほどの例と同じページが出るように書いていくので気になれば比較してください。ディレクトリは同じでmain.goとindex.htmlを書き換えます。

package main

import (
	"embed"
	"log"
	"net/http"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/fiber/v2/middleware/filesystem"
	"github.com/gofiber/template/html"
)

//go:embed views/*
var viewsfs embed.FS

func main() {
	engine := html.NewFileSystem(http.FS(viewsfs), ".html")

	app := fiber.New(fiber.Config{
		Views: engine,
	})

	app.Get("/", func(c *fiber.Ctx) error {
		return c.Render("views/index", fiber.Map{
			"Title": "Hello, World!",
		})
	})

	app.Use(filesystem.New(filesystem.Config{
		Root: http.FS(viewsfs),
	}))

	log.Fatal(app.Listen("127.0.0.1:3000"))
}
<script src="views/index.js"></script>

scriptタグの参照先のみ変更

これで同じページが表示されたのではないかと思います。

ここで補足ですがバイナリに組み込む為一度ビルドして例えばjsを書き換えて再度実行しても変更は反映されません。再度ビルドを行う必要があります。

まとめ

以上簡単にではありますがfiberでのhtmlテンプレートの扱い方について解説しました！参考になれば幸いです。

また機会があればgoでのhtmlテンプレートの書き方や変数の渡し方についても解説したいと思います！

参考


この記事が気に入ったらサポートをしてみませんか？