![【書評】Hello!! Vue.js[入門復習書として自身の力量をお試しあれ]](https://tasulife-23.com/wp-content/uploads/2020/08/00-8.jpg)
どうもタスです。
Vue.jsというか、Nuxt.jsを触って約1ヶ月。始める前までは何が書いてあるのか分からなかった本書も、今では基本中の基本が書いてあった本なのだなと理解できた。やはり何事も習うより慣れよであるなと実感した次第である。
そこで今回は、読書習慣を始めて97冊目の本となった『Hello! Vue.js 最新プログレッシブフレームワーク入門(株式会社インプレスR&D)』を読了したのでお伝えする。
この記事の目次
著者のご紹介(本書引用)
那須 理也(なす まさや)
Webアプリケーションエンジニア。大学卒業後、パッケージソフト開発会社に3年間勤務し、クラウドソーシングサービスを提供する企業に転職。そこで主にRubyonRailsを活用しサービス開発を行っている。
目次
はじめに
第1章 Vue.jsことはじめ
第2章 Vue.jsのはじめかた
第3章 Vue.jsの基本的な使い方
第4章 ToDoリストを作る
第5章 単一ファイルコンポーネント
第6章 Vuex
第7章 vue-router
おわりに
構築環境でVue.jsを選定する理由
著者がVue.jsの選定理由として、以下を上げている。
- Progressive frameworkであること。
- Vue.jsとそれを取り巻くエコシステムがEasyだから。
まず、第一の「Progressive framework」とは何ぞやなのだが、「直訳すれば進歩的なフレームワークですが、段階的に開発者が機能を選択できるフレームワークという意味です。」と言われている。著者も解釈もその意味で使われており、以下の場合に有用であるという。
ある課題があったとき、それを解決するフレームワークがその課題に対して不十分だったり、逆にオーバースペックであった場合、フレームワークの複雑性に引きずられて余計なコストがかかってしまいます。また、アプリケーションは作って終わりではないため、ユーザーの要望によって機能拡張が行われます。フレームワークがその変化に対応できなければ、これもまたコストがかかります。
ProgressiveFrameworkであることが意識されたフレームワークは課題に対して適切な使い方を提示でき、規模が拡大したとしてもそれに応じて変化することが出来ます。
プログラム言語やフレームワークによっては、小規模開発なのに事前準備が大変。であるとか、そもそも大規模開発への利用に相応しくないだとか、それ相応の開発環境を選ぶことが第一関門みたいなところがあるのだけれど、Vue.jsは柔軟に、規模の大小によって対応できるというのである。
第二の「Easy」である理由は、
Easyなライブラリは少ない手数で最大の利益を得られるのがメリットです。Vue.jsがEasyな理由は、主要なライブラリはEvanさん自身の手が入っており迷わず導入できることと、公式ドキュメントがかなり充実している点などが挙げられます。基本的に何かを行う際のベストプラクティスがそれぞれ用意されており、迷うことがほとんど無いのがVue.jsのEasyたる所以だと考えています。
と説明されている。Vue.jsの公式ドキュメントを見れば理解できると思うが、日本語ドキュメントも本当に充実しており、一から始めるユーザーにとってとても心強い言語のひとつであると言える。
Todoリストを作ってリアクティブシステムを体感する
Vue.jsを説明する際は、よくTodoリストを作りたがる。理由は、Todoリストはリアクティブな仕組みを体験するのにとても適しているからである。本書で紹介するTodoリストを以下に記載する。実際に自分で環境を用意し、以下のコードを動かしてみるとリアクティブの恩恵を実感できるだろう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// fileName: todo.js new Vue({ el: '#app', data: { todo: "", list: [] }, methods: { sendTodo: function () { // dataプロパティのlistに追加 this.list.push({ text: this.todo, status: 'todo' }) // 追加したtodoは消しておく this.todo = "" }, doneTodo: function (item) { // statusの値を変える if (item.status == 'done') { item.status = 'todo' } else { item.status = 'done' } } } }) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- fileName: template.html --> <div id="app"> <!-- submitイベントでsendTodoが発火する --> <form v-on:submit.prevent="sendTodo"> <input v-model="todo"> <input type="submit" val="追加"> </form> <ul v-for="item in list"> <!-- doneTodo(item)でitem自身のstatusを変化させる --> <li v-on:click="doneTodo(item)"> <span> status:{{item.status}} </span> <!-- v-ifでstatusによって表示の仕方を変える --> <s v-if="item.status=='done'"> {{item.text}} </s> <span v-else> {{item.text}} </span> </li> </ul> </div> |
なお、上記コードの詳細な説明は本書で確認されたい。
vue-routerライブラリを利用したSPAでのルーティングを体感する
私はNuxtのUniversalモードを利用してシステム構築しているため、SPAモードは体験したことがない。SPAとは「Single Page Application(シングルページアプリケーション)」のことで、その名のとおり、単一のWebページでアプリケーションを構成する設計構造の名称のことである。
最大の特徴は、クライアントサイドで動作するシステムであるということだ。必要な部分のみサーバサイドへ調達にしに行くものの、トラフィックが最小限に抑えられるメリットを受けられる。
その際に、クライアントサイドでルーティングを容易にするライブラリが「vue-router」だというわけである。以下がその例である。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- fileName: index.html --> <div class="app"> <h1>VueRouter</h1> <ul> <li> <router-link to="/user/profile"> profile </router-link> </li> <li> <router-link to="/user/notifications"> notifications </router-link> </li> </ul> <router-view></router-view> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
// fileName: index.js const User = { template: ` <div class="user"> User Layout<br> ---------- <router-view></router-view> </div> ` } const UserProfile = { template: ` <div> profile <ul> <li>name: hoge</li> <li>age: 18</li> </ul> </div> ` } const UserNotifications = { template: ` <div> notifications <div> <input type="checkbox" name="mail" value="1"> mail <br> <input type="checkbox" name="push" value="1"> push </div> </div> ` } // childrenプロパティを新たに追加する const routes = [ { path: '/user', component: User, chidren: [ { path: 'profile', component: UserProfile }, { path: 'notifications', component: UserNotifications } ] } ] const router = new VueRouter ({ routes }) const app = new Vue({ router }).$mount('.app') |
上記コードについて動かしてみると、リアクティブシステムというものがどういうものか理解できるだろう。また、vue-routerの詳細についても、本書で確認することを勧める。
本書は、最新プログレッシブフレームワーク入門ということでVue.jsを勉強した。ある程度Vue.jsを触ったことがある人にとっては多少退屈かもしれないが、自分の力量が上がったことを実感できるはずである。
また、第一歩として本書を選んだ人には、本書は多少理解しがたい部分があるかもしれない。私はそう感じたからである。説明文言よりコードの方が多いという部分で理解しがたかった。よって、本書は入門書の復習という位置づけで利用することが望ましい気がする。
Vue.jsの入門書としては、「Vue.js&Nuxt.js超入門」を参照されたい。両書を読みながら手を動かせば、間違いなくVue.jsを理解できることと思う。その次のステップは、中級書を読むか、公式ドキュメントに目を通すことでVue街道を進んでいけるはずである。