Reactの記事

JavaScript

Supabaseでログインユーザーを削除する際に画像も一緒に削除する

Supabase と Next.js を使用して、ログインユーザーを削除する際にStorageに保存してある画像も一緒に削除する方法を紹介します。SupabaseではAuthのUserを削除する場合は、公式のドキュメント […]
JavaScript

Next.js(TypeScript)とVercelとSupabaseを使ってWebアプリ (PWA) を個人開発してみた

はじめに 週末によく草野球をするので打撃成績や投手成績を手軽に管理できるアプリが欲しいなぁと思いせっかくなので作ることにしました。野球成績管理アプリ「ヒットログ」（アプリ名はchatGPTさんに考えてもらいました） ht […]
JavaScript

Next.js で supabase-auth-helpersを使ったログイン時のユーザー情報取得ができなかった時の解決方法

Next.jsとSupabaseを使ってWebアプリを開発している際に、supabase-auth-helpersという認証ヘルパーを使用してログイン認証を実装しようと考えました。supabase-auth-helper […]
JavaScript

MUIを使用したReactアプリで”Warning: validateDOMNesting(…): cannot appear as a descendant of .”というエラーが出た時の回避策

ReactアプリでMUIを使用していると、以下のようなエラーが発生することがあります。 このエラーは、Reactがレンダリングする際に、HTMLの構造が正しくないことを示しています。このエラーは、通常、Linkコンポーネ […]
JavaScript

【Supabase×Next.js】JavaScriptクライアントを使用して親テーブルと子テーブルを同時挿入する方法

Supabase と Next.js を使用して、親テーブルにデータを挿入する際に、子テーブルにも同時にデータを挿入する方法を紹介します。 基本設定 まずは以下のように Supabase クライアントを設定します。 Su […]
JavaScript

Next.jsのSSGとInstagram apiで投稿一覧ページを作成する

自分のインスタグラムの投稿が多くなり何を投稿したか探すのが億劫になってきたのでキーワードで投稿を検索できるサイトを勉強がてら簡単に作成しました。使用技術はNext.js13系(SSG) + Chakra ui + Ver […]
JavaScript

React-toastifyを使用してアラート機能を簡単に実装する

React-toastifyをインストールすると、アラート機能を簡単に実装することができます。 React-toastifyをインストール 使い方 基本的にはドキュメントに書かれている通りに実装すれば問題なく動きます。ス […]
JavaScript

【React】react-swipeableライブラリを使用してスワイプイベントを取得する

スマホ向けのWebアプリで、右にスワイプしたか左にスワイプしたかなど指で操作する際のイベントを取得したい時に使用したライブラリを紹介します。 最初スマホのタッチジェスチャーを実装する際に検索で引っかかったライブラリは「H […]
JavaScript

ReactのHooksで動的にwindowサイズを取得する

管理画面などでウィンドウサイズによってサイドバーの開閉を調節したいときにReactのHooksで動的にwindowサイズを取得を取得できたら便利です。今回はReactのHooksで動的に画面サイズを取得し処理を実行する方 […]
JavaScript

JavaScriptでInvalid Dateを判定する

フロントエンドの開発で日付操作にdate-fnsを使用しています。今回日付を年・月・日と別々のselectボックスから選択させて検索をするという仕様でUIを作成していたのですが、この状態ですと存在しない日付を選択できてし […]