Vue.jsでシンプルなローディングを表示する"vue-loading-template"の使い方

vue(vue.js)でloadingする際、よく紹介されている`vue-loading-template`の紹介です。

しかし、リポジトリのreadmeを見てもexmapleを読んでも、検索しても、初見では使い方がわからないのではと思ったので、この記事を書くことにします。

かなり丁寧に解説することを目指します。

まず、vueの使い方ですが、nodeやyarnでinstallして使います。

今回は、`package.json`を用意します。

```json:package.json
{
  "name": "sample-vue-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-loading-template": "^1.3.2",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.15"
  }
}
```

基本的には`package.json`があるディレクトリ内で`yarn install`などをすればOKです。

```sh:command-exmaple
$ mkdir -p project
$ cd project
$ cat package.json 
{
  "name": "sample-vue-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-loading-template": "^1.3.2",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.15"
  }
}

$ yarn install
```

次にvueのsrc file(ソースファイル)を用意します。通常はこれをbuildすると、html(web)が生成され、それをweb server上に置くことで有効なページとして動作します。

```sh:command-exmaple
$ mkdir -p src
$ touch src/main.js
$ vim src/main.js
```

```js:src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

main.jsに全てを書いても良いですが、今回は、App.vueを読み込んで処理することにします。html形式のほうが最初はわかりやすいと思います。

なお、main.jsに書く形式と読み込む形式では、若干、書き方が異なります。

```sh:command-exmaple
$ vim src/App.vue
```

```src/App.vue
<template>
	<div id="app">
			<Loading v-show="loading">
				<vue-loading type="barsCylon" color="#99892b" :size="{ width: '50px', height: '50px' }"></vue-loading>    
			</Loading>
			<button @click="picker" >start</button>
			<p v-show="!loading">{{ name }}</p>
	</div>
</template>

<script>
import { VueLoading } from 'vue-loading-template';
export default {
	data() {
		return {
			name:"",
			loading: false
		}
	},
	components: {
		VueLoading
	},
	methods: {
		picker: function(){
			this.loading = true;
			setTimeout(() => {
				// ここに処理	
				this.name = "test";
				this.loading = false;
			}, 1200);
		}
	}
}
</script>
```

これは、ボタンがクリックされると`name`に文字列を入れるのですが、その処理まで`1.2秒`の待機時間を設け、その間にローディングを表示しています。

ポイントとしては、ローディング処理の有無は`v-show`などで変数を指定して制御するということです。

exampleにもreadmeにも書かれていない気がするので、これは初見ではよくわからないんじゃないかなと思いました。

例えば、以下のタグを用意する必要があり、`loading=true`の場合は上で、`loading=false`の場合は下になります。

```html
<xxx v-show="loading"></xxx>

<xxx v-show="!loading"></xxx>
```

簡易なサンプルを用意すると、以下のような書き方になります。

```html
<Loading v-show="loading">
<vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>
</Loading>

<p v-show="!loading">{{ name }}</p>
```

ローディングの種類は、typeで指定しますが、これらはreadmeに書かれています。`balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylon`があり、それらを指定できるようです。見た目は[demo](https://jkchao.github.io/vue-loading/)から確認しましょう。

vueの場合は、sleep, timeout関連で待機時間を指定するのもハマりどころかもしれません。

```js
setTimeout(() => {
// ここに処理  
}, 1200);
```

最後に、previwとbuildについて説明します。preview, buildとは、表示確認と実行ファイル生成のことです。

```sh
# preview
$ yarn serve
$ curl -sL localhost:8080

# build
$ yarn build
$ ls ./dist/
```

buildの場合は、基本的に./dist以下に生成されます。必要になるファイルは内容によります。buildされるファイル等を指定するのは、以下の設定ファイルを作り、`yarn build`する必要があります。

```js:vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js'
    }
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css'
    },
  },
}
```

これを前提に話をすると、今回の場合は以下の構成で有効なページになります。

```sh:commmand-example
$ cp ./dist/*.js ~/public/web-server/
$ cd ~/public/web-server/
$ vim ./index.html
```

```html:/index.html
<div id=app></div>
<script src=/chunk-vendors.js></script>
<script src=/app.js></script>
```

```sh:
$ firefox index.html
or
$ jekyll serve
```

なお、普通に`yarn build`で生成された`./dist`内でpreviewしてもOKですし、ファイル全部をdeploy(ここではweb-server上に置くこと)してもいいです。