Vue.jsとは何かを現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのVue.jsについて現役エンジニアが解説しています。Vue.jsはjQueryと同じようなJavaScriptのフレームワークです。jQueryはセレクタ操作に特化していますが、Vue.jsはインタラクティブなページや状態管理に特化しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのVue.jsについて解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのVue.jsについて詳しく説明していくね!

大石ゆかり

お願いします!

 

Vue.jsとは

Vue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。

そのJavaScriptでより効率的な開発を行う目的で使用されているのがJavaScriptのフレームワークやライブラリです。なお、フレームワークもライブラリも「開発を支援する仕組みやツール群」といった意味では同等ですが、ライブラリと比較してフレームワークの方が、より規模が大きいニュアンスがあります。

JavaScriptのフレームワークやライブラリで最も有名なのは jQuery です。jQueryは導入もしやすく、多くのフロントエンドアプリケーションで使用されています。しかし jQuery は DOM操作を自分で行わなければならないなどの弱点があります(詳しくは後述します)。

この欠点は、これまでブラウザで動作するアプリケーションの開発主体がサーバー側だった時はあまり問題になりませんでした。ところが最近はWebページ自体を遷移させずに1つのページ内で処理を完結させる Single Page Application など、フロントエンド側に開発主体が移りつつあり、 jQuery の弱点がより顕著化する状況となっています。

そこで登場したのが、Vue.js や Angular、React などのJavaScriptのフレームワークです。これらフレームワークはDOM操作を自動化するなど、より効率よくフロントエンドの開発が行えるよう考慮されています。中でも Vue.js は比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いています。

 

Vue.jsを使用するメリット

Vue.jsを使用するメリットは以下の通りです。

  • 気軽に使える:Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。
  • DOM操作を自動的に行ってくれる:HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれます。これにより、jQueryよりも簡潔に分かりやすくコードを記載することができます。
  • 学習コストが低い:AngularやReactと比較してフレームワークの規模が小さい分、覚えることも少なくて済みます。JavaScriptやjQueryの基礎知識があれば数時間の学習で開発を開始することができるでしょう。

ある程度規模が大きいサイトを新規で構築する場合は、AngularやReactがおすすめです。

逆に既存のWebサイトに組み込んだり、小~中規模のWebサイトを構築する場合に Vue.js は向いていると言えるでしょう。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Vue.jsを実際に使っているサービスや企業

Vue.jsはその導入のしやすさと開発効率の良さから、多くの企業で使用されています。

国内でも zozo や LINE 、 ITプロパートナーズ などたくさんの企業で導入が進められています。国内最大の Vue.js のイベントである Vue Fes Japan にも多くの企業がスポンサーとなっており、その関心の高さが伺えます。

https://vuefes.jp/2018/

詳しくは公式サイトを参考にすると良いでしょう。

https://jp.vuejs.org/

 

Vue.jsの基本構文

Vue.jsを使うにはscriptタグでライブラリを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

それでは簡単なプログラムを書いてみましょう。プログラム全体は以下となります。

hello_vue.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="hello_vue.js"></script>
</body>
</html>

hello_vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちは、ビュー(Vue)!'
  }
})

 

実行結果は以下のようになります。

HTMLの「{{ message }}」の部分がJavaScriptのメッセージに自動的に置換されているのが分かります。

Vue.js の基本構文について、詳しくは公式サイトのGuideやExampleを参考にしてください。

https://jp.vuejs.org/v2/guide/

https://jp.vuejs.org/v2/examples/

 

Vue.jsを学習できるサービス

Vue.jsは日本語のドキュメントが充実しているのが特徴です。公式サイトのドキュメントやチャットが参考になるでしょう。Vue.jsを学習する書籍としては以下がおすすめです。

 

速習Vue.js 速習シリーズ

JavaScriptやHTML/CSSの知識のある方が Vue.jsを学ぶのにおすすめの書籍です。とてもコンパクトにまとまっており、短時間にVue.jsの使い方を学習することができます。

 

基礎から学ぶ Vue.js

こちらもJavaScriptやHTML/CSSの知識のある方向けですが、基礎から丁寧に書かれています。公式サイトを見て難しく感じた場方におすすめです。

 

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js のコアチームメンバーらが執筆した書籍です。やや難易度が高いので、Vue.js の入門書というよりは2冊目以降として考えた方が良いと思います。jQueryからの移行や実践的なアプリ開発などの内容も盛り込まれています。

 

筆者プロフィール

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。