弊社コーポレートサイトに「Vue.js」を導入してみました！

こんにちは、フロントエンドエンジニアの中野です。

弊社では、随時新しい開発言語やフレームワークなどの導入をしているのですが、
ここのところ、Vue.js、Angular、Reactなどでのご相談も増えてきたことから、まず弊社サイトTOPページを「Vue.js」を使用してリニューアルしてみました。

Vue.jsといえばJavaScriptのフレームワークで、WEBアプリなど規模の大きいプロダクトに使うもの、というイメージをお持ちの方もおられると思いますが、WEBサイトにも部分的、または全体的に導入することができます。

そこで今回の経験をもとに、WEBサイトでVue.jsを使う方法や、フレームワークを使わない場合と比べてどう違うのか、ご紹介させていただきます。

今回作成したコンテンツのうち、TOPページにおける「Works」引用表示部分についてご紹介します。

以前のTOPページは「いつ見ても同じコンテンツが表示される」という問題があったため 、リニューアル後のUIでは、上部の「PICK UP」にランダム3件表示、下部の「RECENT WORKS」に最新10件を表示させることで、それを解決することにしました。

仕組みは、WEBサイトへアクセスするたびにデータをWEB APIからJSONで取得して、用意したHTMLテンプレートに表示させる、というものです。

フレームワークを使用しない場合、WEB APIから取得したデータを表示させるには、自らDOM操作を行う必要がありますが、上記のUIを実装する場合、DOM操作が多くなり複雑化する懸念がありました。

まず先ほどから何度か登場している「DOM操作」というのは、簡単に言うとJavaScriptからHTMLを操作してUIを実装できる仕組みのことです。

複雑なUIになるほど、そのDOM操作がややこしくなり、データの操作とDOMの操作がJavaScriptのコード内で入り乱れ、とても難解なコードになってしまうという問題が良く起こります。

その問題をまず解決したいというところからフレームワークの使用を考え、既存のWEBサイトにも導入しやすいものを選定した結果、Vue.jsに決まりました。

WEBサイトでVue.jsを使う簡単な方法として、以下のようにCDN経由で読み込むか、ローカルにダウンロードしたVue.jsを読み込ませます。
そして用意した<div> 要素にマウントするだけで、その<div> 要素内がVue.jsの適用範囲となります。

<!-- Vue.js の領域を用意する --> 
<div id="vue"> ここがVue.jsの適用範囲となる </div>

<!-- Vue.js を読み込む --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<!-- コードを書く --> 
<script>
    new Vue({
        el: '#vue',
        data: function() {
            return {
                persons: ['田中', '中野', '山田'] // ←データのサンプル
            }
        }
    });
</script>

※Vue.jsは開発用と本番用があり、開発中にエラーを表示させたり、Chromeの拡張機能である「Vue.js devtools」を使用する場合は、開発用を使用します。

Vue.jsはコンポーネントといった高度な機能を使うことでより本格的な開発ができますが、上記のように簡単にWEBサイトに取り入れられることが、JavaScriptフレームワーク初心者にとって、とっつきやすく、人気になっている要因でもあります。

次にフレームワークを使う場合と、使わない場合で実装がどう変わるのかを比較してみましょう。
まずアウトプットはどちらの場合もこのように表示されます。

<ul>
    <li>Name:田中</li>
    <li>Name:中野</li>
    <li>Name:山田</li>
</ul>

フレームワークを使わない場合、たとえばjQueryを使用した場合は以下のようになります。

<div id="jquery">  
    <ul></ul> 
</div>
<!-- jQuery 読み込み --> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ...
<script> 
    // 要素の取得及び作成 
    const ul = $('#jquery ul'); 
    const li = $('<li>'); 
    const flagment = document.createDocumentFragment(); 
    const persons = ['田中', '中野', '山田']; // ←データのサンプル 
    // flagmentに<li>要素を挿入 
    for (let i = 0; i < persons.length; i++) { 
        let liClone = li.clone().text(`Name:${persons[i]}`); 
        $(flagment).append(liClone); 
    } 
    // 最後に<ul>要素にflagmentを挿入 
    ul.append($(flagment)); 
</script> 

コメントの「//要素の取得及び作成」にあるように、まずはDOMにアクセスして必要な要素を取得します。それらの要素に対し、「persons」という配列データをループでセットして、最終的にul要素に挿入します。
コードのイメージでいうと、料理のレシピのように順番に「まず必要なものを用意して、それらの加工を行い、目的の場所に挿入する」という書き方です。

次にフレームワークであるVue.jsを使用してみます。

<div id="vue">  
    <!-- テンプレートを定義 --> 
    <ul> 
        <li v-for="person in persons">Name:{{person}}</li> 
    </ul> 
</div>
<!-- Vue.js 読み込み --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> 
<script> 
    new Vue({ 
        el: '#vue', 
        data: function() { 
            return { 
                persons: ['田中', '中野', '山田'] // ←データのサンプル
            } 
        } 
    }); 
</script>

Vue.jsを使用しない場合と比べて大きく違うところは、あらかじめデータをどう表示するかHTML上に定義でき（テンプレート）、Vue.jsがデータ量に応じて自動でHTMLを生成してくれる点です。

整理すると
フレームワークなし
・開発するJavaScript内でHTML要素を作成したり操作したりすることになる。

フレームワークあり
・開発するJavaScript内ではデータの操作のみを記述でき、HTMLの操作はフレームワークが行ってくれる。

ということになります。
DOM操作を実装者が行う必要がないことは、Vue.jsを使う大きなメリットでもありますね。

簡単な説明ではありましたが、Vue.jsでどんなことが出来るのか、少しでもイメージしていただけたら幸いです。

Vue.jsなど、JSフレームワークを使って開発することによるメリットは多く、弊社ではこれからも、Vue.jsなどを用いた開発もさらに手がけていきます。
「こんなことって出来る？」と、お気軽にお問い合わせいただければ、
様々なWEBアプリケーション、WEBサイトをご提案していきます。