【書評】Hello!! Vue.js[入門復習書として自身の力量をお試しあれ]

この記事は約6分で読めます。

どうもタスです。

Vue.jsというか、Nuxt.jsを触って約1ヶ月。始める前までは何が書いてあるのか分からなかった本書も、今では基本中の基本が書いてあった本なのだなと理解できた。やはり何事も習うより慣れよであるなと実感した次第である。

そこで今回は、読書習慣を始めて97冊目の本となった『Hello! Vue.js 最新プログレッシブフレームワーク入門（株式会社インプレスR&D）』を読了したのでお伝えする。

created by Rinker

この記事の目次

1 著者のご紹介（本書引用）
2 目次
3 構築環境でVue.jsを選定する理由
4 Todoリストを作ってリアクティブシステムを体感する
5 vue-routerライブラリを利用したSPAでのルーティングを体感する

著者のご紹介（本書引用）

那須理也（なすまさや）
Webアプリケーションエンジニア。大学卒業後、パッケージソフト開発会社に3年間勤務し、クラウドソーシングサービスを提供する企業に転職。そこで主にRubyonRailsを活用しサービス開発を行っている。

構築環境で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リストを以下に記載する。実際に自分で環境を用意し、以下のコードを動かしてみるとリアクティブの恩恵を実感できるだろう。

// 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'
}
}
}
})

// 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'

}

})

<!-- 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>

</form>

<span>

status:{{item.status}}

</span>

</s>

</span>

</li>

</ul>

</div>

なお、上記コードの詳細な説明は本書で確認されたい。

vue-routerライブラリを利用したSPAでのルーティングを体感する

私はNuxtのUniversalモードを利用してシステム構築しているため、SPAモードは体験したことがない。SPAとは「Single Page Application（シングルページアプリケーション）」のことで、その名のとおり、単一のWebページでアプリケーションを構成する設計構造の名称のことである。

最大の特徴は、クライアントサイドで動作するシステムであるということだ。必要な部分のみサーバサイドへ調達にしに行くものの、トラフィックが最小限に抑えられるメリットを受けられる。

その際に、クライアントサイドでルーティングを容易にするライブラリが「vue-router」だというわけである。以下がその例である。

<!-- 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>

<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>

// 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')