【2021年】Vue.js本「人気ランキング / おすすめ参考書5選」

JSを一通りかじっている方であれば、すんなり受け入れられる内容です。

ハマりどころへの注釈があるのも親切で、一つ一つの解説も分かりやすいと感じました。

特に、独学で少しVueを触っている場合などは、補足内容に納得出来る部分が多いです。

ここ暫く出版されていた入門書等との違いとして、Vue.cli あたりの情報も親切に書かれており、この１冊で Vue.js 本来の能力を知ることが出来、学習がとても楽しくなると思います。 (参考：Amazon)

この本に向いているのは、「JavaScriptの知識がある程度あり、jQuery等から移行したばかりの初心者」だと思います。

反対に、すでにVue.jsについて慣れており知識を深めたいという人には向かないかもしれません。

簡単なECサイトの構築を例に、商品一覧の表示・取得やソートなど、具体的な実装場面を想定した作りになっています。

それぞれの機能を実際にどう使うかという側面が重視されているため、理解が容易になり助かりました。
v-modelを利用したフォームの実装についても、テキスト型だけでなくデートピッカーなどでの
利用法も繰り返し掲載されていたりと、jQuery等から移行したばかりの初心者にとって
とても分かりやすい構成になっていると感じました。

なお、単一ファイルコンポーネントについては、最終章で少しだけ触れられてはいますが、
基本的にCDNを利用してHTML + CSS + JavaScriptの作りで進められています。 (参考：Amazon)

Vue.js、Vuexだけでなく
Vue.jsにおけるテスト駆動開発も学べるいい本だと思います。(次の章のことです)

8章 環境構築
9章 設計
10章 開発実装

また本書では中規模、大規模を仮に次のように定義しています。
中規模：1,2人程度で開発する10画面前後で状態管理が必要なもの
大規模：3人以上で開発する20画面以上。複雑な画面遷移、状態管理が必要なもの

◆対象読者層(個人の感想)
Vue.js公式ドキュメントを一度でも読んだことがある(あるいはReact、Riotなどの経験)
Vuexに関しては本書から読んだほうが理解しやすいかも
JavaScript(ES2015を知っているか、知らなくてもそれを自分で調べて理解することができる人)
CLI環境がすでに整っている人

※ES2015未習得者
例えば掲載コードごとにvue init(vue create)するのが面倒だから、jsfiddleやcodepenで動かそうと思った場合
これらのサービスはexportされたnpm moduleではなくcdnからファイルを読み込んでいるので
import { mapState } from 'vuex' と掲載コードのままだと動きません
const { mapState } = Vuexとすればよいといった程度の知識があるとよいです。
これが理解できていないということはES2015を勉強したことがないと判断していいかと思います。

※プログラミング初心者は言葉の意味にもつまずく
例えば本書で出てくる「アクションハンドラ」には「ストアインスタンス」の「メソッドやプロパティのセット」と同じものを呼び出せる「コンテキストオブジェクト」を受け取ります。という文を理解できないとつらいと思われます。

なぜなら、上記の説明を読んでも下記のコードの違いも理解できないからです。
actions: {
hoge (context) {
// something
}
}
actions: {
hoge ({ state, commit, dispatch }) {
// something
}
}

理解していればactionsに渡ってくるコンテキストについてはVuex API リファレンスのこの辺りを読めばいいことを「察する」ことができます。
https://vuex.vuejs.org/ja/api/#actions

こんな感じの難度です。
ここまでを見て難しいと思った場合、時間がかかるか、挫折する可能性が高いと思います(分かっている前提で話が進んでいく為)
※こんなことを書かないといけないのは、JavaScript初心者でも大丈夫とSNSで宣伝してしまうアルファ上級者がいて、誤解を真に受けてしまう人がいるからです。
(出版社の方は入門≠平易とSNSで発言しています。私はこれに賛同で不足しているものがあるほど努力が必要と考えます)
この辺りを説明せずに初心者に薦めてしまうのは、崖に突き落として這い上がれる人を育てることしかできないのでよくないと考えています。
せっかくならどういう所で転ぶか、転んだのか、転び方がわかった上で学んだほうが気がつけると考えています。

これまでjQueryしか触ってこなかった人はDOM操作に慣れていても、JSやプログラミングの基礎知識がなかったりすると思います。
初心者だと思う人ほどまずはVue.js公式ドキュメントを読んだり、ES2015について触れることをお勧めします

◆10章 開発実装について
ここではテスト駆動開発が行われています。
これに不慣れな方は1回目はテストを書かないで実装だけこなしてみることをお勧めします。
テストは2回目以降に回すと、対になるテストが想像しやすく学習しやすいと思います。

◆Appendix A jQueryからの移行について
本書の後ろに設けられていますが、一番最初か2章の後に読んでもいいと思います

◆サポートページについて
・正誤表について
2018/10/25現在、サポートページの正誤表もまだ不足しています

文章、コードのタイポが多く、その判断をする知識がない場合、読む手がとまると感じました。

お問い合わせページはこちらになります
https://gihyo.jp/site/inquiry/book?ISBN=978-4-297-10091-9

◆掲載コード、ダウンロードできるサンプルコードについて
・全ての掲載コードをダウンロードできるわけではありません
・gitリポジトリは含まれておりません
・掲載コード、サンプルコードは全体の一部であることがあります
実際に動かしたい場合は読者が補完する必要であるものが存在します。
これは筆者の言いたい事を理解すればよい箇所であるからで、実際に動かす必要がないからだと思われます。
(=著者側で動かしていないコード。説明のためだけに書き起こされているので、動かないタイポのまま掲載されている原因かなと思っています)

◆8章のunitテストについて
私が以前学習したときには起きなかったのですが、現在のnpm依存パッケージの都合上unitテストが動かない可能性がありそうです
もしnpm run unitが動かないときは
サンプルコードからpackage.jsonとpackage-lock.jsonをもってきて、それを使うのがよさそうです
情報元：https://twitter.com/sumihiro/status/1068177620829855744

この問題の再現方法
サンプルコードをダウンロードします
cd ~/Downloads/sample/ch08-10/kanban-app
npm install
npm run unit
問題なく動く

rm -r node_moduels
mv package-lock.json package-lock.json_
npm install
npm run unit
問題が再現する

mv package-lock.json_ package-lock.json
rm -r node_moduels
npm install
npm run unit
問題なく動く

◆Kindleは更新されている？
2018/11/30現在 Kindleの更新はなく初版のままです。 (参考：Amazon)

1日30分と謳っていますが、30分のカリキュラムが組まれている訳ではありません。
また、レッスン後にそのチャプターの復習問題がある訳では無いので、自分で考える余地なく読み進めるだけです。

「1日30分〜」のキャッチーなコピーに惹かれて計画的に力をつけられると思い購入しましたが、これではおそらく考える力や応用力はつかないと思いました。 (参考：Amazon)