Vue CLI 3を使ってTODOアプリを作ってみる(Vue.jsの便利なところ編)

目次

• 開発環境構築
  • Vue CLI 3 インストール
  • プロジェクト作成
  • 開発サーバ起動
• Vue.jsの便利なところ この記事はここまで
• TODOアプリの作成
  • 概要
  • 一覧機能
  • サマリ機能
  • 追加機能
  • 編集機能
  • 削除機能

はじめに

設計思想、用語などは、公式や、解説している記事が多くあるので
そちらを参考にしてもらうと良いと思います。

この記事では、jQueryゴリゴリ実装とAngular1系しか経験のないエンジニアが、
Vue.jsを使ってみて便利だと感じたことをjQueryと比較しながら書いていこうと思います。

「jQueryでもできるよ!」「ほかのJSフレームワークでもできるよ!」
みたいな話もあるかもしれませんがご容赦ください。m(_ _)m

Vue.jsの何が便利だったか

Vue CLI 3.0がすごい

環境構築編でさりげなく使っていますが、
複数のツールの導入と設定をやってくれます。

npx vue create PROJECT_NAMEというコマンドを実行して、
使用する機能を選択するだけで、開発環境構築が完了します。

デフォルトではWebpack、Babel、ESLintなどが設定されるようです。

2018/08/11時点で、ベータ版ですがGUIも提供されています。

参考
Vue CLI 3.0 が来ました！

イベントハンドラのキー修飾子

郵便番号⇒住所の自動入力、独自のショートカットキーなど、
「特定のキーが押されたとき、何か処理をする」という機能の実装経験はないでしょうか。

jQueryだとkeyupのイベントハンドラでキーを見て〇〇なら...のような実装が必要になりますが、
Vue.jsでは 特定のキーが押されたときのイベントハンドラを宣言できる のでjQueryのような実装が必要なくなりました!

jQuery

<input type="text" onkeyup="doSomething()"></input>
<script>
function doSomething(e){
  // Enterでなければ終了
  if(e.keyCode !== 13){
    return;
  }
  // ...
}
</script>

Vue.js

<template>
  <div>
    <input type="text" v-on:keyup.enter="doSomething()"></input>
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      // ...
    }
  }
};
</script>

入力値のtrimが簡単

必須の入力欄では、空文字 or 空白のみをNGとすると思います。

jQueryだと、値を取得したあとString.prototype.trim()を呼ぶ必要がありますが、
Vue.jsではv-model.trim="name"と書くだけです。

jQuery

// NULLを考慮しない場合
const val = $('#Example').val().trim();

Vue.js

<input type="text" v-model.trim="name"></input>

scoped CSS

これはVue.jsだけの話ではないですが...

CSSを作るときはベースとなるCSSを作成して
(または複数のCSSを1つのファイルに結合して)
全画面で読み込ませることが多いように思えます。

ただし、規模が大きくなればBEMなどのコーディング規約がほぼ必須で、
セレクタの重複などにより、思わぬところでレイアウトが崩れてしまうことがありました。

jQueryはあくまでJSライブラリですので、この問題を解決することはできません。
Vue.jsの場合、<style scoped></style>と書くだけで、
スタイルの適用範囲を、コンポーネントだけに制限することができます。

Vue.js

<template>
  <!-- 略 -->
</template>
<script>
// 略
</script>
<style scoped>
/* コンポーネント内のテンプレートにしか適用されない */
* { color: red; }
</style>

学習コストが低い

有名なJavaScriptフレームワークというと、Angular、React、Vue.jsだと思っています。

その中で学習コストが一番低いのがVue.jsではないでしょうか。

Angularはフルスタックフレームワークを謳っているだけあって学ぶことが多く、※1
ReactはJavaScript技術者向けです。※2
その点Vue.jsは日本語の公式ドキュメントが充実しており、
いつも使っているHTML、CSS、JavaScript(ES6)で書いていくことができます。

※1
言語は基本的にTypeScript、非同期処理の制御はRxJS、
ただし、公式を見れば大体分かる。
フルスタックなのでライブラリの組合せ問題が発生しにくい(そもそも使わないので)。
TypeScriptによる型の安心感も侮れない。

※2
チュートリアルの冒頭で
「HTMLとJavaScriptをある程度書けることを前提としています。」(意訳)と書いていますし...
React Nativeでネイティブアプリ、VR、ARも対応可能とJavaScript技術者としてはできることが広がりそう。

次回

次回からはTODOアプリの各機能の実装を進めていきます!!

-Vue.js