悩めるWEB担当者様のための最新ノウハウをお届け

jQuery代わりになる?JavaScriptのフレームワーク!Vue.jsってどんなことができるの?

vuejs

Webサイト制作で、アニメーションなどの動きをつけたり、少し複雑な機能をつけたりしたいと思ったことはありませんか?
そんなときは、JavaScriptを使いましょう!
しかし、JavaScriptを逐一記述するのは大変です。
そこで、JavaScriptのフレームワーク、Vue.jsを使うのがおすすめです。
今まではJQueryが使われていましたが、それに代わって今、Vue.jsが注目を集めています!
この記事では、Vue.jsとはなにか、Vue.jsを使うメリットはなにか、Vue.jsとjQueryなどとの違いについて解説していきます。

>>UIUX改善でCVR2倍に?UIUXを改善したい方はまずは無料Web診断!

Vue.jsってなにをするの?

Vue.js(ビュージェイエス)は、クライアントサイドで使われるJavaScriptのフレームワークです。
クライアントサイドとは、Webサーバーにアクセスして得られた結果をブラウザで表示する部分のことです。
それに対し、サーバサイドの言語は、ブラウザに結果を渡すためにサーバ内の処理を行う部分のことです。
サーバサイドはユーザーからは見えません。
Vue.jsはクライアントサイド、つまり画面に表示される要素をリッチに表現するためのフレームワークです。

日本だと、LINEやnote、Rettyなど様々なサービスでVue.jsが使われています。

フレームワークってなに?

フレームワークとは、少ないコードで効率的に作りたい機能やデザインを実装するための機能群、いわばコードが型になっているものです。
フレームワーク特有のコードの書き方を別途学習しなければなりませんが、それを習得すれば、少ないコードで欲しい機能を実装できるようになります。
Vue.jsは、JavaScriptのフレームワークの一つです。
では、そのフレームワークであるVue.jsを使うメリットはいったいなんでしょうか?

Vue.jsを使うメリット

JavaScriptのフレームワークには、Vue.jsの他にもAngularやBackbone.jsなどがあります。
また、JavaScriptのライブラリとして、jQueryやReactなどがあります。
また、クライアントサイドではありませんが、Node.jsもJavaScriptのライブラリの一つです。

Node.jsについてはこちらをご覧ください。

JavaScriptをサーバサイドで動かせる!Node.jsの魅力とは?

ライブラリとは、フレームワークが全体の処理の流れが実装されていて、その中の一部の具体的な処理を自分で実装するのに対し、部品の集合体に過ぎず、全体を制御するロジックが存在しません。
つまり、フレームワークは「型」、ライブラリは「パーツの集合体」といえるでしょう。
これらは状況によって使い分けることが望ましいのですが、その中でVue.jsを学習すべき理由はどこにあるのでしょうか?
大きくは

  1. 学習コストが低い
  2. 個人開発から大規模開発まで行える
  3. SPA開発ができる
  4. MVVMモデルである

といった利点があるでしょう。

学習コストが低い

Vue.jsの1つ目の利点は、学習コストが低いという点です。
JavaScriptのフレームワーク・ライブラリには多くの種類が存在し、現場ごとに新しい技術を習得しなければならないことも多々あります。
Vue.jsはその中でも学習コストが低く、すぐに学習することができます。
また、公式サイトの多くのページが日本語翻訳に対応していたり、日本語の技術ブログや記事も充実しているので、分からない点があったときも調べやすいでしょう。

個人開発から大規模開発まで行える

Vue.jsの2つ目の利点は、個人開発から大規模開発まで行うことができることです。
例えば、同じJavaScriptのフレームワークであるAngularJSは中規模〜大規模開発で使いやすい仕様となっており、個人開発には適していません。
その点、Vue.jsは個人開発から、大規模なWebサイトまで対応しています。
つまり、Vue.jsを習得すればどんな規模の開発でも対応できるということです。

SPA開発ができる

Vue.jsの3つ目のの利点は、SPA(シングルページアプリケーション)開発に使われることが多いということです。
SPAは、ブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑え、高度なWeb表現を可能にする設計で、最近人気が高まっています。
特にユーザーの滞在時間が長いWebサービスで取り入れられている設計手法です。

SPAについて詳しくはこちらをご覧ください。

SPA(Single Page Application)ってなに?

Vue.jsはこのSPA開発を容易に行うことができるので、最新のWebサービスを開発することができます。

MVVMモデルである

MVVMモデルとは、Webサービスを開発する上での設計思想の一つで、Model、View、ViewModelに分けて処理するモデルになります。
特徴は、ユーザー側の処理したデータと、コンピューター側やサーバー側の処理したデータが常に紐付けられることです。
つまり、ユーザーが変更した値が画面をリロードすることなく、すぐに画面に反映され、コンピューター側やサーバー側で処理されたデータがすぐにユーザーの画面に反映されるのです。
この仕組みを双方向データバインディングと呼びます。

MVVMモデルについてはこちらをご覧ください。

ソフトウェアアーキテクチャー…?MVCやMVVMってなに!?

例えば、JavaScriptのライブラリであるReactでもSPA開発を行うことができます。
しかし、ReactはMVVMモデルではありません。
Vue.jsユーザーが変更したデータがすぐにブラウザの表示に反映できるので、Webアプリケーションの開発に適しているといえるでしょう。

>>UIUX改善でCVR2倍に?UIUXを改善したい方はまずは無料Web診断!

他のフレームワーク・ライブラリと比較

ここまで、Vue.jsを使うメリットに関して解説してきました。
ここからは、Vue.jsを良く使われる他のJavaScriptのフレームワーク・ライブラリと比較してみたいと思います。

複雑なことをしなければjQueryでもOK?

Web制作の際に、よく使われるのはやはりjQueryでしょう。
では、Vue.jsがjQueryよりも優れているところはいったいなんでしょうか?
jQueryは簡単に導入することができ、学習コストもそこまで高くないので、簡単なアニメーションやスライドショーなどを実装する際は、jQueryで事足りることも多いでしょう。
そもそもJavaScriptを使用することなく、CSSだけで済んでしまうこともあります。

CSSについてはこちらをご覧ください。

【初心者向け】 HTML、CSS、Javascriptの基本を理解しよう

しかし、より本格的なWebアプリケーションとして複雑な処理を行う場合には、Vue.jsが優れているでしょう。

Angularは学習コストが高め

Angular(https://angular.io)はGoogleが開発しているフレームワークで、 Angular JSの後継に当たるものです。
(AngularとAngular JSに互換性はほぼありません。)
AngularはVue.jsと同様にSPA開発を行うことができますが、Vue.jsはJavaScriptで作られているのに対し、AngularはTypeScriptで作られています。
このJavaScriptとTypeScriptは、別のプログラミング言語になります。
つまり、Angularを使うにはTypeScriptから学習する必要あるということです。
TypeScriptを学習してAngularを使うよりは、学習コストの低いVue.jsの方が、特に初心者には嬉しいでしょう。

ReactはMVVMでない上に日本語の情報が少ない

React(https://reactjs.org)は、Facebookが開発しているJavaScriptのライブラリです。
しかし、Vue.jsのメリットのところで述べたように、Vue.jsは双方向データバインディングなのに対し、Reactはデータから画面への片方のみとなっています。

また、ReactはVue.jsほど日本語の情報が多くなく、学習しにくいのが現状です。
公式サイトが日本語にほぼ対応していて、初心者でも始めやすいVue.jsが、JavaScriptのフレークワークとしては最適でしょう。

Vue.jsは人気がある?

Vue.jsをjQueryやAngular、Reactと比較して、学習のメリットについて見てきました。
しかし、Vue.jsは人気があるのか疑問に思われる方もいらっしゃるでしょう。
そこで、GoogleTrendsで「Vue」「React」「Angular」の検索数を比較しました。
VuevsReactvsAngular
すると、「Vue.js」が最も検索数が大きいことが分かります。
それほど、Vue.jsは人気の高いフレームワークだといえるでしょう。

実際にVue.jsを使ってみよう

ここまで、Vue.jsのメリットや他のフレームワーク・ライブラリと比較してきました。
ここからは、実際にVue.jsを使ってみましょう!
今回はVue.jsで簡単なToDoリストを作ってみたいと思います。
(CSSの解説については割愛します。)

Vue.jsを読み込む

まずはVue.jsを読み込みましょう。
Vue.jsを読み込むにはいくつかの方法がありますが、今回は最も簡単なCDNで読み込みをしましょう。
HTMLの部分にこのように記述します。
vue0

CDNには2種類のバージョンがある

CDNには開発バージョンと本番バージョンがあります。
開発バージョンでは、コンソールの警告など便利な機能があります。
本番バージョンはその機能がない分、サイズと速度が最適化されています。
まずは開発バージョンを使って実装し、実際に公開する際には本番バージョンに切り替えるのが良いでしょう。
今回は開発バージョンを使っていきます。

Vue.jsを使えるようにする

次にVue.jsを使えるようにしていきましょう。
まずはHTMLの中の、先ほどVue.jsを読み込んだ上にdivタグで囲ってidを設定します。
今回はid名をappとしておきます。
そして、appの中でVue.jsを使えるようにします。
それには、JavaScriptにこのように設定します。

var app = new Vue({
el: '#app'
})

このelという部分が先ほど設定したdivタグのid名と紐づいています。
これでid名がappのdivの中でVue.jsが使用可能になりました。
ここまで記述したコードはこのようになっています。
vue1

ToDoリストの一覧を作成する

では早速、ToDoリストを作っていきましょう。
まずはToDoリストの一覧を作成します。
ここでは、ToDoリストの追加ができるように、JavaScriptで配列を作り、
それをHTML側で表示をします。
配列に持たせる内容は、ToDoリストのタイトルとそのタスクが終わったかどうかです。
タイトルは文字列で、タスクの状況は真偽値で管理しましょう。
それぞれtitle、checkToggleというkeyで管理します。

Vue.jsの中で配列を設定するには、elの下にdataを読み込みます。
今回は以下のような形で設定しました。
vue2

ToDoリストの一覧を表示する

では、上記で作った配列をHTMLで表示してみましょう。
表示はinputタグとlabelタグをliタグで囲って表示します。
それを「v-forディレクティブ」を使って一覧で表示します。
そのためには、このように記述します。
vue3
するとこのように、配列の中身が全て表示されました。
vue4
v-forディレクティブでは、配列の中身を一つずつ取り出してそのプロパティを表示します。
それが「todoList in todoLists」の部分です。
配列は複数形で、取り出す際には単数で取り出すのが基本です。
inputではtodoListのcheckToggleというプロパティを、

labelタグではマスタッシュ構文を使用しています。
これは、文字列を取り出す際に使われるものです。
使い方は簡単で、dataで設定した値を{{}}で囲うだけです。

ToDoリストを追加できるようにしよう

では次に、ToDoリストを追加できるようにします。
そのためにはinputタグとv-modelディレクティブに加えて、v-onディレクティブを使います。
v-onはなんらかの操作が行われたときに関数を実装できます。
まずはHTMLを以下のように編集してみましょう。
vue5
入力欄はv-modelディレクティブを使って、入力された内容をnewTitleと紐づけています。
そしてv-onディレクティブを使って、ボタンをクリックしたときにnewTitleを配列todoListに追加します。
もちろん、新しく追加されたタスクなので、checkToggleはfalseに設定します。
ではv-onで呼び出す関数、addToDoList()を設定しましょう。
dataの下に、methodsを作成し、その中に関数を書いていきます。
vue6
コードはこのようになりました。
これでタスクを追加することができるようになりました。
dataの中で記述した値を関数の中で使うには「this.」を付けます。
newTitleにはあらかじめ空の文字列にしておき、input type=”text”に入力されたものを動的に反映します。
それをボタンがクリックされたら配列に追加、newTitleの値を再び空っぽにします。

なにも入力していないとボタンが押せないようにしよう

ここまでボタンの追加を実装しました。
しかし、このままでは空の文字列を配列に追加できてしまいます。
そこで、newTitleの中身が空であれば、タスクを追加できないようにしましょう。
そのためには、newTitleToggleという真偽値を設定し、falseのときにはnoclickクラスを付与します。
trueになったら、noclickクラスを外します。
クラスの指定はv-bindディレクティブを使います。
そして、newTitleToggleの値を切り替えるには、v-onディレクティブを使います。
input type=”text”の値が空の文字列でない場合、newTitleToggleをtrueにします。
それには、値の変更を検知する必要があります。
それにはv-on:changeを使います。

HTML、CSS、JavaScriptはそれぞれこのようになりました。
vue7
vue8
vue9
これで空の文字列だとタスクを追加できなくなりました。

ToDoリストを削除できるようにしよう

ここまで、ToDoリストの追加機能を実装してきました。
ここからは、ToDoリストを削除できるようにしていきます。
削除は、配列の中から削除しても良いのですが、削除したタイトルが分かるように打ち消し線を追加するようにしてみましょう。
実装のやり方は、上記と同様にv-bindでクラスを追加します。
checkToggleがtrueであれば、打ち消し線を追加します。
vue10
vue11
今回はJavaScriptを変更する必要はありません。

完全に削除したい場合は?

打ち消し線を追加するだけでなく、完全に削除するにはどうすればいいでしょうか?
それには配列のfilterメソッドを使いましょう。
filterメソッドを使えば、条件を満たした要素だけで新たな配列を生成することができます。
今回の場合は、checkToggleがfalseである配列を生成すればいいのです。
新たにbuttonを作り、v-onクリックで削除する関数を呼び出します。
では実際にコードを書いていきましょう。
vue12
vue13
これで完全に削除することができるようになりました。
deleteToDoList()では、checkToggleがfalseのものだけで配列を生成し、もともとあったtodoListsに返しています。

完成!

これでToDoリストの主な機能は実装できました。
あとはCSSでデザインを整えたりすると良いでしょう。

CSSを追加したコードはjsFiddleにまとめておきます。
jsFiddleの使い方についてはこちらをご覧ください。

簡単にコードを実装してシェアできる!超便利なjsFiddleの使い方

Vue.jsにはこの記事で紹介したもの以外にも様々なディレクティブがあります。
公式サイトなどを見ながら、ご自身で様々な機能を追加してみてください!

まとめ

Vue.jsは、JavaScript初心者にも使いやすいフレームワークです。
公式サイト以外にも日本語の記事やブログが多々あり、調べやすいという点でも、学習のハードルは低いでしょう。
さらに個人開発から大規模開発まで行えるので、マスターしておいて困らない技術です。
Webサイトをリッチに作り込みたい方は、公式サイトなどを見ながら挑戦してみてください。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

>>UIUX改善でCVR2倍に?UIUXを改善したい方はまずは無料Web診断!


広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事