Vue.jsでできることとは？JavaScriptとの違いを初心者向けに解説

Vue.jsは、JavaScriptを使ってWebアプリケーションの画面を作るためのフレームワークです。

初心者のうちは「JavaScriptとVue.jsは何が違うのか」「Vue.jsを使うと何ができるのか」が分かりにくいかもしれません。

この記事では、Vue.jsでできることと、JavaScriptとの違いを初心者向けに解説します。

Vue.jsとは

Vue.jsは、JavaScriptのフレームワークです。

フレームワークとは、Webアプリケーションを作りやすくするための仕組みがまとまったものです。

JavaScriptだけでもWebページに動きをつけることはできます。

たとえば、ボタンを押したら文字を変える、入力フォームの内容を表示する、リストに項目を追加する、といった処理です。

Vue.jsを使うと、こうした画面の変更やデータの管理を、より整理して書きやすくなります。

特に、画面の中身が何度も変わるWebアプリケーションでは、Vue.jsを使うメリットがあります。

JavaScriptとVue.jsの違い

JavaScriptとVue.jsの違いを簡単にいうと、次のようになります。

項目	JavaScript	Vue.js
種類	プログラミング言語	JavaScriptのフレームワーク
役割	Webページに動きをつける	画面を作りやすくする
書き方	HTML要素を直接取得して操作することが多い	データをもとに画面を表示する
向いているもの	小さな動きの追加	画面の変化が多いWebアプリ
学習の前提	HTML/CSSの基礎	HTML/CSS/JavaScriptの基礎

Vue.jsは、JavaScriptとは別の言語ではありません。

Vue.jsもJavaScriptを使って書きます。

つまり、Vue.jsを学ぶ前にJavaScriptの基本を知っておく必要があります。

Vue.jsはJavaScriptの代わりではない

Vue.jsは、JavaScriptの代わりになるものではありません。

Vue.jsは、JavaScriptを使いやすくするための仕組みです。

そのため、Vue.jsを書くときにもJavaScriptの知識は必要です。

たとえば、次のような知識はVue.jsでも使います。

変数
関数
配列
オブジェクト
条件分岐
繰り返し
イベント処理

JavaScriptの基礎が分かっていると、Vue.jsのコードも理解しやすくなります。

通常のJavaScriptで画面を書き換える例

まず、通常のJavaScriptで文字を書き換える例を見てみます。

HTMLは次のようにします。

<p class="message">こんにちは</p>
<button class="button">文字を変える</button>

JavaScriptでは、次のように書きます。

const message = document.querySelector(".message");
const button = document.querySelector(".button");

button.addEventListener("click", function () {
  message.textContent = "こんばんは";
});

このコードでは、まずdocument.querySelector()でHTML要素を取得しています。

そのあと、ボタンがクリックされたときにtextContentで文字を書き換えています。

小さな処理であれば、この書き方でも問題ありません。

Vue.jsで画面を書き換える例

次に、Vue.jsで同じように文字を変える例を見てみます。

<script setup>
import { ref } from "vue";

const message = ref("こんにちは");

function changeMessage() {
  message.value = "こんばんは";
}
</script>

<template>
  <p>{{ message }}</p>
  <button @click="changeMessage">文字を変える</button>
</template>

Vue.jsでは、画面に表示する文字をmessageというデータとして用意しています。

ボタンを押してmessageの中身を変えると、画面の表示も変わります。

通常のJavaScriptのように、毎回HTML要素を取得して直接書き換えるというより、データの変更に合わせて画面が更新される書き方です。

Vue.jsでできること

Vue.jsを使うと、Webアプリケーションの画面を作りやすくなります。

具体的には、次のようなことができます。

データに合わせて画面を表示する
ボタン操作で表示を変える
入力フォームの内容を画面に反映する
リストを表示する
条件によって表示を切り替える
画面を部品ごとに分けて作る
複数ページのような画面遷移を作る
Webアプリケーションのフロントエンドを作る

HTML/CSS/JavaScriptだけでも同じようなことはできます。

ただ、画面の状態が増えてくると、通常のJavaScriptだけではコードが読みにくくなることがあります。

Vue.jsを使うと、画面とデータの関係を整理しやすくなります。

データに合わせて画面を表示できる

Vue.jsでは、データを用意して、そのデータを画面に表示できます。

たとえば、次のようにnameというデータを用意します。

<script setup>
const name = "太郎";
</script>

<template>
  <p>{{ name }}さん、こんにちは。</p>
</template>

画面には次のように表示されます。

太郎さん、こんにちは。

{{ }}の中に変数名を書くことで、JavaScript側の値を画面に表示できます。

ボタン操作で表示を変えられる

Vue.jsでは、ボタンをクリックしたときの処理も書けます。

<script setup>
import { ref } from "vue";

const count = ref(0);

function plusCount() {
  count.value = count.value + 1;
}
</script>

<template>
  <p>{{ count }}</p>
  <button @click="plusCount">増やす</button>
</template>

このコードでは、ボタンを押すたびに数字が増えます。

@clickは、クリックされたときに処理を実行するための書き方です。

通常のJavaScriptで使うaddEventListenerに近い役割です。

入力フォームの内容を扱える

Vue.jsでは、入力フォームの内容をデータとして扱えます。

<script setup>
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <input v-model="name" placeholder="名前を入力してください">
  <p>入力内容：{{ name }}</p>
</template>

v-modelを使うと、入力欄の内容とJavaScript側のデータをつなげられます。

入力欄に文字を入力すると、画面の表示も変わります。

フォームを使うWebアプリケーションでは、このような書き方が便利です。

リストを表示できる

Vue.jsでは、配列の内容をリストとして表示できます。

<script setup>
const skills = ["HTML", "CSS", "JavaScript", "Vue.js"];
</script>

<template>
  <ul>
    <li v-for="skill in skills" :key="skill">
      {{ skill }}
    </li>
  </ul>
</template>

v-forを使うと、配列の中身を繰り返し表示できます。

お知らせ一覧、商品一覧、投稿一覧、タスク一覧などを作るときに使います。

条件によって表示を切り替えられる

Vue.jsでは、条件によって表示する内容を変えられます。

<script setup>
const isLogin = true;
</script>

<template>
  <p v-if="isLogin">ログイン中です。</p>
  <p v-else>ログインしていません。</p>
</template>

v-ifを使うと、条件が true のときだけ表示できます。

v-elseを使うと、それ以外の場合の表示を書けます。

ログイン状態、エラーメッセージ、確認画面の表示などに使えます。

画面を部品ごとに分けて作れる

Vue.jsでは、画面をコンポーネントという部品に分けて作れます。

たとえば、次のような部品に分けられます。

ヘッダー
メニュー
ボタン
カード
入力フォーム
商品一覧
タスク一覧

画面を部品ごとに分けると、コードを整理しやすくなります。

同じ部品を複数の場所で使い回すこともできます。

通常のHTMLだけでページを作るよりも、規模が大きくなったときに管理しやすくなります。

Vue.jsで作れるもの

Vue.jsを使うと、次のようなものを作れます。

ToDoリスト
お問い合わせフォーム
検索フォーム
商品一覧ページ
管理画面
予約フォーム
会員登録画面
ログイン画面
ダッシュボード
シングルページアプリケーション

特に、入力内容や表示内容が変わる画面を作るときにVue.jsは使いやすいです。

反対に、文章を読むだけの静的なページであれば、HTML/CSSだけで十分なこともあります。

JavaScriptだけで十分な場合

すべてのWebページでVue.jsが必要になるわけではありません。

たとえば、次のような場合は通常のJavaScriptだけでも十分です。

ボタンを押したら少し表示を変える
メニューを開閉する
Q&Aを開閉する
簡単なフォームチェックをする
トップへ戻るボタンを作る

小さな動きを追加するだけなら、JavaScriptでDOM操作を書けば対応できます。

Vue.jsを使うと便利な場合もありますが、小さなページに無理に入れる必要はありません。

Vue.jsを使うと便利な場合

Vue.jsが向いているのは、画面の状態が多いWebアプリケーションです。

たとえば、次のような場合です。

入力フォームが多い
画面の表示内容が何度も変わる
リストの追加・削除・更新がある
複数の部品を組み合わせて画面を作る
管理画面のようなUIを作る
ページ移動なしで画面を切り替えたい

通常のJavaScriptだけで書くと複雑になりやすい処理でも、Vue.jsを使うと整理して書きやすくなります。

Vue.jsを学ぶ前に必要な知識

Vue.jsを学ぶ前に、次の内容をある程度知っておくと進めやすいです。

HTMLの基本
CSSの基本
JavaScriptの変数
JavaScriptの関数
配列とオブジェクト
クリックイベント
DOM操作の基本

Vue.jsはJavaScriptを使うため、JavaScriptの基礎を飛ばすと分かりにくくなります。

先にJavaScriptで、ボタンを押したら文字を変える、入力内容を表示する、リストに項目を追加する、といった練習をしておくとよいです。

Vue.jsとJavaScriptのコード量の違い

画面の内容が少ない場合、JavaScriptとVue.jsのコード量に大きな差はありません。

ただ、表示するデータが増えたり、入力フォームやリスト操作が増えたりすると、Vue.jsの方が整理しやすくなります。

通常のJavaScriptでは、HTML要素を取得して、イベントを設定して、表示を書き換える処理を自分で管理します。

Vue.jsでは、データを用意し、そのデータを画面に表示する形で書きます。

そのため、データと画面の関係が分かりやすくなります。

Vue.jsはどんな人に向いているか

Vue.jsは、次のような人に向いています。

HTML/CSS/JavaScriptの次に進みたい人
Webアプリケーションの画面を作りたい人
入力フォームやリスト操作を作りたい人
管理画面のようなUIを作りたい人
JavaScriptのDOM操作だけではコードが増えてきた人
フロントエンド開発に進みたい人

一方で、HTML/CSSを学び始めたばかりの段階で、すぐにVue.jsへ進む必要はありません。

まずはJavaScriptの基本とDOM操作に慣れてから学ぶ方が理解しやすいです。

Vue.jsを学ぶ順番

Vue.jsを学ぶなら、次の順番で進めると分かりやすいです。

HTML/CSSの基本を学ぶ
JavaScriptの基本文法を学ぶ
DOM操作を学ぶ
Node.jsとnpmを使えるようにする
Vue.jsのプロジェクトを作る
templateの書き方を学ぶ
refでデータを管理する
@clickでイベント処理を書く
v-ifで条件表示をする
v-forでリスト表示をする
小さなアプリを作る

最初に作るものは、カウントアプリやToDoリストのような小さいもので十分です。

Vue.jsを使うときに必要なツール

Vue.jsを本格的に使う場合は、次のツールを使います。

Node.js
npm
Visual Studio Code
Vue用の拡張機能
ブラウザ

現在のVue.jsでは、npm create vue@latestを使ってプロジェクトを作成する方法がよく使われます。

そのため、Vue.jsを始める前にNode.jsとnpmをインストールしておく必要があります。

Vue.jsとJavaScriptの関係を整理する

最後に、Vue.jsとJavaScriptの関係を整理します。

JavaScriptはプログラミング言語
Vue.jsはJavaScriptのフレームワーク
Vue.jsはJavaScriptを使って書く
Vue.jsは画面作成を整理しやすくする
JavaScriptの基礎を知っているとVue.jsを理解しやすい

Vue.jsは、JavaScriptを学ばずに使うものではありません。

JavaScriptの基礎の上に、Vue.jsの書き方を学ぶイメージです。

まとめ

Vue.jsは、JavaScriptを使ってWebアプリケーションの画面を作るためのフレームワークです。

JavaScriptとの違いは、Vue.jsが画面作成を整理しやすくするための仕組みを持っている点です。

通常のJavaScriptでは、HTML要素を取得して直接書き換えることが多いです。

Vue.jsでは、データを用意して、そのデータに合わせて画面を表示する書き方をします。

Vue.jsを使うと、次のようなことができます。

データに合わせて画面を表示する
ボタン操作で表示を変える
入力フォームの内容を扱う
リストを表示する
条件によって表示を切り替える
画面を部品ごとに分けて作る

小さな動きだけならJavaScriptで十分な場合もあります。

ただ、入力やリスト、画面の切り替えが多いWebアプリケーションを作るなら、Vue.jsを学ぶ価値があります。

まずはJavaScriptの基本とDOM操作を学び、そのあとVue.jsで小さなアプリを作ってみると進めやすいです。