「Nuxt.jsとFirebaseについて学びたい！」

そのように考えた私がオンライン学習サービス「Udemy」で見つけたのが、【Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで】です。

この記事では、実際に講座の受講を終えた私の、講座内容に対するレビューを載せています。

まず、私がこの講座を受講した理由は以下のとおりです。

講座の良い点（GOOD）・悪い点（BAD）は以下のとおりです。

良い点

・短時間でNuxt.jsの基礎が学べる
・ToDoリストという成果物ができるため、達成感がある

悪い点

・初心者向けの丁寧な説明ではない（要点のみの説明で、詳しい説明は公式参照などで省かれている）
・セクション毎に新規プロジェクトを作成する形式の説明のため、講座どおりに進めるとプロジェクト管理が大変
・FirebaseはToDoリストに関する説明のみで、Firebaseの詳しい使い方は学べない
・Nuxt.jsに対する深い知識が得られない

結論として、私の講座に対する感想は以下のとおりです。

短時間でNuxt.jsの基礎は学べるが、それ以外に学べる点は少ない

★１～５で評価するのであれば、私の評価は★３といったところです。
勉強する価値はありますが、他人にお勧めできるレベルではないという感想です。

Vue.jsの基礎を学習し、Nuxt.jsについて簡単に触れてみたいという方には良い教材だと思います。

しかし、Nuxt.jsに対して深く理解したいと考えている方や、Firebaseに対する理解を深めたいという方には少々期待外れの教材になる可能性があります。

詳細について、以下で解説します。

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

講座内容のポイント

この講座では、Nuxt.jsを使用してカウンターアプリやToDoリストを作成することができます。

講座を受講により、私がスキルアップした項目として、以下が挙げられます。

上記のNuxt.jsに関する基礎知識を短時間で学べるという点では、受講する価値があります。

しかし、Nuxt.jsの基礎を既に理解されている方などには受講はお勧めしません。

この点は講座のイントロダクションでターゲット受講生とお勧めしない方に関する説明がされており、講座購入前に改めて確認した方が良いです。

Vue.jsを学習済みでこれからNuxt.jsに関して学びたいという、ニッチな層を対象にした講座といえます。

なお、講座はVue.jsの知識があることを前提とした説明のため、Vue.jsを学習せずに受講することはお勧めしません。

受講時間の目安

講座全体の視聴時間は4時間10分程度です。

実際に自分の手を動かして、成果物製作までにかけた作業時間は14時間程度でした。

Udemyの講座の中では短い方と考えるため、長時間の受講が苦手な方向けの内容です。

所要時間のザックリした内訳を記載すると、以下のような配分になります。

Vue.jsの基礎知識があれば、基本的に詰まることは少ない内容です。

ただし、私は一点だけ、ToDoリスト製作時に「lodash」の読み込みができず、エラー対応に時間がかかりました。

講座のレビュー

講座で満足した点

私がこの講座で得た知識で、一番価値を感じたものを挙げるとすれば、

「Nuxt.jsを利用することで、Vue Routerによるルーティング設定作業が大幅に簡略化できる」

ということです。

Vue.jsでVue Routerの使い方を学んだ方には、Nuxt.jsによるルーティング自動設定の凄さがわかると思います。

このルーティング設定簡略化の利点から、今後はNuxt.jsを活用していこうと私は考えました。

Vuexストアによる状態管理については、Udemyの他のVue.jsの講座で学んだ内容もあり、Vue.jsとNuxt.jsのどちらの内容か区分けが難しい点はありました。

ただ、ストアのクラシックモードとモジュールモードに関する知識は、他で学んでなかったため勉強になりました。

あとは、この講座ではバージョン管理には非常に気を遣って説明していると感じました。

npmパッケージをインストールする時は必ずバージョン指定しており、バージョンが更新された際に生じる講座内容の不整合を可能な限り無くす努力をされていた点は好評です。

Package.jsonの説明でもバージョンに関する説明があり、バージョン管理には気を付けようと認識を改めるきっかけになりました。

また、FirebaseのドキュメントIDが数字の連番ではない点およびlodashの設定方法などの細かい知識を習得できました。

これらの知識は、FirebaseやNuxt.jsの公式ドキュメントを調べればわかる内容とは思います。

ただ、公式ドキュメントを見ただけでは理解し難い内容を、講座で学習することで理解しやすい利点はありました。

講座で不満な点

講座のイントロダクションにて、受講をお勧めしない方の中に、「Nuxt.jsの設計思想や、Nuxt.jsの内部的な実装について探求したい」方が挙げられています。

私はそこまでNuxt.jsに関する深い知識を得ることを目的とはしていませんでした。

しかし、この講座は端的にいえば「Nuxt.jsを利用したアプリの作り方と動作説明」という内容でした。

実際にアプリを作ることで、確かにNuxt.jsの基礎は学べるのですが、具体的にNuxt.jsではどんなことができるのかを明確には説明していません。

この講座で一番不満な点を挙げるとすれば、「Nuxt.jsの機能を明確に理解できなかった」ということです。

ルーティング設定が簡略化できる利点は講座の中で理解できましたが、他にVue.jsと比べてどのような違いがあるのかは理解できませんでした。

この辺りの理解は設計思想や内部的な実装の範疇になるかもしれませんが、その点は期待外れという内容になります。

また、この講座は基本的に要点を絞った簡潔な説明のみしており、「詳細な説明は公式ドキュメントを参照してください」という内容になります。

必要な部分の知識が得られれば良い方には問題無いですが、周辺知識も含めて理解を深めたい方には少々不親切な内容になります。

せめて公式ドキュメントではどのような説明をしているか多少触れる程度の説明が欲しいと感じました。

初心者がこの講座を受けた場合、講座のとおり進めれば成果物は製作できますが、各コードの意味についてはあまり理解してないという状態になると思います。

あとは、講座の中身に関する評価とは多少異なりますが、各セクション毎に新規プロジェクトを作成している点は不評です。

受講する側は講座を終えた後、それぞれのプロジェクトを管理する必要があります。

講座終了後に削除すれば良いという話ではありますが、それならば各セクション毎にプロジェクトを作成せず、１つのプロジェクトでまとめてほしいという感想です。

その方がプロジェクトの削除の容易であり、受講生の立場を考えた構成にはなっていないと感じました。

私の受講時のエラー事例紹介

私はこの講座で、エラー修正作業に約1時間費やしましたが、どのようなエラーがあったか参考までに紹介します。

Nuxt.jsでＷebpackプラグイン追加後、lodashライブラリが使えない

講座のToDoリスト製作時に、下記のエラーが発生し、対応に時間を取られました。

[TypeError: Cannot read property ‘sortBy’ of undefined]

翻訳ソフトを使って翻訳すると、

[未定義のプロパティ ‘sortBy’ が読み込めない]

という意味になります。

つまり、lodashが正しく読み込めていない状態です。

原因は、講座で作成したstoreフォルダのtodos.jsファイルのコードにありました。

import firebase from '~/plugins/firebase'
import { firestoreAction } from 'vuexfire'
import { _ } from 'core-js'

上記のtodos.jsファイルのコードの最後の「import { _ } from ‘core-js’」がlodashを読み込めない原因であり、この記載を削除することで正しく動作しました。

動画内で上記のコードを記載する説明はなかったため、エディタの補完機能によって記載されていたものと思われます。

私の場合、エディタはVScodeで、プラグインとしてVeturなどを導入しています。

そのような環境の方は、講座を進める中でエディタの補完機能により、勝手に上記コードが入力されている可能性があります。

講座の感想

冒頭でも述べたとおり、短時間でNuxt.jsの基礎は学べます。

Vue.jsを学習済みで、これからNuxt.jsを学習するための初めの教材として学ぶ価値はあります。

ただし、Nuxt.jsについて深く理解したい方にはお勧めできない教材という感想です。

Firebaseに関してもそこまで深い知識は得られません。

上記の説明を読まれた後で、講座を学びたいという方は下記リンクより受講可能です。

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