【保存版】Vue.js入門【特徴・メリットから基本的な使い方まで】
Vue.jsってそもそも何？使い方は？
JavaScriptやjQueryと違ってどんな利点があるんだろう。
そんな疑問にお答えします。
Vue.jsは今とても勢いのあるJavaScriptフレームワークです。この記事では、初心者にも分かりやすいようにVue.jsのメリットやjQuery・Reactとの違い、基本的な使い方までを詳しく解説していきます。
長い記事になってしまったので、必要な部分や知りたいと思った内容から読んでいただければ幸いです。
目次
はじめに
まずはじめに、この記事のターゲットや取り扱う範囲について書いていきます。
この記事のターゲット
この記事では、下記のような方をターゲットとしています。
- Vue.jsがどんなものか知りたい人
- Vue.jsの基本的な使い方を知りたい人
- JavaScript、jQueryを学んで先に進みたい人
- Vue.jsとReactで迷っている人
必要な知識
この記事前半のVue.jsについての説明部分では必要な知識は特にありません。
後半を進める際には、下記のような知識があるとより理解しやすいと思います。まだ全然分からないという方は、基礎的な部分を学習してからまた読んでもらえると、スムーズに理解出来ると思います。
- HTML / CSSの基礎的な知識
- JavaScriptの基礎的な知識（変数、メソッド、if文など）
この記事の範囲
この記事では、Vue.jsについての基礎知識や使うことのメリットを解説した後、実際の使い方を解説していきます。vue-component、vue-cli、vue-routerなどについては、また別の記事にて説明していく予定ですので、宜しくお願いいたします。
では、始めていきましょう。
Vue.jsとは？
公式サイトにはこのように書かれています。
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
はじめに – Vue.js
つまり、Vue.jsはWebアプリケーションの「View」、つまり見た目に関わる動きや仕組みを簡単に構築できることをコンセプトとして作られたJavaScriptフレームワークです。
重要なのは、Vue.jsを使うことでよりシンプルにフロントエンドの動きや仕組みが作れるということです。
フロントエンドの歴史
少しだけWebフロントエンドについての歴史を説明していきますが、興味がないという方は飛ばしてもらっても大丈夫です。歴史や変遷などは追々知っていけばいいと思います。
フロントエンドの言語にはまずJavaScriptがあります。ここは揺るぎないのですが、JavaScriptは少し癖のある言語で、ネイティブ（そのまま）のJavaScriptを使って処理を書いていくと、処理が複雑になったりコードが長くなったりして、書きづらい（＝覚えづらい）という問題がありました。
それを長い間解決していたのがJavaScriptのライブラリであるjQueryです。jQueryはJavaScriptの使いづらい部分を解消し、非常にシンプルに処理を書ける魅力がありました。
しかし、jQueryはちょっとした処理は得意でしたが、複数のUIを連携させたり、クリックなどのイベントが増えてくると複雑化してしまうという欠点がありました。
フロントエンドエンジニアの方々は長いことjQueryで処理を作ってきたのですが、最近になってBackbone.jsやAngular等と一緒にVue.jsとReactという便利なフレームワークが登場しました。
フロントエンドは今Vue.jsかReactの2択
Vue.jsとReactはこれまでの欠点をさらに克服していました。この2つのフレームワークにも違いがあるのですが、それは後ほど説明します。
この2つはフロントエンドエンジニアにも注目されており、今後フロントエンドを担う存在となっていくことは間違いなさそうです。ここも後ほど詳しく解説していきます。
jQueryはもう覚える必要がないの？
一方で、jQueryを覚える必要がないかと言われると、結論としては覚えておいたほうがいいです。
今回紹介しているVue.jsの中でもjQueryは普通に使えますし、それぞれ書きやすい方やコードが読みやすくなる方を使い分けていくのが一番の理想です。
Webやプログラミングに限らず何事もそうですが、これは良い、これは悪いと極端に考えず、共存できるものはそれぞれ活かしながら使っていくのが一番いいと思います。
JavaScript、jQuery、Vue.js等、それぞれを行き来しながら学んでいきましょう。その方が最終的に幅広く、深いスキルが身につきます。
Reactとの違い
ここでは、もう一つのモダンなJavaScriptフレームワーク「React」との違いを軽く解説していきます。
ただ、この2つは現在も活発に開発が進められており、今後関係性などが変わってくる可能性も大いにあると思います。ここでは現状での関係性について書いていきます。
Vue.jsは小規模向き、Reactは大規模向き
他の説明記事などでも、だいたいこのような説明がされています。
Vue.jsはReactに比べて手軽に導入できる点や、SPA（シングルページアプリケーション）と呼ばれる1ページで処理を完結させるWebアプリ、また小規模のWebサイトの制作に向いているとされています。
一方ReactはVue.jsに比べて導入のハードルが高い分、厳格な構築や大規模サイトの運用等に向いています。
個人的には、フリーランスやWebサイトを一通り扱うWebエンジニアにはVue.jsがおすすめで、ガチガチのフロントエンドを極めたい、もしくは企業等で大規模サイトの運用をしたいという方にはReactがおすすめだと思っています。もちろんこれも執筆時点での話を前提としています。
Vue 3で解消される？
2020年5月現在、近々Vue.jsのバージョン3が出るとの情報が出ています。GitHubで管理されているVue.jsのプロジェクトでは、残り僅かなissueでVue 3をリリース出来るところまで来ています。
現状、Vue 3では以下のような改良が含まれていると言われています。
- 大規模運用を可能にする仕組みの追加
- TypeScriptとの親和性を高める
この内容によっては、Vue.jsがもっと汎用的に使えるようになるかも知れません。僕も発表が楽しみです。
Reactとの違いについては、好みの問題もありますので、深く掘り下げずこれくらいにしておこうと思います。極論、どちらも触ってみて、肌に合う方を選ぶという選び方でもいいと思います。
言語やフレームワーク選びに正解はありませんし、自分で選んだものを学んでいった方がモチベーションも続きます。続くということが一番大事だと思います。
Vue.jsを使うメリット
ここでは主に、ネイティブのJavaScriptやjQueryと比べたときのメリットを紹介していきます。後半のコード解説と併せて、jQueryからのステップアップ時にも参考になると思います。
jQueryで冗長だった部分の改善
jQueryはDOMが持つ情報の更新やフォーム等のインプット系タグとの連携を苦手としており、コード量が増え、メンテナンス性も悪くなりがちでした。
例えば、inputタグに入力された数字をpタグで取得・表示し、クリアボタンを押されたらinputの値を0に戻すサンプルコードの場合、以下の様になります。
jQuery
See the Pen jquey_双方向バインディング by はとむぎ (@hatomugi_s) on CodePen.
Vue.js
See the Pen vue_双方向バインディング by はとむぎ (@hatomugi_s) on CodePen.
初心者の方は違いが良くわからないかも知れませんが、jQueryを使ってこのような処理を書くとき、どうしても無駄なコードが増えていました。
Vue.jsではHTML要素の操作や値の変更、フォームとの連携が非常にシンプルに分かりやすく実装出来ます。そしてそれは、処理が増えるほど真価を発揮し、明らかにシンプルに実装出来ます。
個人的にはこれがVue.jsを使っていて一番の利点だと感じました。
さらに、Vue.jsの構文は統一感があり、どのプログラマーが作ってもあまり処理に差は出ません。つまりメンテナンス性が高く、あとから他の人が更新する際にも分かりやすいコードに勝手になってくれているというメリットになります。
フォームやデータベースとの連携が分かりやすい
上で書いたことと重複する部分もあるのですが、Vue.jsはデータはここに置く、メソッドはここに置く等が決まっており、そこだけを見ればいまデータがどんな状態になっているのかが分かりやすく出来ています。
これはブラウザのローカルストレージや、PHP・Ruby等のバックエンド言語と連携した、データベースを使ったシステムと非常に相性が良いです。
余計なidやclassが不要なのでDOMが綺麗になる
JavaScriptやjQueryはタグやid、classに対して操作を行うことが多いです。
しかしこれは、jQueryでの操作が不要になったからclassを削除したらCSSが効かなくなったり、逆にCSSが適用されていないjQueryのためだけのclassを作ったり等、問題が起こる原因になっていました。
しかしVue.jsではidやclassを使わずに専用の記述でデータを連携させるので、HTMLが綺麗になり、コードの見通しがよくなります。
文章では伝わりにくいかも知れませんが、Vue.jsではこれまで不便だったものがかなり改善されており、小規模運用の多くの場合でコードも開発期間も短くすることが可能です。
Vue.jsの導入方法
いよいよ実際の使い方を紹介していきます。
Vue.jsはフレームワークですが、公式にもある通り既存のプロジェクトや他のライブラリ等と統合するのが非常に簡単です。例えばjQuery等とも、特に何も考えなくても一緒に使う事が出来ます。
これから紹介する、Vue.jsを導入するステップは大まかに以下のようになります。
- Vue.jsの大元のファイルを読み込む
- 基本構文を書き、HTMLと紐付ける
これだけです。あとはこれを用途に合わせて拡張していくだけとなります。
Vue.jsの大元のファイルを読み込む
jQueryと同じように大元のファイルを読み込みましょう。公式のCDNが用意されているので、基本的にはこれを使うといいでしょう。
CDNについてよくわからないという方は、「【初心者向け】CDNとは？その仕組みと使い方【よく使うおすすめも】」の記事で詳しく説明していますので、ご参照ください。
<!-- Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Vue.jsの基本構文
Vue.jsを読み込んだら、基本構文を書きましょう。おまじないみたいなものなので、コピーしてもらって大丈夫です。
var app = new Vue({
el: '#app',
})el: '#app',の部分で、Vue.jsとHTMLを紐付けます。HTMLのid="app"の範囲内がVue.jsの適用範囲になります。基本的には下記のように、body直下の一番外側の要素にid="app"を付けて問題ありません。
<body>
<div id="app">
</div>
</body>これだけで最低限の準備は整いました。簡単ですね。最初はそれぞれの意味があまり理解できないかも知れませんが、使っていけばすぐに書けるようになると思います。
【data】: 変数はここにまとめて書く
最低限は完成しましたが、変数をまとめて置いておく「data」は必ず使うので追加しておきましょう。下記のようになります。
var app = new Vue({
el: '#app',
data: {
}
})dataという部分が増えているかと思います。ここに変数を書いていくことになります。後ほど使いますので、今はこのままでOKです。
【methods】: メソッド（関数）はここにまとめて書く
同じように、メソッドをまとめて置いておく「methods」を追加しましょう。
var app = new Vue({
el: '#app',
data: {
},
methods: {
}
})【mounted】: ページ読み込み時の処理はここに
また、ページが読み込まれた最初の一回だけ処理するものはこの「mounted」に書きます。これもよく使うので追加しておきましょう。他の部分と少し書き方が違うので注意しましょう。
var app = new Vue({
el: '#app',
data: {
},
mounted: function(){
},
methods: {
}
})これで基本構文の準備が完了しました。次章から実際に動かしていきたいと思います。
Vue.jsの基本的な使い方
Vue.jsでは、Vue.jsが持っている変数の値とHTML要素を紐付けることが基本の使い方になります。
その最も基本の使い方を紹介していきます。実際に書きながら進めるとより理解しやすいと思います。
テキストを表示してみよう
まずは単純にテキストを表示してみましょう。
<div id="app">
<p>{{ message }}</p>
</div>var app = new Vue({
el: '#app',
data: {
message: 'こんにちは',
},
})不要な部分は省略しています。これで、p要素には「こんにちは」と表示されます。
HTMLタグの中にVue.jsのデータの値を表示したいときは{{ data }}のように波括弧2つで囲みます。上の例ではmessageが囲まれていますので、Vue.js側のmessageと紐付いています。
これがVue.jsの最もシンプルな使い方です。
メソッドとv-on（@）を使ってクリックイベントを作ってみよう
他の解説記事とは少し順番が違うかも知れませんが、これが一番よく使うので基本の項目に入れています。
さきほどは「こんにちは」と表示しました。これをボタンを押すことで「こんばんは」に変更するというプログラムを書いてみましょう。
メソッドを追加する
まずは「changeText」という名前の、実行されたらmessageを「こんばんは」に変更するメソッドを追加してみましょう（メソッド名はなんでも構いません）。先程も書いた通り、メソッドは基本構文の「methods」の中に作ります。
var app = new Vue({
el: '#app',
data: {
message: 'こんにちは',
},
methods: {
changeText: function(){
this.message = 'こんばんは';
},
}
})メソッドの中でdataの値を操作するときは、this.を付けます。これでmessageを「こんばんは」に変更するメソッドが完成しました。
メソッドを起動するためのボタンを追加する
そうしたら、このメソッドを起動させるためのボタンを作りましょう。
<button>ボタン</button>何の変哲もないボタンです。これをクリックすることでさきほどのメソッドが動くようにします。
jQueryではクリックイベントもjs側に書いていましたが、Vue.jsはHTML側に書きます。下記のように書いてみてください。
<button @click="changeText">ボタン</button>これでさきほどのメソッドとひも付きました。これでもう今回の仕組みの完成です。とてもシンプルにクリックイベントが実装できました。
@clickでクリックイベントを設定しています。この@clickはv-on:clickを省略した書き方で、どちらも同じ意味を持ちます。コードが短く書けるので@clickを使って問題ありません。そしてイコールの先でメソッドを設定しています。今回は「changeText」メソッドを設定していますね。
ちなみに今回は省略していますが、このように「v-」から始まるVue.js独自の属性を「ディレクティブ」と言います。
先程も書いた通り、このときjQueryと違ってclass等を使わなくて済むことで、CSSが当てられているclass欄を邪魔せずにクリックイベント等を実装することが出来ます。その結果、HTMLの可読性が上がるというVue.jsを使うメリットの一つです。
Vue.jsのよく使う便利な使い方
その他にもVue.jsには便利な使い方があります。
v-bind（:）を使って属性と連携させてみよう
テキストを表示したときのように、タグの中にデータを表示するときは{{ ... }}のように書きましたが、これはタグの属性（herfやsrc、class等）には使えません。
このv-bind:または:を使うことで、タグの属性にVue.jsが持っているデータを出力できます。例えば以下のようなデータがあったとします。
var app = new Vue({
el: '#app',
data: {
link: {
text: 'Hatoblog',
href: 'https://hatoblog.net/',
}
},
})このデータを使って、aタグを作りたいとき、下記のように書くことが出来ます。
<a :href="link.href">{{ link.text }}</a>href属性の前に:が付いているのに注目してください。これによりダブルクォーテーションの中にVue.jsのデータを書くことが出来、実際の表示ではhref属性の中に「https://hatoblog.net/」が入ります。
これはhrefだけでなく基本的にどんな属性にも使えるので、プロジェクトによってはよく使うことになると思います。
v-modelを使ってフォームと連携させてみよう
これまではVue.jsが持っていたデータをHTML側に渡して表示してきました。これを単方向バインディングと言います。
Vue.jsでは、input要素などを使って、HTMLからVue.jsのデータを更新することが出来ます。これがVue.jsの特徴のひとつで、双方向バインディングと言います。
先程CodePenで書いたもの、あれがまさしく双方向バインディングです。
See the Pen vue_双方向バインディング by はとむぎ (@hatomugi_s) on CodePen.
上記のコードはこのようになっています。
<input v-model="num" type="number">
<p>金額は、{{num}}円です</p>new Vue({
el: '#app',
data: {
num: 0
}
})不要な部分は省略しています。inputタグにv-model="num"が付いているのが分かると思いますが、これがVue.jsのデータ「num」と紐付いています。
このinputの内容が更新されると、リアルタイムに「num」のデータが更新され、pタグの内容も変化しているというわけです。
フォームを作るときやWebアプリを作る際、とてもシンプルにユーザーの入力を表示に反映出来る強力な機能です。
今はまだメリットがわからないかも知れませんが、この機能が必要となったとき、その便利さに驚くと思います。
v-ifを使ってtrueのときだけHTMLを表示してみよう
タブやアコーディオンメニューなど、表示非表示を切り替えたいときはよくあると思います。Vue.jsでは表示の切り替えは驚くほど簡単です。
<p v-if="flg">ON!</p>
<p v-else>OFF!</p>var app = new Vue({
el: '#app',
data: {
flg: true,
},
})pタグにv-if="flg"が付いていると思います。これは、Vue.jsが持っている「flg」がtrueなら表示するという意味になります。「flg」がfalseのとき、v-ifが付いたpタグは非表示になり、v-elseが付いたpタグが表示されます。
v-elseはv-ifのすぐ後の要素に付けることで、「ifが満たされないとき」というプログラムのelseブロックを作成出来ます。
v-ifを使ってタブの機能を実装する
v-ifを使ってタブの機能を作ってみましょう。メニューを押したら対応するコンテンツが表示されるという仕組みを作ります。とてもシンプルに実装出来ます。
<div id="app">
<ul>
<li @click="changeTab(1)">タブ1</li>
<li @click="changeTab(2)">タブ2</li>
<li @click="changeTab(3)">タブ3</li>
</ul>
<section v-if="current_tab == 1">
タブ1のコンテンツです。
</section>
<section v-else-if="current_tab == 2">
タブ2のコンテンツです。
</section>
<section v-else>
タブ3のコンテンツです。
</section>
</div>
var app = new Vue({
el: '#app',
data: {
current_tab: 1,
},
methods: {
changeTab: function( tab_number ){
this.current_tab = tab_number;
}
}
})
HTML側は、タブメニューの機能を持ったulタグと、タブコンテンツの機能を持ったsectionタグを用意しました。
Vue.js側は、現在のタブを表す「current_tab」と、それを変更するメソッド「changeTab」を用意しました。
liタグをクリックすると「changeTab」が動き、「current_tab」の値を更新します。それにより、sectionタグの満たされているv-ifが変わり、コンテンツの表示非表示が切り替わるという仕組みです。
下記のCodePenで実際の動きを確認することが出来ますので、イメージが沸かなかった人は実際に動かしてみてください。
See the Pen vue_tab by はとむぎ (@hatomugi_s) on CodePen.
jQueryでは割と面倒だったタブコンテンツも、Vue.jsではシンプルに書くことが出来ます。
v-forでHTML要素をループさせてみよう
Vue.jsでは、v-forを使って簡単にHTML要素をループさせる事ができます。ここでは、上で説明したタブコンテンツをv-forを使って書き換えてみましょう。
<div id="app">
<ul>
<li v-for="tab_content in tab_contents" @click="changeTab(tab_content)">タブ{{ tab_content }}</li>
</ul>
<template v-for="tab_content in tab_contents">
<section v-if="current_tab == tab_content">
タブ{{ tab_content }}のコンテンツです。
</section>
</template>
</div>var app = new Vue({
el: '#app',
data: {
current_tab: 1,
tab_contents: [ 1, 2, 3 ],
},
methods: {
changeTab: function( tab_number ){
this.current_tab = tab_number;
}
}
})Vue.js側は「tab_contents」という配列が一つ追加されただけで、後は変わりません。
HTML側は結構変わりました。liタグ等にv-for="tab_content in tab_contents"というものが追加されていると思います。v-forは、それを付けたHTML要素自体がループします。
v-forは、inの後の「tab_contents」がVue.jsのデータと紐付いています。それを一つ取り出して、inの前の変数「tab_content（sが無い）」に代入しています。この「tab_content」の方は好きな変数名を付けれますので、v-for="value in tab_contents"でもOKです。
そうすると、その要素内と子要素に対して「tab_content」で値を取得出来ます。今回で言うと1、2、3の数字が配列に登録されているので、その内容が出力されます。
これもCodePenを用意しましたので、実際に動かしてイメージを掴んでみてください。いまいちイメージが掴めなくても、使っていくうちにわかるようになりますので焦る必要はありません。
See the Pen vue_tab_with_v-for by はとむぎ (@hatomugi_s) on CodePen.
以上、Vue.jsの基本的な使い方でした。その他にもいろいろなディレクティブがあり、公式ドキュメントにて説明されていますので、気になる方は覗いてみてください。
Vue.jsの学習方法
さて、ここまでVue.jsの基本について学んできました。殆ど文章で説明しているというのもあり、ここまでの内容で分かりづらかった部分があったかも知れません。そこで、ここまでの内容と、基礎を終えたその先のVue.jsを学べる学習方法をいくつかご紹介します。
書籍のほうが学びやすいという方、動画の方が理解しやすいという方、それぞれいると思います。僕が実際に見て、初心者の方でも分かりやすそうなものを厳選しましたので、参考にしてみてください。良いものが見つかったら随時追加していきます。
Youtube
Vue.js入門 #01： 一番最初のプログラム
僕が信頼しているたにぐちまことさんのVue.js講座です。初心者からの評価も非常に高く、各要素について分かりやすく説明されています。
【5分で作る】Vue.js+Bootstrapで小銭計算プログラムを作ろう
同じくたにぐちまことさんの動画です。こちらは実際にプログラムを作りながら学べる内容となっています。基礎の内容はある程度分かったという方は見てみるとより理解が深まるかと思います。
書籍
これからはじめるVue.js実践入門
僕が実際にVue.jsを覚えるために購入した書籍です。内容も初心者から入りやすく、中のデザインもとても見やすいため、非常に読みやすいおすすめの書籍です。
これからはじめる人のJavaScript/Vue.jsの教科書
2020年4月に販売開始された書籍です。比較的新しい内容の書籍というのと、JavaScriptの基礎から学べるため、HTML/CSSまでを終えたばかりの方にもおすすめできる書籍です。
Udemy
JavaScript(ES6)/ Vue.js/ TypeScript フロントエンド技術入門
JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門
たにぐちまことさんによるUdemyコースです。JavaScriptの基礎から、最終的には本格的なフレームワークである「Vue CLI」を用いたアプリケーション開発までを学ぶことができます。
たにぐちまことさんは無料のYoutubeと有料のUdemyで意識的に内容のレベルを変えているとのことなので、無料動画にはない、より深い内容が学べるコースとなっています。
Vue JS入門決定版！jQuery を使わない Web 開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ
Vue JS入門決定版！jQuery を使わない Web 開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ
ITエンジニアである中村祐太さんのUdemyコースです。Vue.jsの基本的な内容から、Vue Router, Vue CLIなどの本格的な内容までを学ぶことが出来ます。
広い範囲を一度に学習できるので、とてもお得な内容となっています。その分必要な時間も多くなるので、自分のペースでゆっくりと学習するのがいいです。
プログラミングスクール
プログラミングスクールでVue.jsを扱っているスクールを紹介します。ただ、プログラミングスクールは受講料が高い事が多いため、どうしても一人ではモチベーションの維持が不安だという方におすすめです。
TechAcademy – フロントエンドコース
TechAcademyではJavaScript、jQuery、Vue.js等のフロントエンド言語を重点的に学べるコースがあります。定期的にセールを行っており、無料体験もあるので、気になる方は無料体験に申し込んでみてはいかがでしょうか。
まとめ
Vue.jsはこれからのフロントエンドで重要なポジションになることは間違いないと思います。Vue.jsを使うことで、これまでは長く冗長なコードを書かなければ実現できなかった動きも、非常にシンプルで直感的に書けるようになります。
ただ、ネイティブのJavaScriptやjQueryが不要になった訳ではありません。Vue.jsがこれらと一緒に使えることから分かる通り、強力な選択肢として、これまでのものと適宜使い分けていくことが重要です。もちろん、より大規模向けのReactとも使い分けていくことが理想です。
しかし、一度に全てを学ぶことは不可能ですし、無理をして辞めてしまうのが一番もったいないです。覚えやすいもの、もしくは自分に合うと思ったものから、自分のペースで学んでいきましょう。