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

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

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

作るもの

まとめ

ワークスペース

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

参考記事

事前準備

Makefile

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

追加モジュール

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

実装

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

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

Webサーバーの構築

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

handlerの作成

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

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

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

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

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

ルートの設置

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

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

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

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

main関数の作成

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

サンプルページ

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

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

起動確認

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

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

掲示板UIの作成

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

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

画面を表示してみましょう。

テストデータが入ってますが、これらは使わないので削除しておいてください。

次回

次回は、WebSocketsのコネクション確立処理を実装したいと思います。

Go記事まとめ

JavaScript記事まとめ

コメントを残す