Vue.jsを始めようとすると様々なサイトでVueCLIから始める記事を紹介されてます。本記事ではインストールして開発環境を作るだけでなく、Vueがどう構築されているか？全体像や関連ツールを含めて説明していきます。

Vue.js(ビュージェーエス)とは

JavaScriptフレームワークでコンポーネントシステムが取り入れられており、Evan Youによって開発されています。近年、小規模から大規模までのサービスがVue.jsに置き換えられていっていますね。

メリット・デメリット

Vue.jsの特徴の1つとしてSPA(SinglePageApplication)を作れることになります。 SPAはHTML/CSS/JavaScriptのみでサイトを構成し、サーバーとの通信を減らせることから非常に高速に動作するようにみえるでしょう。

ただどのフレームワークを扱うにも同じですがメリット・デメリットは存在します。

メリット

SPAを構築するのが非常に簡単
WEBサイトやアプリを簡単に作れる
動作が軽い
学習コストが低く、公式ドキュメントが充実してる
データバインディングが可能
ファイル保存後の自動リロード機能

デメリット

SSRを実装しないとSEOに不安を覚える
コンポーネントの設計が非常に難しい
規模が大きくなるとjsファイルが肥大化する
ブラウザによっては描画されない
sentry.ioなどを導入しないと本番環境のエラー検知ができない

とはいえ上記の問題はVueの派生であるNuxt.jsやNEXT.jsなどを導入することで一定解決は可能です。私が開発に携わってるPJでも解決できないクリティカルな問題は起こっていません。

運用されてるサイト

Vue.js系統を運用している有名なサイトだと

ホテル予約サイトの「一休.com」
ブログサービスの「NOTE」
看護師コミュニティサイトの「ナース専科」

などもVue.jsで開発されていますね。サイトを見るとわかりますが通常のサイトと違和感ない作りになっています。導入前は本番環境で利用できるかどうか不安も覚えますがキチンと運用すれば大丈夫です。

Vue.jsを立ち上げてみよう

説明で使う環境

node v10.15.3

ノードバージョンの要件 Vue CLIにはNode.jsバージョン8.9以上が必要です（8.11.0以降を推奨）。nvmまたはnvm-windowsを使用して、同じマシン上でNodeの複数のバージョンを管理できます。 (参照元：Vue.js)

Vueの開発環境を手早く進めるようVueCLI というツールが提供されています。これはVueプロジェクトの初期セットアップで導入する環境を簡単につくれるよう提供されています。例) JavaScript/TypeScriptの選択など

そのため初めにVueCLIをインストールします。

コンソール

$ npm install -g @vue/cli

次にプロジェクトの作成をします。

コンソール

$ vue create vue-project

コンソールに選択肢が出てくるので Manually select features を選択します。 defaultを選択すると直ぐに立ち上げはできるのですが、URL設定などが面倒になるので Manually select features で進めていきましょう。

コンソール

Vue CLI v4.1.1
? Please pick a preset:
> default (babel, eslint)
  Manually select features

次に必要なプリセットの選択をします。 Router Vuex CSS-Preprocessorsあたりは選択していたほうが良いでしょう。

コンソール

Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

画面遷移の際にURLを変更しますか？（意訳）「Y」を押して進みます

コンソール

Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

CSSプロセッサーはどれを選びますか？ Sass・Lessなど選べるのでプロジェクトに合ったものを選択

コンソール

Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

エラーチェックのルールはどれを使いますか？（意訳）「ESLint with error prevention only」を選択

コンソール

Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Eslint（エラーチェック）のタイミングを選択してください。保存したとき（Lint on save）を選択

コンソール

Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

最後にBabelとESLintの設定を聞かれるので「In dedicated config files」を選択しましょう。

コンソール
Vue CLI v4.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
  In package.json

コンソールが完了するとインストールが完了します非常に簡単ですね。次に雛形がインストールされていることを確認するために立ち上げを行います。

コンソール
$ npm run serve

 DONE  Compiled successfully in 2515ms                                                                          15:19:27


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

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

コンソールに表示されているURL にアクセスし表示できればインストールは完了です。

Vue.jsのフォルダ構成

さてインストールは無事できました、これからVueCLIで作られたフォルダ構成を簡単に説明していきます。

フォルダ	概要
node_modules	リクエストを実行（デフォルトはGET）
public	画像などサイトに必要なリソースファイルを配置
src	ソースコードのフォルダ、開発に必要なのはここに記述
.gitignore	gitに含めないディレクトリ
babel.config	babelの設定
package.json	関連パッケージやスクリプトの定義
package-lock.json	インストールパッケージのバージョン定義

先ほどの npm run serveなどのコマンドはpackage.json内に記述されています。

srcフォルダ

いろいろフォルダ出てきましたが重要なのはsrcフォルダです。カスタマイズをしなければsrcだけ見ていれば大丈夫です。

main.js

コンソール

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

main.jsはHTMLが表示されてから一番初めに実行されるjsファイルです。 Vueインスタンスの作成を行い id=’app’ でVue.jsを動作させるよう定義しています。 Storeやルーティング定義先の定義もmain.jsで指定されています。

App.vue

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<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;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

拡張子が.vueになっているのが特徴でｓVue単一のコンポーネントファイルです。 <template>にhtmlを、<script>にjavascriptを、<style>にcssを1つのファイルに記述します。1ファイルで完結してるため独立したコンポーネントが作りやすくなっています。

router/index.js

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

VueプロジェクトのURL設定（ルーティング）を行うファイルです。
http://localhost:8080/ にアクセスして表示されるページが ../views/Home.vue
http://localhost:8080/about にアクセスして表示されるページが ../views/About.vue

と定義されていることがわかりますね。
記述の違いはコメントでも書いている通り、jsを分割し遅延ロードさせるかの設定するかどうかの違いです。

store/index.js

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Vueの状態管理を行うファイルです。コンポーネントでは値の受け渡しに制限がありますが、Store内ではコンポーネントを超えたり、画面遷移しても値が引き継がれます。便利ですが使う場面を設計しないと辛いコードが出来上がります。

まとめ

以上でVueCLIを使ったPJの概要の説明を終わります。公式サイトに書いてないことは無いほど充実しているので慣れてきたら一度全部目を通すことをお薦めします。

uiuifree.com

- サイト制作のノウハウと最適化を目指して-