はじめに

　本書を手にとっていただきありがとうございます。まずはこの本の概要とどのような人をターゲットとしているのかを先に説明します。

概要

　本書はVue.jsの初心者に向けた本ではありません。筆者がこれまで現場で得てきた知見をいくつかピックアップし、それをtips集としてまとめた本です。

　また「tips集」というタイトルですが、小さなtipsを列挙しているわけではありません。章ごとにとあるテーマを題材とし、その中にtipsになる情報が散りばめられています。そのため、Vue.js自体の細かな説明はありませんし、機能の説明は簡単にしか行いません。

　さらに基本的にSFC（Single File Component）前提で話を進めていきます。ES（ECMAScript）の新しめの構文なども使っています（ESの構文については本書のサポートページで少しだけ補足説明しています）。

　またこの本は技術書典4（ https://techbookfest.org/event/tbf04 ）で頒布した同人誌が商業誌となったものです。企画から練られたものではなく筆者がテーマを決めて勢いで書いた本です。一般的に販売されている技術書とは趣が異なるかもしれません。そのあたりをご理解の上お読みいただけると幸いです。

ターゲット

　・目次に書いてある内容が気になる人

　・Vue.jsでWebアプリケーションを作っている人

　・Vue.jsの具体的な実装例が見たい人

　・npmやyarnを扱える人

サンプルコードについて

サンプルコードのリポジトリ

　今回のサンプルコードは全て次のGitHubリポジトリにおいています。

　https://github.com/mya-ake/vue-tips-samples

　リポジトリのREADMEにはサンプルコードのデモやサポートサイトのURLが記載されています。本書を読み進めながら一緒に確認されるとより理解が深まるでしょう。

環境

　サンプルコードのプロジェクトにはvue-cli v3を使っています。サンプルコード自体はvue-cliに依存したものではないので、読者のプロジェクトでも使えると思います。

　ESLintの設定はESLint + Prettierを少しカスタマイズ（singleQuoteとtrailingComma）しています。またeslint-plugin-vueの設定も追加しています。設定はeslintrc.js（ https://github.com/mya-ake/vue-tips-samples/blob/master/form/.eslintrc.js ）をご覧ください。

Twitterのハッシュタグ

　Twitterのハッシュタグは同人誌版に続き#現場で使えるvuejstipsを使います。筆者から本書に関するお知らせに使っています。感想などをつぶやいていただけると今後の励み&参考になるので嬉しいです。

注意

書籍中のコードについて

　書籍中には説明のためのコードが出てきます。しかしコードは文量が多いのでimportやexportを省略して書いているものが多いです。そのため本の中のコードはコピペして動作するものでない可能性があるのでご注意ください。GitHubのリポジトリのコードは動作する状態になっているので、コピペ等される際はそちらを利用された方がトラブルが少ないと思います。

誤りなどの連絡先

　本書の内容についてですが可能な限り正確な情報を書いているつもりですが、誤りがある可能性もあります。もしなにか見つけましたらTwitterのアカウント（@mya_ake）に連絡、またはGitHubのリポジトリのissues（ https://github.com/mya-ake/vue-tips-samples/issues ）に記載していただけると助かります。

表記関係について

　本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

免責事項

　本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者及び出版社はいかなる責任も負いません。

底本について

　本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています。

第1章　computedとfilterの使い分け

　本章で紹介するのは、Vue.jsのcomputedとfilterの使い分けに関するtipsです。computedとfilterは、やろうと思えばどちらでも同じ結果が得られるものではあります。ただ、それぞれにやはりメリットとデメリットが存在します。まずはcomputedとfilterについて、簡単に説明していきます。

1.1　computed

　computedは、Vue.jsの算出プロパティと呼ばれる機能です。この機能を使うことで、事前に計算や加工された値を参照することができます。

　次のコードはブログにつけるようなタグの配列を羅列して表示している例です。

　※コードの概要：配列をjoinしているcomputed

<template>
  <div>
    <div>
      <em>タグの配列</em>
      <ul>
        <li
          v-for="(tag, index) in tags"
          v-bind:key="`tag-${index}`"
        >{{ tag }}</li>
      </ul>
    </div>
    <div>
      <em>タグの文字列</em>
      <p>{{ tagsString }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['JavaScript', 'Vue.js', 'computed'],
    };
  },
  computed: {
    tagsString() {
      return this.tags.join('、');
    },
  },
};
</script>

　この例のように、dataプロパティの値になんらかの演算（Arrayであればjoin、Stringであればsplitなど）を行うような場合に有用です。

1.2　filter

　filterは表示されるテキストや属性を加工することができる機能です。

　次のコードは、数値を3桁区切りやゼロ埋めするfilterを適用している例です。

<template>
  <div>
    <em>3桁区切り</em>
    <p>{{ number | separateDigit3 }}</p>
    <em>ゼロ埋め</em>
    <p>{{ number | padZero(12) }}</p>
  </div>
</template>

<script>
export default {
  filters: {
    separateDigit3(value) {
      return Number(value).toLocaleString('ja-JP', {
        style: 'decimal',
      });
    },
    padZero(value, digit = 10) {
      return String(value).padStart(digit, '0');
    },
  },
  data() {
    return {
      number: 12345678,
    };
  },
};
</script>

　この例のように、表示上は3桁区切りやゼロ埋めはしたいが、値としては数値を持っておきたいときなどに有用です。

目次