masalibの日記

システム開発、運用と猫の写真ブログです

React Firebase入門 Firestoreのデータ取得の補足

masalib.hatenablog.com の補足記事になります データ取得を色々試してみた結果になります。 whereとorderbyの関係について whereとorderbyのカラムが違う場合 単一のカラムに複数の条件をいれる場合 whereが複数になった場合 レコード件数のみ取得 offset(…

React Firebase入門 Firestoreの基礎(CRUD処理)

FirebaseのFireStoreの機能を使ってみました。一覧、作成、更新、削除の一通りの処理ができた。色々やってみた結果、一覧の機能がしょぼい。この機能が改善されない限り、オススメできない

React Firebase入門 アバター変更:画像切り抜き

アバターの画像は基本的には正方形です。画像をアップする時に画像を切り抜きする機能を追加しました React Firebase入門シリーズ 1-1・ React Firebase入門 初期設定とsignup - masalibの日記 1-2・ 「react-hook-form」を入れてみた - masalibの日記 1-3・…

React Firebase入門 アバター変更:基礎

アバターを登録できるようにします。このアバターがないとChatアプリを作った時に悲しいことになりますwww。システム的には必須ではない機能です。 React Firebase入門シリーズ 1-1・ React Firebase入門 初期設定とsignup - masalibの日記 1-2・ 「react…

React Firebase入門 表示名変更

Firebaseのuserのデフォルトカラムには表示名と画像URLがあります。 表示名を変更できるようにしたいと思います React Firebase入門シリーズ 1-1・ React Firebase入門 初期設定とsignup - masalibの日記 1-2・ 「react-hook-form」を入れてみた - masalibの…

React Firebase入門 メールアドレスとパスワード変更

普通はしないのですが、パスワードが流出したみたいな事(笑)があったら必要な機能なので作ります。 あとメールアドレスの変更も実装するのですが、これっているの?ガラゲー時代と違ってあまり変更がないと思うだけど・・・ React Firebase入門シリーズ 1-…

React Firebase入門 メールアドレスの有効化

メールアドレスのフォーマットはチェックできてもメールアドレスが本当に存在しているのかは実際にメールを送らないとわかりません。Firebaseではメールを送る事でメールアドレスを有効化する事ができます。 React Firebase入門シリーズ 1-1・ React Firebas…

React Firebase入門 パスワード初期化処理

認証システムでは当たり前のようにある機能のパスワード初期化処理を作りました。 React Firebase入門シリーズ 1-1・ React Firebase入門 初期設定とsignup - masalibの日記 1-2・ 「react-hook-form」を入れてみた - masalibの日記 1-3・ React Firebase入…

Firebase Emulator Suiteをインストールして使ってみた

ローカルでFirebaseをエミュレートしてくれる機能をためしました 今まではAuth機能の開発をおこなう時はプロジェクト+ dev みたいな形でプロジェクトを作って検証だった。 今後はローカルのみで完結できそう・・・(一部不具合あり)

React Firebase入門 ログイン認証とログアウト処理

ログインができたのでログイン認証とログアウト処理を作りたいと思います。 React Firebase入門シリーズ 1-1・ React Firebase入門 初期設定とsignup - masalibの日記 1-2・ 「react-hook-form」を入れてみた - masalibの日記 1-3・ React Firebase入門 sign…

React Firebase入門 ログイン処理

SignUpができたのでログイン処理を作りたいと思います。 React Firebase入門シリーズ 1-1・ React Firebase入門 初期設定とsignup - masalibの日記 1-2・ 「react-hook-form」を入れてみた - masalibの日記 1-3・ React Firebase入門 signupの通信エラー対応…

React Firebase入門 signupの通信エラー対応

サインアップのバリデーションができたのですが、通信中にエラーになるなど様々なエラーがあります。 現在はそららをすべてtry-catchで逃げています。 そちらを対応したいと思います 参考にしたのは公式 https://firebase.google.com/docs/reference/js/fire…

「react-hook-form」を入れてみた

SignUpのフォームを作ったがテストをしているとまともなバリデーションができていない事がわかった。 前々から気なっていた「react-hook-form」を導入してみた

React Firebase入門 初期設定とsignup

アプリを作るなら「Firebase!!」と聞いた事があった www.youtube.com アプリ開発をあまりしたことがなく業務では触らせてくれない。なんとなくは便利なのは知っているんだけど実際に動くアプリを作って理解しようと思った。お決まりのCHATアプリなんかも作…

React Material UI入門3 ログイン画面

Google先生みたいなログイン画面が作りたかった。 それには「Material UI」を使えばいいので Material UIについて勉強しました 前回の続きになります

React Material UI入門2 メニューバー

Google先生みたいなログイン画面が作りたかった。 それには「Material UI」を使えばいいので Material UIについて勉強しました 前回の続きになります masalib.hatenablog.com

「よくわからないけれど異世界に転生していたようです」を読んだ

今北産業 男の子が女性に転生したらやるエロの描写がある 料理と食材を探して無双 鍛冶をして無双 引用の画像はこちらからです。ちょっと立ち読みができるので読んでほしいです。 www.cmoa.jp 内容 登場人物 ざっくり分類 漫画 ラノベ 感想 内容 漫画の1~2…

beautiful-react-diagramsをやってみた

はてなブックマークに下記のリンクがあった https://github.com/beautifulinteractions/beautiful-react-diagrams ダイアグラムを簡単に作成するための軽量のReactコンポーネント 必要になる事はたぶんないと思うが気になってみたら サンプルの画像がない・…

React Material UI入門1

Google先生みたいなログイン画面が作りたかった。 それには「Material UI」を使えばいいので Material UIについて勉強しました Material UIとは GoogleのMaterialデザインをベースに開発された、UIコンポーネントライブラリです。 Google先生のサイトを使っ…

ReactでHTMLタグを表示させる場合

PHPとかなら楽勝だったのですが、無駄にハマったのでメモとして残す Reactはjsxとう特殊なHTMLで構成するため 単純な <br /> 記述できない なので sample=sample.replace(/\n/g,'<br>') スペースをbrのタグに変換したらHTMLエンコードされたbrタグが表示されてしまった…

「JKハルは異世界で娼婦になった」を読んだ

一般受けはしないがエロもOKな人はオススメです www.cmoa.jp 引用の画像はこちらからです。立ち読みができるので読んでほしいです。 内容 登場人物 ざっくり分類 漫画 感想 内容 女子高生のハルが異世界にいって娼婦になったお話です。チート系は一切ない。…

React hooksの入門(useReducer)

React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす作者:soarflat発売日: 2020/09/22メディア: Kindle版 React hooksのuseReducerについて勉強した。

React hooksの入門(useContext)

React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす作者:soarflat発売日: 2020/09/22メディア: Kindle版 React hooksのuseContextについて勉強した。

モーダルで入力フォームを表示させる(bootstrap)

とあるプロジェクトでボタンを押して入力フォームを表示させるという依頼があった。 ページ遷移して入力フォームを表示させてもよかった。 その環境は珍しいbootstrapを使ってくれていた。普通の会社なら当たり前なのですが、オレオレCSSフォームがほとんど…

React hooksの入門(useRef)

React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす作者:soarflat発売日: 2020/09/22メディア: Kindle版 React hooksのuseRefについて勉強した。

centos7でmysql8をインストールができない

久しぶりに環境構築したら全然動かなくて、涙目・・・ 1年前までは以下のinstallコマンドができた sudo yum install --enablerepo=mysql80-community mysql-community-server 久しぶりに実行したら下記のエラーが発生した Error: Package: mysql-community-c…

React hooksの入門(useMemo)

React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす作者:soarflat発売日: 2020/09/22メディア: Kindle版 React hooksのuseMemoについて勉強した。

React hooksの入門(useEffect)

React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす作者:soarflat発売日: 2020/09/22メディア: Kindle版 React hooksの基礎中の基礎は勉強したけど、その他の機能も知らないといけないと思ったので勉強しています

React Apollo Mutationをやってみた

React Apolloでデータの取得(query)ができたので更新(Mutation)処理に挑戦してみました。 ちなみに更新(Mutation)ができれば新規追加もできると思われます(サンプルソースより)

React hooksの入門(useState)

React Hooks 入門: フックの基礎や使い所をしっかり理解して使いこなす作者:soarflat発売日: 2020/09/22メディア: Kindle版 今どき、Reactをやっているなら絶対に避けて通れないのが「React hooks」です。他のツールと違って公式(Facebook)が作っているの…