React JavaScript の関数の引数はオブジェクトがいいのか？
JavaScriptで関数を定義する際の大きな選択の一つは、引数をどのように取るかです。特に、多くの引数を取る関数やコンポーネントでは、直接の引数リストとして取るのか、オブジェクトとして一つにまとめて取るのか、その選択は重要です。それでは...
React
React React React で音声認識機能を実装する
Reactで利用できる音声認識ライブラリreact-speech-recognition を使用して音声認識機能を作成していきます。
使用するライブラリのインストール
npm install --save react-...
Next.js React でFontAwsome を使う
パッケージのインストール
# コアパッケージの導入
npm i --save @fortawesome/fontawesome-svg-core
# アイコンパッケージの導入
npm i --save @fortaw...
firebase クエリパラメータでfirebeseのドキュメントを更新する方法
next.js を使用して todo アプリを作成した際に、下記の点で大いに躓いた。
対象 todo を編集すべく、対象 todo をクリックしたら todo の id をクエリパラメータで渡して、examle.com/editin...
React Recoilの使い方
まずはインストール
npm i recoil @types/recoil
statesディレクトリを作成し、stateを定義
import { atom } from 'recoil'
ex...
React Udemyで作ったTodoリストをTypeScriptに書き換える
UdemyでTodoリストを作成したものを「独自カスタマイズ＆機能追加」第三弾目です。
第一弾「firebase8をfirebase9へ書き換える」、第二弾「ページの追加」です。
どうやるべきかググる
あまり新しい記事が...
React React ルーティングの作成
TodoListをUdemyで作成したので、その機能を拡張する。
具体的には、「100均」「スーパーマーケット」「ドラッグストア」の３つ分けてそれぞれを別のURLで表示させる。
pagesの作成
src/componet...
React ReactへMaterial-UIの導入
インストール
npmインストールしていく。
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-ma...
firebase firebase ユーザーログイン、ログアウトの状態でDOMの出し分け
まず普通にやってみる
currentUserにログイン情報が入っているので、それがあるか無いかで条件分岐して出し分ける。
import React, { useContext } from 'react'
im...
React グローバルstateの管理
createContext
const AuthContextへcreateContext()を代入して、exportする。
propsにchildrenを渡して、valueにstateを代入する。
import { u...