Vue.jsを使ってみたので分かりやすくまとめた

どうも。みずかず(@mizukazu_1)です。

Vue.jsミニハンズオン(TODOリスト作成)

Qiitaのこの記事を見ながら同じように
Vue.jsでToDoリストを作成しました。

自分なりの改造も加えたいので公開はもう少し先になりますｗ

未来の自分の為にもなると思うので
今回はVue.jsについてなるべく分かりやすくまとめていきます。

Vue.jsとは

Vue.js（ヴュージェイエス）、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。
Wikipediaより引用

ざっくり言うとVue.jsはJavaScriptフレームワークの1種です。

最近だとjQueryの代わりにもなると言われていて非常に注目を集めています。

ディレクティブという言葉

Vue.jsでは「ディレクティブ」という言葉が出てきます。
このディレクティブというのはVue.js独自のものでHTMLに組み込めるプロパティみたいなものです。

プログラミング言語によくあるif文やfor文といったものも
Vue.jsにはありまして、接頭に「v-」が付きます。

詳しい使い方については後ほど説明しますが
使い方のイメージとしてはこんな感じです。

<div v-if="hoge"></div>
<div v-for="item in items"></div>

Vue.jsのメリット

Vue.jsはMVVMという設計手法を採用していて、データバインディングを簡単に行う事が出来ます。
また、書き方がとてもシンプルで分かりやすいのが特徴です。

その為、少ない学習コストで習得出来るので初心者の方にもオススメです。

デフォルトの機能はそこまで多くはありませんが
Vue.jsでは他のライブラリを組み合わせて自由に拡張していけますので自由度という面においても優れています。

実際に僕も触ってみた感じ、分かりやすかったですし
割とすんなり覚えられるなという印象を受けました。

実際の使い方

さっそく使い方に入っていきます。

Vue.jsの導入

Vue.jsを導入するには2種類の方法があります。

1. CLIを使用してプロジェクトを作成する。
2. CDNを使用してHTMLに読み込ませる。

後者の方がお手軽なので今回はそちらで説明していきます。

とは言っても中身の部分に関しては同じなのでご安心を。

Vue.jsCDNの読み込み

HTMLのheadタグに下記を挿入するだけでVue.jsが使えるようになります。

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

ディレクティブ

ここでは各ディレクティブについてまとめていきます。

よく使うディレクティブなのでぜひ覚えておいた方が良いです。
v-forなんかは僕がToDoアプリを作った時にも使いました。

また、追記で増やしていく予定です。

v-if

条件分岐に使う「v-if」です。

<div id="app">
    <p  v-if="Test">
      HelloWorld!
    </p>
 </div>    
<script>
    const app = new Vue({
      el: '#app',
      data: {
        Test: false
      }
    })
</script>

実行すると、「HelloWorld！」は表示されません。
v-ifでTestを指定してあげて、dataでTestに対してfalseを指定しているので画面には表示されないということです。

これをtrueにすれば画面に表示されるようになります。

v-for

v-forは繰り返し処理に使います。
プログラミング言語のfor文と同じですね。

<div id="app">
    <p  v-for="lang in langs">
      {{ lang }}
    </p>
</div>    
<script>
  const app = new Vue({
    el: '#app',
    data: {
      langs: ['C#', 'PHP', 'Python', 'Java', 'JavaScript']
      }
    })
</script>

実行結果はこんな感じです。

C#
PHP
Python
Java
JavaScript

dataでデータを配列に詰めます。
それを表示側で1つずつ表示をさせていくといった感じですね。

C#から入った自分としては
for文というよりforeach文に似てるような気がします。

v-model

v-modelを使用すると双方向でのデータバインディングが可能となります。

<div id="app">
    <input type="text" v-model="message">
    <p>
      {{ message }}  
    </p> 
</div>    
<script>
    const app = new Vue({
      el: '#app',
      data: {
        message: ''
      }
    })
</script>

テキストボックスとメッセージの表示欄がバインディングされ
変更が即座に伝わるようになります。

このように表示側とデータ側で表示がリアルタイム変動するのがデータバインディングです。

v-on

<div id="app">
    <button v-on:click="clickButton">クリック</button>
    <p>
      {{ nowDate }}  
    </p> 
</div>    
<script>
    const app = new Vue({
      el: '#app',
      data: {
        nowDate: ''
      },
      methods: {
        clickButton: function(){
          this.nowDate = new Date().toLocaleString();
        }
      }
    })
</script>

実行するとボタンの下に現在の時刻が表示されます。

v-on;clickでボタンがクリックされたらという条件を指定して
clickButtonで実際に動作させる処理を指定します。

今回はmethodsで定義したclickButtonメソッドを呼び出しています。

clickButtonメソッドではデータのnowDateに現在時刻を挿入する処理が書いてあります。

ディレクティブについてのまとめ

ディレクティブについての紹介は以上です。
プログラミング言語によくあるifやforのような制御構文的な部分が大きいので
慣れ次第ですぐ覚えられると思います。

とは言ってもVue.js独特のディレクティブもあるのでここは本当に
慣れが必要なのかなと思います。

僕もまだまだ勉強中なので・・・頑張ります。

Vue.jsコンポーネント

コンポーネントはよく使う部品を再利用可能にしてまとめたものです。

プログラムを書いてると良くあるんですが
一度書いた処理を再度使う場面って案外多いんですよね。

Vue.jsではそういった処理を部品化してコンポーネントという形で
まとめておくことが出来ます。

// button-counter と呼ばれる新しいコンポーネントを定義します
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
公式サイトより引用

<div id="components-demo">
  <button-counter></button-counter>
</div>
公式サイトより引用

new Vue({ el: '#components-demo' })
公式サイトより引用

上記で紹介したコンポーネントの作成方法はCDNでVueを読み込んだ際の方法です。

VueCLIを使ってプロジェクトを作った際には作成方法が若干異なります。
プロジェクトにおいてのカスタムコンポーネントの作成方法は以下の記事が参考になるかと思います。

2021年2月8日 【Vue.js】Vueプロジェクトの中でカスタムコンポーネントを作成する

最後に

今回Vue.jsでToDoアプリを作ってみましたが
理解が深まったのでとても良かったです。

公式サイトが親切なので有効活用すると良いと思います。

何回も言ってますが、プログラミングを覚えるにはやっぱり手を動かすのが一番ですね。

アウトプットも並行して行うとかなり理解が早くなります。

ToDoアプリの改造して早めに公開できるよう頑張りますｗ

今回参考にしたサイト
・Vue.js公式サイト
・オレインデザイン