出来る限り何も考えずにVue.jsを扱う

概要

Vue.jsもすでにバージョンを重ねて、開発環境等々とり得る選択肢が増え、自分のような初学者（元々組込み系ソフトウェア設計者として何年か働いているので、初学者というには微妙ですが）は混乱してしまったため、備忘録。

初学者ほど、意外にツールや設計の重要性についてはあまり意識していないようなので、そういった観点で本記事は作成しています。

　前提知識は以下の通り。

• Node.js
• Bootstrap
• なんか適当にWebの知識がある
• ターミナルでコマンド

Vue.jsとは

Webフレームワークの一つ。基本的には中規模～大規模向けと言われています。この規模ベースの表現は分かりにくいですが、個人的には以下のような機能の有無が関係しているものと思います。

• 小規模：DOM操作ができる
• 中規模：グローバル変数を格納できる機能がある
• 大規模：クライアント側(Webブラウザ側)にてルーティング機能がある

開発環境

　あらかじめ「node.js」が導入されている前提で記述します。ここでは、ほとんど「npm」を用いたパッケージ管理ソフトとして使用しています。パッケージ管理ソフトとは、コマンド一発でパッケージ（ライブラリ）をインストールできるものと考えておいてもらえればいいと思います。

余談ですが、私は「node.js」はバージョン管理ソフト「nodist」から入れています。「node.js」はバージョンアップが早く、またweb系は何だかんだ様々な環境を想定するだろうなと思い、導入しています。

• nodist：https://github.com/nullivex/nodist/releases

今回は**「vue/cli」**を採用します。「nuxt.js」を採用している人もいますが、現行の「vue/cli」であれば簡単なアプリケーションを開発分には事足りそうだったので。コマンド一発で「router」と「vuex」を使えますし。

言語も基本は「Javascript」にします。オブジェクト指向的に書きたいと思い、typescriptの採用も検討しましたが、しっかりコンポーネント毎に作ることとしていれば良さそう。静的型付けしたい感もありますが、そこまで大規模化しなければ神経質になる必要もないかなと思い、「typescript」の採用は見送りました。単純にそのあたりの勉強がメンドイということもありますが。

また、「bootstrap」も利用します。デザインセンスが壊滅的にないので、付け焼き刃ですが使用します。

Bootstrapとは？

wikipedia的には「Webアプリケーションフレームワーク」。「見た目を」「それっぽく」「レスポンシブ」にするフレームワークです。ここでいう「レスポンシブ」とは画面の大きさに合わせて見た目を変えられるという意味です。

エディタ（VScode）

Javascriptを使用する上でよく使用されているのは「VScode」だと思います。特別宗教上の理由がない限りはVScodeを使用すると良いと思います。

• Visual studio Code：https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ブラウザ（Google Chrome）

これは私の場合ですが、私は「Google Chrome」を使用しています。一応ChromeのプラグインとしてVue.js用のデバッグツールがあります。ここでは、このツールの使い方を説明しませんが、一応入れとくといいのかもしれません。

• Vue.js devtools：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja

「vue/cli」の導入／プロジェクトの作成

コンソールにて、以下を入力。そうすると、npm環境におけるグローバル領域において「vue/cli」がインストールされます。

npm install -g @vue/cli

導入出来たら、何も考えずに次のコマンド。

vue create myProject
※「myProject」は任意の名前

このコマンドは「vue/cli」におけるプロジェクト作成のコマンドです。このコマンドを打つと以下のようになります。

Please puck preset:(Use arrow keys)
 default(babel,eslint)
>Manually select features

defeultでもいいですが、自分はManuallyでプロジェクトを作成します。その後、自分は最低限以下の用のような項目にチェックを入れてプロジェクトを作成します。あとは適当にEnterを押します。

?Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Bootstrap-vueのインストール

Bootstrap-vueは、そのBootstrapをVue.jsをベースにして使用するためのライブラリです。インストールの仕方は簡単で、以下のコマンドを押下すると良いです。

cd myProject
npm install bootstrap-vue

「cd myProject」でプロジェクトフォルダに移動後、インストールします。

Vus.jsによるプロジェクトのファイル構成

プロジェクトを作成すると、自動に様々なファイルが作成されます。私はレガシーな組込み系ばかり関わっていたので、作成されるファイル数に面食らいました。主なファイルの構成は以下の通りです。「：」以下は自分の何となくのイメージ。

myProject
 ├─node_modules：npmコマンドで入れたライブラリの格納する場所。ほとんどいじらない
 ├─public
 │  └─index.html：ほとんど何もいじらないhtmlファイル。いじってもCDNのリンクを張るくらい
 └─src
    ├─assets：静的ファイルリソース
    ├─components：単一コンポーネントファイルを格納する場所
    ├─router
 　 │  └─index.js：ルーティング設定ファイル
    ├─store
　　│  └─index.js：グローバル変数を格納するところ
    ├─views：ページレイアウトのためのコンポーネント
    ├─App.vue：最上位コンポーネント
    └─main.js：ライブラリとかの設定するファイル

ユーザは基本的に「src」以下のファイルしか編集しません。Vue.jsでは、基本的に「コンポーネント」ごとにまとめやすいようにしているように思えます。このあたりは最近のwebフレームワークでは共通した特徴だと思いますが、他のフレームワークよりは意識するファイルが少ない印象を受けます。似たフレームワークであるところの「Anguler」の方が、プラグイン的なフレームワークが整っているように思いますが、初学者としてはBootstrap+Vue.jsの方が理解が早いし、業務上の応用が利きそうな雰囲気があります。

コンポーネントの作成

　コンポーネントとは、ソフトウェアを構成する部品である。ただし、ここでいうコンポーネントとは「コンポーネント指向におけるコンポーネント」ということに注意すること。具体的には以下の４つ。

• 構造
• スタイル
• 状態（≒データ）
• 機能

　思想としては「オブジェクト指向」もあるが、こちらが指向するのは「データ」と「機能」だけど、「コンポーネント指向」ではそれをもう少し大きくしたイメージである。

単一コンポーネントファイル

　上記のコンポーネントを作成するため、vue.jsでは拡張子「.vue」にて単一コンポーネントファイルを作成する。

　単一コンポーネントファイルは以下のような要素で構成される。個人的な見方だが、コンポーネント指向としては以下のような対応付け。

• template：構造
• script：状態、機能
• style：スタイル

sample.vue

<template>
  <div class="com">
  </div>
</template>

<script>
  default export {
    name:'com',
    data(){
      return {
        dt1: "",
        dt2: ""
      }
    },
    components:{}
  }
</script>

<style>
</style>

ページ作成

　新しいページを作成するときは「view」ディレクトリを編集します。基本的な構成は単一コンポーネントファイルと同様である。

　違いは、基本的にここでは、単一コンポーネントファイルの組み合わせで記述し、データの保持は基本的にはこっちで行う（ここで基本的にと言っているのは、ページ間で共有する場合は「vuex」にてデータの保持を行うが、ここでは詳しく記述しない）。

ルーティング（router）

　基本的に「router」ディレクトリのindex.jsしか編集しません。
　念頭に置くのは以下のふたつです。

• ルーティングの設定（これは「router」のindex.js）
• 設定したパスに移動するための設定

「routes」変数の中を以下のような感じに定義します。
「views」フォルダの中に定義したコンポーネントファイルを呼び出すように設定します。

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// viewsフォルダにあるコンポーネントファイルを呼び出し
import Auth from '../views/Auth.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',// パスの設定
    name: 'auth',// 名前
    component: Auth// 呼び出したコンポーネントファイルを設定
  },
  {
    path: '/home',// パスの設定
    name: 'home',// 名前
    component: Home// 呼び出したコンポーネントファイルを設定
  }
]

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

export default router

グローバル変数の管理（vuex）

　ここでは「vuex」について説明します。正直個人的にこれが一番面倒だった。可能であれば、ページ間でのデータの共有のない設計をすべきだと考えます。
　「vuex」はページ間にてデータを共有するための機能です。

変数／ゲッター関数／セッター関数の定義

「store」フォルダにあるindex.jsに定義します。以下に例を示します。

• state：変数の定義
• getters：ゲッター関数（値の取得）の定義
• mutations：セッター関数（値の変更）の定義

/store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		// 変数の定義
		user: "",
		password: ""
	},
	getters:{
		// ゲッター関数の定義
		user(state){return state.user},
		password(state){return state.password}

	},
	mutations: {
		// セッター関数の定義
		setUser(state, payload){state.user = payload},
		setPassword(state, payload){state.password = payload}
	},
	actions: {
	},
	modules: {
	}
})

関数の呼び出し

this.$store.commit("setUser", this.user);

手順

最後に簡単に手順を示します。

• プロジェクトを作成
• 「views」に作成したいページ分コンポーネントファイルを用意
• 「router」のindex.jsに「views」に用意したページ分パスを設定
• 「store」のindex.jsにページ間をまたいで使用する変数を設定
• あとはガツガツコンポーネントファイルを編集する

最後に

ここでは、Vue.jsについて簡単にではありますが、説明しました。詳細な説明は何かしらの参考書を見ることをお勧めします。以下は私が買った参考書です。

• 基礎から学ぶ Vue.js：https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453/ref=sr_1_3

参考

• フロントエンドのコンポーネント設計に立ち向かう/qiita：https://qiita.com/seya/items/8814e905693f00cdade2
• Vue.js：https://jp.vuejs.org/index.html
• BootstrapVue：https://bootstrap-vue.js.org/