目次
- フォルダ構成と準備
- templetesフォルダにHTMLファイルを作る
- HTMLを表示するGO言語側処理（gin利用）
- main.goを実行してHTMLを表示する
- GO言語から変数を渡してHTMLで表示してみる
GO言語（golang）で簡単なWEBアプリの作り方を確認してみます。
フォルダ構成と準備
今回は「webPrac」（web練習用程度の意味）フォルダを作り、その下を以下のようなフォルダ構成にしてみました。
templatesの下にHTMLファイルを置きます。
subFuncsフォルダは、go言語のサブファンクションが必要になったら、ここに置おこうと思ったのですが、結局使いませんでした（笑）。
webPracをカレントフォルダにして以下を実行し、go.modファイルを生成します。
go mod init webPrac
templetesフォルダにHTMLファイルを作る
ルート「/」デフォルトでアクセスする「index.html」を作ります。
CSSは、クラス指定不要でレイアウトを整えてくれるnew.cssを使います。
表示確認のための静的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
以下は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の２つのミドルウエアをデフォルトで使うように設定します。
単純なHTMLを表示するだけなら、「gin.New()」だけで十分ですが、とりあえず。
あと、http.StatusOKの定数を使うためだけに、"net/http"をインポートしてます。
http.StatusOKの部分を「200」のように数字で書くなら、"net/http"のインポートはいりません。
main.goを実行してHTMLを表示する
プログラムを実行します。
VSCodeのニューから実行でも、ターミナルから「go run main.go」でもいいです。
こんな感じで「8080」ポートでリッスンしている・・と表示されます。
その状態でブラウザから
でアクセスすると。
と表示されます。
GO言語から変数を渡してHTMLで表示してみる
GO言語の変数をHTMLに渡して表示する処理を追加します。
template機能を使います。
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 = "１行目の左側"
d1.Right = "１行目の右側"
darr = append(darr, d1)
d2 := new(Data)
d2.Left = "２行目の左側"
d2.Right = "２行目の右側"
darr = append(darr, d2)
router.GET("/", func(ctx *gin.Context) {
ctx.HTML(http.StatusOK, "index.html", gin.H{"title": title, "data": darr})
})
router.Run()
}
ＨＴＭＬ に渡す部分です。
gin.H{"title": title, "data": darr})
HTML側で参照するのは、"title"と"data”のほうです。
HTML側はこうなります。
<:!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>:{{.title}}<:/h1>: <:table>: {{range .data}} <:tr>: <:td>:{{.Left}}<:/td>: <:td>:{{.Right}}<:/td>: <:/tr>: {{end}} <:/table>: <:/body>: <:/html>:
rangeのループのの対象は以下の構造体の配列です。
type Data struct {
Left string
Right string
}
なので、内側ではメンバのLeftとRightを直接参照してます。
これを実行すると、こうなります。
いい感じです。
とりあえず、ginをインストールして、最低限の動作確認レベルのことはできました。
次から、少しずつ実践的なトピックを確認していきます。
ではでは。