
【第7回】Go言語(Golang)入門~HTMLテンプレート利用編~
2020.08.21
第7回~Go言語(Golang)入門~

前回の記事はこちら
こちらの記事もオススメ!
まずは基本的な使い方を覚えよう
【echoドキュメント】
https://echo.labstack.com/guide/templates
上記の echoのドキュメント を参考に、簡単なHTMLテンプレートを作成してみます。
hello.html の作成
public/views/ に hello.html を作成します。
1 | {{define "hello"}}Hello, {{.}}!{{end}} |
main.go
次に、main.go にテンプレートの設定を記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | package main import ( "html/template" "io" "net/http" "github.com/labstack/echo" ) type Template struct { templates *template.Template } func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return t.templates.ExecuteTemplate(w, name, data) } func Hello(c echo.Context) error { return c.Render(http.StatusOK, "hello", "World") } func main() { e := echo.New() t := &Template{ templates: template.Must(template.ParseGlob("public/views/*.html")), } e.Renderer = t e.GET("/hello", Hello) e.Logger.Fatal(e.Start(":8000")) } |
確認
こちらで実行してみます。

問題なく成功しました。
受け取った値を出力
このまま、GETパラメーターで受け取った値を出力してみます!
Helloメソッドだけ修正し、 value というパラメーターに付いてる値を出力するようにします。
1 2 3 4 | func Hello(c echo.Context) error { value := c.QueryParam("value") return c.Render(http.StatusOK, "hello", value) } |
確認
http://localhost:8000/hello?value=Noriyuki
でアクセスしてみます。

無事に挨拶してくれました!
これで受け口となる処理は、問題なさそうです。
TwitterAPIから取得データを表示してみよう
では、下記のような感じで、検索したツイートを表示してみたいと思います。
今日入門編書いたけど、次のGolangの記事どんなのがいいかな
— 笹のり (@sasa_nss_app) September 5, 2019
構造体の用意
まずは、API のレスポンスをパースするための構造体を用意します。
1 2 3 4 5 6 7 8 | type TweetTempete struct { User string `json:"user"` Text string `json:"text"` ScreenName string `json:"screenName"` Id string `json:"id"` Date string `json:"date"` TweetId string `json:"tweetId"` } |
テンプレート用htmlファイルを用意
次に、テンプレート用のhtmlファイルを、 public/views の直下に用意します。
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">{{.Text}}</p>— {{.User}} (@{{.ScreenName}}) <a href='https://twitter.com/{{.Id}}/status/{{.TweetId}}'>{{.Date}}</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </body> </html> |
TwitterAPIのリクエストからパース、テンプレートまでの当て込み
次に、TwitterAPI のリクエストからパース、テンプレートまでの当て込みを実装します。
TwitterAPI への接続は、前回の記事 か 笹川のリポジトリ を参考にしてみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | func Tweet(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweet := new(TweetTempete) for _, data := range searchResult.Statuses { tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr break } return c.Render(http.StatusOK, "tweet.html", tweet) } |
最後に、echo でルーティングしたら完了です。
完成
完成すると、下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | package main import ( "go_example/twitter" "html/template" "net/http" "github.com/labstack/echo" "io" ) func main() { e := echo.New() t := &Template{ templates: template.Must(template.ParseGlob("public/views/*.html")), } e.Renderer = t e.GET("/tweet", tweet) e.Logger.Fatal(e.Start(":8000")) } func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return t.templates.ExecuteTemplate(w, name, data) } func tweet(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweet := new(TweetTempete) for _, data := range searchResult.Statuses { tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr break } return c.Render(http.StatusOK, "tweet.html", tweet) } type Template struct { templates *template.Template } // TweetTempete はツイートの情報 type TweetTempete struct { User string `json:"user"` Text string `json:"text"` ScreenName string `json:"screenName"` Id string `json:"id"` Date string `json:"date"` TweetId string `json:"tweetId"` } |
確認
http://localhost:8000/tweet?value=Go Firestore
でアクセスしてみると…

はい、成功です!
私のツイートがでてきました(笑)
この調子で、検索したツイートが全部表示されるようにしてみましょう。
配列をテンプレートに当て込んでみよう
tweets.htmlの作成
まずは、 public/view に tweets.html を作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <style type="text/css"> .thum>* { float: left; margin-left: 10 } </style> <body> <div class="thum"> {{range .}} <blockquote class="twitter-tweet"> <p lang="ja" dir="ltr">{{.Text}}</p>— {{.User}} (@{{.ScreenName}}) <a href='https://twitter.com/{{.Id}}/status/{{.TweetId}}'>{{.Date}}</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> {{end}} </div> </body> </html> |
テンプレートに値を渡す
次に、先ほどと同じように、TwitterAPI から検索してデータを入れ込み、テンプレートに値を渡します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | func tweets(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweets := make([]*TweetTempete, 0) for _, data := range searchResult.Statuses { tweet := new(TweetTempete) tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr tweets = append(tweets, tweet) } return c.Render(http.StatusOK, "tweets.html", tweets) } |
最後に echo でルーティングしたら完了です。
完成
完成すると、下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | package main import ( "go_example/twitter" "html/template" "net/http" "github.com/labstack/echo" "io" ) func main() { e := echo.New() t := &Template{ templates: template.Must(template.ParseGlob("public/views/*.html")), } e.Renderer = t e.GET("/tweets", tweets) e.Logger.Fatal(e.Start(":8000")) } func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error { return t.templates.ExecuteTemplate(w, name, data) } func tweets(c echo.Context) error { value := c.QueryParam("value") api := twitter.ConnectTwitterApi() //検索 searchResult, _ := api.GetSearch(`"` + value + `"`, nil) tweets := make([]*TweetTempete, 0) for _, data := range searchResult.Statuses { tweet := new(TweetTempete) tweet.Text = data.FullText tweet.User = data.User.Name tweet.Id = data.User.IdStr tweet.ScreenName = data.User.ScreenName tweet.Date = data.CreatedAt tweet.TweetId = data.IdStr tweets = append(tweets, tweet) } return c.Render(http.StatusOK, "tweets.html", tweets) } type Template struct { templates *template.Template } // TweetTempete はツイートの情報 type TweetTempete struct { User string `json:"user"` Text string `json:"text"` ScreenName string `json:"screenName"` Id string `json:"id"` Date string `json:"date"` TweetId string `json:"tweetId"` } |
確認
http://localhost:8000/tweets?value=ライトコード
でアクセスしてみると…

それっぽいのがでました!
成功です!
なんと、全部、笹川の記事(笑)
第8回へつづく!
今回は、「HTMLテンプレート」と「TwitterAPI」の組み合わせで、前回の記事よりもリッチなTwitterクライアントを作ってみました。
ちょっとしたWebアプリケーションならば、Go言語(Golang)でサクッとできちゃいますね!
今回、作成したgoファイルはこちらのリポジトリにて管理しております。
Go言語でのシステム開発依頼・お見積もりはこちらまでお願いします。
また、Go言語を扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。
次回の記事はこちら
オススメのGo入門本
こちらの記事もオススメ!
第1回の記事はこちら
ライトコードよりお知らせ






一緒に働いてくれる仲間を募集しております!
ライトコードでは、仲間を募集しております!
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております!
採用情報はこちら書いた人はこんな人

- 新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中!
IT技術2020.03.24Androidのライブラリを作って公開してみた
IT技術2019.12.18【最終回】Go言語(Golang)入門~Twitterアプリ作成完了編~
IT技術2019.12.12【第14回】Go言語(Golang)入門~Twitterアプリ作成編~
IT技術2019.12.04【第13回】Go言語(Golang)入門~MySQL利用編~