トップに戻る
【初心者向け】Vue.jsとは？使うと何ができるの？
 > 
Vue > 
JavaScript > 
プログラミング > 
HOME > 
2022/07/13
2023/08/06
記事のサムネイル

【初心者向け】Vue.jsとは？使うと何ができるの？

JavaScriptフレームワークの一つとして、現在トレンドになっているのが”Vue.js”というフレームワークです。特に現在WEB開発などの分野に興味がある、もしくは従事している方であれば、どういった技術なのか気になっている方も多いのではないでしょうか。今回は、初心者の方でもわかりやすく理解できるように、Vue.jsがどのようなフレームワークなのか、何ができるのかを詳しく解説していきます。

Vue.jsとは？

Vue.jsのロゴ
Vue.jsのロゴ

Vue.jsは、DOM要素を効率的に管理するためのシンプルなJavaScriptフレームワークです。

フレームワークとは、簡単に言うとプログラミング言語などの開発において、新しい処理や宣言の方法を加えられる技術群のことを指します。

この手の技術はGoogle社やMicrosft社などの世界的なIT企業から発表されるのが常ですが、
Vue.jsはEvan Youというエンジニアによって開発・発表されており、LINEなどの組織からの支援によって成り立っています。

DOMの属性やデータを、JSON形式のオブジェクトデータで管理できるのが最大の特徴です。うまく活用すれば、複数のDOM要素をオブジェクト1つで手軽に管理することもできます。

Vue.jsの使用例

Vue.jsがどのように扱われているのかを簡単に解説するため、まずはVue.jsで実際に処理を作っていきましょう。

フレームワークと聞くと少し実装が面倒なイメージもあるかもしれませんが、Vue.jsの場合はCDNリンク一つで手軽に実装可能です。
headタグの中に以下のscriptタグを挿入してください。

<head>
    <!-- Vue.jsを読み込む -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

Vueを使用する場合、処理の対象となる要素を「el」というキーで定義します。
以下のようなサンプルコードがあるとすれば・・・

<head>
    <style>
        /* 簡易的なスタイル割り当て */
        #target{
            font-size: 30px;
            color: #ffffff;
            width: 100px;
            height: 100px;
            border-radius: 100px;
            background: #000000;
            line-height: 100px;
            text-align: center;
        }
    </style>

    <!-- Vue.jsを読み込む -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>

    <!-- 対象の要素 -->
    <div id="target">
        {{ number }}
    </div>

</body>

JavaScript側で以下のようなコードを記述すると、Vueを使って#target要素を管理できます。

// Vueオブジェクトのインスタンス
const vue = new Vue({
    // 対象の要素
    el: "#target", 

    // #target内のデータを
    // 管理するオブジェクトデータ
    data: {
        number: 0
    }
});
実行結果

現在は中央に「０」と表示されているだけですが、例えば、以下のように数字が増えていく処理を作りたいとしましょう。

1秒に1ずつ数字が増える

Vueで管理していない場合は、以下のように対象の要素から文字列の情報を取得し、その値を更新しなければなりません。

setInterval(()=>{
    let target = document.getElementById("target");
    target.textContent = Number(target.textContent) + 1;
}, 1000);

こんな感じですね。コードとしてはそれほど複雑ではないものの、要素の内容を少し変更するだけで多くの関数やプロパティを使うことになってしまいます。

一方、数字の部分をVueインスタンスを用いて管理していれば…

const vue = new Vue({
    el: "#target",
    data: {
        number: 0
    },

    /*
        createdは、
        インスタンスが生成された直後に実行される
        処理を記述できる。
    */
    created: function(){
        setInterval(()=>{
            // {{ number }} の部分の数値を増やす
            this.number++;
        }, 1000);
    }

});

このように、numberという変数の値を変更するだけで、#target要素の中にある数値を変えることが可能なのです。あれだけのコードが、とても簡単な記述に変わりましたね。

以前まではこういった記述はjQueryなどを用いることでも簡易化できましたが、Vue.jsはjQueryよりもさらにコードを簡易化でき、JavaScriptのプログラムを扱うように、HTMLのデータを容易に操れるのがポイントです。

Vue.jsを使うと何ができる？

Vue.jsを効果的に利用することによって、以下の2つの項目を実現できます。

  • WEBサイトへの実装が容易
  • 小・大規模なWEBサイトの構築

それぞれの項目について、詳しく見ていきましょう。

コンポーネントの部分的な管理

Vue.jsの大きなメリットとも言えるのが、実装が容易であるという点です。

よくReactというライブラリと比較されることの多いVue.jsですが、Reactの場合はJavaScript側でHTMLの構造などを設計する必要があるため、既にHTMLファイルなどが完成してしまっている場合、後から実装するのが少し困難になります。

Vue.jsの場合、既にHTMLファイルが出来上がっていたとしても、各タグの属性や文章の値をVue.jsの記述に書き換えるだけでリプレースできるので、Reactに比べ、とりわけ柔軟に対応できるのが魅力です。

小・大規模なWEBサイトの構築

Vue.jsは、部分的なコンポーネントの管理はもちろん、大規模なWEBサービスやWEBアプリの開発にも用いられています。Reactも同様のメリットを併せ持っていますが、Vue.jsは初心者にも扱いやすい直感的なデザインで、かつ日本語のリファレンスも整備されているのが特徴です。

そのため、学習コストの低さを各企業から高く評価されており、Reactに負けず劣らず、各社で小規模～大規模なWEBサイトの構築・運用に採用されています。

ただし、Vue.js単体ではReactのようにJavaScriptのみでレンダリングすることは少しばかり手間がかかるので、大規模開発ではコードやファイルに冗長性が生まれがちなのが玉に瑕です。

Vue.jsに将来性はある？

勉強中の方にとっては、Vue.jsに将来性があるかどうか、これからも需要が続くかどうかは気になるポイントではないでしょうか。

結論としては、Vue.jsは将来性があるフレームワークではあるものの、需要が伸びていくかどうかは現時点では何とも言えません。

度々登場しているJavaScriptライブラリのReactが非常に強大な技術となっており、関連技術だけでも

  • Next.js（バックエンド開発）
  • React-Native（アプリ開発）

の2つの分野をカバーできてしまうため、
「Vue.jsを勉強するならReactを勉強すべき」という声も度々聴かれます。
Vue.jsにもNext.jsと同等の機能を持ったNuxt.jsというフレームワークがあり、日本においてはそれぞれ同等のシェアを築きつつあります。しかし、海外ではNext.jsの方が高いシェアを誇っているのが現実です。

Googleの検索トレンドを見てみても、Next.jsの方が高い関心を得ていることがわかりますね。

2021-22のGoogleトレンド

前述のとおり、既存のシステムに実装しやすいのはVue.jsの特権ではあるのですが、コンポーネントの管理およびWEBサービスなどを構築する手段としては、Reactに劣っていると言わざるを得ません。

以上のことから、Nuxt.jsの存在を踏まえて今後もVue.jsの発展が期待できる一方、Reactも同様に発展していくことが予想されるため、需要としてはそれほど上がらないのではないか、というのが管理人の考えです。

まとめ

Vue.jsはjQueryなどで構築されたWEBサイトのリプレース手法としても需要が増え始めており、国内でもVue.jsやNuxt.jsのスキルは重視されています。Reactよりも勉強を優先すべき技術かどうかは不明瞭ですが、「JavaScriptのスキルを高めたい！」という方は、率先して学習してみるのがおすすめです。

SHARE