Vue.js 入門 #6 – データの加工と操作

Vue.js を利用したWebアプリケーション開発の手法を紹介していきます。
第六回目は Vue.js でのデータ加工について紹介していきます。

Vue.js とデータの加工

Vue.js でバインディングを使用してデータの表示を行う際、JavaScript 標準の文字列関数などを利用してデータの加工を行うことが出来ます。

例えば 以下のようにして length プロパティを用いて、文字列の長さを表示することが出来ます。

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

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

Computed プロパティ

template 内で length などのJavaScript の記述を利用することも出来ますが、
テンプレート内の記述をよりシンプルにしたい場合、computed プロパティを用いることも出来ます。

<template>
  <div id="app">
    <input type="text" v-model="message">
    <p>{{count}}/20</p> 
  </div>
</template>

<script>
export default { 
  data(){
    return {
      message: ""
    }
  },
  computed:{
    count(){
      return this.message.length
    }
  }
}
</script>

computed プロパティを利用する事でテンプレート内の記述は data 変数をバインディングしているときと変わらない、変数名のみの記載になります。

テンプレート内に複雑なロジックを記述するのが好ましくないときには、このcomputed プロパティを利用するのが良いでしょう。

文字列の操作

Vue.js でよく利用される文字列の操作について紹介していきます。

length は 文字列の長さを取得できます。

  computed:{
    count(){
      return this.message.length
    }
  }

ここで返される文字列の長さは絵文字等一部の文字列で正しい値を取得しません。

より正確な文字列長のカウントには、以下の記事等を参考にしてください。

replace は文字列の置換を行います。以下の例では !? に置換します。

  computed:{
    count(){
      return this.message.replace("!","?")
    }
  }

substr は文字列の切り出しを行います。以下の例では 4文字目から8文字の長さを取得します。

  computed:{
    count(){
      return this.message.substr("4","8")
    }
  }

substr は第二引数を省略することで残り全ての文字列を取り出すことも可能です。以下の例では 4文字目から残り全ての長さを取得します。

  computed:{
    count(){
      return this.message.substr("4")
    }
  }

indexOf は文字列内の検索を行います。第一引数に検索したい文字表現を指定します。文字列が見つからなかった場合 -1が返却されるため、 v-if との組み合わせで使われるケースが多いでしょう。

  computed:{
    hasQuestion(){
      return this.message.indexOf("?") === -1
    }
  }

trim は文字列から左右両端の空白を除去します。

  computed:{
    hasQuestion(){
      return this.message.trim()
    }
  }

その他にもJavaScriptでは様々な文字列関数が用意されています。JavaScript の文字列関数の全容は MDN をご確認ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String

配列の操作

文字列だけでなく配列もまた、データ操作を利用することが出来ます。ここでは、Vue.js でよく利用される配列の操作について紹介していきます。

length は 配列の長さを取得できます。

  computed:{
    count(){
      return this.items.length
    }
  }

filter は 配列のフィルタリングを実施します。以下の例では、空白の要素を除いた配列を生成しています。

  computed:{
    filteredItems(){
      return this.items.filter((item)=>{
        if(item == ""){
          return true
        }else{
          return false
        }
      })
    }
  }

sort は 配列のソートを実施します。以下の例では、ブログID の小さい順にデータを並び替えます。

  computed:{
    filteredPosts(){
      return this.posts.sort((postA,postB)=>{
        return postA.id - postB.id
      })
    }
  }

その他にもJavaScriptでは様々な配列関数が用意されています。JavaScript の配列関数の全容は MDN をご確認ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

コメントを残す

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