Vue.js入門者にオススメの教材6選(書籍と無料YouTube動画講座)

プログラミング

はじめに

最近ウェブアプリを作ったりしていて、先日はbEdit(ベディット)というウェブサービスを公開しました。今まであんまりしっかりとJavaScriptのフロントエンドを作ったことがなかったので、ウェブサービスという形にまとめるには色々勉強が必要でした。

フロントエンドを作成するための便利なフレームワークは色々ありますが、「何となく流行っているから」という理由で、bEdit(ベディット)でははVue.jsを使って作っています。ビーフはAngularReactもやったことがない人間なので、他と比べてどうこうということは語れませんが、初心者目線で特に役立ったと思った教材を紹介していきたいと思います。

bEdit(ベディット)の詳細については下の記事をご参照ください。

Vue.jsの基礎

書籍

公式サイトもいいんですが、最初に勉強するには取っ付き難かったので、まずはまとまった情報を得るために書籍を読み漁りました。分からない部分はそこそこの理解のままとりあえずそれぞれ電車の中で2周ずつくらいして、Vueの全体像を把握することができました。

速習Vue.js 速習シリーズ

kindle unlimitedで無料だったのでとりあえず読んでみました。サクッと読むにはちょうどいい文量です。有料で売ってる本と比べると内容的にはあっさりですが、Vueの基本的な仕組みであるデータバインディングやディレクティブをの使い方などを学ぶことができます。

Vue.js入門 基礎から実践アプリケーション開発まで

次にこちら。上の「速習〜」よりも体系的に学ぶことができます。Vuex/Vue RouterといったVueでちょっと大きめのアプリを作る際に使う標準ライブラリの説明、最近ちらほら名前を聞くAtmic Designによるコンポーネント設計などについても説明があり、網羅的に知識をつけることができます。

動画

Vue JS Crash Course - 2019

Traversy MediaというYouTubeチャネルの動画です。一からToDoリストアプリをVueで作っていく様子が全部見れます。英語も聞き取りやすい速度ですが、コードが全部見れるので仮に聞き取れなくてもVueの基礎的な知識があればついていけると思います。ビーフは書籍で理解した気になっていても、実際にモノを作るときに手が止まってしまうタイプなんですが、この動画のおかげでVueの各機能の具体的な使い方のイメージを掴むことができました。

Vue JS Crash Course - 2019

Vuex Crash Course | State Management

同じ人の動画です。こちらの動画はVue標準の状態遷移ライブラリVuexの使い方に焦点を当てています。

Vuex Crash Course | State Management

Vue.jsの周辺知識

Vuetify

VuetifyはGoogleの提唱するマテリアルデザインをVue.jsで使いやすくしたCSSフレームワークです。ちょっとした手間でカッコいいUIを作るのに便利です。

Vuetify Tutorial

The Net NinjaというYouTubeチャネルのシリーズです。プロジェクト管理ソフトを作りながらVuetifyの使い方を解説していきます。一本一本は短いですが、全32本の動画はボリュームたっぷりです。Vuetifyだけでなく、FirebaseのFirestoreを使ったログイン/データ保存までやりますので実践的な内容が学べます。Vueの基礎は分かっている前提で話が進むので注意が必要ですが、まぁ大体の部分が分かっていれば何とかなると思います。

Vuetify Tutorial #1 - What is Vuetify?

PWA

細かい話になりますが、VueでPWAを導入する際にちょっと苦戦した時に助けられた動画を最後に紹介します。またまたTraversy Mediaさんの動画です。VueとIonicを使ったPWAアプリの使い方を解説した動画です。Ionicの部分は必要なかったので丸っと飛ばしてみましたが、PWAの設定ファイルの置き場所や書き方は非常に参考になりました。Ionicもいつか使いたいですね。

Build a PWA With Vue & Ionic 4

おわりに

この記事ではVue.js初心者にオススメの教材を6つ紹介しました。ビーフはこれまであまりフロントエンドに縁の無い人間でしたが、これらの教材のおかげでなんとかそれっぽいものを作ることができました。まだまだ勉強しないといけないことはたくさんあると思いますが、最初の取っ掛かりの部分を理解していくには非常に参考になる教材だと思いますので、良ければ是非ご活用ください。

コメント