背景

未経験からエンジニアへの転職を目指します。良質なポートフォリオ作成のためRails APIとvue.jsを用いたSPA開発を勉強することにしました。

現状の知識レベルとしては、Ruby on railsを使って簡単なアプリケーション開発、gitを使ったバージョン管理、herokuを使ってデプロイできるレベルです。自分の忘備録かつ、同じくらいのレベルでこれからvue.jsに挑戦してみようと思っている方に向けて少しでも役に立てればと思います。

本記事の目標

vueの基礎やvueの基礎文法を理解する

【参考】
本記事はudemyの講座『超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)』で学んだ内容のアウトプットです。なのでコード等は講座の内容がベースとなっております。

javascriptはほとんどのwebアプリケーションで実装されており、簡単に書くための
昨今では3大フレームワークのvue,react,angularが注目されています。トレンドを調べてみるとjQueryは落ち目の一方ですが、3大フレームワークは上昇傾向にあることがわかります。

【参考】
Vue.js vs React vs Angularのどれを選ぶかトレンドから見る
 jQueryとは何なのか？　なぜ使わなくても（あるいは使わないほうが）いいのか？

今回はこの中で学習コストが低く、小規模の開発でも簡単に導入できるvueを選択したいと思います。

2. Vue.jsについて

vue.jsはreactと並び日本でも多くの企業が採用しています。vue.jsが多くの企業に採用される理由は主に４つあります。

ⅰ.導入が簡単・柔軟性がある

例えばrails6.0ではvue.js用のwebpackerをインストールをしてたった1行記載するだけで、vue.jsを利用できます。すなわちrailsアプリに部分的にvue.jsを利用することも可能ですし、api開発でvue.jｓをメインに開発することができます。

ⅱ.学習コストが低い

vue.jsはHTML・CSS・javascriptさえ理解していれば、初学者でも学習がしやすいのが特徴です。またvue.jsの公式が日本語に対応しているので困ったときは公式をみればだいたい解決することができます。

ⅲ.効率的な開発ができる

vue.jsはコンポーネントという単位でアプリケーションを簡単に組み立てることができます。コンポーネントはUIを構成するためのパーツみたいなもので、共通化することで何度も繰り返し利用することができます。

ⅳ.仮想DOMやtypescrpit等が使える

javascriptのフレームワークは仮想DOMやTypescriptといった技術を使うことがスタンダートとなっていっています。vue.jsも仮想DOMやtypescriptに対応しているため、より高速で拡張性の高い実装が可能です。

【参考】
(vue.js公式) はじめに -vue.jsとは？
(vue.js公式) 他のフレームワークとの比較

3. SPAについて

SPAとは「Single Page Application」の略で、その名の通り１つのページでコンテンツの切り替えを行うアプリケーションのことです。具体例だとslackやgooglemapなどが挙げられます。どちらもページを遷移しないまま（単一ページのまま）、新しい情報を取得することができます。SPAはページ遷移の時間が短くUXが高まることから近年注目されている仕組みです。

vue.jsを使うと簡単にSPAを構築することができます。

【参考】
SPA(Single Page Application)の基本

4. Vue.jsの基礎文法について

では早速vue.jsの基本文法を確認してみましょう。

■ファイルについて

vue.jsのインストールは、「CDN」「npm」「vuecli」の3種類に分かれます。「CDN」はhtmlのbodyタグに記載するやり方で、「npm」はnode.jsのパッケージマネージャを使う方法、「vuecli」はターミナルでvueコマンドを使えるにする方法です。今回は「CDN」を使います。適当にindex.htmlを作成し下記のように記述します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
  </div>
  <script>
    new Vue({
      el: "#app",
    })
  </script>
</body>
</html>

headタグ内は通常のhtmlの記述と同じです。
bodyタグの１行目の記述で、CDNでvueを呼び出しています。これだけでvue.jsが使えるようになります。bodyタグにこの呼び出しが書いてあることに注意しましょう。
divタグに関してはidをappで指定しています。これは後ほど指定するvue.jsの適用範囲を決めるためです。
scriptタグの「new Vue」はvueインスタンスの生成をしています。簡単にいうとvue.jsを使う宣言です。
「el: "#app」の箇所はelプロパティといい、どこにvue.jsを適用させるかを記載します。ここではappというidを指定しているので、先程のdivタグにを指定しています。

※appというidで指定したdivタグの箇所は一見ただのHTMLに見えますが、vue.jsの世界ではテンプレートといいます。そしてテンプレートにvue.js独自に記述する構文をテンプレート構文といいます。

以上がvue.jsを使うためのファイルの準備です。次から細かい文法の説明をしますが、headタグ内の全て・bodyタグ・CDNの呼び出しの箇所は省略して書いていきます。

■vue.jsの値を呼び出す

index.html

<div id="app">
　<p>{{message}}</p>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       message: "HelloWorld",
    }
  })
</script>

vueインスタンス内で「data:」を宣言すると、キーと値を設定できます。
「data:」で設定した値はテンプレート内で{{キー}}と言う感じで二重括弧で呼び出すことができます。
二重括弧内ではjavascrptの構文のように扱うことができる。上記ではnumにプラス３をしています。

■メソッドを呼び出す

index.html

<div id="app">
　<p>{{greeting()}}</p>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       message: "HelloWorld",
    },
    methods: {
      greeting: function(){
         return this.message;
      }
    }
  })
</script>

「data:」と同じように「methods」と宣言することでメソッドを設定することができます。
「greeting」はメソッド名で、その後にjavascriptの書き方で関数が書いてあります。
「this.message」のように、同じインスタンス内のキーや値を参照するときはthisを付けます。
メソッドをテンプレートで呼び出すときはメソッド名のあとに「()」を忘れないようにしましょう。

■v-bind

index.html

<div id="app">
　<a v-bind:href="url"> qiita <a>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       url: "https://qiita.com/"
    }
  })
</script>

「v-」から始まるものはディレクティブと呼ばれ、テンプレート内で使えるvue.jsの属性のことを指します
「v-bind」はHTMLの属性に対して指定し、vue.jsを呼び出すことができます。今回でいうと「v-bind:href」のところでhref属性を指定しています。そして「=url」でvue.jsのに記載してあるurlを呼び出しています
「v-bind」はよく使用されるため、「:href」のように省略して書くこともできます。
vue.jsでオブジェクトを書いていれば、オブジェクトを呼び出すこともできます。

■v-on

index.html

<div id="app">
　<p>num<p>
  <button v-on:click="countUp"> COUNT UP </button>
</div>

<script>
new Vue({
  el: "#app",
    data: {
       num: 0
    },
    methods: {
      countUp: function() {
          this.num += 1
      }
    }
  })
</script>

「v-on」は特定のイベントを指定します。今回はclickなのでクリック発生時を指定しています。
"countUp"でメソッドを呼び出しています。
v-onもよく使われるため、「@click」のように省略して書くことが可能です。

■イベントオブジェクト・引数

index.html

<div id="app">
　<p>num<p>
  <button v-on:click="countUp(4)"> COUNT UP </button>
　<p v-on:mousemove="change($event, 3)"> Change 
　　<span v-on:mousemove.stop> No Change </span> <p>
　<P> {{x}}: {{y}}
</div>

<script>
  new Vue({
    el: "#app",
    data: {
       num: 0
    },
    methods: {
      countUp: function(times) {
          this.num += 1 * times
       },
      change: function(event, square) {
          this.x = event.clientX * square
          this.y = event.clientY * square
    }
  })
</script>

普通のjavascript同様に引数を取ることも可能です。
「function(event)」でイベントオブジェクトを取得できます。具体的にいうと今回はmousemoveした際のX軸やY軸の情報を取得しています。
イベントオブジェクトを指定し、さらに引数を使用したい場合は「$event」を使います。
「.stop」を使うと指定したイベントに反応しなくなります。今回でいえば「No Change」のとことにマウスを置いても反応しなくなります。また「.prevent」というイベント処理を中断する修飾子もあります

■v-model

index.html

<div id="app">
　<input type="text" v-model="message">
 <p>{{message}} <p>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        message: "hello!"
      }
   })
</script>

「v-model」は双方向バインディングを可能にするディレクティブです。双方向バインディングとは簡単にいうとデータを結合させることです。今回の例で言えば、inputタグのフォーム内で入力した文字とpタグの内容が結合し、input内で入力した内容が即座にpタグでも反映され出力されます。

■computed

index.html

<div id="app">
　<button @click="count += 1"> COUNT UP </button>
 <p>{{lessThanThree}} <p>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        count: 0
      },
    computed: {
      lessThanThree: function() {
        return this.count >= 3 ? "3以上" : "3未満"
     }
  })
</script>

「computed」とは動的なプロパティです。
「data」が初期値に関するプロパティを指定する場所に対し、「computed」は変化するプロパティを指定します。そのため「computed」内は関数で定義します。
「computed」と「method」の違いは、ファイルの読み込みの仕方です。「computed」が関数で指定した箇所だけを更新するのに対し、「method」は該当箇所以外の全てを更新します。そのため「computed」のほうが読み込みが早いです。

■watcher

index.html

<div id="app">
　<button @click="count += 1"> COUNT UP </button>
 <p>{{lessThanThree}} <p>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        count: 0
      },
    computed: {
      lessThanThree: function() {
        return this.count >= 3 ? "3以上" : "3未満"
    },
    watch: {
       count: function() {
         var vm = this;
         setTimeout(function(){
           vm.count = 0
         }, 3000)
       }
    }
  })
</script>

「watch」とは非同期処理のことです。
基本的には「computed」を使えばよいのですが、例えば今回でいうとテンプレートの「{{lessThanThree}} 」の箇所がない場合は「computed」だとエラーが発生します。というのもcomputedはあくまで同期的な処理で、同期する場所がなければいけないからです。
「watch」内は関数を使って書きますが、非同期処理の記述だと「this」が使えないので、変数に代入する必要があります。

■クラス・スタイルのバインディング

index.html

<div id="app">
　<p :class="classObject"> Hello </p>
　<button @click="Active = !Active"> Change </button>
  <h1 :style="styleObject"> Hello </h1>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        styleobject: {
           color: 'red',
           'background-color': 'blue'
        },
        Active: true
      },
      computed: {
        classObject: function(){
          return{
            red: this.Active, 
            'bg-blue': !this.Active}
        }
      }
  })
</script>

クラスやスタイルをバインディングする際は上記のようにオブジェクトで指定するか、配列で指定する方法があります。
「Active: true」とすることで動的にスタイルを切り替えることができます。

■v-if

index.html

<div id="app">
 <template v-if="ok">
   <p>Hello</p>
   <p>Goodbye</p>
 </template>
 <template v-else-if="maybe">
   <p>good morning</p>
   <p>good night</p>
 </template>
 <p v-else="ok"> sorry </p> 
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        ok: true,
        maybe: true
      }
  })
</script>

「template」とはdivとほぼ同じ役割ですが、実際にブラウザで表示させると「template」は表示されないのが特徴です。
「v-if」「v-else-if」「v-else」は条件分岐です。rubyとほぼ同じです。今回はvue.jsのdata内でtrueとfalseを指定しています。
補足ですが、同じような役割をする「v-show」というディレクティブがあります。「v-if」がfalseだった場合にDOMから記述が完全になくなるのに対し、「v-show」はcssを「display:none」にすることによって記述を消します。「v-if」のほうが使い勝手は良いですが、「v-show」のほうが読み込みは早いです。

■v-for

index.html

<div id="app">
 <ul>
  <div v-for="fruit in fruits" :key="fruit">
    <p>{{fruit}}</p>
　　<hr>
  </div>
 </ul>
</div>

<script>
  new Vue({
    el: "#app",
      data: {
        fruits: ['りんご', 'もも', 'ぶどう']
      }
  })
</script>

「v-for」は繰り返し処理です。rubyでいうとeachメソッドです。
「fruit in fruits」はfruits配列から１つ１つ取り出して、fruitに代入して処理を実行するという意味です。
「:key」はその名の通りキーを指定します。「v-for」を使う場合は基本的にキーも設定します。
「(fruit ,key) in fruits」のように第２引数を取ることもできます。
配列だけでなくオブジェクトに対しても「v-for」は使用できます。
「fruit in fruits」の「in」を「of」にすることも可能です。
「n in 5 」のように整数値も入力可能です(※rubyでいうと「5.times~」のメソッドです)

以上でテンプレート構文の基礎は終わりです。次回はvueインスタンやコンポーネントについて記事を書く予定です。
またブラウザでの表示は省略していますが、適宜確認することをおすすめします。

まとめ・感想

vue.jsは直感的にできて良いなと思いつつ、素のjavascriptの理解が非常に大事だと感じました。なのでjavascriptの復習、特にthisの使い方や関数の使い方あたりはもう一度復習していきたいです。

参考

【udemy】
『超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)』
→おすすめです！本記事もこちらの講座で習ったことがベースです。基礎から丁寧に解説してくれていますし、SPA開発にまで触れているのでこれだけでvueの基本はカバーできます。

『Vue JS入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ』
→文法に関して詳しく説明していて良いと思いました。

【Rails × VueでSPA開発】Vue.jsの基礎を学ぶ（vue.jsの概要・template構文）

背景

本記事の目標

目次

1. javascriptのトレンドについて

2. Vue.jsについて

ⅰ.導入が簡単・柔軟性がある

ⅱ.学習コストが低い

ⅲ.効率的な開発ができる

ⅳ.仮想DOMやtypescrpit等が使える

3. SPAについて

4. Vue.jsの基礎文法について

■ファイルについて

■vue.jsの値を呼び出す

■メソッドを呼び出す

■v-bind

■v-on

■イベントオブジェクト・引数

■v-model

■computed

■watcher

■クラス・スタイルのバインディング

■v-if

■v-for

まとめ・感想

参考

【Rails × VueでSPA開発】Vue.jsの基礎を学ぶ （vue.jsの概要・template構文）

背景

本記事の目標

目次

1. javascriptのトレンドについて

2. Vue.jsについて

ⅰ.導入が簡単・柔軟性がある

ⅱ.学習コストが低い

ⅲ.効率的な開発ができる

ⅳ.仮想DOMやtypescrpit等が使える

3. SPAについて

4. Vue.jsの基礎文法について

■ファイルについて

■vue.jsの値を呼び出す

■メソッドを呼び出す

■v-bind

■v-on

■イベントオブジェクト・引数

■v-model

■computed

■watcher

■クラス・スタイルのバインディング

■v-if

■v-for

まとめ・感想

参考

【Rails × VueでSPA開発】Vue.jsの基礎を学ぶ（vue.jsの概要・template構文）