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

そのように考える方には、私はオンライン学習サービス「Udemy」の講座の１つである【最短・最速で学ぶ Firebase Hosting + Vue Todoアプリ実装】の学習を勧めます。

Udemy

上記Udemyのサイトに登録して、検索すれば出てきます。

私がこの講座を勧めるポイントは３つあります。

実際に受講して、私は以下の成果物を製作しました。
（講座で紹介するものと全く同じものです）

https://vue-firebase-hosting-18f1a.web.app/

結論として、この講座を受講することで得られるものは以下の３つです。

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

最短・最速で学ぶ Firebase Hosting + Vue Todoアプリ実装

Udemyの講座【最短・最速で学ぶ Firebase Hosting + Vue Todoアプリ実装】は、Googleが提供しているプラットフォームであるFirebaseを用いて、Vueアプリをデプロイして公開することをゴールとした講座です。

Vue.jsとFirebaseについて、環境設定からTo Doリストの製作・公開までわかりやすく解説しています。

それらの内容が無料で受講できるため、これからVue.jsとFirebaseの学習を考えている方にはお勧めの講座です。

唯一デメリットを挙げるとすれば、Vue.jsとFirebaseの詳細な機能説明といった深い部分までは触れていません。

そのため、Vue.jsとFirebaseの基礎知識がある方に対する有益性は低いかもしれません。

これから学習を始める初心者向けのコースとなります。

講座内容のポイント

受講時間の目安

講座全体の視聴時間は46分です。

動画を視聴するのみであれば、1時間あれば受講完了します。

ただ、この講座のゴールは「To Doリストを公開すること」です。

実際に自分の手を動かして公開するまでの作業時間が気になる方もいるので、参考までに私の作業時間を記載します。

私が講座を受講して、To Doリスト公開までにかかった時間は約6時間です。

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

環境設定やコーディング作業、公開設定については動画のとおり作業していくだけです。

そのため、順調に進めば3時間程度でTo Doリスト公開できる方もいるかもしれません。

しかし、初心者の方はまず間違いなくエラーが発生すると思います。

エラーの一番大きな理由は、動画で紹介される「ESLint」というVScodeのプラグインを導入することにあります。

この「ESLint」はJavaScriptなどの静的解析ツールです。

このツールを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができます。

私のザックリした理解でいえば、「ESLint」はコーディングの書式を定型化することで、誰が書いても一貫したコードにするものです。

そのため、定型文から外れたコードを書いたりすると、「ESLint」から「ここのコードは定型文ではないですよ！」とビシバシとエラーの指摘を受けます。

このエラーの修正作業にほぼ3時間かけたといっても過言ではありません。

講座で使用する主なVue.jsの機能

講座で使用しているVue.jsの機能として、主に以下のものがあります。

講座の方でそれぞれの機能について、深く説明しているわけではありません。

しかし、実際にTo Doリストを製作する上で、何となくこういう役割をしているというのは掴めると思います。

私はこの講座を受講した後に、それぞれの機能について調べることで、より理解が深まりました。

事前に覚えておくと役立つ機能

講座を受ける際に、VScodeの自動整形機能は絶対に覚えておいた方が良いです。

「ESLint」のエラーの指摘も、自動整形機能を使うことで解消されることがあり、この機能を使いこなすだけで、私の作業時間は1～2時間は減らせたと思います。

自動整形のやり方ですが、MacとWindowsでショートカットキーが異なります。

・Mac：[Shift] + [option] + [F]
・Windows：[Shift] + [Alt] + [F]

また、「ESLint」のエラーが治せなくて困ったときは、[–fix]コマンドについて調べてみると良いでしょう。

私は使用しなかったため、詳細はネットで調べることを推奨しますが、自動で良い感じに治してくれる機能らしいです。

これらは、この講座以外でも使える便利な機能ですので、ぜひ覚えておきましょう。

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

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

コマンドラインの問題

Vueアプリを作成する上で、以下のコマンドを実行する際、コマンドラインによってはエラーが出ることがあります。

[vue init webpack firebase-vue-todo]

私の場合は、WindowsのPowerShellでエラーが発生しました。
どうやらFirebase関連のコマンドはPowerShellでは実行できない設定になっていたようです。

PowerShellの設定を変更すれば解決する方法はあるかもしれません。

ただ、私の場合はコマンドプロンプトを使うことで対応しました。

改行スタイル

コーディング作業で、以下のエラーが発生し、暫くエラー修正方法をネットで調べました。

[error Expected linebreaks to be ‘LF’ but found ‘CRLF’]
[Expected linebreaks to be ‘CRLF’ but found ‘LF’]

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

[エラー ラインブレークが ‘LF’ であることを期待したが、’CRLF’ が見つかった]
[ラインブレイクは’CRLF’と予想していたが、’LF’を発見]

という意味になります。

簡単にいえば、改行スタイルに関して、「ESLint」から指摘を受けたということになります。

私の場合、[.eslintrc.js]ファイルに以下のコマンドを追加して対処しました。

rules:{
  "linebreak-style": 0
}

不要なスペース

不要なスペースがあると、以下のようなエラーが発生します。

[Expected indentation of 0 spaces but found 2]

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

[0スペースのインデントを期待しましたが、2つのスペースが見つかりました。]

という意味になります。

指摘された行の不要なスペースを削除することで対処しました。

末尾の改行

おそらく「ESLint」特有のエラーとして、以下のエラーがあります。

[Newline required at end of file but not found]

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

[ファイルの最後に改行が必要ですが、見つかりませんでした。]

という意味になります。

これは最後の行を改行することで解決します。

なぜ改行した方が良いのか？までは調べていませんが、最後の行は改行する方が無難でしょう。

ファイルの指定ミス

コーディングの単純な記載ミスとして、以下のエラーがあります。

[‘Index’ is defined but never used、’HelloWorld’ is not defined]

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

[Index’は定義されているが使われていない、’HelloWorld’は定義されていない。]

という意味になります。

これは、Routerの設定で[Index.vue]ファイルを指定するはずが、以下のように[HelloWorld.vue]と間違えて記載していたことが原因です。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: HelloWorld,
    },
  ],
});

インデントにTabキーを使用

コードの整形はこの時は手動でやっており、インデントにTabキーを使用していたら、以下のエラーが発生しました。

[Unexpected tab character]

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

[予期しないタブ文字]

という意味になります。

このエラーの解決方法を調べる中で、自動整形のやり方に辿り着きました。

他のエラーについても自動整形コマンドで解決する可能性があります。

コンソール出力

「ESLint」があると、console.logでコンソール出力しようとするとエラーが発生します。

コンソール出力はなくすべきというルールになっているようです。

私の場合、コンソール出力をさせたかったため、[.eslintrc.js]ファイルに以下のコマンドを追加して対処しました。

rules: {
  "no-console": "off",
｝

講座の感想

実際に受講して講座を終えた感想としては、エラーの対処に苦労しましたが、その苦労も含めて楽しめる講座でした。

To Doリストという実際に成果物を作るコースは、成果物が出来たという達成感を味わうことができます。

また、Firebaseで公開するため、知り合いにURLを送って成果物の報告もできるため、モチベーションにも繋がります。

ただし、この講座を受講したから、Vue.jsとFirebaseを用いて他のアプリを作れるようになるかというと、そこはまだ難しいと考えます。

この講座ではVue.jsとFirebaseの全ての機能を説明しているわけではなく、講座の知識を他のアプリ製作に応用できないケースは多いと思います。

それを踏まえた上で、これからVue.jsとFirebaseの学習を始める初心者の方には、非常にお勧めするコースです。

この講座以外にも、Udemyではプログラミング学習にお勧めのコースが沢山あります。

興味のある方は以下のUdemyのサイトから調べて受講を検討してみてください。