Vue.jsってなに？ - Cwらぼっちゃ - IT技術研究ノート -

Vue.js（ヴュージェイエス）、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScript フレームワークです。

特徴

・Vue.jsは構造がシンプルなため学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができる

・Vue.js独自の規格やルールも少ないため、他のフレームワークよりも自分の好きなやり方でアプリ開発を行うことが可能

・高機能なシングルページアプリケーション（SPA）を構築することが可能

・ディレクティブによって開発スピードを早められる

・コンポーネント指向のため、再利用性が高くなり、デザインと技術の作業の簡易化が可能

環境構築の手順

それでは環境構築の手順について書いていきます。
※いくつか環境構築について書いているサイトはあったのですが、バージョンが古かったり、一つの記事に複数の構築方法が書いてあったりと見づらかったので１から書いていきたいと思います。

手順としては大きく分けて2つあります。
　①Vue.jsを入れるためのyarnのインストール
　②Vue.jsのインストール

◎ PowerShellでスクリプトの実行を一時的に許可する

PowerShellで行っていくので、WindowメニューからWindows PowerShellを選択、管理者権限で実行します。
デフォルトではスクリプトの許可がされていないので許可します。この許可はこのシェルでだけ有効です。

PS C:\windows\system32> Set-ExecutionPolicy RemoteSigned -Scope Process

実行ポリシーの変更
実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies
のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170)
で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか?
[Y] はい(Y)  [A] すべて続行(A)  [N] いいえ(N)  [L] すべて無視(L)  [S] 中断(S)  [?] ヘルプ (既定値は "N"): y

実行ポリシーを変更するか聞かれるので「はい(y)」で答えます。

◎ scoopをインストールする

PS C:\windows\system32> iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

Scoop was installed successfully!　が表示されたらOK。

◎ scoopでNode.jsをインストールする

PS C:\windows\system32> scoop install nodejs

'7zip'がインストールされた後、Node.jsのインストールが開始されます。
'nodejs' (12.7.0) was installed successfully! が表示されたらOK。
※（）内はバージョンです

◎ scoopでyarnをインストールする

PS C:\windows\system32> scoop install yarn

'yarn' (1.17.3) was installed successfully!　が表示されたらOK。
※（）内はバージョンです

◎ Node.jsとyarnがインストールされているか確認する

念のため、ここまできちんとインストールできているか確認しましょう。

PS C:\windows\system32> node -v
v12.7.0
PS C:\windows\system32> yarn -v
1.17.3

◎ Vue.jsをインストールする

さあ！では今回の目玉Vue.jsをインストールしていきましょう。

PS C:\windows\system32> yarn global add @vue/cli

ここで出てきたvue-cliについて少し補足です。
vue-cliは、Vue.js を含んだ各種のテンプレートに応じてスキャフォールディング (ひな形作成) をおこなってくれます。あらかじめ必要なライブラリが組み込まれた状態にしてくれるので、あとは必要に応じてソースファイルを修正していくだけでいいようになります。標準のテンプレートとして webpack, webpack-simple, browserify などがあり、 webpack テンプレートは E2E テストなどもサポートするかなり高機能なもののようです。

こちらもインストールされたか確認しておきましょう。

PS C:\windows\system32> vue --version
3.9.3

※私がインストールしたときはver 3.9.3でした

さて、これでVueプロジェクトを作成する環境は整いました！
プロジェクトの作り方ですが、以下のサイトがわかりやすかったのでご参照ください。
・ Vue CLIを使ってvueプロジェクトの作成をする

※VueファイルのScript部分はJavaScriptやTypeScriptで書くことができます。
今回はTypeScriptを使用しているので、プロジェクト作成時にTypeScriptも追加したほうがわかりやすいかもしれないです。
TypeScriptの詳しい書き方は以下を参照してください。
・TypeScriptの基本
・Vue.js to TypeScriptの書き方一覧

実際にソースに触れてみる

実際にソースに触れる方がわかりやすいと思いますので、触れていきます。

vue create でプロジェクトを作成したら、App.vueとHelloWorld.vueの２つのvueファイルができていると思います。
これらはコンポーネントと呼ばれ、親コンポーネントがApp.vue、子コンポーネントがHelloWorld.vueとコンポーネントがネストしている状態になっています。
今回はHelloWorld.vueのほうを編集していきます。

公式サイトにも載っている簡単な例で、ユーザーが入力した値が即座に反映される、というページです。
JavaScript（jQuery）でも実装できますが結構面倒臭いですよね。
Vue.jsは瞬殺します。

まず、動くコードを用意しました。
以下のコードをHelloWorld.vueに書いてブラウザ上で動かしてみてください。
テキストボックスに入力した文字がそのまま下に表示されるはずです。

<template>
  <div class="hello">
    <h1>Hello Vue.js!</h1>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private message = '';
}
</script>

これはv-modelが双方向データバインディングを作成してくれるため、
　<input type="text" v-model="message" />
によってmessageの文字列を変更でき、リアルタイムで
　{{message}}
に反映されているのです。
このv-modelなどの、「v-」で始まるものが、ディレクティブと呼ばれる特別な属性です。

ディレクティブ

Vue.jsが提供するViewの要素に付加できる独自属性です。ディレクティブを利用することでDOM （Document Object Model）操作をすることができ、HTML要素の表示・非表示などを柔軟に変化させることができます。さらに、直接DOMを操作するコードの記述量を減らすことができるため、開発スピードを早めることができます。

v-model

双方向データバインディングを作成してくれます。

v-bind

タグの中の属性を指定します。
v-bindについては以下のサイトがわかりやすく解説してたので見てください。
・ v-bindでclass名を動的に追加、削除する！

とりあえず、とても便利な機能です。

v-if

<template>
    <p v-if="visible">Trueのとき表示</p>
    <p v-else>Falseのとき表示</p>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private visible = true;
}
</script>

flgの値の真偽値によって、要素をレンダリングします。
trueのときは1行目のp要素が、falseのときは2行目のp要素がレンダリングされます。

v-on

<template>
    <button v-on:click="doSomething"></button>
</template>

要素にイベントリスナをアタッチします。イベント種別は引数で示されます。
見たままですが、上記ではクリックしたらdoSomethingが呼ばれます。
doSomethingの部分を関数にすればクリックしたときにその関数が実行されます。
v-onは省略可能で、@clickと表すことができます。
イベントハンドリングはclickだけに限らず、マウスオーバー( @hover )などいろいろあります。

v-for

<template>
    <ul v-for="fruit in fruits" v-bind:key="fruit">
      <li>{{ fruit }}</li>
    </ul>
</template>

<script>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private fruits: string[];

  constructor() {
    super();
    this.fruits = [ 'Apple', 'Banana' , 'Cherry'];
  }
}
</script>

fruitsの要素数だけ繰り返してレンダリングします。
書き方としてはKotlinのfor文、Javaの拡張for文に似ています。
v-forはkey要素を指定しないと怒られるので一意なものをv-bind:keyに渡してあげます。
ここでは文字列型の配列を使用しましたが、オブジェクトを扱う配列も使うことができます。そのことについては以下のサイトを参照してください。

・TypeScriptのオブジェクト型リテラルいろいろ

おまけ

vueのコードを触るにあたって、VSCodeを使う方はまずVeturとPrettier-Code Formatterをインストールすることをお勧めします。
・Vetur：Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットが使えるようになる
・Prettier：Vue.jsのフォーマッター

終わりに

今回はVue.jsの始め方と簡単にコードを触ってみました。

Vue.jsは現在最も急成長しており、おそらく開発者コミュニティが最も熱心なJavaScript フレームワークです。非常に詳しいドキュメントと、非常に低い学習曲線により、新しいフレームワークを試してみたいときに最適の選択肢と言えます。アーキテクチャとしてはReactやAngularに似ているため、他フレームワークからの移行も容易です。その小さいサイズ(20キロバイト)、速度、柔軟性が愛されており、他フロントエンドフレームワークに比較してパフォーマンスも良いです。

しかし、Vue.jsの市場シェアはReactやAngularに比べるとまだ小さいものです。従って、Vue.jsの開発経験を持つ開発者を見つけるのは、ReactやAngularより難しいです。 Vue.jsがReactやAngularほどの人気を得られるかどうかは結果を待たなければなりませんが、開発者コミュニティの熱気や使用者の増加から見ると、Vue.jsは今後も熱心に開発が続けられると思われます。

次回はVue.jsを使ってTODOリストを作りたいと思います。

参考文献

・Udemyメディア【Vue.js入門】特徴や他のフレームワークとの比較などを紹介！