今回の記事は、
- 最近よく聞くけど、Vue.jsってなに？
- これからVue.jsを始めてみたい
- Vue.jsの特徴やメリットが知りたい
というお悩みをお持ちの方に向けた記事になっています。
ReactやAngular、そしてVue.jsと、今やJavascriptフレームワークの戦国時代でもありますが、その中でもVue.jsは近年人気が急上昇しており、今後もしばらくこの傾向は続くことが見込まれます。
Javascript初心者の方や、これからVue.jsを始めてみたいという方にぴったりの内容になっていますので、ぜひ最後まで読んでみてくださいね。
この記事の前半では、「Vue.jsの概要や特徴」についてご紹介しつつ、後半では「Vue.jsのメリット」について解説していきます。
それでは参りましょう！
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
Vue.jsとは？
MVVMとは？
MVVMとは、「Model」「View Model」「Model」であり、それらを管理するコントローラ(Controller)は存在するものの黒子のような存在でユーザからは隠蔽されているためコードを書く際に意識する必要はありません。
「Model」「View Model」「Model」はそれぞれ以下の通りご認識いただければと思います。
| 名称 | 説明 |
|---|---|
| Model | Modelは古典的なプログラマが担当する範囲を指し、ビジネスロジックやデータが該当します。プログラマが担当する範囲なので、かなり広いです。WEBアプリケーションならプレーンなjsオブジェクトがメインですが、そのオブジェクトを作るために利用するHTTPなどで通信した先も含みます。 |
| View Model | ViewModelはModelをViewに変換する役割です。Webアプリケーションだと、プレーンなjsオブジェクトを HTMLやDOMに変換するものです。 |
| View | Viewは直訳すれば「見た目」で単語の通りで、表示するものです。入力フォームも含みます。Webアプリケーションだと、HTMLやブラウザが該当します。 |
MVVMの特徴としては、ユーザーが入力した情報と格納したデータをデータバインディングにて自動的に連携/処理していくことが挙げられ、Vue.jsでもこのデータバインディングを活用してアプリ開発を進めていきます。
データバインディングに対応したMVVMはControllerがModelを監視するMVCに比べて、ユーザーが入力したものを素早くデータを書き換えられるというメリットがあります。
データバインディングとは？
ここで出てきた「データバインディング」というのは、ViewとView Modelを結び付ける仕組みのことです。
データの値を結び付けるため「データバインディング」と呼ばれており、その特徴は、ViewとModelどちらかで値が書き変われば、それに伴ってViewとModel両方の値が変更されるという点になります。
それはつまり、ユーザーが画面上で何らかの処理した場合であれ、コンピューター上やサーバ上で何らかの処理があった場合であれ、ViewとModelそれぞれにその変更が反映されるということです。
Vue.jsの特徴
Vue.jsの特徴としては、大きくは以下の3つが挙げられます。
- 1. 再利用性の高いコンポーネント思考
- 2. リアクティブなデータバインディング
- 3. 仮想DOMによる高速なレンダリング
それぞれ順番に解説させて頂きます。
Vue.jsの特徴その１ 再利用性の高いコンポーネント思考
まず最初の特徴は、「再利用性の高いコンポーネント思考」です。
Webページは、ヘッダー、サイドバー、ボディ、フッターなど様々な要素で構成されており、Vue.jsではこれら各々の要素をコンポーネント（部品）として考えます。
そして更に細分化していくと、ヘッダーにはロゴ、サイドバーにはナビゲーションというように、それぞれでまた別の要素、つまりコンポーネントを持ちます。
このように要素を可能な限り分割し、コンポーネント化することでWebページを構成していく手法をコンポーネント指向といいます。
Vue.jsでは、基本的にVueファイル（拡張子が.vueとなっているファイル）一つで一つのコンポーネントを構成し、Vueファイルは以下の3編から構成されています。
- 1. templateタグ：コンポーネントのhtml要素を埋め込む
- 2. scriptタグ：javascriptを記載する
- 3. styleタグ：cssを記載する
Vueファイルのイメージ
<template>
<div class="container">
<h1 class="title">タイトル</h1>
</div>
</template>
<script>
export default {
mixin: ['test']
}
</script>
<style>
.container {
background-color: gray;
}
</style>これらを合わせて一つの部品としてコンポーネントを作成し、それらを組み合わせて1つのWebページを作るのがVue.jsの大枠の考え方です。
Vue.jsの特徴その２ リアクティブなデータバインディング
続いての特徴は、「リアクティブなデータバインディング」です。
「データバインディング」については先ほどご紹介したところですが、この「リアクティブ」とは何でしょうか？
「リアクティブ」は英語では「reactive」とされ、直訳としては「反応的な」という意味になります。
さすがにそのままの意味ではあまり意味が分かりませんので、ここでの意味は「何かの変更が一瞬で反映される」という風に認識しておいていただければ問題ありません。
つまり、「リアクティブなデータバインディング」とは、「ViewとModelどちらかで値が書き変われば、即座に両方の値が変更される」ということになります。
先ほどの解説と重複してしまいますが、ユーザーが画面上で何らかの処理した場合であれ、コンピューター上やサーバ上で何らかの処理があった場合であれ、ViewとModelそれぞれにその変更が反映されるということです。
JavascriptやjQueryであれば、イベントを監視して、「イベントが発生すれば〇〇のデータも書き換える」というトリガーをこちら側で設定する必要がありましたが、Vue.jsでは「watcher」というインスタンスがコンポーネントを監視しており、関連しているデータの変更があれば即座にコンポーネントが再描画され、それによってデータ変更が自動的に関連箇所へ派生していってくれるのです。
Vue.jsの特徴その３ 仮想DOMによる高速なレンダリング
最後にご紹介する特徴は、「仮想DOMによる高速なレンダリング」です。
仮想DOMについてご紹介する前に、まずはDOMについて少し整理しておきましょう。
DOMというのは「Document Object Model」の略で、簡潔に申し上げると、「HTMLを構築する木構造データ」を指します。
通常、WebブラウザはDOMからHTML構造を解析することでWebページをレンダリングし、素のJavascriptやjQueryによってこのDOMが操作されることとなります。
この操作でHTML構造が変わった場合、DOMは再度更新され、Webブラウザがその変化後のDOMから新たなHTML構造を解析し、ページを再描画します。
DOMを直接操作してしまうと、その度に上記のサイクルが繰り返されるため、ブラウザ側の負担が大きく、再描画にも時間がかかってしまうのです。
これを解決するのが、「仮想DOM」という技術です。
仮想DOMはJavascriptのオブジェクトで、その名の通り、JavascriptのオブジェクトでリアルDOMを仮想的に作った上で、以下のようにDOMを操作します。
（※仮想DOMと比較するために、通常のDOMをリアルDOMと表記します）
- 1. 仮想DOMを二つ用意
- 2. 一方の仮想DOMをJavascriptで操作(一般的にリアルDOMを操作するより速い)
- 3. 変更前後の仮想DOMの差分を比較
- 4. 差分だけをリアルDOMに反映
- 5. 反映されたリアルDOMをブラウザがレンダリング
通常、リアルDOMを操作する場合は、リアルDOMが変更されるたびにブラウザがHTMLを解析してレンダリングするのでコストが高いのですが、仮想DOMを使うとレンダリングコストを低くすることができ、その他にも以下のようなメリットが享受できます。
- 1. UIとロジックを分離できる
- 2. 状態の管理を簡略化できる
- 3. UIとロジックを繋ぐ処理が簡単になる
Vue.jsのメリット
さて、続いてはVue.jsを導入することによるメリットを見ていきましょう。
Vue.jsのメリットとしては、以下の4つが考えられます。
- 1. 気軽に始められる
- 2. 学習コストが低い（日本語ライブラリが豊富）
- 3. シンプルかつ自由度の高いフレームワーク
それぞれ順番に解説させて頂きます。
Vue.jsのメリットその１ 気軽に始められる
Vue.js はjQueryと同様に、CDNを使ってscriptタグを1行書くだけで使い始めることができます。
そのため、まずはこのページだけで使ってみようみたいなスモールスタートも可能です。
その後、使用範囲を徐々に広げていき、徐々に既存のjQueryをVue.jsに置き換えていくということも可能です
さらには、素のJavascriptの書き方に慣れていればすぐにVue.jsを始められるという点も魅力の一つだと思います。
なお、Vue.jsと並列で語られることの多いAngularはTypeScriptという別の言語を学ぶ必要がありますし、ReactはJSXという書き方に慣れる必要があります。
Vue.jsのメリットその２ 学習コストが低い（日本語ライブラリが豊富）
JavaScriptには、Vue.jsのほかにもAngularやBackbone.jsなど、多くのフレームワークがあり、開発現場ごとに新しい技術を習得しなければいけないことも珍しくありません。
その中でもVue.jsは格段に学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があり、AngularやReactと比較してもフレームワークの規模が小さく、覚えることも少なくて済みます。
また、Vue.js自身の人気上昇に伴い、日本語での技術ブログや記事も充実していますので、不明点があった時も情報が充実しているためすぐに調べることができるというのも魅力の一つです。
Vue.jsのメリットその３ シンプルかつ自由度の高いフレームワーク
Vue.jsはHTMLベースの簡潔なVueテンプレート構文を使用したり、また他のライブラリとも自由に組み合わせを選べるため、シンプルかつ自由度の高いことが大きなメリットの一つです。
また、実際にWEBアプリケーションを開発する際には、HTMLやCSSを中心に実装を進めることもできるため、Javascriptの深い知識が無くとも手軽かつ簡潔にDOMを操作することができます。
さらには、一つのVueファイルでそのファイルに必要なHTML/JavaScript/CSSをまとめて記述でき、他のファイルとは完全に区別して管理できるため、複雑な構造のWebアプリケーションであっても開発する側にとってはそれほど負担なくシンプルな開発を進めることができます。
上記の理由によりファイル毎に開発を進めることができるため、開発チームが大きくなってきた場合にも他の開発者との干渉を最小限に抑えることができ、この点は開発者にとっても非常に大きなメリットではないでしょうか？
最後に
さて、ここまでVue.jsの概要や特徴、そしてそのメリットについて解説してきましたがいかがでしたか？
今回ご紹介した通り、他のフレームワークと比べても、Vue.jsはとても簡単に始めることができ、またその学習コストも非常に低くなっています。
近年はその人気も不断に上昇しており、今後もその傾向はしばらく続いていくことが見込まれます。
Javascript初心者の方にとってもそれほど難しくない内容になっていますので、ぜひこの機会にVue.jsを始めてみてはいかがでしょうか？
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
