Vue.js 入門 #1 – Vue.jsを用いたTodo アプリケーションの開発

Vue.js を利用したWebアプリケーション開発の手法を紹介していきます。
第一回目は Vue.js を用いて Todo リストを作成する手法を紹介していきます。

Vue.js は JavaScript でWebアプリケーションを作成するための JS フレームワークの一つです。

データバインディングの機能を利用して、フォームやAPI 経由で取得したデータを柔軟に画面に反映させる事が出来ます。

今回は Vue.js を使って Todo リストを作成しながら、 Vue.js の基本的な記述方法やアプリケーション開発の手法について触れていきます。


はじめに

Vue.js は jQuery などと同じように CDN を利用して HTML 内で利用することが可能です。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

しかし通常、ある程度の規模の開発では、Node.js 製のビルドツールを用いて開発が進められることが多く、
今回も Node.js 製の様々なツールを用いた手法を紹介していきます。

Node 環境の構築セットアップ

Node.js をインストールするには以下のダウンロードリンクより 最新版の Node.js を選択してダウンロードを行ってください。

https://nodejs.org/ja/download/


Vue.js の環境構築

Vue.js の環境構築には vue-cli を利用する方法が便利です。

vue-cli を利用することで 開発をスムーズに進めるために必要な webpack などのビルドツールが自動的にインストールされます。

vue-cli を使った環境構築

vue-cli は Vue.js の環境構築を簡単に行うための Node製のツールです。
手元の環境にまだ vue-cli をインストールしていない方は、以下のコマンドで vue-cli をインストールしてください。

$ npm i -g vue-cli

vue-cli のインストールが正常に行えると vue --version のコマンド実行でインストールされているコマンドのバージョンが表示されます。

$ vue --version
2.7.0

vue コマンドのインストールが完了したら、以下のコマンドを実行してプロジェクトのセットアップを行ってください。

$ vue init webpack-simple my-project
$ cd my-project 
$ npm i 
$ npm run dev

自動的にブラウザが開いて アドレス http://localhost:8080 で Vue.js の初期画面が表示されるはずです。

初期画面で表示されているのは 展開されたフォルダ内の src/App.vue ファイルです。

実際のアプリケーション開発でも この src フォルダ内のファイルを操作して、様々な処理を追加していきます。

vue ファイル

拡張子が .vue のファイルは Vue.js 特有の SFC(シングルファイルコンポーネント)です。

中身はただのHTMLとなっており、ルートに template script style の 3種類の要素を配置する事が出来ます。

<template>
  <div>
    <!-- ここにテンプレートを記述 -->
  </div>
</template>

<script>
export default {
  // スクリプトの処理を記述
}
</script>

<style>
/* CSSを記述 */
</style>

templateは画面に表示するHTML, script は画面を制御する JavaScript, style は 画面に適用するCSSを記述するエリアとなっており、
それぞれ3つの要素を組み合わせて画面や機能を表現することができるようになっています。

ためしにtemplate 内のhtmlを書き換えてみましょう。ブラウザが自動的に更新され変更したhtmlが反映されるのがすぐに確認できるはずです。

これで Vue.js を用いたWebアプリケーション開発の基礎準備は完了です。続いてVue.jsのデータバインディングの仕組みを体験してみましょう。


データバインディング

Vue.js の環境構築が整ったところで、実際に Vue.js を用いたアプリケーション開発を体験していきましょう。

Vue.js でWeb アプリケーションを構築する際に重要な概念として、データバインディングと呼ばれるものがあります。
Vue.js では jQuery などのように直接 JavaScript で HTML を操作するのではなく、
JavaScript 内で定義された変数と HTML を結びつけることで、画面上での様々な処理を実現します。

src/App.vue の中身を以下のように変更してみましょう。

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

<script>
export default { 
  data(){
    return {
      message: "hello world"
    }
  }
}
</script>

Vue.js 内で利用する変数は scriptdata セクションで定義します。
ここでは message という名前で hello world という文字列を格納しています。

テンプレート内で {{message}} のように 二重括弧 {{ }} を用いてこの変数を記述することで、
JS 内で定義した値がテンプレート内で表示されます。

双方向バインディング

データをフォームと紐付ける事で、データバインディングの魅力をより体感することができます。フォームの要素と変数を紐付けるには v-model 属性を仕様します。

<template>
  <div>
    <input type="text" v-model="task">    
    <p> {{task}} </p>
  </div>
</template>

<script>
export default { 
  data(){
    return {
      task: ""
    }
  }
}
</script>

フォームの値を変更する事で、 下に表示されるメッセージの内容もリアルタイムで変更される事がわかるでしょう。

{{ }} の内部では JavaScript の記述がそのまま利用可能なため、例えば、{{task.length}} の様にすることで文字数をリアルタイムに取得できます。
これを利用してフォーム入力欄の文字数カウンタを簡単に実装することが出来ます。

<template>
  <div>
    <input type="text" v-model="task">    
    <p> {{task.length}} / 20 </p>
  </div>
</template>

配列の表示とイベント処理

配列と v-for の利用

Vue.js では、JavaScript で用意した配列のデータを使って HTMLを繰り返し表現する事ができます。

配列のデータを使って HTML 要素を繰り返し表現するには v-for 属性を利用します。

<template>
  <div id="app">
    ...
    <ul>
      <li v-for="item in items"> {{item}} </li>
    </ul>
  </div>
</template>

<script>
export default { 
  data(){
    return {
      items : ["本を買う","牛乳を買う"]
    }
  }
}
</script>

JavaScript 内の配列を利用して、画面上に項目を繰り返し表示することが出来るようになりました。

イベントハンドリング

タスクの一覧が表示できたところで、
配列にフォームのデータを格納してタスクリストの挙動を再現出来るようにしてみましょう。

Vue.js ではボタンクリック時の挙動を制御するために、 @click ディレクティブを使用します。

<template>
  <div id="app">
    <input type="text" v-model="task">    
    <p> {{task.length}} / 20 </p>
    <a @click="items.push(task)"> 追加 </a>
    <ul>
      <li v-for="item in items"> {{item}} </li>
    </ul>
  </div>
</template>

<script>
export default { 
  data(){
    return {
      task: "",
      items : ["本を買う","牛乳を買う"]
    }
  }
}
</script>

@click="items.push(task)" が付与された aタグをクリックすることで、
リストにフォームの内容が追加されるようになりました。

items.push(task)は JavaScript の配列操作の記法で、
items 配列の末尾に task 変数を追加する、という意味合いになります。

クリック時の処理が長くなる場合、methods エントリを追加して記述することも可能です。

<template>
  <div id="app">
    <input type="text" v-model="task">    
    <p> {{task.length}} / 20 </p>
    <a @click="add"> 追加 </a>
    <ul>
      <li v-for="item in items"> {{item}} </li>
    </ul>
  </div>
</template>

<script>
export default { 
  data(){
    return {
      task: "",
      items : ["本を買う","牛乳を買う"]
    }
  },
  methods:{
    add(){
      this.items.push(this.task)
      this.task = ""  // リストに追加後フォームを空に
    }
  }
}
</script>

Task リストアプリケーション と Vue.js の活用

コレで簡単なタスクリストアプリケーション実装を行うことが出来るようになりました。

今回紹介した基本機能を使用して様々な アプリケーション開発を行うことが出来るようになりますが、
その他のVue.jsの記法やコンポーネントの活用など、より応用的なVue.js の使い方を理解することで、
より効率的に複雑なアプリケーションを開発することが出来るようになります。

基本的な記述の流れがつかめればその他の記法等の理解はスムーズになるため、
今回のタスクリストアプリケーション開発をしっかり理解した上で、その他のドキュメントを確認すると、
より深い Vue.js に関する理解が得られるでしょう。

Vue.js 入門 その他の記事はこちら

https://www.chatbox.blog/category/vue-js/

Vue.js 公式ガイドはこちら

https://jp.vuejs.org/v2/guide/

Vue.js 入門 #1 – Vue.jsを用いたTodo アプリケーションの開発」への2件のフィードバック

  1. 守田裕一 のコメント:

    add()の中のtaskですが、this.taskじゃないと動きませんでした。
    this.items.push(this.task)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です