Go言語でのWebアプリ開発学習その7~標準ライブラリのHTMLテンプレートでの配列その3:マップ配列

前回 ( https://note.com/yasmizohawks/n/n15f3a645d5b2 ) に引き続き
Go言語でのWebアプリ開発についていろいろ見てみます。
今回は標準ライブラリのHTMLテンプレートでのマップ配列の
使い方を見てみます。

■ マップが格納された配列をHTMLテンプレートへ渡してみる

前回は配列の要素が構造体になってる場合のサンプルを作りました。
今回は配列の要素がマップになってる場合のサンプルを作ってみます。

「データベーステーブルから取得したデータを表で一覧表示する」
画面を作る場合に、表の行に該当するデータをマップ形式にする場合を
イメージしたサンプルになります。

ファイルの配置は以下になります。

【サンプルソース置き場】ディレクトリ
 ┣ htmlTemp07.go
 ┗ htmlTempSample06.html

それぞれのファイルの内容は以下になります。

  • HTMLテンプレートにデータを埋め込む htmlTemp07.go

package main

import (
	"html/template"
	"net/http"
)

func main() {
	http.HandleFunc("/", executeTemplate)
	http.ListenAndServe(":8080", nil)
}

func executeTemplate(w http.ResponseWriter, r *http.Request) {

	zipCodeMapList := []map[string]string{
		{
			"ZipCode":"105-6301",
			"Prefecture":"東京都",
			"Area":"港区",
		},
		{
			"ZipCode":"064-0941",
			"Prefecture":"北海道",
			"Area":"札幌市中央区",
		},
		{
			"ZipCode":"534-0026",
			"Prefecture":"大阪府",
			"Area":"大阪市都島区",
		},
	}

	t := template.Must(template.ParseFiles("./htmlTempSample06.html"))

	if err := t.Execute(w, zipCodeMapList); err != nil {
		panic(err)
	}
}

前回の構造体のときと同様に郵便番号リストなイメージのデータになります。

executeTemplate 関数の以下の部分で
・マップのキー、バリューの型定義 (どちらも string)
・マップ配列型変数 zipCodeMapList の宣言
・マップ配列への値設定
を同時にやってます。

zipCodeMapList := []map[string]string{
  {
    "ZipCode":"105-6301",
    "Prefecture":"東京都",
    "Area":"港区",
  },
  {
    "ZipCode":"064-0941",
    "Prefecture":"北海道",
    "Area":"札幌市中央区",
  },
  {
    "ZipCode":"534-0026",
    "Prefecture":"大阪府",
    "Area":"大阪市都島区",
  },
}

executeTemplate 関数の以下の行で
Execute 関数の第二引数にマップ配列型の変数 zipCodeMapList を渡してます。

if err := t.Execute(w, zipCodeMapList); err != nil {

  • HTMLテンプレートファイル htmlTempSample06.html

<!DOCTYPE html>
<html>
	<head>
		<title>sample</title>
		<style>
			table {
				border-collapse: collapse;
			}

			th, td {
				border: 1px solid black;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<p>マップの場合</p>
		<table>
			<tr>
				<th>郵便番号</th>
				<th>都道府県</th>
				<th>市区町村</th>
			</tr>

			{{ range $zipCode := .}}
				<tr>
					<td>{{ $zipCode.ZipCode }}</td>
					<td>{{ $zipCode.Prefecture }}</td>
					<td>{{ $zipCode.Area }}</td>
				</tr>
			{{ end }}
		</table>
	</body>
</html>

前回のテンプレートファイルとの違いは、
<p>マップの場合</p>
があるかないかだけです。

table タグ部分は前回の構造体の場合と全く同じ記述になっていて
以下の部分で range を使ってマップ配列の全要素分
tr タグ部分を繰り返し生成しています。

{{ range $zipCode := .}}
  <tr>
    <td>{{ $zipCode.ZipCode }}</td>
    <td>{{ $zipCode.Prefecture }}</td>
    <td>{{ $zipCode.Area }}</td>
  </tr>
{{ end }}

{{ range $zipCode := .}} の「.」は
htmlTemp07.go から渡されたマップ配列になります。
マップ配列から取得したマップが変数「$zipCode」に格納されます。

<td>{{ $zipCode.ZipCode }}</td>
<td>{{ $zipCode.Prefecture }}</td>
<td>{{ $zipCode.Area }}</td>
の部分では、「$zipCode.【マップのキー名】」とすることで
マップ $zipCode のキー名に対するバリュー値が表示されます。

実行してみます。

まずは、htmlTemp07.go (HTTPサーバ)を起動

>go run htmlTemp07.go

続いてブラウザでURLに「http://localhost:8080/」を指定して確認

ページのソースも見てみましょう。

マップ配列に格納した値が表示されました。

次回も引き続き標準ライブラリのHTMLテンプレートについて見ていきます。

#プログラミング
#IT
#プログラミング言語
#Go言語
#GO
#Golang
#Webアプリケーション開発

いいなと思ったら応援しよう!