[Go言語/JavaScript]ハンズオンで作る掲示板アプリ!~環境構築編~

こんにちは。KOUKIです。
とある企業で、Go言語を使ったWeb開発業務に従事しています。

本記事では、ハンズオン形式で掲示板アプリを実装していきます!

<目次>

作るもの

まとめ

[Go言語/JavaScript]ハンズオンで作る掲示板アプリ!~~まとめ~

ワークスペース

ワークスペースを準備してください。

mkdir bulletin-board
cd bulletin-board/
go mod init bulletin-board
mkdir -p cmd/web
mkdir -p internal/handlers
mkdir html
touch cmd/web/main.go
touch cmd/web/routes.go
touch html/home.jet
touch internal/handlers/handlers.go
mkdir domain
touch domain/connect.go
mkdir static
touch static/scripts.js
touch static/style.css
mkdir -p internal/handlers
mkdir html
touch cmd/web/main.go
touch cmd/web/routes.go
touch Makefile

mkdir bulletin-board

cd bulletin-board/

go mod init bulletin-board

mkdir -p cmd/web

mkdir -p internal/handlers

mkdir html

touch cmd/web/main.go

touch cmd/web/routes.go

touch html/home.jet

touch internal/handlers/handlers.go

mkdir domain

touch domain/connect.go

mkdir static

touch static/scripts.js

touch static/style.css

mkdir -p internal/handlers

mkdir html

touch cmd/web/main.go

touch cmd/web/routes.go

touch Makefile

参考記事

Go言語で作るWebアプリのテンプレート

Go言語で作るWebアプリのテンプレート2~Staticファイル~

事前準備

Makefile

アプリケーション起動用のコマンドをMakefileに記述しておきます。Windowsの方は、コマンドプロンプト上で「go run cmd/web/*.go」コマンドを実行してください。

.PHONY: run

run:
	go run cmd/web/*.go

.PHONY: run

run:

go run cmd/web/*.go

追加モジュール

go modファイルが存在するディレクトリ上で、以下のコマンドを実行してください。

go get github.com/CloudyKit/jet/v6
go get github.com/bmizerany/pat
go get github.com/gorilla/websocket

go get github.com/CloudyKit/jet/v6

go get github.com/bmizerany/pat

go get github.com/gorilla/websocket

実装

掲示板アプリケーションは、サーバーサイドをGo言語で、フロントエンドをHTML & CSS & JavaScriptで実装していきます。

今回は、Webサーバーを構築し、掲示板のUIを作成するところまで作業を進めましょう。

Webサーバーの構築

Go言語で、Webサーバーを構築します。結構、簡単です。

handlerの作成

handelr.goには、HTTPリクエストのハンドリング処理を実装します。

// handlers.go
package handlers

import (
	"log"
	"net/http"

	"github.com/CloudyKit/jet/v6"
)

// Jetをセットアップ
var views = jet.NewSet(
	// htmlフォルダを読み込む
	jet.NewOSFileSystemLoader("./html"),
	jet.InDevelopmentMode(),
)

func Home(w http.ResponseWriter, r *http.Request) {
	err := renderPage(w, "home.jet", nil)
	if err != nil {
		log.Println(err)
	}
}

func renderPage(w http.ResponseWriter, tmpl string, data jet.VarMap) error {
	view, err := views.GetTemplate(tmpl)
	if err != nil {
		log.Println(err)
		return err
	}

	err = view.Execute(w, data, nil)
	if err != nil {
		log.Println(err)
		return err
	}

	return nil
}

// handlers.go

package handlers

import (

"log"

"net/http"

"github.com/CloudyKit/jet/v6"

)

// Jetをセットアップ

var views = jet.NewSet(

// htmlフォルダを読み込む

jet.NewOSFileSystemLoader("./html"),

jet.InDevelopmentMode(),

)

func Home(w http.ResponseWriter, r *http.Request) {

err := renderPage(w, "home.jet", nil)

if err != nil {

log.Println(err)

}

func renderPage(w http.ResponseWriter, tmpl string, data jet.VarMap) error {

view, err := views.GetTemplate(tmpl)

if err != nil {

log.Println(err)

return err

}

err = view.Execute(w, data, nil)

if err != nil {

log.Println(err)

return err

}

return nil

}

前頭に記述してある「jet.NewSet」は、CloudyKit/jetのテンプレートエンジンのメソッドです。

今回のようにHTMLファイルを読み込んで、ユーザーにページ情報を返したい場合は、このようなテンプレートエンジンが必要になります。

Go言語にはもともとtext/templateというテンプレートエンジンが組み込まれていますが、jetの方が使いやすいです。

HTTPリクエストを受け取り後、「home.jet」を読み取り、「view.Execute(w, data, nil)」処理にて呼び出し元にページ情報を返します。

ルートの設置

routes.goには、HTTPリクエストを受け取ったとき、どのhandlerに処理を渡すかを指定します。

// routes.go
package main

import (
	"bulletin-board/internal/handlers"
	"net/http"

	"github.com/bmizerany/pat"
)

func routes() http.Handler {
	mux := pat.New()

	mux.Get("/", http.HandlerFunc(handlers.Home))

	// staticファイルの配信設定
	fileServer := http.FileServer(http.Dir("./static/"))
	mux.Get("/static/", http.StripPrefix("/static", fileServer))
	return mux
}

// routes.go

package main

import (

"bulletin-board/internal/handlers"

"net/http"

"github.com/bmizerany/pat"

)

func routes() http.Handler {

mux := pat.New()

mux.Get("/", http.HandlerFunc(handlers.Home))

// staticファイルの配信設定

fileServer := http.FileServer(http.Dir("./static/"))

mux.Get("/static/", http.StripPrefix("/static", fileServer))

return mux

}

handlerへのマッチャーには、bmizerany/patを使いました。

これで、ユーザーがルート(/)にアクセスした時、Home handlerが呼ばれるようになります。

また、JavaScriptやCSSなどのstaticファイルを配信できるように、「http.FileServer」の設定をしました。これにより、「/static」にアクセスした際、staticフォルダ配下のファイルが読み込まれるようになりました。

main関数の作成

続いて、main関数を作成します。ここには、Webサーバーの起動処理を実装します。

// main.go
package main

import (
	"log"
	"net/http"
)

func main() {
	mux := routes()

	log.Println("Starting web server on port 8080")
	log.Fatal(http.ListenAndServe(":8080", mux))
}

// main.go

package main

import (

"log"

"net/http"

)

func main() {

mux := routes()

log.Println("Starting web server on port 8080")

log.Fatal(http.ListenAndServe(":8080", mux))

}

サンプルページ

テストのため、サンプルページをhome.jetファイルに書き込んでおきます。

<!-- home.jet -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <title>Bulletin Board App</title>
    <link rel="stylesheet" href="/static/style.css" />
</head>

<body>
    <h1>Welcome to our bulletin-board</h1>

    <script src="/static/scripts.js"></script>
</body>

</html>

<!DOCTYPE html>

<head>

integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="

crossorigin="anonymous" />

<title>Bulletin Board App</title>

</head>

<body>

<h1>Welcome to our bulletin-board</h1>

</body>

</html>

ここで注目していただきたいのが、cssとjavascriptの読み込み設定です。「/static/」と指定しているので、staticフォルダ配下のファイルを読み込めるます。
※staticフォルダは、routes.goにて配信元として指定したフォルダ

起動確認

以下のコマンドで、Webサーバーを起動しましょう。

# Mac/Linux
make run

# windows
go run cmd/web/*.go

# Mac/Linux

make run

# windows

go run cmd/web/*.go

「http://localhost:8080/」にアクセスすると、以下のページが表示されます。

掲示板UIの作成

サクッと掲示板UIを作成しましょう。

home.jetとstyle.cssを以下のように書き換えます。

<!-- home.jet -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <title>Bulletin Board App</title>
    <link rel="stylesheet" href="/static/style.css" />
</head>

<body>
    <div id="post-container" class="post-container">
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
        <div class="post">
            <p>XXXXXX</p>
            <small class="name">selfnote</small>
        </div>
    </div>
    <div class="form-area">
        <input type="text" class="username" id="username" autocomplete="off" placeholder="Your Name">
        <textarea name="post" id="post" cols="30" rows="10" autocomplete="off"></textarea>
        <button id="submit" class="submit">POST</button>
    </div>

    <script src="/static/scripts.js"></script>
</body>

</html>

<!DOCTYPE html>

<head>

integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="

crossorigin="anonymous" />

<title>Bulletin Board App</title>

</head>

<body>

<p>XXXXXX</p>