Go言語でのWebアプリ開発学習その3~標準ライブラリのHTMLテンプレートに構造体渡す
前回 ( https://note.com/yasmizohawks/n/n928163f92796 ) に引き続き
Go言語でのWebアプリ開発についていろいろ見てみます。
今回は標準ライブラリのHTMLテンプレートでの構造体の渡し方を見てみます。
■ 構造体をHTMLテンプレートへ渡す
前回 ( https://note.com/yasmizohawks/n/n928163f92796 ) は、
HTMLテンプレートに1つだけデータを渡すサンプルを作りました。
HTMLテンプレートファイルとして以下を作成しました。
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
</head>
<body>
<p>Hello, {{.}}</p>
</body>
</html>
以下の行の「{{.}}」部分にデータが埋め込まれました。
<p>Hello, {{.}}</p>
実際の開発では、HTMLに埋め込みたいデータが1つだけ、ということは
あまりないですね。
そこで、HTMLに複数のデータを埋め込む方法を見ていこうと思います。
まずは構造体を使ってみます。
ファイルの配置は以下になります。
【サンプルソース置き場】ディレクトリ
┣ htmlTemp03.go
┗ htmlTempSample02.html
それぞれのファイルの内容は以下になります。
HTMLテンプレートにデータを埋め込む htmlTemp03.go
package main
import (
"html/template"
"net/http"
)
// 構造体定義
type UserInfo struct {
UserName string
Age int
Sex string
}
func main() {
http.HandleFunc("/", executeTemplate)
http.ListenAndServe(":8080", nil)
}
func executeTemplate(w http.ResponseWriter, r *http.Request) {
var u UserInfo
u.UserName = "溝口泰成"
u.Age = 53
u.Sex = "男性"
t := template.Must(template.ParseFiles("./htmlTempSample02.html"))
t.Execute(w, u)
}
以下で構造体の定義をしています。
type UserInfo struct {
UserName string
Age int
Sex string
}
ポイントは、「構造体内の変数の先頭を大文字にしている」部分です。
Go は、変数や関数名の先頭を大文字にしないと
パッケージの外からそれらにアクセスできないのですが
「HTMLテンプレートファイルもパッケージの外」としての扱いになるようで
構造体内の変数も先頭を大文字にしないといけません。
executeTemplate 関数の以下の行で
UserInfo 構造体型の変数 u を宣言、
その変数 u を使って構造体内の各変数に値を設定しています。
var u UserInfo
u.UserName = "溝口泰成"
u.Age = 53
u.Sex = "男性"
executeTemplate 関数の以下の行で
Execute 関数の第二引数に UserInfo 構造体型の変数 u を渡してます。
t.Execute(w, u)
HTMLテンプレートファイル htmlTempSample02.html
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
</head>
<body>
<p>名前:{{.UserName}}</p>
<p>年齢:{{.Age}}</p>
<p>性別:{{.Sex}}</p>
</body>
</html>
以下の部分で
{{.【構造体内の変数名】}} という記載をすることで
構造体内のデータが表示されます。
<p>名前:{{.UserName}}</p>
<p>年齢:{{.Age}}</p>
<p>性別:{{.Sex}}</p>
実行してみます。
まずは、htmlTemp03.go (HTTPサーバ)を起動
>go run htmlTemp03.go
続いてブラウザでURLに「http://localhost:8080/」を指定して確認

構造体内の各変数に設定した値が表示されました。
次回も引き続き標準ライブラリのHTMLテンプレートについて見ていきます。