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

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

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

前回までのあらすじ

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

下回りは整ってきつつありますが、表側がとにかく素朴な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を使うことにしました。以下の資料を参考に進めました。

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から適当にそれっぽいものを選んでいると、それっぽくなるのでとにかくお手軽。説明だけではなく例も必ず載っているので、めっちゃ助かりました。

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

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

SPA導入

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

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

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

SPAにするとGoogle Analyticsで正確にトラッキングできない問題

何も考えずにGoogle Analyticsを入れたところ、訪問先が全部/になって悲しいことになりした。先人がいたので、それを使わせてもらいました。

きちんと取れるようになりました。

参考図書

大体この2冊で大丈夫でした。

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

  • 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/05/09
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
速習Vue.js 速習シリーズ

速習Vue.js 速習シリーズ