JavaScriptの記事

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

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

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

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

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

JavaScriptで親要素のIDをループで遡って参照する

JavaScriptで親要素のIDを参照して存在すればtrue存在しなければfalseみたいな処理を実装したい時がありました。今回は取得した要素から親要素を辿っていって該当のIDが存在するか判定する処理を書いていきます。 […]
JavaScript

Vue + Mittでグローバルでイベントを取得できるようにする

Vue.jsで直接の親子関係がないコンポーネント間でデータのやりとりをしたい時がありました。Vuexでやれよと言われたらそれまでですが、Vuexに頼りたくなかったこともあり、今回Mittというライブラリを使用してグローバ […]
CSS

文字数を省略して末尾に[…]を表示する

見出しやタイトル等で長い文字列の文末を3点リーダー「…」にして省略すること方法を紹介します。 CSSでの対応方法 JavaScript
JavaScript

JavaScriptの配列を降順、昇順に並べ替える

JavaScriptの配列を降順、昇順に並べ替える方法を備忘録で残しておく。 配列を大きい順に並べ替える（降順） 結果 配列を小さい順に並べ替える（昇順） 結果