【Next.js+Firebase】
自身の勉強過程を無理やり作品にしていくVol.1：FIrebase機能編
目次
どうも！こんにちは！
今回からはNext.js + Firebaseでいろいろ勉強したので、それのアウトプット記事を連載していこうと思っています。
完成したアプリは自己紹介ページの「ギャラリー」に掲載しているので、よかったら見てみてください！
Vol.1ということもあるのでまずは、FIrebaseのどのような機能を使用したのか？を書いていきたいと思います。
この連載記事では、
- Firebaseのアカウント作成・取得
- Next.jsの環境構築
は割愛します。
検索すると分かりやすい記事がたくさんあるのと、Next.js環境構築は私も公式サイトで進めたためです。
参考までに以下もわかりやすいです。
[Firebase初学者向け] Firebaseのはじめかた – 新規で「プロジェクトA」を作ってみよう
Next.js 公式サイト
今回完成したもの
今回作成したアプリの名前ですが、命名はそのまま「Next.jsアプリ」です！
Reactを使用したことがなかったので勉強のためにReactを使ってみたかったことと、
Reactフレームワークとして人気があるNext.jsを選択してみました。
んで、バックエンドとの連携も行ってみたく、
でもバックエンドのことは何も分からないので、BaaS（Backend as a Service）を使うことにしました。
勉強用なので手軽にできてマニュアルや検索でヒットしやすいもので、調べてみるとFIrebaseが出てきたのでBaaSはFirebaseを選択しました。
ただ、今検索するとsupabaseというのも大分流行っているっぽいので、supabaseで再度構築してみても勉強になりそうだなと思いました。
まぁ時間があればやってみよーという感じですね。
Firebaseで使用した機能
今回Firebaseで使用した機能と、どのようなことをやったのかを簡単に説明します。
Firebase Authentication
今回作成したアプリはGoogleアカウントでログインしないと、見れないものになっています。
そのGoogleアカウントログインのために、Firebase Authenticationという機能を使っています。
Firebase Authenticationを使うとGoogleアカウントの他に、
- yahoo
- GitHub
などのアカウントでもログインできるようになります。
私の場合はGoogleだけですが、今後yahoo、GitHubのログイン機能も増やしていこうと思っています。
Cloud FirestoreとFirebase Realtime Database
使い分けというのがいまいち分かっていないのですが、どちらもNoSQLなデータベースです。
調べて見ると、データをもたせる階層構造が大きな違いという感じです。
Firebase Realtime DatabaseとFirestoreを使い分けていこうなという話
Cloud Firestoreは、
- コレクション
- ドキュメント
- データ
という構造で、コレクションの中にドキュメントがあり、ドキュメントの中にデータがあるという構造です。
一方Firebase Realtime Databaseは、rootというルートディレクトリからjsonデータを格納しているようなイメージです。
今回はこの2つのデータベースを使用して、「よくあるTODOリスト」、「チャットアプリ」の2つを作成してみました。
チャットアプリの方は少し改修しないといけないですが、すでに入力された名前を入れるとチャットルームに移動できないので、使用するなら長めの名前で使ってみてください。笑
Cloud Storage for Firebase
最後にCloud Storage for Firebaseという、ストレージ機能を使用した「画像アップロードアプリ」を作成しました。
- 画像のアップロード
- アップロードした画像の参照
- アップロードした画像の削除
というのができるようにしています。
画像の参照はCloud Storage for Firebaseからデータを取りに行かないといけないので、表示に少し時間がかかりますが、お待ちいただけると表示されます。
次回からは？
次回からはこのNext.jsアプリを作っていく上で、
- 苦労したこと
- 気づいたこと
- 学んだこと
を連載していこうと思います。
それでは次回もよろしく〜
