post Image
Gin(Golang)におけるHTMLテンプレート記述方法

はじめに

Go言語で使えるウェブフレームワークGin
HTMLレンダリング、テンプレートの書き方が分かり辛かったので少し解説

環境など

goはインストールされている前提で紹介

$ go version
go version go1.5.3 linux/amd64

$ mkdir templates
# 以下のテンプレートを編集
$ emacs templates/index.tmpl
# 下記のソースコード編集
$ emacs sample.go
# Ginをインストール
$ go get github.com/gin-gonic/gin
$ go run sample.go

ソースコード

sample.go
package main

import (
  "github.com/gin-gonic/gin"
  "net/http"
)

type C struct {
  Id int
  Name string
}

func main() {
  router := gin.Default()
  router.LoadHTMLGlob("templates/*.tmpl")
  router.GET("/index", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.tmpl", gin.H{
      "a": "a",
      "b": []string{"b_todo1","b_todo2"},
      "c": []C{{1,"c_mika"},{2,"c_risa"}},
      "d": C{3,"d_mayu"},
      "e": true,
      "f": false,
      "h": true,
    })
  })
  router.Run(":8080")
}
index.tmpl
<html>

  {{/* コメント*/}}

  {{/* ドット名前でgoから受け取れる */}}
  <h1>{{.a}}</h1>

  {{/* ループはrange, ドットで要素にアクセス, endで終了 */}}
  <ul>
    {{range .b}}
    <li>{{.}}</li>
    {{end}}
  </ul>

  {{/* 構造体は、ドットにメンバ名でアクセス */}}
  {{range .c}}
  <p>{{.Id}}<b>{{.Name}}</b></p>
  {{end}}

  {{/* 構造体、ループなしなら, ドット変数ドットメンバ */}}
  <p>{{.d.Id}}<b>{{.d.Name}}</b></p>

  {{/* if文 */}}
  {{if .e}}
  <p> e true </p>
  {{else}}
  <p> e false </p>
  {{end}}

  {{if .f}}
  <p> f true </p>
  {{else}}
  <p> f false </p>
  {{end}}

  {{/* goソースでgは指定されていない */}}
  {{if .g}}
  <p> g true </p>
  {{else}}
  <p> g false </p>
  {{end}}

  {{/* withはifが真の場合、ドットに情報が設定される */}}
  {{with .h}}
  <p> h1 {{.}} </p>
  {{end}}

  {{/* withでなくif使うと、ドットアクセスで特定要素が出力されず */}}
  {{if .h}}
  <p> h2 {{.}} </p>
  {{end}}

  {{/* 変数宣言できる */}}
  {{/* printf など関数使用可能。fmt.Printfのエイリアス */}}
  {{$i := "ii"}}
  <p>{{$i}}</p>
  <p>{{printf "%s-%s" $i "iii"}}</p>

  {{/* defineで定義することも可 */}}
  {{define "J"}}
  <p>jjj</p>
  {{end}}

  <hr>

  {{/* defineで定義された呼び出しはtemplate */}}
  {{template "J"}}

  {{/* 不等号比較など、小なりはlt */}} 
  {{$k := 8}}
  {{if lt 5 $k}}
  <p> 8 large </p>
  {{else}}
  <p> 5 large </p>
  {{end}}

</html>

ブラウザでの表示確認

スクリーンショット 2016-05-29 14.56.34.png

参考リンク

こちらを読めばより深く理解できると思われる


『 Go 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。