ワイがVue.jsを勉強するにあたって、参考になったありがたいサイト・書籍

はじめに

メリークリスマスやで！！

みなさん、サイレントナイトしてますか？
ワイからのせめてもの贈り物として、Vue.jsを勉強する際に非常に参考になったサイトや書籍を紹介したいと思います！

ちょいちょいTwitterであげてましたが、こういう形でまとめた方が有益やなって思った次第ですたい。

どうぞよろしく

前提

JavaScriptのES6以降の内容を理解しているって前提で紹介しますね〜

ちょっと不安だなって方は下記の書籍をやってみるとええかもですよ！！
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

サイト

まずはサイトから紹介していきます！！

公式リファレンス(日本語)

言わずと知れた公式リファレンス(日本語版)ですね！
Vue.jsは他のフレームワークの中でもかなり分かりやすくてしっかりした内容のリファレンスになってます！！
いろんな書籍やサイトがありますが、公式は間違いもなく、かつ最新の情報が載っていますので、Vue.jsを初めて触る方はまずこちらからやってみるのもいいかもです！

Vue.js入門

@_Masahiro_H_さんが作成された記事で、初心者でも分かりやすく習得できるようになっています。
全7部構成で、Vue.jsの記述形式から算出プロパティ、ウォッチャまで抑えています。
HTMLがレンダリングされた後に、Vueインスタンスが生成されて画面に反省されるまでタイムラグが生じるなど、実例を交えて説明されているので、Vueの仕組みも理解できると思います。

Vue.jsコンポーネント入門

こちらも@_Masahiro_H_さんが作成された記事で、コンポーネントについて説明されています。
Vue.jsを学ぶ上で欠かせないコンポーネント設計ですが、馴染みがない方には少し難しい内容かと思います。
@_Masahiro_H_さんのご経験から分かりやすく説明されているので、詰まっている方は読んでみても良いかもです！

また、親子コンポーネント間のデータの受け渡しに必要なpropsと$emitの説明、slotやライフサイクルフックなど説明されており、Vue.jsの基礎としては先述した「Vue.js入門」と合わせて学習すると、一通り技術は身に付くと思います！

Vue.js入門 ―最速で作るシンプルなWebアプリケーション

Vue.jsをプログレッシブフレームワークやリアクティブシステムなど仕組みをコンパクトに説明しています。
また、基礎文法、コンポーネント開発、SPA、単一コンポーネントファイルなど、基本的な箇所をサンプルコードをもとに説明しています。
この内容を本にしたら200ページくらいになりそうなところを、サイトにすると結構少ない量でまとめています。
少ない量なので少し説明が簡略化されているとことがあるかもですが、一通りVue.jsをやられた方には体系的に復習できるのではないかと思います。

【Vue.js】 コンポーネント間の通信について解説

親子、兄弟のコンポーネント間のデータのやりとりの説明をしています。
ワイ自身、propsと$emitを理解するのに時間がかかりましたが、こちらのサイトでサンプルコードを書いて試しながらやると理解が深まりました。
図を用いてどうやって処理が実行されるのか？もイメージしやすかったので、詰まってる方にはオススメです！

Laravel × Vue.js × axiosでTODOリストを作るよ！

Vue.jsの使い方は分かってきたけど、実際のサーバーサイドとどうやって連携するか分からんわぁ。。って方にオススメ！
全4部構成でToDoリストを作りながら、フロント-サーバーサイド間の連携方法を学べるサイトです。
開発範囲もかなり小さいながら、axiosによる連携をどうやってやるか？どのようにデータをVueで表示するか？などを大事な部分を絞って説明されています。

サーバーサイドとの連携のコツも掴めると思うので、このサイトをやった後に自分のポートフォリオの作成でしっかりアウトプットすれば、それなりに力がつくかと！

書籍

お次は書籍っす！

基礎から学ぶ Vue.js

いわゆるネコ本、可愛いから買っちゃったww
やって見た感想ですが、少し説明が少ない部分があるので参考書というよりは辞書としてはいい本かなと思います。
ワイ個人の意見なので合う人には合う書籍かなと。(実際にこの本が非常に分かりやすかったという方も結構いらっしゃいます。)

相性がある本かなと思いますので、手にとって読んでみてから判断がいいかもですね。

ちなみにですがサポートページは有能です。
チュートリアルを一通りやるだけで、Vueの基礎は身に付くかと。

基礎から学ぶ Vue.js 書籍用サポートページ

これからはじめるVue.js実践入門

jsの聖書とワイが勝手に呼んでいる「JavaScript本格入門」の著者の山田さんが執筆されたVue.jsの書籍です。
範囲は、Vue.jsの基礎(ディレクティブ、ライフサイクルフック、コンポーネント間のやりとり)から、Vue CLI, Vuex, VueRouter, テストまで、この1冊でVueの基盤となる知識が全て網羅できると思います。
また巻末にGoogle APIを用いたポートフォリオをVuex, VueRouter, VueCLIを用いて作成する方法も載っていますので、これを通して基礎が身に付くと思います。

また、1章のイントロダクションでは、JavaScriptの歴史から、ajax,フレームワークとどんな流れで技術が発展していったかを説明しています。Vueのみならず、Reactなどのがなぜよく使われるようになっているのか？なども学べるので良いかと。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Vueを使ってSSR(サーバーサイドレンダリング)を実現するために必要なNuxtの参考書です。(Nuxt使わなくてもSSRできるみたいですが、、)
これは今勉強中で、現段階の感想ですが、Vuex,VueRouter,VueCLIの知識があると難なく読める感じかなといったところです。

Vue.jsのアウトプットをしっかりして、現場でも使うようになった時に、もう1段階スキルアップする際に活用してはいかがでしょうか？

最後に

はい！聖なる夜に走り書きしましたww

説明が少し雑になってしまってるかもなのでそこはご了承くださいwww

いろんなサイトを紹介しましたが、これを元にVueの勉強が捗れば幸いです。

また他にもいいサイトや書籍があればコメント欄にご記載いただけるとめっちゃ喜びます!!