JavaScriptの記事

Laravel x Vue x TypeScript x Viteでvite-plugin-checkerを入れて型チェックを行う

Vite環境でのTypeScriptはトランスパイルのみ​を行い型チェックは行いません。基本的にVSCodeの拡張機能を使ってエディタ側で型チェックをしてね!という方針のようです。それでも型チェックをしたい場合は以下の公 […]

@vue/compat環境でvuedraggableのバージョンを上げるとエラーになる

Vue2からVue3へのアップデートを@vue/compatを利用して進めていた際、vuedraggableを使用した箇所で予期せぬエラーが発生しました。 問題の発生 Vue2からVue3にアップデートする際、vuedr […]

@vue/compatを使ってVue2からVue3に移行ビルドしたら画面が真っ白になった(Vite)

Vue.jsの2系が2023年12月31日にサポートが終了するということで公式で提供されている@vue/compatを使用してVue 2からVue 3へ移行作業をしました。 開発環境 Vue.js2.7Laravel 9 […]

Node.jsのOpenSSLバージョンエラー対処法

今回、新しいバージョンのNode.jsで古いコードや依存関係を実行しようとしたときに発生するエラーの対処法をご紹介します。 エラー内容 エラーの内容は以下の通りです これは、Node.jsが暗号化関連の操作(この場合はハ […]

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

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

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

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

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

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

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

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

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

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

JavaScriptでオブジェクトのキーと値を指定の順序を保証した上で配列にする方法

JavaScriptのオブジェクトでは、キーと値のペアを保持することができますが、その順序が保証されない場合があります。今回は、指定した順序でオブジェクトのキーと値を配列に出力する方法を解説します。 問題の例 例として、 […]