今回作ったもの デザインはMUIのテンプレお借りしました。Tyvm 9+ Free React Templates - Material UI もちろん、会員登録ページなどにもお使いいただけます。 指定したバリデーションに引っかかるとこんな感じになります。 今回はvalidationライブラリを使…

前回の記事の続きです。 今回はページネーションについてのお話になります！ www.youtube.com ※この記事で使われている全ての画像はこの動画の切り抜きになります 後に続く動画、 ・8:トランザクションについて ・9:オフラインサポートについて ・10:リアル…

FirestoreのDB設計の仕方、セキュリティルールなどを学習したので 実際に作りたいアプリのDB設計を考えていきます！ 作りたいサイト 英語圏の人に向けて、日本語の俗語、 特にサブカルチャーから作られた俗語に焦点を当てた 辞書サイトを作りたいです。 サブ…

前回の記事の続きです。 今回はセキュリティルールについてのお話です！！ www.youtube.com ※この記事で使われている全ての画像はこの動画内から切り抜いたものです。 セキュリティルールについて もし、あなたがクライエントにDBへ接続するための アクセス…

前回の続きです！ 前回の動画ではデータ構造の心構えや、Map、Array、サブコレクションの違いを見ていきました。 今回は「どのようにデータを構造すればよいか」についてのお話です。 www.youtube.com ※この記事で使われている全ての画像はこの動画内から切…

前回の記事の続きです。 今回はマップ、配列、サブコレクションについてのお話です。 早速みていきましょう！！ www.youtube.com ※この記事で使われている全ての画像はこの動画内から切り抜いたものです。 はじめに マップ、配列、サブコレクションの違いに…

前回の記事の続きです。12まであるのでサクッと終わらせたいところですが こうして文字に起こしてると結構な時間がかかりますね。 今回の記事はFirestoreの料金についての動画のまとめになります。 www.youtube.com ※この記事で使われている全ての画像はこの…

前回の記事の続きになります。 www.youtube.com ※この記事で使われている全ての画像はこの動画内から切り抜いたものです。 今回の動画では、 「クエリがどのように働くのか」 について詳しく説明してくれています。 では早速見ていきましょう！ DBからデータ…

こちらの記事は公式のColud Firestoreの動画を見たただのまとめになります。 この動画は4年前のものにはなりますが、 現在作っているアプリでFirebaseのDBを使いたいと思っているので勉強してみました！ 気付かずずっと英語で見てましたがこの動画のみ日本語…

前回、前々回とFirebase Authenticationの 記事を書きましたが今回はFirebaseのDBを触っていきたいと思います。 FirebaseでDBを扱うためのサービスは2種類あります。 - Cloud Firestore Cloud Firestore は、Firebase のモバイルアプリ開発用の最新データベ…

前回の記事でFirebaseを使ってEmail/Password認証を作りました。 今回はFirebaseでGoogle認証とTwitter認証を作っていきたいと思います。 導入の部分だったり、コードは前回のものに継ぎ足して 実装していっているので前回の記事もぜひ参考にしてください。 …

以前Laravel Sanctumを使ってAPI認証を作成した時から ずっと気になっていたFirebase、やっと触ることができました嬉しいです！ 今回はFirebaseについて勉強したのでその中からReactを使った Firebaseによる認証のやり方をまとめていきたいと思います。 今回…

1つの要素を選択する3つの方法 getBy～ 要素がある場合→一致するノードを返す。 要素がない場合→エラーをthrowする。 findBy～ 要素がある場合: 一致するノードのPromiseを返す。 要素がない場合、1000ms以内に見つからな場合: 拒否される。 getByとwaitFor…

Vue.jsとLaravelで作ったプロジェクトをAWSのEC2を使って公開していたのですが、 ある時アクセスしてみると504 Gateway-timeoutエラーで表示できなくなっていました。 AWSにログインしてインスタンスを確認してみると該当のインスタンスは システム/インスタ…