ブログ

はじめまして、R.Kと申します。
今回は、社内の勉強会でVue.jsについて学んだので紹介します。

Vue.jsとは

JavaScriptのフレームワークの一つで、シンプルに設計されているため拡張性が高く、大小様々な規模の開発に適用できます。

Vue.jsの利用方法

Vue.jsを使用するには、最初にVue.js自体を読み込む必要があります。
Vue.jsを利用するためにはいくつかの方法があります。

• CDN（Content Delivery Network）のVue.jsを利用する方法
• npmでVue.jsをインストールして利用する方法

今回は、CDNのVue.jsを利用する方法を紹介します。

1. Vue.jsの公式サイトにアクセスし、「はじめる」をクリックする。
2. 「インストール」ボタンをクリックし、「CDN」のところを確認する。
3. 利用したいバージョンのリンク先をコピーして、HTMLファイル内に貼り付ける。

Vue.js公式ページ：https://jp.vuejs.org/index.html

例：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
これでVue.jsが利用できる様になります。

Vue.jsで画面を作る

Vue.jsで画面に文章を表示させる
まず、Vue.jsの変数を展開するためにHTMLに次の記述をします。

<div id="app">
  {{ message }}
</div>

Vue.jsが制御できるエリアを定義して、id属性などを付与しておきます。
この{{}}で囲まれた場所でVue.jsの記述が利用できます。

次に変数を宣言します。

<script>
  const app = new Vue({
    el: "#app",
  });
</script>

ここでは、Vueというオブジェクトにパラメータを一つ指定します。
このelが対象の要素を指定します。
ここに次のパラメータを追加します。

el: "#app",
data: {
  message: "メッセージ"
}

これで、対象範囲内のmessageの箇所が置き換わります。
上記で「メッセージ」という文章を表示することができる様になりました。

クラスを付与して装飾する
Vue.jsでclass属性を書き換える場合は、「v-bind」を使います。

<div id="app">
  <p v-bind:class="error_class">赤文字</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      error_class: "error"
    }
  });
</script>
<style>
  .error {
    color: red;
  }
</style>

v-bindにコロンで区切って、書き換えたい属性を指定します。
このv-bindは省略して書くこともできます。

<p :class="error_class">赤文字</p>

まとめ

Vue.jsについて紹介させていただきました。
使い方さえ覚えてしまえば簡単にSPA（Single Page Application）などの設計ができるのでこれからも少しずつ勉強していきたいです。

今回は基礎文法の紹介でしたが、このほかにも便利な機能はたくさんあるので、また次回以降で機会があれば紹介したいと思います。

引用：これからはじめる人のJavaScript/Vue.jsの教科書

株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！