Vue CLIとFirebaseでサイトを作った（その3）

前回の記事
※本記事は前記事の方法でセットアップされたことが前提となっています

少し時間が空いてしまった。
前回は最低限必要なツールのインストール、Firebaseへのデプロイまで行ったが、Vueは全然使ってなかった。
今回はVue CLIでビルドしてみよう。

npm scriptでVueを使ったシングルページアプリケーション（SPA）としてビルド

package.jsonは以下のようになっていた。

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-typescript": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "typescript": "~3.5.3",
    "vue-template-compiler": "^2.6.10"
  }
}

scriptsオブジェクトの「serve」の値として「vue-cli-service serve」が、「build」の値として「vue-cli-service build」が記述されているのがわかると思う。
これはnpm scriptといって、ワンライナー（1行だけの）スクリプトに名前を登録できる機能だ。
「npm run スクリプト名」もしくは「yarn スクリプト名」で実行できる。今回はyarnを使っているので、yarnを前提に進めていく。
ちなみに、ここで実行されるスクリプトは「node_modules/.bin」へのパスが解決される。
コマンドプロンプトでプロジェクトディレクトリを開き、以下を入力し実行する。
yarn build
なにやら表示されて、distディレクトリ内が書き換えられる。
Doneと表示されたら完了。とりあえずFirebaseにデプロイしてみよう。
firebase deploy --only hosting
「–only hosting」を付けると、静的なサイトのみがデプロイされ、デプロイ時間の短縮になる。

アクセスすると、上記のようなページ。Vueの初期ページですね。
ビルドされたページを確認してみよう。「dist/index.html」です。

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>example</title>
    <link href=/css/app.51dcb61d.css rel=preload as=style>
    <link href=/js/app.fdccc359.js rel=preload as=script>
    <link href=/js/chunk-vendors.d100dcc9.js rel=preload as=script>
    <link href=/css/app.51dcb61d.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to
    continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.d100dcc9.js></script>
<script src=/js/app.fdccc359.js></script>
</body>
</html>

※見やすいよう整形してあります

imgタグや、文章などなにもない。ただひとつ、<div id=app></div>があるのみだ。
おおざっぱに言うと、VueとはDOMをJavaScriptで生成していくフレームワークだ。
ここではidがappのdivタグの中身がJavaScriptによって書き換えられている。
これはJavaScriptで条件分岐やループを使ってコンテンツを書き換えていけることを意味する。
// いつも気になるんだけどDOMのメモリ解放ってどうなってるんですかね？

じゃあ、Vue初期ページのコンテンツってどこにあるのかというと、「src/App.vue」にある。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss">
#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>

他のところは読み飛ばしていいけど、templateタグ内の<div id=“app”>内が表示されていることは想像できるでしょう。
あと、「HelloWorld」とか怪しいタグがあります。
これを以下のように書き換えてみた。<template>内だけです。

<template>
  <div id="app">
    <p>Hello Vue.js</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss">
#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>

そしてyarn buildしてfirebase deploy --only hosting。

書き換わった。英語圏向けページになってるみたいですね。
そもそもこのHTMLのひな形はどこに入ってるのか、というと「public/index.html」です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>example</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

htmlタグのlang属性が「en」になってますね。これを「ja」にすれば日本語向けになる。ここまでまとめると、

public/index.htmlに大本のHTMLのひな形がある
public/index.htmlの<div id=“app”></div>内が書き換わる
書き換わるコンテンツはsrc/App.vueのtemplateタグ内にある

Vue.jsの恩恵をまったく受けられてないけど、コンテンツの作り方はとてもシンプルでわかりやすい。

開発中に確認する

ここまでビルドしてデプロイ、という流れで確認してきたけど面倒だ。 Vue CLIにはあらかじめ確認用のスクリプトが用意されている。それが前述した”serve”スクリプトだ。 yarn serveと打てば

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.105:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

こんな感じに表示されてウォッチャが実行中になる。終了するときはCtrl + Cね。
http://localhost:8080/にアクセスすると、更新が入る度に自動リロードされる。
便利！

つづく