Vue 3 フロントエンド開発の教科書：書籍案内｜技術評論社
Vue 3 フロントエンド開発の教科書 – WINGS
先日、2022年9月28日発売の「Vue 3 フロントエンド開発の教科書」の本をいただきました。発売が発表される前から気になっていたのですが、Twitterを見てみるとレビュー企画があると知って応募し、当選したためです(先着順だったのかも？)。
「まさに、こういう本が欲しかった」と思える内容でした。
以下、良い点と悪い点(半分こじつけ)について記載します。
良い点
現在主流のVue.js開発の手法について網羅されている
少し前、それこそ2年ほど前にVue.jsで開発しようとすると、プロジェクト作成ツールにはVue CLI(ビルドはWebpack)、書き方はJavaScriptのOptions APIで、状態管理ライブラリはVuex、テストはJestを利用するというのが主流でしたが、ここ1年ほどでその環境が変わった印象を持っています。
最近の主流は、ビルドにViteを使うcreate-vueでプロジェクト作成して、開発はTypeScriptでのComposition APIの<script setup>構文、状態管理ライブラリにはPiniaで、テストはVitest。この本ではまさに、そんな今主流のVue.jsの開発について基礎から丁寧に解説されています。
基本から解説されており、入門者にも最適(だと思う)
Composition APIについて書かれたVue3の本というのは今までもありましたが、メインはOptions APIの記載でComposition APIの説明は一部だけだったり、実践的な内容で初心者には難しいのではないかと思うものが多い印象でした。
対してこの本では、最初からComposition APIで開発するということを前提として記載されており、これからVue.jsの開発をしようとする初心者でも分かりやすいものとなっていると思います。
コーディングスタイルについての説明がある
コーディングスタイルについて記載されたプログラミング本というのはあまり多くない印象があります。
この本では、コーディングスタイルについて、どういう指針で記載するかについても記載されていました。
具体的にどういう指針かというと、分かりやすいかどうか。
私自身は、「v-bind」や「v-on」は省略記法で書いていますが、それを省略しないで書くというのは、初心者には分かりやすいと思います。
文末にセミコロンをつけるという指針も、副作用の心配をしなくていいですしね。自分もどちらかというと、セミコロンをつける派です(今関わってるプロジェクトではつけてませんが)
図解が分かりやすい
文章でダラダラ書かれてあると分かりにくいものが、図で解説されてあって非常に分かりやすいです。
Slotの仕組みとか、同期処理・非同期処理の流れとか文章で書かれても分かりづらいですしね。
こういうところ、上司から注意うけるほど苦手なので、尊敬します。
非同期処理やユニットテストの手法についての解説もある
Vue.jsについての本でも、ここまでの解説はないか、あっても入門者向けじゃないことが多いと思います。
特に、非同期処理については、async/awaitやPromiseの説明まで丁寧に解説されてあり、JavaScript自体の非同期処理について細かいことを分かっていなくても、この本を読めば分かるのではないかと思います。
自分は使ったことがないのですが、IndexdDBについてもライブラリを使わずに丁寧に記載されており、どこかのタイミングで活用してみたいと思いました。
悪い点
実は、この本のレビューを書くにあたって、「良い所／悪い所についての感想をお願い致します」とお願いされており、そういう観点で読んでいたのですが、悪い点というものは見つからなかったです。
だいたい、こういう本ってツッコミどころが何点か見つかるんですけどね。もちろん、書き方の好みの違いというのはあるのですが、悪い点というのは違うような気はします。
というわけで、以下に記載するのは、あくまでこういうことも書いてほしかったという希望であって、悪い点というのとは少し違います。なので、もしかしたら検討したけど、紙面の都合上カットされたものもあるかもしれません。
書き込み可能なら算出プロパティについての説明がなく、「読み取り専用」としか書かれてない
確かに初心者には、はっきりと「読み取り専用」と書いておいた方が分かりやすいとは思うのですが、setterを定義することにより、書き込みもできるという説明はどこかにほしかったと思いました。
自分は、このcomputedのsetterは好きでよく使っています。
例えば、v-modelによる子から親への通信について記載されているリスト8-17は、自分ならcomputeを実装して下記のようにするかなと思います。
<script setup lang="ts">
～省略～
const input = computed({
get: () => {
return props.points;
},
set: (value: number) => {
emit("update:points", value);
},
});
～省略～
</script>
<template>
～省略～
<input type="number" v-model="input" />
～省略～
</template>
Piniaについての説明に、関数構文の説明がない
Piniaについては、オブジェクトで記載する方法(Option Stores)と、関数で記載する方法(Setup Stores)がありますが、この本で記載されているのはオブジェクトでの記載のみです。
Defining a Store | Pinia
たいして現在、「create-vue」でPiniaの利用を選択した時に作られるデフォルトのストアファイルは下記の通り、関数で記載されています。
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
ただ、今年の5月ぐらいにcreate-vueを試した時は、ストアファイルはオブジェクトでの記載となっていたように思います。なので、本書執筆時点では、create-vueで作成されるデフォルトのストアファイルはオブジェクトでの記載だったのだと思うので、オブジェクトでの記載としたというのは分かります。
ただ、関数での記載は前からあったと思うので、Noteやコラムあたりに記載があってもよかったかなとは思いました。
※ただ逆に、関数での記載を書いて、オブジェクトでの記載の説明が無いよりは断然いいです。関数での書き方はComposition APIを知ってたら直感的に分かりますが、オブジェクトでの記載はPinia独自のものなので、初見ではわからない可能性があるためです。
後、Piniaのstateの取得で下記のようにcomputedで定義して返すようにしてるのは個人的には冗長だなと感じました。
const membersStore = useMembersStore();
const memberList = computed(
(): Map<number, Member> => {
return membersStore.memberList;
}
);
これなら、「storeToRefs」を利用して、下記のようにすればいいのではないかなと思います。
const membersStore = useMembersStore();
const { memberList } = storeToRefs(membersStore);
どちらにしろ、「storeToRefs」についての記載はどこかにほしかったと思いました。
比較演算子に、厳密等価演算子(===)ではなく、等価演算子(==)を使っている箇所がある
これについては好みの問題かもしれないのですが、変数の比較に、「===」ではなく、「==」を使っているのが少し気になりました。
TypeScriptは型があるので、それほど気にしなくていいのかもしれないですが…。
Provideでreactive()を利用するのは、「TypeScriptでは型エラーになるから」という理由となってる
先ほど、他の本ならツッコミどころが何点か見つかるということを書きましたが、この本に関してはこの記述だけ気になりました。
自分はProvide/Indectについてあまり詳しく分かってないのですが、途中「Provideではref()ではなくreactive()を利用する」という説明があり、そういうものなのかと思いました。ただ、その理由が「Injectしたデータに対して.valueでアクセスしようとするとTypeScriptでは型エラーとなります」と書かれてあってモヤっとしました。それはただたんに、型定義をRefにしてないからじゃないのかと。
で、試しにサンプルプロジェクトの「components-provide」のファイルを下記のようにref()に変更してみたのですが、どうやらこれでも動くようです(コメントアウトしている箇所が本書で書かれてあったコードです)。
App.vue
//会員情報リストをProvide。
provide("memberList", ref(memberList));
// provide("memberList", reactive(memberList));
OneMember.vue
//会員情報リストをインジェクト。
const memberList = inject("memberList") as Ref<Map<number, Member>>;
// const memberList = inject("memberList") as Map<number, Member>;
//該当する会員情報の取得。
const member = computed((): Member => {
return memberList.value.get(props.id) as Member;
// return memberList.get(props.id) as Member;
});
ただ、そもそもinjectは型を明示しないとunknown型になってしまうようなので、そういう意味ではreactive()としたほうが使いやすいのかもしれないです。
※これって自動的に型推論できるようにならないものなのかな…。import/exportしているわけでもないのだから、さすがに難しいのだろうか…。
最後に
この本の最後に「終わりに」という記載があるのですが、それを読んで驚きました。
何と、本書の企画がスタートした段階ではVue3がまだ正式リリースされてない頃だったそう。
その頃というと、Piniaもないし、setupの糖衣構文もないし、Viteもない。それらを網羅しているということは、企画段階からはかなり内容が変わっていったのだろうなと思われます。
ただ、そんな中でも(だからこそ？)、本書は現在のVue.js開発に役に立つ作りになっています。Composition APIでの開発に携わる人は、読んで損は無いと思いました。
コメント