はじめに
Nuxt.js×Vuetify×Firebaseでポケモン図鑑をSPA(Single Page Application)で開発していきます。
何回になるのかわかりませんが複数回に渡って実装の手引きを紹介します。
ポケモン図鑑の機能は以下の通りです。（多いぞ笑）
・ユーザー認証（登録・ログイン・ログアウト）
・約900匹のポケモン一覧表示
・約900匹それぞれの個人ページ
・ポケモンをお気に入りに追加する
・ポケモンを手持ちに加える
・ポケモンをタイプで絞り込む
・ポケモンを名前で検索する
・種族値をグラフ化する
・自分の手持ちをタイムラインに投稿する
・他の人の手持ちをタイムライン表示する
※機能追加も可能性としてあります。
この記事で学べること
・Vue.js, Nuxt.jsの基礎的な理解
・VuetifyによるUI設計
・Firebase Hosting によるSPAデプロイ
・Cloud Firestoreを用いたNoSQLデータベース設計
・Firebase Authenticationを用いたユーザー認証
・axiosを用いたAPI通信
・Node.js、fsモジュールによるJSON、オブジェクト操作の手法
・モダンJavaScriptによる検索機能実装
・canvasを用いたグラフ作成
この記事のターゲット
・JavaScriptがあまり書けないのにVue.jsに取り組んでいる人
・Routerや状態管理ライブラリの理解が疎い人
・Firebaseを全般的に使ってみたいと思う人
・Node.jsはnpmやyarnでしか知らない人
・ECサイトを制作したことがない人
注意点
＊私自身も初学者なので全てを鵜呑みにしないこと！