１０分で基礎がわかるVue.js-入門

はじめに

皆さん、こんにちは！Webシステム開発エンジニアの蘭です！
今日はVue.jsについて語りたいと思います。

昔Webシステム開発技術が始まった時、バックエンドではPHPやRubyを使い直接OracleやMySQLの内部のデータベースにSELECT,INSERT,UPDATE,DELETEを実行してた時代でした。

それが今はSaasの時代になり、内部データを直接弄るだけではなく、
フロントバックエンドの合化、外部連携の柔軟性が整ってる便利なREST APIファースト開発が主になり、フロントで「サイト更新の速度」や直感的なリ「アルタイムの更新」がサイト品質に関してもはや欠かせない物になりました。
　参考：APIファーストで開発する7つのメリット

やりたいこと：【サイト更新速度の向上、直感的なアルタイムの更新】

バックエンドではサーバーに対するリクエストはAPIでプロパティを渡し、
フロントではJavascriptを使い、最小限の範囲で非同期にVirtual DOMを更新する事が現在APIファーストの開発では重要な事です。

　参考：
　　　JavaScript初心者でもすぐわかる！DOMとは何か？
　　　VirtualDOMの仕事ってなに？表示速度がはやい理由

何故Vue.js

理由は比較的に簡単

・Javascriptがあまり分からない初心者でも学べるJavascriptフレームワーク
・単一ファイルコンポーネントで、HTML、CSS、Javascriptが同一のファイルで管理できる。

もちろん、自分に合ったJavascriptフレームを選択するのが一番ですね。　　
参考：
　　　JavaScript: フレームワーク React/Vue/Angularについて
　　　Vue・React・Angularのパフォーマンス比較検証

始めよう！Vue.js

Vue.jsって何？

・Webアプリケーションでユーザーインターフェースを構築するため、オープンソースのJavascriptフレームワーク。
・Axios等他のJavascriptライブラリが導入できる。
・高機能なシングルページアプリケーション（SPA）を構築することができる。
・vue-routerやvue-validation,vuex等組み合わせることで、大規模なWebアプリ開発のニーズまでサポートする統合的な環境を提供し、作者Evan氏の「Progressive Framework」の概念を活かす。
・ECMAScript 5をベースに、現在のブラウザーではほぼ使える。
　　※ES6で書くと、動かない場合があります。（特にIE）
参考：
　　　作者Evan氏のVue.js Progressive Framework
　　　ECMAScript 5
　　　ES5とES6の違いをまとめてみた

Vue.jsのインストール

こちらについては以下の公式記事を参考してください。
　　　Vue.jsのインストール

実際の開発ではnpmでインストールしますが、練習用はCDNでもできます。

Vue.js_cdn

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"> 
 </script>

ドキュメント

Vue.jsは日本語版で、内容は充実。
　Vue.jsの公式マニュアル

1.Hello World

【以下のコードはこちらの記事を引用してます。】

See the Pen
Vue_Hello World by Uramaya (@uramaya)
on CodePen.

2.テンプレート

v-if / v-else-if / v-else

See the Pen Vue_Template by Uramaya (@uramaya) on CodePen.

See the Pen Vue_Template_V-if_2 by Uramaya (@uramaya) on CodePen.

v-show

See the Pen Vue_Template_V-Show by Uramaya (@uramaya) on CodePen.

繰り返し:v-for

See the Pen Vue_Template_V-for by Uramaya (@uramaya) on CodePen.

3.クラスとスタイル

HTMLクラス

See the Pen Vue_Template_V-HTMLClass by Uramaya (@uramaya) on CodePen.

style属性

See the Pen Vue_Template_V-Style by Uramaya (@uramaya) on CodePen.

4.フォーム入力

テキストボックス、エリアに文字入力

See the Pen Vue_Template_V-From-text by Uramaya (@uramaya) on CodePen.

セレクトボックス

See the Pen Vue_Template_V-SelectBox by Uramaya (@uramaya) on CodePen.

チェックボックス

See the Pen Vue_Template_V-From-checkbox by Uramaya (@uramaya) on CodePen.

ラジオ

See the Pen Vue_Template_V-From-radio by Uramaya (@uramaya) on CodePen.

ファイル

See the Pen Vue_Template_V-From-file by Uramaya (@uramaya) on CodePen.

その他

See the Pen ExxaOXz by Uramaya (@uramaya) on CodePen.

5.イベントとmethods

タブ -click

See the Pen Vue_Template_V-Click by Uramaya (@uramaya) on CodePen.

フォーム -submit

See the Pen Vue_Template_V-submit by Uramaya (@uramaya) on CodePen.

ファイルプレビュー -change

See the Pen Vue_Template_V-Change by Uramaya (@uramaya) on CodePen.

6.算出プロパティ

computed に定義した関数は、関数内部で参照しているプロパティが更新された時に自動的に呼ばれます。こちらではbirthday プロパティの値に変更があるたびに呼ばれています。

See the Pen Vue Computed by Masahiro Harada (@MasahiroHarada) on CodePen.

See the Pen Vue_Template_V-Calculate by Uramaya (@uramaya) on CodePen.

7.ウォッチャ

機能としてはcomputed と変わりません。

See the Pen Jjjoevo by Uramaya (@uramaya) on CodePen.

8.コンポーネント

内容は以下を引用
　　Vue.jsでSPAへの移行-コンポーネントを使ってみよう
　　Vue.js「コンポーネント」入門

コンポーネントとは簡単に説明すると、UI(ユーザーインターフェース)を作成する要素がまとまったものです。HTML、データ、ロジック、CSSを要素としてコンポーネントに含むことができます。そのコンポーネントを組み合わせることで、Webアプリケーションを作成することができます。作成したコンポーネントには名前が付けられます。その名前を登録し呼び出すことで、必要な時に何度でもアプリケーション内で使用することができます。

以下の利点があります。

・再利用が可能：
作成したコンポーネントは、必要なだけ何度でも再利用することができます。例えば、入力フォームのコンポーネントを作成すれば、そのフォームが必要なページにコンポーネントを登録し、HTML内にタグを追加することでフォームが追加されます。同じ構造や機能を開発し直すコストを軽減することができ、開発効率向上。
・コンポーネント単位で開発を行うことが可能：
コンポーネントごとに構造や機能が振り分けられているため、コンポーネント単位で複数人での開発を並行して進めることが可能です。また、Webアプリケーション内で何か問題が発生した際に、コンポーネント単位で切り分けて問題を対処することができます。

コンポーネントの構造

基本的にこのvueファイル一つで一つのコンポーネントを構成します。

vueファイルは主に
・templateタグ：コンポーネントのhtml要素を埋め込む
・scriptタグ：javascriptを記載する
・styleタグ：cssを記載する

xx.vue

<template>
<!-- ここにhtmlを記載します -->
</template>


<script>
// ここにjavascriptを記載します
</script>


<style>
/* ここにcssを記載します */
</style>

コンポーネントを作成してみよう

Header.vue

Header.vue

<template>
    <div>
        <h1>{{ title }}</h1>
        <p>{{ text }}</p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: "Header",
            text: "Hello Vue.js!"
        }
    }
}
</script>

<style scoped>
div{
    border: 1px solid blue
}
h1{
    color: blue
}
p{
    color:blue
}
</style>

Body.vue

Body.vue

<template>
    <div>
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: "Body",
            text: "Have a good day!"
        }
    }
}
</script>

<style scoped>
div{
    border: 1px solid red
}
h2{
    color: red
}
p{
    color: red
}
</style>

App.vue

先ほど作成したHeader.vueとBody.vueをApp.vueからまとめて呼び出します。

App.vue

<template>
  <div>
    <Header></Header>
    <Body></Body>
    <Body></Body>
  </div>
</template>

<script>
import Header from './Header.vue'
import Body from './Body.vue'

export default {
  components: {
    Header,
    Body
  }
}
</script>

イメージとしては以下になります。

コンポーネント間のデータ受け渡し

1.親→子

【親→子】親側のデータ渡し口（タグ属性）

App.vue

<template>
  <div>
　　//★【親→子】親側のデータ渡し口（タグ属性）
    <Header :username='name'></Header>
    〜略〜
  </div>
</template>

<script>
〜略〜

export default {
  data(){
    return {
      name: "kiyokiyo"
    }
  },
  〜略〜
}
</script>

【親→子】子側のデータ受け取り口（props）

　子コンポーネント側ではpropsを使ってデータを受け取ります。

Header.vue

<template>
    <div>
        〜略〜
        <p>Welcome! {{ username }}!</p>
    </div>
</template>

<script>
export default {
　　//★子コンポーネント側ではpropsを使ってデータを受け取ります。
    props: {
        username: String
    },
    〜略〜
}
</script>

イメージとしては以下になります。

2.子→親

App.vue

<template>
  <div>
    <Header :username='name'></Header>
    //★親側のデータ受け取り口（イベントと関数引数）
    <Body @add="add1"></Body>
    <Body @add="add2"></Body>
    <p>total : {{ totalcount }} </p>
  </div>
</template>

<script>
import Header from './Header.vue'
import Body from './Body.vue'

export default {
  data(){
    return {
      name: "kiyokiyo",
      count1: 0,
      count2: 0,
      totalcount: 0
    }
  },
  components: {
    Header,
    Body
  },
  methods:{
    add1(count){
      this.count1 = count;
      this.totalcount = this.count1 + this.count2;
    },
    add2(count){
      this.count2 = count;
      this.totalcount = this.count1 + this.count2;
    }
  }

}
</script>

Body.vue

<template>
    <div>
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
        <p><button @click="increment">+1</button> {{ count }} </p>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: "Body",
            text: "Have a good day!",
            count: 0
        }
    },
    methods: {
        increment(){
            this.count += 1;
            //★子側のデータ渡し口（$emit）
            this.$emit("add",this.count);
        }
    }
}
</script>

イメージとしては以下になります。

8.VueでREST API通信

VueでAPI通信はAPIでJsonデータを取得する際に使われます。
こちらに関しては以下の記事を見てくださいね。

　１０分でわかる：Vue.jsとaxios を利用した API の使用-初心者向け

9.Vueのライフサイクルフックについて

Vueインスタンスが作成の際に、フックが実行されるタイミングがわかり、メソッドを実行する時どのフックを使えばいいか理解できます。

・以下の記事を参考してください。
　　Vueのライフサイクルについて
　　ライフサイクルダイアグラム

まとめ

いかがでしょうか。
今回はVue.jsについての簡単な紹介をしました。
こちら説明を入れる時間がなくてすみません。
Vue.jsが好きなっていただければ、嬉しいです。：D
（ちょっと現場の仕事で時間が足りなく、土日も...また説明を加えます。）