Big Sky :: Golang と Vue.js で簡単なアプリケーションを作ってみた。

Go と Vue.js を使ってどれくらいシームレスにウェブアプリを作れるかを確認したかったのでタスク管理アプリを作ってみた。サーバは Go なので vue-cli や webpack 等は使わない。全て CDN から。Vue.js でアプリのベースを、UI コンポーネントとして Element、Ajax ライブラリとして axios を使った。

以前、Riot.js を使って Todo アプリを作った時はサーバ作るのにも少し時間が掛かったので、今回は横着して echo-scaffold を使った。

GitHub - mattn/echo-scaffold

README.md Echo Scaffold Echo Scaffold is CLI to generate scaffolds for the echo framework.
https://github.com/mattn/echo-scaffold

echo-scaffold を使えば、タスク管理アプリとして必要な「本文」と「実施済み」という属性をモデルにした REST サーバを簡単に作る事が出来る。


$ echo-scaffold init go-vue-example

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/database.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/errors.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/helpers/response.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/config/database.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/config/environment.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/router.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/controllers/suite_test.go

        create  /home/mattn/go/src/github.com/mattn/go-vue-example/go-vue-example.go



$ cd go-vue-example

$ echo-scaffold scaffold task body:string done:bool

        create  models/task.go

        create  models/task_dbsession.go

        create  controllers/tasks.go

        create  controllers/tasks_helpers.go

        create  controllers/suite_test.go

        skip  controllers/suite_test.go

        insert  controllers/router.go

モデルとコントローラ、コンフィグや mongodb へのアクセスも生成される。生成された main 関数に少し手を入れて静的ファイルをサーブ出来る様にする。js 側のモデルとのバインディングを書く。


<div id="app">

  <el-main v-loading="loading">

    <h2>My Tasks</h2>

    <el-input placeholder="Please input your task" v-model="newTask" v-on:change="addTask()"></el-input>

    <ul class="list-group">

      <li class="list-group-item" v-for="task in tasks">

        <el-checkbox :checked="task.done" v-on:change="doneTask(task)">{{ task.body }}</el-checkbox>

      </li>

    </ul>

  </el-main>

</div>  

<script src="/static/app.js"></script>

app.js はこんな感じ。


ELEMENT.locale(ELEMENT.lang.ja)

var app = new Vue({

  el: '#app',

  data: {

    tasks: [],

    newTask: "",

    loading: false,

  },

  created: function() {

    this.loading = true;

    axios.get('/tasks')

      .then((response) => {

        console.log(response);

        this.tasks = response.data.items || [];

        this.loading = false;

      })

      .catch((error) => {

        console.log(error);

        this.loading = false;

      });

  },

  methods: {

    addTask: function(task) {

      this.loading = true;

      let params = new URLSearchParams();

      params.append('body', this.newTask);

      params.append('done', false);

      axios.post('/tasks', params)

        .then((response) => {

          this.loading = false;

          this.tasks.unshift(response.data);

          this.newTask = "";

          this.loading = false;

        })

        .catch((error) => {

          console.log(error);

          this.loading = false;

        });

    },

    doneTask: function(task) {

      this.loading = true;

      let params = new URLSearchParams();

      params.append('done', !task.done);

      axios.put('/tasks/' + task.id, params)

        .then((response) => {

          console.log(response);

          this.loading = false;

        })

        .catch((error) => {

          console.log(error);

          this.loading = false;

        });

    } 

  }

})

これだけで簡単にタスク管理アプリが書ける。Vue.js 便利やね。echo-scaffold で生成したコードを一切触ってないし、動作確認は MongoDB Atlas を使ったので、実際の作業は echo-scaffold の実行とフロントエンドのコードを書いたくらい。Element 超良いし axios も良いし、この3点あればだいたいのアプリは作れる。サーバは JSON が吐ける REST サーバであれば何でもいい。