category / Firebase

Firebase

【Firebase】最新メッセージが表示されるよう、ローディング後、一番下の画面まで移動する

前回は、画面に表示されている日付を、 SNS…

続きを読む
2022年03月11日1 分
Firebase

【Firebase】画面に表示されている日付を、 SNSのように〇〇時間前にする

前回は、Firestore Database に保存しているデータを基に、React でチャット画面を作成しました。 今回は、画面に表示されている日付を、 SNS のように〇〇時間前にします。 現在は、投稿した日付が表示されています。 こちらを、1 分未満なら『たった今』、…

続きを読む
2022年03月10日1 分
Firebase

【Firebase】Firestore Databaseに保存しているデータを基に、Reactでチャット画面を作成する

前回は、メッセージにプロフィール情報を追加し、Firestore Database に保存しました。 今回は、Firestore Database に保存しているデータを基に、React…

続きを読む
2022年03月09日2 分
Firebase

【Firebase】メッセージにプロフィール情報を追加し、Firestore Databaseに保存する

前回は、Firestore Database に保存しているプロフィール情報を更新しました。 今回は、メッセージにプロフィール情報を追加し、Firestore Database に保存します。 まずは、MEssageInput.tsx で useProfile.ts…

続きを読む
2022年03月08日1 分
Firebase

【Firebase】Firestore Databaseに保存しているプロフィール情報を更新する

前回は、プロフィール画面にデフォルトでユーザー情報を表示しました。 今回は、Firestore Database に保存しているプロフィール情報を更新します。 まずは、Firebase Database に保存している users のドキュメント ID…

続きを読む
2022年03月07日2 分
Firebase

【Firebase】プロフィール画面にデフォルトでユーザー情報を表示する

前回は、プロフィール画面で作成したユーザー情報を、Firestore Database に保存しました。 今回は、プロフィール画面にデフォルトでユーザー情報を表示します。 まずは、プロフィールのフックを作成するため、hooks フォルダに useProfile.ts…

続きを読む
2022年03月06日2 分
Firebase

【Firebase】プロフィール画面で作成したユーザー情報を、Firestore Databaseに保存する

前回は、プロフィール画面を作成し、Firestore Storage にアバター画像を保存しました。 今回は、プロフィール画面で作成したユーザー情報を、Firestore Database に保存します。 前回作成した、 handleSubmit の uploadBytes…

続きを読む
2022年03月05日3 分
Firebase

【Firebase】プロフィール編集画面を作成し、Firestore Storageにアバター画像を保存する

前回は、Firestore Database を使い、React でメッセージ送信機能を実装しました。 今回は、プロフィール編集画面を作成し、Firestore Storage…

続きを読む
2022年03月04日5 分
Firebase

【Firebase】Firestore Databaseを使い、Reactでメッセージ送信機能を実装する

前回は、Firebase Authentication の機能を使って、FIrestore Database からデータを取得し、ブラウザに表示させました。 今回は、Firestore Database を使い、React…

続きを読む
2022年03月03日3 分
Firebase

【Firebase】FIrestore Databaseから取得したデータを、ブラウザに表示させる

前回は、Firebase Authentication の機能を使って、パスワード再設定機能を実装しました。 今回は、Firestore Database からデータを取得し、ブラウザに表示させます。 まずは、Firebase の Firestore Database…

続きを読む
2022年03月02日3 分
Firebase

【Firebase】Reactでパスワード再設定機能を実装する

前回は、Firebase Authentication の機能を使って、ユーザーが認証されていない場合、ログイン画面へ遷移しました。 今回は、パスワード再設定機能を実装します。 まずは、useAuth.ts…

続きを読む
2022年03月01日2 分
Firebase

【Firebase】ユーザーが認証されていない場合、ログイン画面へ遷移する方法

前回は、Firebase Authentication の機能を使って、React…

続きを読む
2022年02月28日1 分
Firebase

【Firebase】Firebase Authenticationの機能を使って、Reactでログアウト機能を実装する

前回は、Firebase Authentication の機能を使って、React でログイン機能を実装しました。 今回は、React でログアウト機能を実装します。 まずは、Home.tsx にヘッダーを作成し、ログアウトボタンを作成します。 テンプレートは、 MUI…

続きを読む
2022年02月27日1 分
Firebase

【Firebase】Firebase Authentication の機能を使って、Reactでログイン機能を実装する

前回は、Firebase Authentication の機能を使って、React でユーザー登録機能を実装しました。 今回は、React でログイン機能を実装します。 まずは、pages フォルダに、Home.tsx と Login.tsx を作成します。 Login.tsx…

続きを読む
2022年02月26日3 分
Firebase

【Firebase】Authenticationを使って、Reactでユーザー登録機能を実装する

前回は、Firebase Authentication の機能を使って、React でユーザー登録機能を実装します。 まずは、以前ご紹介した内容に沿って、Firebase を設定します。 ターミナルで npm install --save firebase…

続きを読む
2022年02月25日3 分
Firebase

【Firebase】Firebase Functionsをローカル環境サーバーで試す

前回は、Firebase Functions を使用し、Hello World 関数を作成しました。 今回は、Firebase Database からデータを取得する関数を Firebase Functions…

続きを読む
2022年02月21日1 分
Firebase

【Firebase】Firebase Functionsを使用する

前回は、作成したプロジェクトを FIrebase Hosting へデプロイしました。 今回は、Firebase Functions を使用します。 まずは、Firebase へアクセスし、プロジェクトの Functions を選択します。 Functions…

続きを読む
2022年02月20日3 分
Firebase

【Firebase】作成したプロジェクトをFirebase Hostingへデプロイする

前回は、Firebase の Storage に保存している画像を削除しました。 今回は、作成したプロジェクトを FIrebase Hosting へデプロイします。 まずは、React のプロジェクトのターミナルディレクトリで npm run build…

続きを読む
2022年02月19日2 分
Firebase

【Firebase】Firebase Storageの画像を削除する

前回は、ブラウザで送信した画像を、Firebase の Storage に保存しました。 今回は、Firebase Storage に保存している画像を削除します。 まずは、削除ボタンを作成します。 先日作成した、firebaseApp の firestorage…

続きを読む
2022年02月18日1 分
Firebase

【Firebase】ブラウザで送信した画像を、FirebaseのStorageに保存する

前回は、Firebase の Storage で保存した画像を画像をブラウザに表示しました。 今回は、ブラウザで送信した画像を、Firebase の Storage に保存します。 まずは、フォームを作成します。 画像を状態管理するために、 useState…

続きを読む
2022年02月17日2 分
Firebase

【Firebase】Storageで保存した画像をブラウザに表示する

前回は、Authentication で、パスワードの再設定ができるようにしました。 今回は、Firebase の Storage で保存した画像を画像をブラウザに表示します。 まずは、Firebase のサイドバーにある Storage…

続きを読む
2022年02月16日3 分
Firebase

【Firebase】Authenticationで、パスワードリセットを実装する

前回は、Firestore Databese にルールを編集し、認証されてるユーザーのみ、Firebase を使えるようにしました。 今回は、Authentication で、パスワードの再設定ができるようにします。 まずは、useAuth.js…

続きを読む
2022年02月15日1 分
Firebase

【Firebase】認証されているユーザーのみ、Firebaseを使えるようにする

前回は、Authentication でログアウトしました。 今回は、Firestore Databese にルールを編集し、認証されてるユーザーのみ、Firebase を使えるようにします。 まずは、Firebase の Firestore Database…

続きを読む
2022年02月14日2 分
Firebase

【Firebase】Authenticationでログアウトする

前回は、Authentication でプロフィールを取得しました。 今回は、Authentication でログアウトします。 まずは、フックで useLogout を作成します。 ログアウト機能を実装するために、 signOut を使用します。 firebase/auth…

続きを読む
2022年02月13日1 分
Firebase

【Firebase】Authenticationでプロフィールを取得する

前回は、Authentication でログイン機能を実装しました。 今回は、Authentication でプロフィールを取得します。 認証情報を取得するには、 getAuth を使用します。 firebase/auth から getAuth…

続きを読む
2022年02月12日1 分
Firebase

【Firebase】Authenticationでログイン機能を実装する

前回は、認証機能を設定するために、Authentication でユーザー登録しました。 今回は、Authentication でログイン機能を実装します。 まずは、ログインのためのフックを作成します。 先日作成した、useAuth.js 内の useSignup…

続きを読む
2022年02月11日1 分
Firebase

【Firebase】Authenticationでユーザー登録する

前回は、ブラウザで Firestore Databese のデータを更新しました。 今回は、認証機能を設定するために、Authentication でユーザー登録します。 まずは、Firebase で Authentication を始めます。 Firebase…

続きを読む
2022年02月10日3 分
Firebase

【Firebase】ブラウザでFirestore Databeseのデータを更新する

前回は、ブラウザで Firestore Databese のデータを削除しました。 今回は、ブラウザで Firestore Databese のデータを更新します。 まずは、単一データを取得します。 状態管理は、 useState…

続きを読む
2022年02月09日1 分
Firebase

【Firebase】ブラウザでFirestore Databeseのデータを削除する

前々回は、ブラウザで送信したデータを、Firestore Databese に保存しました。 今回は、ブラウザで Firestore Databese のデータを削除します。 BooksGet.js の一覧に、削除ボタンを作成します。 削除するデータを指定するために、 id…

続きを読む
2022年02月08日1 分
Firebase

【Firebase】ブラウザで送信したデータを、Firestore Databeseに保存する

前回は、Firestore Databese のデータベースをリアルタイムで取得しました。 今回は、ブラウザで送信したデータを、Firestore Databese に保存します。 まずは、Books のデータを useState…

続きを読む
2022年02月07日2 分
Firebase

【Firebase】Firestore Databeseのデータを、リアルタイムで取得する

前回は、Firestore Databese の単一データを所得し、フロントエンドに表示しました。 今回は、Firestore Databese…

続きを読む
2022年02月06日3 分
Firebase

【Firebase】Firestore Databeseの単一データを取得し、フロントエンドに表示する

前回は、Firestore Databese のデータを、フロントエンドに表示しました。 今回は、Firestore Databese の単一データを所得し、フロントエンドに表示します。 単一データが取得できたかわかるように、Firestore Database…

続きを読む
2022年02月05日1 分
Firebase

【Firebase】Firestore Databeseのデータを、フロントエンドに表示する

前回は、Firestore Databese を作成しました。 今回は、Firestore Databese のデータを、フロントエンドに表示します。 まずは、アプリで Firestore を使用できるようにします。 先日作成した firebaseConfig.js…

続きを読む
2022年02月04日5 分
Firebase

【Firebase】Firestore Databeseを作成する

前回は、Firebase Project Config を設定しました。 今回は、Firestore Databese を作成します。 まずは、Firebase へアクセスし、作成したプロジェクトを選択します。 左メニューの Firestore Database…

続きを読む
2022年02月03日1 分
Firebase

【Firebase】Firebase Project Configを設定する

前回は、Firebase でプロジェクトを作成します。 今回は、Firebase Project Config を設定します。 まずは、前回作成した Firebase…

続きを読む
2022年02月02日1 分
Firebase

【Firebase】Firebaseプロジェクトを作成する

Firebase とは、Google が提供している、モバイルや Web アプリケーションを構築するプラットフォームです。 今回は、Firebase でプロジェクトを作成します。 まずは、 Firebase…

続きを読む
2022年02月01日1 分