Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

参考リンク

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

lanevok
Infrastructure Engineer, Security
http://lanevok.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした