GoとVueを使ってREST APIを作成する方法
はじめに
Goで取得したAPIの結果をVueで表示する方法について解説した記事です。記事内では、バックエンドでのREST APIの実装方法やフロントエンドでのVueプロジェクトの作成方法を詳しく説明しています。以下、記事のタグ情報について記載します。
わかりやすかったのでこの記事を参考に作り込んでいきましょう。
今回作るフォルダ構成はこんなのになります。
バックエンド（Go）
今回はGoをREST APIとして動作させます。 echoパッケージをつかうのが簡単そうなのでこちらを利用します。 Github:labstack/echo
go get github.com/labstack/echo
コード解説
記事では、バックエンドでのREST APIの実装方法として、echoパッケージを使った方法を紹介しています。また、フロントエンドでのVueプロジェクトの作成方法やaxiosを使ったREST APIの叩き方も解説しています。 具体的なコード例も掲載しています。
実装コード
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を複数にでシェアしたいようなケースに対応できます。
業務時間にポチポチ作ってましたが１時間ぐらいでそれなりに使えるものができてよかったです。 需要があれば業務に抵触しない範囲で一般化して書きます。
まとめ
本記事では、GoとVueを使ったREST APIの作成方法について解説しました。バックエンドでのREST APIの実装方法やフロントエンドでのVueプロジェクトの作成方法、さらにはaxiosを使ったREST APIの叩き方などを詳しく説明しました。これらの内容を理解すれば、初めてのREST API作成にも挑戦できるようになるでしょう。
amazon.co.jp
