【Udemy 3選】これからVue.js、Nuxt.jsを学びたい方へ

# はじめに

この記事は
「**あなたの学びをシェア！2020年までにUdemyで学んだこと01【PR】Udemy Advent Calendar 2020**」
に向けて書きました。
9日目の記事となります。

私がVue.js、Nuxt.jsを学ぶ上で受講したUdemy講座3つをご紹介したいと思います。

その講座とは以下の3つとなります！

- [超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)](https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/16274936?start=0#overview)
- [Vue.js + Firebaseで作るシングルページアプリケーション](https://www.udemy.com/course/nuxtjs-the-complete-guide/)
- [Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで](https://www.udemy.com/course/nuxtjs-the-complete-guide/)


#【１】超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)


##概要

[超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)](https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/16274936?start=0#overview)

>Vue.jsを、基礎から、Vue CLI、Vue Router、Vuex、Firebaseを使った実践的な内容まで網羅的に学びますので、ぜひこの講座で学んでみてください。ReactやAngularエンジニアの方もぜひ！


####評価 【☆4.3】（2222件の評価）
####総時間 【17時間28分】
####学べること

- Vue.jsの基礎（環境構築から）
- JSfiddleを使った開発
- Vue-cliを使った開発
- テンプレート構文
- 主要ディレクティブ
- 双方向バインディング
- Vueインスタンス
- ライフサイクル
- 仮想DOM
- コンポーネント
- v-modelを使用したフォーム作成
- カスタムディレクティブ
- フィルター
- ミックスイン
- トランジション
- Vue-Router
- Vuex
- Netlifyを用いたデプロイ
- axios＆FirebaseでのHTTP通信(Firestore/Authentication)
- 掲示板アプリを作成しながら認証機能実装

## 最終成果物　 認証機能付き掲示板アプリ
###アカウント作成
![demo](https://gyazo.com/a8db691742583817304c77b070b6f337/raw) 
***
### ログイン、ログアウト
![demo](https://gyazo.com/54736a86b9c046438fa4d8bfc4c6660d/raw)
***
### 投稿
![demo](https://gyazo.com/fccbd890270d38e43686325628aa9d1f/raw)

##良かった点
- なんと言ってもそのボリューム
- 『他の教材は買わなくてOK』も過言ではない
- 細かく解説してくれる
- Vue.jsだけではなくFirebaseも学べる（REST APIを使用）　
- axiosを学べる
- Netlifyでデプロイができる
- 講師の方が本当にプログラミングが好きなんだなと感じる

##イマイチだった点
- 少し早口で2倍速にすると聞き取り辛い
- 欲を言えばREST APIではなくSDKで学びたかった

##こんな人にオススメ
- ガッツリじっくりVue.jsを学びたい！
- axiosを使いたい！
- Netlifyでデプロイしたい！













#【2】Vue.js + Firebaseで作るシングルページアプリケーション

##概要
[Vue.js + Firebaseで作るシングルページアプリケーション](https://www.udemy.com/course/nuxtjs-the-complete-guide/)

>Vue.jsを使用したモダンなフロントエンド開発を学ぼう

####評価 【☆4.1】（590件の評価)
####総時間 【5時間4分】


####学べること
- Vue.jsの基礎（環境構築から）
- JSfiddleを使った開発
- Vue-cliを使った開発
- テンプレート構文
- 主要ディレクティブ
- 双方向バインディング
- Vueインスタンス
- ライフサイクル
- コンポーネント
- Vue-Router
- Vuex
- Vuetify
- Firebase（Firestore/Authentication）
- グーグル認証
- Firebase SDK
- セキュリティルール
- Firebese Hostingを用いたデプロイ
- アドレス帳アプリの作成


##最終成果物 　アドレス帳アプリ
###グーグル認証
![スクリーンショット 2020-12-09 22.34.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/56188afe-1c73-51b0-88ee-a2b804b660e5.png)
***
###連絡先追加
![demo](https://gyazo.com/9acd627d5277c3446dc634777eb31a38/raw) 
***
###連絡先編集
![demo](https://gyazo.com/2181c73fa7d70183d693e08e4ab1f94c/raw) 
***
###連絡先削除
![demo](https://gyazo.com/022b3e9d86c5522abf6f3af493349fbe/raw) 


##良かった点
- Firebase SDKを使った実装を学べる
- Vue.jsとFirebaseの連携方法を学べる
- Firebaseに大きく焦点を当てている
- Vue.jsの基本もしっかり抑えられている
- アドレス帳アプリが本格的
- Vuetifyを学べる
- サクッと学べる

##イマイチだった点
- 解説が物足りなく感じる
- コース収録時のVuetifyのバージョンが古い為、最新版を使用すると動画と記述が異なる箇所が多々ある。
 - （適宜、掲載されている最新版用のソースコードを参照する必要がある）

##こんな人にオススメ
- とりあえずVue.jsの基礎をサクッと学びたい！
- Firebaseをガッツリ使った開発をしたい！





















#【3】Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで

##概要
[Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで](https://www.udemy.com/course/nuxtjs-the-complete-guide/)

>Nuxt JSを使用して効率よくVue.jsアプリケーションを構築しよう！Vue Routerを利用したルーティング設定、Vuexストアを使用した状態管理、非同期通信、アセットの取り扱いを学ぶ。カウンターアプリ、TODOアプリ開発に取り組む

####評価 【☆4.0】（522件の評価）
####総時間 【4時間9分】

####学べること
- Nuxt.jsの基礎（環境構築から）
- ページ遷移
- 静的ルーティング/動的ルーティング
- Vuex（クラシックモードとモジュールモード）
- axios
- firebase（Cloud Firestore）
- カウンターアプリ、Todoアプリの作成


##最終成果物 ToDoアプリ
###タスク追加
![demo](https://gyazo.com/c5a4854d3860a19c400dc21e40d07a7f/raw) 
***
###完了タスクの処理
![demo](https://gyazo.com/6ebb17f3566ebb330fc1794c7b82024f/raw) 
***
###完了タスクの削除
![demo](https://gyazo.com/7b49311b145208a4c5fa4eebd28c5e1a/raw) 

##良かった点
- 数少ないNuxt.js日本語教材
- 短い時間でNuxt.jsの基礎サクッとを学べる
- axiosを学べる
- 環境変数の設定方法を学べる
- Firestoreデータのソート方法を学べる
- 時刻フォーマットの整形方法を学べる


##イマイチだった点
- 少しボリューム不足
- middleware、Pluginsについてはサラッと触れる程度

##こんな人にオススメ
- とにかくNuxt.jsの0 →１を済ませたい！
- 日本語が良い！
- firebaseとの連携方法を知りたい！

##上記の講座を参考にした私のアウトプット記事
- [Vue.js、Firebase、axiosでパパッと掲示板！](https://qiita.com/higa08/items/7aa43e1579d9f12918bb)
- [【Vue.js】Firebase Hostingを使ったデプロイまでの流れ【Nuxt.js】](https://qiita.com/higa08/items/db710d8269f648d376c4)
- [【Nuxt.js】ルーティングとページ遷移について【まとめ】](https://qiita.com/higa08/items/25e273d8f6a0e6dbe589)
- [【Nuxt.js】Vuex クラシックモードとモジュールモードの書き方【コピペ用】](https://qiita.com/higa08/items/d864f3f97ed1b9de044e)
- [【Nuxt.js】「dotenv」を使った環境変数の設定方法](https://qiita.com/higa08/items/046aafca1969cfa4d607)
- [Nuxt.js、Firebase、axiosでパパッと掲示板！](https://qiita.com/higa08/items/b33fc013d26426dc042a)
- [Nuxt.js、Firestore、axiosでデータの投稿日時表示、ソート機能実装](https://qiita.com/higa08/items/56f0a0473bd45baefcc1)



#以上
ここまで見て頂きありがとうございました。
これからVue.js、Nuxt.jsを学習される方の少しでも参考になれば幸いです。