最近の砂場活動その3: フロントエンド編(Vue.js/SPA)

Vue.jsでフロントエンド再入門しました。仕事でjs触るけど、ゼロからあれこれやると分からないことが無限に発生しますね...。成果物はこちら。

サーバーサイドはGoで書いていて、フロント周りがVue.jsです。それっぽい見た目になってきたので、Route53でドメイン取得しました。

前回までのあらすじ
初手
webpackを導入
Componentの導入
Bootstrapで見た目をマシにする
SPA導入
- SPAにするとGoogle Analyticsで正確にトラッキングできない問題
参考図書

前回までのあらすじ

今年の目標で自分であれこれ触って壊して試せる砂場を作る活動というのをやってきました。先月までは主にインフラとかミドルウェア周りをやりました。

下回りは整ってきつつありますが、表側がとにかく素朴なhtmlになっていて、スマホで見たときの体験がよくなかったです。体験がよろしくないものは自分でも触らなくなるし、砂場でもっと遊ぶためにもフロント周りを少し整備するか...ということで今回のエントリの内容をやりました。

初手

仕事のリポジトリはフロント周りのツール(linterなど)が整備されているけど、自分でゼロからやっていくときには何が必要かよく分かっていませんね...。めちゃくちゃ素朴に始めたかったので、以下のお手軽なところからやりました。

CDNから毎回scriptを読み込む
jsのファイル用意するのも面倒だったので、htmlのscriptタグ内に素朴にjsを書く

最低限の装備だけど、Vue.jsが動くようになりました。サーバーサイドとのやり取りはaxiosというやつが便利でした。こんな感じ。

import axios from 'axios';

fetchList(listname) {
  this.examples = [];
  axios.get("/api/examples?listName=" + listname)
  .then(response => {
    this.examples = response.data;
  });
}

どんな感じかまあまあ掴めたのでよしとします。

webpackを導入

先週ちょうどAWSサミットで東京に出張に行っていたのですが、新幹線でも開発しようと思うとCDNから読み込んでたらダメですね。npmで手元に持ってきたモジュールを一つにまとめてscriptで読み込みたい、ということでwebpackを使うことにしました。以下の資料を参考に進めました。

npmとwebpack4でビルド - jQueryからの次のステップ

むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8 from civic Sasaki

webpack.config.jsが設定ファイルになっています。複雑なことはとにかくしたくなかったので、最低限の設定をやりました。

entry: モジュール間の依存関係を解析を始める箇所
output: モジュールを一つにまとめた後に吐くファイルの場所
resolve: Vue.jsを使っている場合は設定が必要

webpackでjs/css関連は一つのファイルにまとまったので、それをgoから読み出しましょう。go-bindataは最近よろしくないので、go-assets-builderを使って一つのgoのassetにまとめました。

% go-assets-builder --package=templates templates dist > lib/assets/templates.go

assetとして読み込んでstatic以下で呼べるように配置すれば、デプロイも簡単なままです。

func doServe(c *cli.Context) error {
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(templates.Assets)))
    return http.ListenAndServe(addr, nil)
}

Componentの導入

あちこち同じパーツを使い回したい場所が出てきたので、componentを導入します。vueファイルにtemplate/script/styleのそれぞれ必要なものを書いていきます。componentを定義すれば、import Example from './Example.vue';という感じで他の箇所で定義したcomponentを使い回すことができます。この辺を参考にした気がします。

Bootstrapで見た目をマシにする

Twitterをまとめたタブ、slideshareをまとめたタブ...というのを作りたかったけど、自分でデザインすると明かにダサくなりそうでした。Bootstrapってやつを使うとある程度お手軽に見栄えのするが作れたなと思いましたが、自分で触ったことがなかったのでやってみることにしました。Vue.jsからも簡単に使うことができました。すでに用意されているComponentsから適当にそれっぽいものを選んでいると、それっぽくなるのでとにかくお手軽。説明だけではなく例も必ず載っているので、めっちゃ助かりました。

Bootstrap Vue

PCだと3カラムで表示されていますが、幅を狭くしたりスマホで見ると1カラムになったりnavibarが勝手に折り畳まれたりして便利ですね。

<meta name="viewport" content="width=device-width,initial-scale=1">を設定するのを忘れずに。

SPA導入

タブを切り変えた後にブラウザをリロードすると、どのタブにいたか分からなくなってしまうので困りました。それならばということでSPAにしました。Vue.jsは公式のrouterがあるので、それを使えばよいです。

Vue Router | 紹介

サーバーサイドのコントローラーを書いているときのノリで、どのpathにきたらどのcomponentを呼び出すというのを書いてやればよいです。こんな感じ。

export default [
  {
    path: '/',
    redirect: '/list/general'
  },
  {
    path: '/list/:listname',
    component: ListExample
  },
  {
    path: '/recent-added-examples',
    component: RecentAddedExamples
  }
]