Visual studio CodeでGo #Go

誰にでも簡単に覚えられるGO言語でWeb app(wsgi)を作ってみた。
まず、いつも使っているBootstrap4 templeteを使ってプログラムを作ってみよう。

フォルダは、以下のとおりです。
main.goは、appのプログラムです。views以下にhtmlテンプレートです。
│ main.go │ └─views about.tpl contact.tpl home.tpl layout.tpl

main.go

package main

import (
    "github.com/gorilla/mux"
    "html/template"
    "log"
    "net/http"
)

func Home(w http.ResponseWriter, r *http.Request) {
    // テンプレートをパース
    t := template.Must(template.ParseFiles("views/layout.tpl", "views/home.tpl"))

    data := map[string]string{
        "title":   "Home",
        "message": "",
    }
    // テンプレートを描画
    if err := t.ExecuteTemplate(w, "layout.tpl", data); err != nil {
        log.Fatal(err)
    }
}
func About(w http.ResponseWriter, r *http.Request) {
    // テンプレートをパース
    t := template.Must(template.ParseFiles("views/layout.tpl", "views/about.tpl"))
    data := map[string]string{
        "title":   "About",
        "message": "Your application description page.",
    }
    // テンプレートを描画
    if err := t.ExecuteTemplate(w, "layout.tpl", data); err != nil {
        log.Fatal(err)
    }
}
func Contact(w http.ResponseWriter, r *http.Request) {
    // テンプレートをパース
    t := template.Must(template.ParseFiles("views/layout.tpl", "views/contact.tpl"))
    data := map[string]string{
        "title":   "Contact",
        "message": "Your contact page.",
    }
    // テンプレートを描画
    if err := t.ExecuteTemplate(w, "layout.tpl", data); err != nil {
        log.Fatal(err)
    }
}
func main() {
    r := mux.NewRouter()
    r.HandleFunc("/", Home)
    r.HandleFunc("/about", About)
    r.HandleFunc("/contact", Contact)
    http.Handle("/", r)
    http.ListenAndServe("192.168.1.10:8080", r)
}

かならず書くpackage。

パッケージについて
- Go言語では、名前空間を分けるための仕組みとしてパッケージを使用します。
func main()は、routerの定義です。

URL	FUNCTION
http://192.168.1.10:8080/	func Home(...)
http://192.168.1.10:8080/contact	func Contact(...)
http://192.168.1.10:8080/about	func About(...}

Urlに対してそれぞれの関数を呼び出します。
各関数では。テンプレートを読み込み、描画します。

テンプレートは、全体のレイアウト部のLayout.tplと各それぞれのページ部分のhome.tpl/about.tpl/contact.tplから成り立ちます。

layout.tpl

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{{.title}}</title>
  </head>
  <body>
  <main role="main">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Boostrap4</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Content</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

  {{ template "content" . }}

</main>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

各レイアウトとテンプレートには、マップ形式のデータで受け渡します。

data := map[string]string{
        "title":   "Home",
        "message": "",
    }

テンプレート上では

{{.title}}

の二重括弧と.変数名で渡されます。
また、{{ template "content" . }}の部分を各テンプレートが置き換えます。

home.tpl

{{ define "content" }}
  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Hello, world!</h1>
      <p>これは、単純なマーケティングWebサイトまたは情報Webサイトのテンプレートです。ジャンボトロンと呼ばれる大きな吹き出しと、3つのサポートコンテンツが含まれています。これを基本として、よりユニークなものを作成してください。</p>
      <p><a class="btn btn-primary btn-lg" href="https://getbootstrap.com/" role="button">Learn more &raquo;</a></p>
    </div>
  </div>
  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>
    <hr>
  </div> <!-- /container -->
{{ end }}

各テンプレートは、下記の記入方法で定義されます。

{{ define "content" }}
..........
{{ end }}

about.tpl

{{ define "content" }}
<div class="container mt-5">
<h2>{{.title}}</h2>
<h3>{{.message }}</h3>
<p>この領域を使用して、追加情報を提供します。</p>
</div>
{{ end }}

contact.tpl

{{ define "content" }}
<div class="container mt-5">
 <h2>{{.title}}.</h2>
<h3>{{.message}}</h3>
<address>
    〒100-0001<br/>
    東京都千代田区千代田１<br />
    <abbr title="Phone">P:03-3213-2050</abbr>
</address>
<address>
    <strong>サポート:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br />
    <strong>営業:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>   
  </div> <!-- /container -->
{{end}}