"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

GO言語(golang)/Webアプリケーション(1)フレームワーク「gin」&HTMLへ変数の値を渡す

 f:id:arakan_no_boku:20210412005751p:plain

目次

GO言語(golang)で簡単なWEBアプリの作り方を確認してみます。

フォルダ構成と準備

今回は「webPrac」(web練習用程度の意味)フォルダを作り、その下を以下のようなフォルダ構成にしてみました。

f:id:arakan_no_boku:20210603231510p:plain

 templatesの下にHTMLファイルを置きます。

subFuncsフォルダは、go言語のサブファンクションが必要になったら、ここに置おこうと思ったのですが、結局使いませんでした(笑)。

webPracをカレントフォルダにして以下を実行し、go.modファイルを生成します。

go mod init webPrac

templetesフォルダにHTMLファイルを作る

ルート「/」デフォルトでアクセスする「index.html」を作ります。

CSSは、クラス指定不要でレイアウトを整えてくれるnew.cssを使います。

newcss.net

表示確認のための静的HTMLで「Hello World」を表示します。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="HTML5 exsample" />
		<meta name="author" content="boku" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" />
		<title>Hello</title>
	</head>
	<body>
		<h1>こんにちは。世界。</h1>
	</body>
</html>

HTML5でnew.cssを使うベーシックなテンプレートみたいになってます。  

HTMLを表示するGO言語側処理(gin利用)

Webフレームワークは「gin」を使います。

ネットで軽量で速いと評判が良く、ドキュメントを読んだかぎりでは、なかなか使い勝手がよさそうな・・気がしたので、一度使い込んでみたいなと思うからです。

まずは、インストールです。

go get -u github.com/gin-gonic/gin

github.com

以下はginを使って、静的HTMLを表示する最低限のGoプログラムです。

main.go という名前にしました。

package main

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*.html")

	router.GET("/", func(ctx *gin.Context) {
		ctx.HTML(http.StatusOK, "index.html", gin.H{})
	})

	router.Run()
}

ginのインポートは"github.com/gin-gonic/gin"です。

生成には、「 gin.Default()」を使いました。

gin.Default()は、New()したうえで、LoggerとRecoveryの2つのミドルウエアをデフォルトで使うように設定します。

単純なHTMLを表示するだけなら、「gin.New()」だけで十分ですが、とりあえず。

あと、http.StatusOKの定数を使うためだけに、"net/http"をインポートしてます。

http.StatusOKの部分を「200」のように数字で書くなら、"net/http"のインポートはいりません。

main.goを実行してHTMLを表示する

プログラムを実行します。

VSCodeのニューから実行でも、ターミナルから「go run main.go」でもいいです。

f:id:arakan_no_boku:20210604003019p:plain

こんな感じで「8080」ポートでリッスンしている・・と表示されます。

その状態でブラウザから

http://localhost:8080/

 でアクセスすると。

f:id:arakan_no_boku:20210604003246p:plain

と表示されます。

GO言語から変数を渡してHTMLで表示してみる

GO言語の変数をHTMLに渡して表示する処理を追加します。

template機能を使います。

golang.org

GO言語から受け取った変数の値をHTML中に表示する場合は、「{{ }}」の中に「.(ドット)」の後ろに変数を示す受け渡し名称を書きます。

例えば。

GO言語中の「title」という変数をHTMLに渡すのに「"title":title」のようにmap形式で名称を指定したものを、HTML中では「{{.title}}」のように受けるわけです。

配列の場合は、darrという配列を「"darr":darr」のように名称を指定したなら、HTML中ではrangeを使って一つずつ取り出します。

{{range .darr}}

 //ここで配列の中身をつかって処理を書く

{{end}}

他にもいろいろありますが、今回はこの2パターンだけ使ってみます。

まずはGO言語側です。

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*.html")

	title := "値受け渡しのサンプル"

	type Data struct {
		Left  string
		Right string
	}

	type datas []*Data

	var darr datas
	d1 := new(Data)
	d1.Left = "1行目の左側"
	d1.Right = "1行目の右側"
	darr = append(darr, d1)
	d2 := new(Data)
	d2.Left = "2行目の左側"
	d2.Right = "2行目の右側"
	darr = append(darr, d2)

	router.GET("/", func(ctx *gin.Context) {
		ctx.HTML(http.StatusOK, "index.html", gin.H{"title": title, "data": darr})
	})

	router.Run()
}

HTML に渡す部分です。

gin.H{"title": title, "data": darr})

HTML側で参照するのは、"title"と"data”のほうです。

HTML側はこうなります。

&lt:!DOCTYPE html&gt:
&lt:html lang="ja"&gt:
	&lt:head&gt:
		&lt:meta charset="UTF-8" /&gt:
		&lt:meta name="description" content="HTML5 exsample" /&gt:
		&lt:meta name="author" content="boku" /&gt:
		&lt:meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt:
		&lt:link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" /&gt:
		&lt:link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" /&gt:
		&lt:title&gt:Hello&lt:/title&gt:
	&lt:/head&gt:
	&lt:body&gt:
		&lt:h1&gt:{{.title}}&lt:/h1&gt:
		&lt:table&gt:
			{{range .data}}
			&lt:tr&gt:
				&lt:td&gt:{{.Left}}&lt:/td&gt:
				&lt:td&gt:{{.Right}}&lt:/td&gt:
			&lt:/tr&gt:
			{{end}}
		&lt:/table&gt:
	&lt:/body&gt:
&lt:/html&gt:

rangeのループのの対象は以下の構造体の配列です。

type Data struct {
    Left string
    Right string

なので、内側ではメンバのLeftとRightを直接参照してます。

これを実行すると、こうなります。 

f:id:arakan_no_boku:20210604011921p:plain

いい感じです。

とりあえず、ginをインストールして、最低限の動作確認レベルのことはできました。

次から、少しずつ実践的なトピックを確認していきます。

ではでは。