Vue.jsとは、どんなことができるフレームワーク？特徴と勉強方法をカンタン解説【入門編】

Vue.jsとは？

参照：Vue.js

Vue.jsは、アプリケーション開発において、UIを構築するためのJavaScriptフレームワークです。開発者のEvan You氏が提唱したプログレッシブ・フレームワーク（段階的に適用できる構造）という概念のもとで設計されています。

アプリケーションは、リリースされた後も開発が続けられることが一般的です。段階的な仕様変更や新しい機能の追加が繰り返されると、当初採用したフレームワークでは対応が難しくなってくることがあります。そのようなときにVue.jsを採用すれば、既存のアプリケーションへの導入も簡単にでき、要件に合わせた機能を追加していくことでアプリケーションを拡張できます。例えば、既存のWordPressで作成したWebサイトの一部で、Vue.jsを使ったUIを構築できるということです。

Vue.jsの特徴

Vue.jsは、ユーザーから見えている部分をシンプルかつ高速に処理することができるフレームワークです。画面描画に対する新しい考え方とデータ管理の仕組みが、それを実現しています。また、チーム開発において作業の分担がしやすくなる形式のファイルを扱えるなど、開発を効率化できるのも特徴です。

Vue.jsには具体的に、次のような特徴があります。

仮想DOMによる高速化

JavaScriptやjQueryによる画面描画では、DOMを直接書き換えて画面全体を再描画します。Vue.jsには仮想DOMという概念があり、JavaScriptオブジェクトを使って差分のみをDOMに反映する処理をおこなっています。2つの仮想DOMが、変更前と変更後の構造を比較して差分を見つける仕組みです。

これにより、DOMを直接書き換えて画面全体を再描画するよりも、早く画面を切り替えることができるようになります。なお、仮想DOMはReactでも使われているものです。最初は少し難しく感じるかもしれませんが、仮想DOMの仕組みを知ることでVue.jsやReactの理解が深まるかもしれません。

データの変更を自動で画面に反映する

アプリケーションの構造には「Model」「View」「Controller」の3つの機能で分割されたMVCモデルがあります。Vue.jsは、このモデルの「View」つまり見た目の部分を扱うのが得意なフレームワークです。Vue.jsは、MVCモデルから派生したMVVMモデルを採用したフレームワークで「Model」「View」「ViewModel」の3つの機能で設計されています。

Modelはデータの管理や保存、外部との入出力や内部的な操作などのロジックに関わる処理を担い、Viewはユーザーの入力や操作を受け付けて、画面表示などのUIに関わる処理を担うものです。そして、ModelとViewの状態を監視しているのがViewModelで、状態に変化があれば必要に応じてそれぞれに通知します。また、このようなロジックとUIを分離して状態を監視しながら処理がおこなえるのは、仮想DOMによるものです。

機能ごとにファイルを分ける

Vue.jsは、ひとつのファイルにHTML、CSS、JavaScriptを記述できるvueファイルを扱うことが可能です。ブラウザはvueファイルをそのままでは扱うことができないので、コンパイラを通してHTMLファイルやCSSファイル、JavaScriptファイルなどに変換します。この仕組みのことを単一ファイルコンポーネント（SFC）といいます。vueファイルを機能ごとに処理を分けて扱うメリットは、作業を分担しやすいということです。

なお、Vue.jsはJavaScriptの代替言語として開発されたTypeScriptをサポートしていて、vueファイルに記述することが可能です。TypeScriptを使えば変数の型を決めてデータを扱うことができるので、JavaScriptで起こりやすいエラーをコンパイラで見つけやすくなります。

単一ファイルコンポーネントをブラウザ上で簡単に試すことができるサービス「オンラインプレイグラウンド」があるので、体験してみるといいかもしれません。

シングルページアプリケーションの開発に向いている

Vue.jsは、シングルページアプリケーション（SPA）の開発に向いています。シングルページアプリケーションとは、初回の表示でWebサーバから情報を読み込んでJavaScriptで表示をしたあと、ページ遷移をおこなわずに更新が必要な部分だけを再描画する仕組みを持ったアプリケーションのことです。つまり、Webサーバとの通信コストを抑えて高速に画面を切り替えることができます。

Vue.jsはルーティングという機能を使ってページ遷移をしているように見せることができるため、シングルページアプリケーションの開発に向いているといえます。

学習コストを抑えて学べる

JavaScriptフレームワークにはそれぞれ専用の記法があります。Vue.jsはHTMLに近い記述ができることから、ReactやAngulerよりも理解しやすいと感じる方も多いでしょう。また、日本語で書かれたドキュメントや動画コンテンツ型オンライン学習サービスなどの、学習を支援する教材が豊富です。

さらに、Vue.jsの公式サイトに記載されているCDN（コンテンツ・デリバリー・ネットワーク）を利用すれば、すぐにVue.jsをすぐに始められます。Vue.jsは習得しやすいといわれるように、初めてでも学びやすいフレームワークといえるのではないでしょうか。

Vue.jsでできること

シンプルなフレームワークといわれるVue.jsですが、できることはたくさんあります。Vue.jsができることを挙げていくと、これまで見てきた特徴が活かされていることが分かります。何ができるのかを知っていると使いどころが分かり、Vue.jsのパフォーマンスを十分に引き出すことができるはずです。

データを同期できる

Vue.jsには、内部で管理しているデータをシームレスに画面へ反映させるリアクティブシステムがあります。リアクティブシステムとは、データ同士が紐付けられて、どちらか一方のデータが更新されると、もう一方も更新される仕組みのことです。具体的には、JavaScriptで扱うデータと、Viewとしてユーザーに見えているDOMのデータを同期させることを指します。また、データ同士を紐付けることをデータバインディングといいます。

データを同期させるためには、HTML要素に特別な属性を与えることが必要です。その属性のことをディレクティブといい、Vue.jsが提供する属性であることを示す「v-」で始まる名前が付けられています。v-bindは、JavaScriptのデータが更新されるとDOMのデータが更新される、一方通行でバインドするデータとして定義するディレクティブです。v-modelは、双方向でバインドするデータとして定義するディレクティブで、v-bindの動作に加え、フォームからユーザーの入力があるたびにJavaScriptのデータを更新します。

このリアクティブシステムをJavaScriptやjQueryで実装しようとすると、処理が複雑になりコード量も多くなってしまいます。リアクティブシステムを使うと処理が簡潔になるだけでなく、誰が書いても似たようなコードになるので、メンテナンスしやすいというメリットも生まれます。

小さな部品を組み合わせてアプリケーションを構築できる

Vue.jsは、コンポーネントを組み合わせてアプリケーションを構築します。コンポーネントとは、それだけで完結するプログラム（機能）ごとに分けた小さな部品のことです。そのため、コンポーネントは好きなときに繰り返し利用できる、高い再利用性を持っている必要があります。コンポーネントを利用すると整合性を保ちやすくなるので、開発効率の向上に期待できます。

コンポーネントシステムとは、コンポーネントを組み合わせてアプリケーションを構築していく概念のことです。Vue.jsがさまざまな規模のアプリケーションを構築できるのは、このコンポーネントシステムによる影響が大きいといえるでしょう。

柔軟にアプリケーションを拡張できる

Vue.jsは、必要最小限の機能を備えたシンプルなフレームワークです。本格的なアプリケーションを開発する場合には、さまざまなツールやライブラリを導入することになります。導入する際に利用するのが、nvm、Node.js、npm、yarnです。これらは、フロントエンド開発には欠かせないスキルなので積極的に習得していきたいところです。

まず、Node.jsのバージョンを管理するためのnvmをインストールしてから、nvmでNode.jsをインストールします。Node.jsをインストールすると、本来ブラウザでしか動かないJavaScriptをサーバやデスクトップでも動かせるので、ローカルサーバで開発ができるようになります。

そして、アプリケーションを拡張する際には、パッケージマネージャーのnpmかyarnのどちらかを利用します。パッケージマネージャーとは、JavaScriptのプログラムを管理するシステムのことです。npmはNode.jsをインストールすると使えるようになりますが、yarnはインストールする必要があります。

プロジェクトの作成やビルドなどをおこなうための環境を構築をする際には、npmかyarnでVue CLIをインストールします。Vue CLIは、希望する開発環境を選択していくだけで、開発環境を自動で構築してくれるツールです。

もし環境構築を手動でおこなう場合はwebpackを利用します。webpackは、機能ごとに分けたJavaScriptファイルをまとめたり、複雑な依存関係を解決したりするモジュールバンドラーと呼ばれるものです。webpackに期待する結果を、設定用のファイルに自分で記述する必要がありますが、Vue CLIは、その作業を代わりにおこなってくれます。

この他にも、Vue.js公式のツールやライブラリが豊富に揃っていて、アプリケーション開発ではよく導入されています。

Vue.jsを使ったプロジェクト

現在、多くのサービスでVue.jsが使われています。最近の傾向では、Vue.jsのフレームワークであるNuxt.js（ナクスト・ジェイエス）も併せて使われることが増えてきました。Nuxt.jsは、アプリケーション開発に必要なルーティングや状態管理などの機能が最初から組み込まれているなど、すぐに開発を始められる環境を作ることができます。

国内のサービスでは、東京都の「新型コロナウイルス感染症対策サイト」や「note」でVue.jsとNuxt.jsが使われています。特に「新型コロナウイルス感染症対策サイト」はNuxt.jsをベースに開発されていて、オープンソースとして公開されたことも話題になりました。「note」はリリース当時、JavaScriptのフレームワークであるAngulerJSが使われていましたが、2018年から段階的にVue.js/Nuxt.jsへの移行を始めて、2021年12月にNuxt.jsへの移行が完了しました。国外では、有名な「ルイ・ヴィトン」「プラダ」のサイトでVue.jsやNuxt.jsが使われています。

また、Vue.jsを使ったWebサイトが紹介されている「Vue.js Projects」では、カレンダーやモーダルなどのコンポーネントのソースコードも紹介されているので参考になりそうです。

（関連記事：Nuxt.jsとは、Vue.jsを効果的に使うためのフレームワーク！導入のメリットは？【入門編】））

「Vue Devtools」使って、Vue.jsが使われているサービスかどうかをブラウザで確認しよう

• Vue Devtoolsを使うと、Vue.jsが使われているサービスかどうかをブラウザで確認することができます。以下にChromeで確認する方法をご紹介します。
• 1．ChromeにVue Devtoolsをインストールする
• 2．Chromeで確認したいサービスのページにアクセスする
• 3．Chromeのウインドウ右上にあるVue Devtoolsのアイコンの色をがカラーで表示されているとVue.jsやNuxt.jsが使われていることになる
• 4．アイコンをクリックすると詳細が表示される

フロントエンドエンジニア兼Webライター

あこさん

私は、PHPフレームワークを使った既存のWebサービスに、新規のページを追加する案件でVue.jsを使ったことがあります。

独学でVue.jsのスキルを身につけていたものの、社内にVue.jsを使ったプロジェクトがなかったため、Vue.jsの特徴を活かして既存のプロジェクトへの導入を試みました。CDNでVue.jsを読み込み、ページ内の同じレイアウトで繰り返される箇所をVue.jsで処理しました。当時JavaScriptの知識が浅かった私にとって、Vue.jsはとても使いやすく感じました。JavaScriptでは複雑になりやすい処理を、シンプルなコードで実装できたことに感動したのを覚えています。

その後の業務でも積極的にVue.jsを採用しました。ユーザーがフォームに入力した文字をページ内のテンプレートに反映させる処理や、文字を日本語と英語に切り替える処理などに使い、軽快な動作を実装することができたのでクライアントに喜ばれました。

現在の業務ではNuxt.jsを使っていて、Vue.jsの経験がとても役に立っています。

Vue.jsの勉強方法

Vue.jsを学ぼうとするとき、いろいろな勉強方法がある中で、できるだけ効率良く学びたいと思うかもしれません。最近では、書籍で学ぶよりもインターネット検索や動画で学ぶ機会が多いと思います。特にプログラミングに関する情報は、他の分野に比べて早い段階で古くなってしまうため、インターネットならそれをカバーできるからでしょう。

効率良く習得するためには、チュートリアルを見ながら実際に手を動かしたり、簡単なアプリケーションを作ってみたりしてアウトプットをしていくことが大切です。特に独学の場合には、第三者に質問ができたりフィードバックをもらえたりする環境があると、情報を整理しやすく、より理解が深まるでしょう。

動画で学ぶ

近年、プログラミング言語を学ぶチュートリアルとして、動画コンテンツの需要が高まっています。文字による説明では難しい表現を、図やイラストに動きを付けて音声で説明できるのが動画の強みです。

簡単なアプリを作ってみる

Vue.jsの基本的なことが理解できたら、簡単なアプリケーションを作るなどしてアウトプットしていきましょう。最初から難しいものを作ろうとしないことがポイントです。おみくじやじゃんけんゲーム、Todoリストやストップウォッチなどが適しています。

ひと通り動くものを作ったら、身近な人に使ってもらったり、SNSで公開したりしましょう。そして、フィードバックをもらいながら機能を追加して、徐々に完成品へと近づけていきます。こうしてアプリケーション制作の一連の流れを何度か経験するうちに、Vue.jsへの理解は深まっていくはずです。

エンジニアが知見を発信する場を利用する

プログラミングをしていて実装する方法が分からないときや解決できないエラーで悩むときに、インターネット検索をすると技術系の記事が見つかり参考になる場合があります。特に、同じ経験をしたエンジニアが解決方法を記録した記事を見付けられる可能性が高いです。ただし、記事が古かったり著者の開発環境と異なっていたりすると、期待する結果にならない場合があるので、記事を読む前に日付を確認しましょう。

最近、こうした技術系の記事はQiitaやZennで書かれることが多くなりました。これらのサービスは、知識や情報を共有する場としてエンジニアたちに利用されています。情報を得るために利用するだけではなく、ご自身で得られた知見を発信してみるのも良いかもしれませんね。

公式サイトのドキュメントを読む

インターネット上に公開されているVue.jsに関する情報が正しいかどうかは、Vue.jsの公式サイトのドキュメントで確認しましょう。公式のドキュメントは日本語で書かれていて、常に最新で最も信頼できる情報だからです。また、公式サイトではVue.jsのバージョンごとにドキュメントが用意されています。現在はVue3が最新ですが、Vue2とは異なる記述になる場合があるので、ドキュメントを読む際には必ずバージョンを確認しましょう。

Vue.jsを使用するフロントエンジニア求人

Vue.jsを用いて開発を進める企業の求人です。モダンな開発環境で新しいサービスに挑戦したい方は、ぜひご応募ください。

使い方は自由、応用がきく「Vue.js」

現在、多くの企業で使われているJavaScriptフレームワークは、従来のWeb開発に従事してきたフロントエンドエンジニアにとっては全く新しい領域といえるでしょう。しかしJavaScriptフレームワークの中でも、Vue.jsは手軽で習得しやすいうえ、できることは多岐に渡ります。ちょっとした処理から本格的なアプリケーションの開発まで幅広く利用できるのです。Vue.jsがどのような仕組みで動作しているのかが分かってくると、使いどころが明確になり、より面白く感じられるでしょう。

Vue.jsが使えるようになると、いくつかの共通の概念を持ったReactや、Vue.jsをより簡単に扱えるNuxt.jsでの開発に応用できます。モダンなWeb開発をおこなっている企業では、これらのスキルを持つフロントエンドエンジニアの需要も高まっているので、さらなるキャリアアップを目指してVue.jsを学んでみると良いかもしれませんね。