Vue.jsを使ってウェブアプリを作る

こんにちは。
キャスレーコンサルティングのSI部(システム・インテグレーション部)所属の原です。

今回はJavaScriptフレームワークのVue.jsを使って、簡単なウェブページを作成する方法をご紹介します。

Vue.jsとは?

ユーザーインターフェイスを構築するいわゆる、MVVMでつくるためのフレームワークです。

Vue.jsを使えるようにするには、直接組み込む方法とCLIを使う方法がありますが
アプリを構築するにはCLIを使う方が現実的なので、今回はCLIを使う方法でウェブアプリを作っていきます。

1.Vue.jsの環境構築

※Node.jsはインストール済みとします。

Windowsコマンドライン、またはPowerShellから以下のようにコマンドを実行していきます。

#vue-cli をグローバルにインストールします。
npm install -g vue-cli
#"webpack-simple"テンプレートを使って新規プロジェクトを作成
vue init webpack myapp
#依存関係をインストールします
cd myapp
npm install

#サーバーを起動します
npm run dev

サーバーが正常に起動したらこの画面が開きます。

2.レイアウト作成

ウェブページの外観を作成します。
Header.vue、Footer.vueを新規作成し、myapp\src\componentsフォルダに置きます。

Header.vue

<template>
  <header>
    <!-- データを表示させます。-->
    <h1>{{title}}</h1>
    <p>{{subTitle}}</p>
  </header>
</template>

<script>
export default {
//Vue インスタンスのためのデータオブジェクトです
  data(){
    return{
      title: "キャスレーコンサルティング株式会社",
      subTitle: "A \"Creating Shared Value\" company."
    }
  }
}
</script>

<style>
header{
  background-color: #f6f7f9;
  text-align: center;
  padding: 10px;
}
h1{
  color: #013892;
  margin: 0;
}
p{
  color:#999;
  margin: 0;
}
</style>

Footer.vue

<template>
  <footer>
    <!-- データを表示させます。-->
    <p>{{addr}}</p>
    <p>{{copyright}}</p>
  </footer>
</template>

<script>
export default {
  //Vue インスタンスのためのデータオブジェクトです
  data(){
    return{
      addr: "〒150-6031 東京都渋谷区恵比寿 4-20-3 恵比寿ガーデンプレイスタワー31階",
      copyright: "Casley Consulting Inc. All rights reserved."
    }
  }
}
</script>

<style>
footer{
  background-color: #c9c9c9;
  text-align: center;
}
h1{
  color: #013892;
  margin: 0;
}
p{
  color:#000;
  margin: 0;
}
</style>

先ほど作成したヘッダー、フッターをウェブページに表示させます。
App.vueを以下のように修正します。

<template>
  <div>
    <app-header></app-header>
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

export default {
components:{
    'app-header': Header,
    'app-footer': Footer
  }
}
</script>

ブラウザで反映されているか確認してみます。

3.コンテンツ作成

続いてコンテンツを作っていきます。
仕様
テキストボックスに入力した値を、ページ中央部にリアルタイムで表示する。
ボタン押下時にテキストボックスで入力した値を、ページ下部に青枠で囲って表示する。

Contents.vue

<template>
<div class="content">
  <div class="input-holder">
    <p>add new csv mechanism</p>
<!--
    v-model:データバインディングを作成するに使います。
    テキストボックスに入力されたデータを拾い、自動的に要素を更新します。
    -->
    <input type="text" v-model="csvJp" placeholder="日本語"><br>
    <input type="text" v-model="csvEn" placeholder="英語"><br>
    <!--
    @click="addContent" “追加”ボタンを押下時に呼ばれるメソッドを定義します。
    v-on:click 要素にイベントリスナーをアタッチします。 省略記法は @click
    -->
    <input type="submit" value="追加" @click="addContent">
    <!-- csvJpとcsvEnを連結した値を表示させます。</a>-->
    <h3>{{displayConcat}}</h3>
  </div>
  <hr>
  <div class="box-holder">
    <!--配列をループしてデータを表示させます。-->
    <div class="box" v-for="mechanism in csv">
      <h4>JP:{{mechanism.japanese}}</h4>
      <p>EN:{{mechanism.english}}</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
     //CSVのメカニズムをリスト化するための配列です。
     //addボタン押下時にテキストボックスの入力値を保存する配列です。
      csv: [
        {
            japanese: '製品と市場を見直す',
            english:'Reconceiving products and markets'
        },
        {
            japanese: 'バリューチェーンの生産性を再定義する',
            english:'Redefining productivity in the value chain'
        }
      ],
      //データバインディング用で、初期値は空白にしてあります。
      csvEn:'',
      csvJp:''
    }
  },
  methods:{
    //ボタンを押下したときに呼び出されるメソッドです。
    //入力されたデータを配列(csv)に追加します。空白で入力された場合は何もしません。
    addContent(){
      if(this.csvJp && this.csvEn){
        this.csv.push({
          japanese: this.csvJp,
          english: this.csvEn
        });
        this.csvJp = '';
        this.csvEn = '';
      }
      else{
        return
      }
    }
  },
  computed:{
    //Computed プロパティはメソッドに似ていて依存関係が変わったときに動きます。
    //ここではcsvEnまたはcsvJpを変更した時に、csvEnとcsvJpを連結した値を返します。
    displayConcat(){
      return this.csvJp + ' ' + this.csvEn;
    }
  }
}
</script>

<style scoped>
.content{
  padding: 10px;
}
.box{
  margin: 5px;
  padding: 15px;
  border: 2px solid #013892;
  float: left;
}
.box-holder:after{
  content: "";
  clear: both;
  display: table;
}
p{
  margin: 0;
}
</style>

コンテンツが出来たので、コンポーネントを登録して使ってみましょう。
App.vue

<template>
  <div>
    <app-header></app-header>
    <app-contents></app-contents>
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Contents from "./components/Contents.vue";
import Footer from "./components/Footer.vue";

export default {
components:{
    'app-header': Header,
    'app-contents': Contents,
    'app-footer': Footer
  }
}
</script>

このようにページが完成しました。

4.動作確認

日本語と英語のテキストボックスに、以下を入力します。

●ビジネスを営む地域に産業クラスターを開発する
●Enabling local cluster development

バインディングの確認

入力時にcomputedが記載されて、ボタンを押すと下の青い枠に追加されます。

おわりに

いかがでしたでしょうか。
HTML,CSS,JavaScriptのノウハウがあれば、簡単にSPA(single page application)が作れます。

他にもvue-loaderやvue-routerを使用したりしますが、
今回はフロントエンド開発を紹介させて頂きました。

以上、Vue.jsの紹介でした。
最後まで読んでいただき、ありがとうございました。

Vue.jsを使ってウェブアプリを作る

Vue.jsとは?