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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ReactのApolloでページネーションを構築しました。 サンプルに従ってつくったのですが メジャーバージョンアップすると使えないコールバック関数が使われていました。そのコールバック関数を使わないようにするとカーソルベースでのページネーションができま…

ScreenToGifとは 画面動画を撮影できるソフトウェア(無料）です。 前回の記事のようなスニペットみたいな動きを見せたい場合に使用します。 masalib.hatenablog.com ブロガーなら当たり前のようにインストールしてもいいと思うほど便利なソフトウェアです。 …

Reactのコンポーネントを開発しているとほぼお決まりのパターンを入力しないといけません 例えばtest.jsがある場合は import React from 'react' function test() { return ( <div> </div> ) } export default test です 入力すればいいのですが、めんどくさい。という…

前回記事で作ったプログラムなのですがデザインもくそもありません。 masalib.hatenablog.com reactのデザイン部分を共有できるサイトのbit.devを利用して 少し変えたいと思います

前回作った内容だと https://masalib.hatenablog.com/entry/2020/11/03/013208 固定の検索結果しかとれないので通常の業務だと使えない。 graphqlサーバーにわたすクエリーを動的にしたかった。 本来だとフォームにある内容を渡すというのがいいだけど、今の…

今後のトレンドになるgraphqlでのWEBアプリを作ってみたかった。業務（仕事）でやらしてくれるはずがなかった。 諦めて自分でWEBアプリを作ることにした。 いきなりはできないので、すでに立っているgraphqlサーバーを利用する事にしました。 それはgithubで…