目次

はじめに

今までReactを用いた開発をしてきましたが、今回はVueで開発を進めることになったので簡単な環境構築と実装をしていきます。

VueとReactの相違点

まず似ている点から紹介していきます。ReactとVue双方に共通するものとして挙げられるのがコンポーネント指向であるということです。コンポーネント指向ではデザインを機能ごとの小さな部品に分けて管理する手法となります。

それぞれのパーツをモジュール化することで同じパーツを使いまわしたり、1箇所のコードの変更で同一デザインの変更をしたりと開発効率を上げることができるようになります。

次にVueに特化した点ですがやはり一番の特徴は双方向データバインディングになります。

JS側の値が反映されるとテンプレート側の値も変わり、テンプレート側の値が変わるとJS側の値も変わるように相互作用が働くのが双方向データバインディングの特徴です。HTMLのようなテンプレートの中にVue特有のデータ属性を付与します。イメージとしてはHTML自体がJavascriptになっているような感覚です。

サンプルとしてVueのドキュメントから引用してきました。以下はVueにおけるテンプレート中のif文になります。Math.random()の値が0.5の場合は0.5より大きい場合v-if文の付与されているdivタグの要素が表示され、そうでない場合はv-else属性が付与されたdivタグの要素が表示されます。

これがVueにおけるテンプレートの記法です。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div

またHTMLのようなテンプレート中の値というのはJSで操作することもできます。これでコードの可読性を上げてVueのテンプレートを書くことができるようになります。

それではこれから開発環境の構築方法を紹介してきます。今回はデフォルトの画面を表示させるまでの流れを簡単に紹介します。

開発環境

  • Vue CLI version 3.7.0
  • Vue version 2.6.10

環境の構築

今回はVue-cliの3系を利用していきます。どうやら3系はtypescriptが推奨されているようなのでtypescriptを利用して実装していきます。

それでは最初にyarnを用いてVue CLIのインストールをしてきます。vue-cliをインストールしてしまうと2系が入っているので注意しましょう。必ず@vue/cliをインストールしてください。

yarn global add @vue/cli

これで3系がインストールされました。それでは3系のインストールをしていきます。まずは以下のコマンドを入力しましょう。今回はvue-ts-sampleというプロジェクト名で生成します。

vue create vue-ts-sample 

実行すると以下のようなチェック項目が出てきます。いきなりエンターを押さないように注意してください。スペースボタンでチェックボックスのようなものを切り替えることができます。今回は以下のようにしました。

 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

この状態でエンターを押すといくつか対話形式での操作があります。基本的にはYesです。styleに関してはscss(dart-sass)を選択しました。まぁ今回scssにはそこまで触れません。

linterに関しては今回Typescriptを利用するので当然TSlintを利用します。

Lint on save(保存時のLintを実行する)かLint and fix on commit(コミット時にLint実行する)」かを選ぶ選択肢が出てきますが今回は保存時に整形したいのでLint on saveを選択しました。

この先も基本はイエスですがパッケージマネージャーで何を使うかの選択をする画面になります。基本的にはyarnを使うようにしましょう。yarnを利用したほうがより速い速度でインストールすることができます。

これで初期設定は完了になります。インストールが完了しました。早速プロジェクトフォルダ内に入ってみましょう。

yarn serveで実行してみましょう。http:localhost:8080にアクセスするとVueのデフォルト画面が表示されるはずです。

以下参考にしたチュートリアルとTypescriptで書いたコードです。なんとなく雰囲気を掴んでいただければと思います

Qiita

vue-cliで始めるVue.jsチュートリアル (1)

vue-cliで始めるVue.jsチュートリアル (2)

task.vue

<template>
  <div>
    <form>
      <button @click="addTodo()">ADD TASK</button>
      <button @click="removeTodo()">DELETE FINISHED TASKS</button>
      <p>
        input:
        <input type="text" v-model="state.newTodo">
      </p>
      <p>task: {{ state.newTodo }}</p>
    </form>
    <div class="task-list">
      <label
        class="task-list__item"
        v-for="todo in state.todos"
        v-bind:class="{ 'task-list__item--checked': todo.done }"
        v-bind:key="todo.text"
      >
        <input type="checkbox" v-model="todo.done">
        <input type="checkbox" v-model="todo.editing">
        <input v-if="todo.editing" v-model="todo.text" @keyup.enter="todo.editing = !todo.editing">
        <span v-else>{{ todo.text }}</span>
      </label>
    </div>
  </div>
</template>
<script src="./Home.ts"></script>

<style lang="scss" scoped>
@mixin flex-vender() {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
}
.task-list {
  @include flex-vender;
  flex-direction: column;
  align-items: center;
  &__item {
    width: 270px;
    text-align: left;
    $element: #{&};
    &--checked {
      @extend #{$element};
      color: #85a6c6;
    }
  }
}
</style>

task.ts

interface Todo {
  text: string;
  done: boolean;
}

interface Data {
  msg: string;
  todos: Todo[];
  newTodo: string;
}

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Task extends Vue {
  public state: Data = {
    msg: 'Welcome to Your Vue.js App',
    todos: [
        { text: 'vue-router', done: false },
        { text: 'vuex', done: false },
        { text: 'vue-loader', done: false },
        { text: 'awesome-vue', done: true },
      ],
    newTodo: '',
  };

  public addTodo() {
    const text = this.state.newTodo && this.state.newTodo.trim();
    if (!text) {
      return;
    }
    this.state.todos.push({
      text,
      done: false,
    });
    this.state.newTodo = '';
  }

  public removeTodo() {
    for (let i = this.state.todos.length - 1; i >= 0; i--) {
      if (this.state.todos[i].done) { this.state.todos.splice(i, 1); }
    }
  }
}

まとめ

今回は簡単にVueについてReactとの違いを説明し環境構築を行うところまで紹介していきました。Vueは学習コストも低くある程度Javascriptが書ける方であれば簡単に手軽に学習のできるフレームワークなので、javascriptを勉強し終えた人だったり、ある程度ReactやAngularを使用されている方にはぜひ触れていただきたいと思います。

これからVuexとTypescriptに触れていきたいと思います。実際に触ってみたのですが情報がかなりあやふやだったり、ベストプラクティスが存在しない、まだまだ発展途上の技術でした。これから仕事の中でいい使い方を模索していきたいと思います