こんにちは、飯田です。

世間はいろんなゲームで盛り上がっていますね。普段FF14ばかりの私も久々にゲームを買いました。

今回も前回に引き続きVue.jsの勉強記事となります。

はじめに

この記事はフロント初心者がVue.jsを勉強する Part.1の続きです。

今回は実際のプロジェクト上のコンテンツをVue.jsにした話を書いていきます。

実際のプロジェクトでVue.jsを書いてみた。けれど…

まずは現状ピクトリンク内でVue.jsに置き換えられる静的ページやコンテンツを探すところからはじまりました。

そのひとつが、年に4回発行されるGIRLS TRENDという冊子の紹介ページです。

（余談ですがこちらの冊子は内容もデザインもとても可愛いので、ゲームセンターなどで見かけたらぜひ手にとってほしいです！）

GIRLS TRENDのディレクトリ構造は厳密には違いますが、だいたいこのようになっています。

~~色々突っ込みたいのですが~~現状それぞれのvolumeでディレクトリが切られていて、その中にファイルが2つセットでたくさんある感じになっています…

magazine/
└ index.vm // これが最新号(この場合だとvol.22)
└ present.vm // これが最新号のプレゼントページ(この場合だとvol.22)

└ vol_21/
　└ index.vm
　└ present.vm

└ vol_20/
　└ index.vm
　└ present.vm
.
.

（vmというのはピクトリンクで使われているVelocityというJavaテンプレートエンジンのファイル拡張子です。ちょっとカオスなHTMLファイルのような感じですが、特にここで説明する必要はないので割愛します。）

毎号同じレイアウトで色や画像・内容が変更されるだけなので、内容のみ異なる同じようなvmファイルがたくさん存在しています。

まずは深く考えずに最新号のindex.vmをVue.jsに置き換えてPull Requestを出しつつも、せっかくVue.jsを使うのに似たようなファイルをどうにかまとめられないのか？　と疑問に思っていました。

結果的に『Vue Routerを使ってみると良いかも』とレビューをもらい、Vue Routerに触れてみることにしました。

Vue Routerとは

シングルページアプリケーション（SPA）を構築するために用意されているVue.jsの公式拡張ライブラリです。

ルーティング制御に優れています。

公式ドキュメント

https://router.vuejs.org/ja/

シングルページアプリケーション（SPA）って？

単一のページで構成されているWebアプリケーションのことです。

ブラウザによるページ遷移を行うことなく、単一のページの中でコンテンツを切り替えて表示します。

こちらの記事が簡単にまとまっていて概要を掴むにはわかりやすいです。

https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a

やってみる

さて、今回やりたいことは以下になります。

・URLをシンプルにし、volumeに対応した内容を表示させたい

→ magazine/21/ならvol.21のindexの内容を、magazine/22/ならvol.22のindexの内容を表示したい

・毎回レイアウトは同じなので1つのコンポーネントを使いまわして内容だけ変えたい

前回vue-cliで作成したプロジェクトにVue Routerをインストールしてローカルで試してみることにします。

インストール

$ npm install vue-router

※npm5.0より前のバージョンを使っている方は–saveオプションをつけてください。

ルーティング用コンポーネントの作成

ルートにアクセスしたときのVueコンポーネントをIndex.vue、magazineにアクセスしたときのVueコンポーネントをMagazine.vueとし、それぞれ作成します。

とりあえず簡単な文章を入れているだけです。

<template>
    <p>これはIndex.vueです。</p>
</template>

<script>
    export default {
        name: 'Index'
    }
</script>

<template>
    <p>これはMagazine.vueです。</p>
</template>

<script>
    export default {
        name: 'Magazine'
    }
</script>

main.jsに設定の追記

Vue Routerはインストールしただけでは当然使えないので、main.jsに設定を追記します。

import Vue from 'vue'
import Router from 'vue-router' // Vue Routerの読み込み
import App from './App.vue'
// コンポーネントの読み込みを忘れずに！
import Index from './components/Index.vue'
import Magazine from './components/Magazine.vue'

Vue.config.productionTip = false

// ここでVue Routerを使う宣言
Vue.use(Router)

// ルーティングの設定
const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Index
        },
        {
            path: '/magazine/:volume/',
            name: 'magazine',
            component: Magazine
        }
    ]
})

new Vue({
    render: h =&gt; h(App),
    router: router, // ここも忘れずに！
}).$mount('#app')

ルーティングの設定について簡単に解説します。

mode

デフォルトでは、設定したパスにアクセスするとURLに#（ハッシュ）が含まれてしまいます。

historyと設定することによって、URLから#を除くことができます。

ただ実際のプロジェクトでhistoryモードを使うにはサーバー側の設定が必要です。

詳しくはこちらを参照してください（私はサーバー側の知見がないのでこのへんもゆくゆくは知りたいですね！　）

path

パスの設定です。

:からはじまるものはパラメータで、可変URLをマッチングするために使います。

今回は:volume部分に号数の数字が入る想定でパラメータにしています。

name

ルートに名前をつけます。

ナビゲーションの作成などに使うことができます。

component

path部分にアクセスしたときに表示するコンポーネントを設定します。

この場合だと/（ルート）にアクセスしたときはIndex.vue、magazine/:volume/にアクセスしたときはMagazine.vueが表示されます。

ルートコンポーネントに表示部分の追記

ルートコンポーネント（この場合なら全ての親コンポーネントにあたるApp.vue）に、表示部分を追記します。

（App.vueにはもともとvue-cliでプロジェクトを作成した際にすでに色々書いてありましたが、今回はわかりやすいように余計な記述を消しています。）

<template>
  <div>
      <h1>Vue Routerの練習</h1>
      <router-view /> // ここにパスと一致したコンポーネントが表示される
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<router-view />と記述することによって、パスと一致したコンポーネントがこの部分に表示されるようになります！

最初のうちは書き忘れてなんか表示されないんだけど…？とやっていたりするので書き忘れないようにしましょう。（実体験）

実際にアクセスしてみる

上記が終わったら、前回と同じように

$ npm run serve

でローカルサーバーを立ち上げてhttp://localhost:8080/にアクセスします。

このような表示になったら成功です！　ちゃんとルートにアクセスした際にIndex.vueが表示されました。

次はhttp://localhost:8080/magazine/21にアクセスします。

21部分は上記で説明したとおり可変パラメータにしているので、別の数字でも同じ表示になります。

Magazine.vueが表示されました！

これでVue Routerを使うことによって、ルーティングが機能してコンポーネントの表示が切り替わることを確認できました。

まとめ

今回はどういう経緯でVue Routerに触れることになったかの話とVue Router導入編でした。

Part.3では実際にvolumeに対応した内容を表示することをやりたいと思います。

FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

フロント初心者がVue.jsを勉強する part.2