最近初めて Firebase + Nuxt.js を使ったプロジェクトにアサインしたのですが、
あまりにもちんぷんかんぷん。。。
勉強しなきゃ...と思っていたら最高のタイミングでUdemyのクリスマスセールが始まったので
ここぞとばかりに色々な講座をまとめ買いしました✌️
まずは Vue.js の勉強から！
参考にした講座 → Vue.js + Firebaseで作るシングルページアプリケーション
作ったもの
メモ帳です。
講座ではアドレス帳アプリが作成できますが、少し変えてみました。
- Googleアカウントでログインをすると使えるようになります。
- メモを追加する日の日付が自動で反映されます。
- 追加・編集・削除ができます。講座では物理削除だったのを論理削除に変えています。
- 左上のハンバーガーメニューでログインしているGoogleアカウントの確認と、機能一覧が見れます(まだメモ帳しかありません...)。
こちらから実際に触れます → my-memo
Githubはこちら → 福井のGithub
使用したライブラリやツールなど
Vue CLI
- コマンドラインでVue.jsの開発環境をセットアップするためのツール
- Vue.jsの開発に必要なツール類を質問に答えるだけでまとめてインストールしてくれるので簡単にVue.jsの環境を構築することができる
Vuex
- Vue.js上のコンポーネント間のデータ(状態)を管理するためのライブラリ
Vue Router
- Webページのルーティングを実装してくれる公式のライブラリ
- SPAが構築できる
Vuetify
- Vue.jsで使用できるマテリアルデザインのUIフレームワーク
勉強したこと
- Vue.jsの基礎(構文など)
- ライフサイクルについて
- コンポーネントについて
- Vue CLIによる環境構築の方法
- Vue Routerの設定方法
- Vuetifyの設定方法と構文
- Vuexによる状態管理の方法
- Firebaseの導入方法
- Authenticationを使用したGoogleアカウント認証機能
- Cloud Firestoreを使用したデータベースの機能
- Hostingを使用したアプリケーションの公開
これからやりたいこと
- その日のタスクを忘れがちなのでTodoリストも追加したい！
- Nuxt.jsの勉強 & アウトプットもしたい！
以上...！
これで終わりではなく、Todoリストなども作成したり、使いやすいサイトにどんどん改修していけたらと思ってます。
Vue.js、Firebase以外にも勉強したいことがたくさんありすぎるので、
コツコツ積み上げ頑張りますm(_ _)m