Go+Vueを組み合わせたアプリテンプレート

2021-07-02

はじめに

Goで取得したAPIの結果をVueで表示していきましょうというのが今回の趣旨です。

Go + Vue.js でGETとPOSTをやってみる

わかりやすかったのでこの記事を参考に作り込んでいきましょう。

今回作るフォルダ構成はこんなのになります。

 バックエンド(Go)

今回はGoをREST APIとして動作させます。 echoパッケージをつかうのが簡単そうなのでこちらを利用します。 Github:labstack/echo

go get github.com/labstack/echo

実装コード

echoのサンプルコードをほとんどそのまま使っています。 import パッケージの所で、v4などVersionが記載されていたのですが私の環境では動きませんでした。 なので、V4の記載を取っ払っています。

vueで作ったフロントエンドをGoから立ち上げるので一文追加しています。

e.Static("/", "dist/")
package main

import (
    "net/http"

    "github.com/labstack/echo"
    "github.com/labstack/echo/middleware"
)

func main() {
    // Echo instance
    e := echo.New()
    e.Static("/", "dist/")

    // Middleware
    e.Use(middleware.Logger())
    e.Use(middleware.Recover())

    // Routes
    e.GET("/hello", hello)

    // Start server
    e.Logger.Fatal(e.Start(":1323"))
}

// GETリクエスト
func hello(c echo.Context) error {
    return c.String(http.StatusOK, "hello, world")
}

これで、/helloのアドレスを叩けば、「hello, world」を返すREST APIができました。

フロントエンド(vue)

次はこのREST APIを叩いて結果を表示するVueプロジェクトを作りましょう。

vue create rest
Vue CLI v4.5.9
┌──────────────────────────────────────────┐
│                                          │
│   New version available 4.5.9 → 4.5.13   │
│     Run npm i -g @vue/cli to update!     │
│                                          │
└──────────────────────────────────────────┘

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

Vue 3を選択肢、パッケージインストーラはyarnを選択します。 yarnでなくとも問題は無いですが、以下yarn前提で進めます。

今回は、axiosを使いREST APIを叩くので追加します。

yarn add axios

実装コード

App.vue

サンプルから不要なものを削ります。 templteの中身を削するだけで良いです。

<template>
  <HelloWorld/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue

templateの中身はこのようしました。 ボタンが押されたら、sendRequestメソッドを呼び出してバックエンド側のREST APIにアクセスします。 取得した結果を 変数に格納して表示しています。

<template>
  <div class="hello">
    <button @click="sendRequest">リクエスト送信</button>
    <h1>取得結果</h1>
    <p>GET:<br/>{{edinet}}</p>
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: 'App',
  data:()=>{
    return{
      edinet:"",
    }
  },
  methods: {
    sendRequest: async function(){
      const getRequestNoParam = await axios.get("/hello")

      this.edinet = getRequestNoParam.data
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

実行結果

実行するにはvueプロジェクトをビルドして、main.goを立ち上げます。

yarn build
go run main.go

今回はGo側でポート番号を1323に設定しているので http://localhost:1323 にアクセスします。

良くある警告がでることもありますので許可してあげてください。

アクセスしてボタンを押すとこのような画面がでます。

余談

今回作ったアプリは結構汎用性が高く遊びごたえがあります。

別の使いみちとしては、Go側からコマンドプロンプトが実行できてその結果をVueで出力もできます。

textlintを叩いてその結果を表示するようなアプリがあると仕様開発するときとか結構便利です。 echoは配列を返すこともできるため、帰ってきた配列をで表示するみたいな使い方をすれば一台のPCを複数にでシェアしたいようなケースに対応できます。

業務時間にポチポチ作ってましたが1時間ぐらいでそれなりに使えるものができてよかったです。 需要があれば業務に抵触しない範囲で一般化して書きます。

おわりに

お手軽にGoとVueをつなぐアプリケーションを用意しました。 バックエンド側でedinet APIを叩いて取得した有価証券報告書の中身をDBに詰め込み REST API形式で配信するように作れば、表示する側でも使い勝手が良いのではないでしょうか。

今日はここまで、終わり。