Vue CLI 3を使ってTODOアプリを作ってみる(Vue.jsの便利なところ編)
2019/02/15
目次
- 開発環境構築
- 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も提供されています。
イベントハンドラのキー修飾子
郵便番号⇒住所の自動入力、独自のショートカットキーなど、
「特定のキーが押されたとき、何か処理をする」という機能の実装経験はないでしょうか。
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アプリの各機能の実装を進めていきます!!