前のパートに戻る 完了して次のパートへ  

  1-3 HTML を表示しよう

本パートではウェブブラウザに対して HTML を返却できるようにプログラムを改良していきます。

本パートの目標物


ウェブブラウザに簡単なページを表示してみます。見出し部分が大きく表示されており、文字列ではなく HTML が返却されていることが分かります。なお、この段階では CSS によるスタイリングは行いません。

目標物を作成するまでの流れ


  1. pongo2 によるテンプレートエンジンの実装
  2. pongo2 のダウンロード
  3. テンプレートファイルの作成

では実際に進めていきましょう。

教材のコードの見方


このパートから、下記のようにコードに+-があります。

コードの見方としては+になっている箇所はコードを追加してください。-になっている箇所はコードを削除してください。

1. pongo2 によるテンプレートエンジンの実装


今回はテンプレートエンジンとして pongo2 というライブラリを利用していきます。pongo2 は Python 製のフルスタック Web フレームワークである Django ライクな文法を利用できるテンプレートエンジンです。使い方に迷った際は Django のドキュメント が参考になります。

それでは実装に移りましょう。main.go ファイルを開き、下記のように編集します。

go-tech-blog
└── main.go

本パートでもソースコードの解説は最後にまとめて実施します。


2. pongo2 のダウンロード

外部ライブラリを追加したので、go.modgo.sum をアップデートし、ソースコードを PC にダウンロードしましょう。

ターミナルを開き、次の2つのコマンドを実行します。

$ go mod tidy
$ go mod download


3. テンプレートファイルの作成

HTML を生成するためのテンプレートファイルを作成していきます。

まずはターミナル上で下記のコマンドを実行し、テンプレートファイルを格納するためのディレクトリを作成します。

$ mkdir -p src/template/article

作成したディレクトリの中に index.html という名称のファイルを作成します。

$ touch src/template/article/index.html

このときのディレクトリ構造を tree コマンドで確認してみます。

$ tree

実行結果は次のようになります。

$ tree
.
├── go.mod
├── go.sum
├── main.go
└── src
    └── template
        └── article
            └── index.html

3 directories, 4 files

作成したファイルを編集していきます。src/template/article/index.html ファイルを開き、次の内容を書き込んで保存します。

go-tech-blog
└── src
    └── template
        └── article
            └── index.html


動作確認


ウェブブラウザからアクセスしてページを確認してみましょう。

まずは Web サーバーを起動します。

$ go run main.go

Web サーバーが起動できたら、Chrome のアドレスバーに http://localhost:8080 と入力してアクセスします。

HTML を表示できました。

ソースコードの解説


main.go

テンプレートファイルを配置するディレクトリへの相対パスを定数として宣言しています。

pongo2 を利用して、テンプレートファイルとデータから HTML を生成している箇所です。生成した HTML はバイトデータとして関数の呼び出し元に返却しています。

文字列を返却する際には c.String(xxxx, xxxx) を利用していましたが、今回は HTML を返却するために c.HTMLBlob(xxxx, xxxx) を利用しています。

ハンドラ関数です。テンプレートファイルとデータを指定して render() 関数を呼び出しています。

src/template/article/index.html

テンプレートファイルに渡されたデータは、{{ }} を利用することで HTML 内に展開されます。上記の部分では Message と Now に格納された値を取り出しています。


以上で今回のパートは終了です。

HTML をレスポンスすることはウェブサイトを構築する上では欠かせません。ただし、見た目を綺麗にして自由自在のレイアウトを実現するためには CSS を用いてスタイリングをする必要があります。次のパートでは CSS を用いてページのスタイルを変更してみます。

お疲れさまでした。

議論

2 質問

このコースの評価は?