全てのコンテンツ

React

【React】date-fnsを使って、◯分前や◯時間前を表示する方法

SNS の時刻表示でよくある、React で ◯ 分前や ◯ 時間前を画面に表示したい時、どうすればいいでしょうか。 Node.js のライブラリである、date-fns を使って簡単に表示することができます。 まずは、ターミナルでプロジェクトのディレクトリに移動し、 npm…

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

【React】React Router DOM v6で画面遷移する方法

React Router DOM を使うと、React で簡単に画面遷移することができます。 まずは、ターミナルでプロジェクトのディレクトリに移動し、 npm install --save react-router-dom を実行します。 現在のバージョンは、6.2.…

続きを読む
2022年02月22日1 分
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 分