Reactの記事

JavaScript

【React】ボタンクリックで入力フォームを動的に追加する

ボタンクリックなどで動的に入力フォームを追加する方法を実装するたびにやり方を忘れるので備忘録で残しておきます。※React 17+ 方法 まず、フォームのデータの型をTypeScriptで定義します 動的フォームを作成す […]
JavaScript

Vue.jsからReactへの移行: Composition APIの機能をReactで実装する方法

Vue.jsからReactへの移行を考えていく中で、Vue.jsのComposition APIにおける機能やパターンをReactでどのように再現できるか疑問に思うことが多かったのでまとめていきたいと思います。 Vue. […]
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 […]