【React】離脱したページを再表示したときに保存していないデータを復元する

Formで入力中に他のページに遷移したりタブを閉じたりしてページを離脱し、再度同じページを表示したときに入力途中だった内容を復元する方法です。Backlogとかであるやつですね。 onChangeでテキストボックスの値が ...

【JS】オブジェクトの配列同士の比較

JavaScriptでオブジェクトの配列Aと配列Bがあり、「配列Bに存在する配列Aだけを抽出したい」ということがあったのでメモ。

react-dropzoneの使い方

react-dropzoneはローカルのファイルを選択したりドラッグ&ドロップするためのライブラリです。 インストール方法 最低限の使い方 もう少し実用的にしてみます コードの解説 maxSize：ドラッグ&am ...

react-hook-formで動的フォームを作る

SWRの使い方

任意のタイミングでフェッチする mutateを使用すると、任意のタイミングでフェッチできます。 下記の例だとボタンをクリックしたときにフェッチします。 初期表示時はフェッチしない 初期表示時はフェッチせず、何かアクション ...

Reactのライブラリの公式サイトまとめ

ライブラリのドキュメントを読みたいときに「ライブラリの名前 公式」みたいな感じでググっても出てこないので、私がよく使っているライブラリの公式サイトをまとめてみました。 「ブックマークしておけばいいじゃん」って話ですが^^ ...

Reactのライブラリの公式サイトまとめ

ライブラリのドキュメントを読みたいときに「ライブラリの名前 公式」みたいな感じでググっても出てこないので、私がよく使っているライブラリの公式サイトをまとめてみました。 「ブックマークしておけばいいじゃん」って話ですが^^ ...

yupのバリデーションまとめ

必須チェック：required 文字列の最小の長さ：min 文字列の最大の長さ：max 正規表現：matches 指定した値のみ許可：oneOf ラジオボタンやセレクトボックスなどで指定した値のみ許可したい場合などに使用 ...

オブジェクトから特定のプロパティを除外する

上記profileからidを除外したい場合、下記のようにすればできます。 分割代入と残余引数を使うことで、profileNoIdにはid以外のプロパティが格納されます。

【Next.js】Next.jsのプロジェクトにJestを導入する

Next.js13のプロジェクトにJestを導入する方法です。 Next.jsの公式サイトを参考にしています(というかほぼ公式サイトそのままです) Jestのインストール 下記コマンドを実行してJestをインストールしま ...

GitHubの登録メールアドレスを変更したらリポジトリにプッシュしてもVercelに反映されなくなった

VercelはGitHubのリポジトリにプッシュすると自動でデプロイされますが、突然デプロイがされなくなりました。 一緒に開発をしている同僚はデプロイされるのに私だけデプロイされない状態でした。 なんでかなと思ったら、G ...

映画『THE FIRST SLAM DUNK』が最高だった件

映画『THE FIRST SLAM DUNK』を観てきました。 控えめに言って最高。 観にいくか迷っている人は絶対行くべし。 感想など色々書いていきます。 ※以下ガッツリネタバレ含みます 試合のシーンが最高！ まずはなん ...

MINATOシティハーフマラソン2022の感想など

11/20(日)に行われたMINATOシティハーフマラソン2022に参加してきました。 感想や結果など書いていきます。 MINATOシティハーフマラソン2022とは 公式サイト：https://minato-half.j ...

退職を申し出たら「辞めたら会社が潰れる」と言われた話

※どこから関係者に伝わるのかわからないのでところどころフェイクを入れています 今の会社を退職することになりました。退職の理由は、今の職場ではエンジニアとしてこれ以上の成長が難しいこと、給与も昇給があまり見込めないことが理 ...

【React】react-hook-formでcheckboxがsubmitされないことがあった

Safariのみ、react-hook-formでcheckboxのvaluteがsubmitされないケースがありました。 reactやSafariのバージョンは下記になります。 react：18.2.0react-ho ...

【React】react-hook-formでプルダウンの入力チェックを行う

react-hook-formを使ってプルダウンで選択された値（value）が不正かどうかをチェックする方法です。 プルダウンの選択肢となるオブジェクトの配列を用意しておき、mapでループしてプルダウンを生成しています。 ...

【React】react-hook-formでプルダウンの入力チェックを行う

react-hook-formを使ってプルダウンで選択された値（value）が不正かどうかをチェックする方法です。 プルダウンの選択肢となるオブジェクトの配列を用意しておき、mapでループしてプルダウンを生成しています。 ...

【Algolia】Algoliaでフィルターを使う

Algoliaはキーワードに対して近いレコードが検索対象となりますが、RDSのWhereのようにキーワードに一致したレコードのみ抽出したい場合があると思います。 例えば、Amazonとか楽天で「家電」のジャンルの商品を検 ...

【Algolia】検索にヒットする属性を制限する

Algoliaはインデックスを作成した初期の状態だと、全ての属性が検索にヒットします。 例えば、usersというインデックスが存在し下記のレコードが存在するとします。 { objectID:1, id: 1, nickN ...

【React】Algoliaを使用する

React（Next.js）でAlgoliaを使用する方法です。 Algoliaのドキュメントを参考にしています。 ライブラリのインストール 下記コマンドでAlgoliaをライブラリをインストールします。 npm ins ...

Firestoreに変更があったら自動でAlgoliaに反映する

Firestoreのドキュメントにcreate、update、deleteがされたときに自動でAlgoliaに反映する方法です。 前提 Algoliaにusersというインデックスが存在し、Firestoreのusers ...

【React】react-hook-formで全てのチェックボックスのチェックする方法

React（Next.js）のreact-hook-formで全てのチェックボックスをチェックする方法です。 下記のようにしたらできました。 ネストされた項目ってどうやってsetValueするんだ？って思いましたが、公式 ...

react-hook-formでフォームに初期値を設定する方法

react-hook-fromで初期値を設定する方法を3つご紹介します。 defaultValuesを使う 1つ目はdefaultValuesを使う方法です。 setValueを使う 2つ目の方法はsetValueを使い ...

北海道マラソン2022の振り返り

2022年8月28日に開催された北海道マラソンに参加してきました。 フルマラソンの参加は2019年のさいたま国際マラソン以来、2年8ヶ月ぶりの参加です。 北海道マラソンは2019年にも参加しましたが、このときは直前に怪我 ...

【Firestore】Firestoreを手動でバックアップする

https://firebase.google.com/docs/firestore/manage-data/export-import?hl=ja 事前準備 Google Cloud プロジェクトに対する課金を有効にす ...

【Next.js】Next.js × microCMSでブログっぽいものを作る

タイトルの通りですが、Next.jsとmicroCMSでブログっぽいものを作る方法です。 細かいところかなり省略していますが、何かの参考にしていただけたら幸いです。 参考サイトmicroCMS公式microcms-js- ...

Next.js × microCMSでブログっぽいものを作る

タイトルの通りですが、Next.jsとmicroCMSでブログっぽいものを作る方法です。 細かいところかなり省略していますが、何かの参考にしていただけたら幸いです。 参考サイトmicroCMS公式microcms-js- ...

【React】文字列内のURLをリンク(aタグアンカータグ)にしたい

【マラソン】2022年上半期の戦績、下半期の予定など

早いもので2022年も半分が終わってしまったので（7月も後半ですが）、2022年上半期のマラソン大会の戦績を書いていきます。 5000m まずは5000mです。 これは「オトナのタイムトライアル（OTT）」という市民ラン ...

【Next.js】Vercelでの環境変数について

VercelのPreview環境では、.env.developmentではなく.env.productionが読み込まれるようです。 実際に実験してみました。 まずはNext.jsで下記3つの環境変数を用意します。 .e ...

【Next.js】Next.js 12.2.0でBasic認証を実装する

Next.jsはMiddlewareを使用すればBasic認証を実装できます。 ただ、Next.js 12.2.0からMiddlewareが安定版になり、仕様が大きく変わりました。 Middleware Upgrade ...

ヘテムルでmas_input_varsを1000以上に設定する方法

ヘテムル（heteml）のコントロールパネル上でPHPの設定を色々変更できますが、mas_input_varsのMAXが1000までしか設定できませんでした。 レンタルサーバーなのでroot権限になってサーバー上で直接変 ...

ヘテムルでSPFレコードが自動で付与される件について

ヘテムル（heteml）のレンタルサーバー上に構築したWordPressに問い合わせフォームを実装し、問い合わせした人に対して「お問い合わせありがとうございました」の自動返信メールを送りたかったのでSPFレコードを設定す ...

マラソン大会に出場するときに注意すること（初心者向け）

マラソン初心者の私がアドバイスするのはおこがましいですが、マラソン初心者の方がマラソン大会に参加するときのアドバイスです。 マラソンの走り方とかトレーニング方法とかは書いていません（そんなアドバイスができる実力も知識もな ...

社会人が仕事で使用するカバンはリュックがおすすめ

こんにちは。 皆さんは仕事で通勤用にどんなカバンを使っていますか？ 手に持つタイプ、肩にかけるタイプ、ショルダーバッグなど色々種類はありますが、私はリュックをお勧めします。 リュックタイプのメリット・デメリットを書いてい ...

GA4で開発環境のアクセスを除外する

ユニバーサルアナリティクス（UA）でフィルタで除外したいドメインを指定することで開発環境・テスト環境のアクセスを除外することができましたが、Googleアナリティクス4（GA4）では2022年5月8日現在、フィルタでドメ ...

2022年10月〜12月の関東近辺のマラソン大会まとめ

今シーズン出たいと思っている関東近辺のマラソン大会をまとめてみました。 東京レガシーハーフマラソン2022 公式サイト 開催日：10/16(日) エントリー期間：5/26(木)〜6/9(水) 一般ランナー エントリー料金 ...

第2回東京豊洲ハーフマラソン2022に参加してきました

2022年4月30日(土)に豊洲ぐるり公園で開催された第2回東京豊洲ハーフマラソン2022に参加してきました。 豊洲ぐるり公園でのマラソン大会は過去にも開催されていてずっと参加したいと思っていましたがなかなか予定が合わず ...

JavaScriptやTypeScriptで出てくる記述の意味や名称など

初めてES2015のJavaScriptやTypeScriptのコードを読んだときに「この記述の意味と読み方はなんだ？」と思ったことが多かったのでまとめました。 ??（Null合体演算子） クエスチョン（はてなマーク）が ...