Web Dev Digest: 2026‑06‑20
Top 20
放置しがちな検証用アプリのDBを Supabase Free から TiDB Cloud Starter に移行した話
Source: Zenn | Published: 2026-06-20 23:46 JST
- Supabase Free の Project Pausing 回避策として、DB 部分だけを MySQL 互換の TiDB Cloud Starter（Tokyo、Spending Limit $0.00）に置換した実例レポート。Auth/Storage を使わない CRUD のみのアプリなら移行コストが低いと結論。
- 依存ライブラリは
@supabase/supabase-jsを削除してmysql2に差し替え、接続ポートは TiDB の 4000 を指定するだけで済んだ。 - Next.js + Vercel 構成では API Route 経由のため、環境変数を
SUPABASE_*からTIDB_*に一括置換すればフロント側コードはほぼ無修正で済んだ。 - 移行直後に
doesn't existエラーが出る罠を踏み、TiDB 側でCREATE DATABASEとCREATE TABLEを手動投入して解消、日時型はDATETIME(3)で統一した。 - Codex に既存コードを読ませて依存範囲を棚卸ししてから着手したのが効率化のカギで、Vercel Cron の
CRON_SECRETは DB 認証と分離して管理することを推奨。
ベクトルDBを別に立てずにRAGを作れる？TiDB Cloudで小さなAI検索アプリを作って検証した
Source: Zenn | Published: 2026-06-20 20:42 JST
- 小規模 RAG であれば、専用ベクトル DB を別建てせずに TiDB Cloud の
VECTOR(1536)型とVEC_COSINE_DISTANCEだけで構築可能、と検証結果として結論づけた。 - OpenAI の
text-embedding-3-small（1536 次元）の埋め込みを HNSW インデックス付きで格納し、メタデータと同一 SQL でフィルタ可能にすることで、文書更新と embedding 同期の手間を削減できる。 - 一方で、固有名詞・完全一致系の検索は弱く、チャンクサイズの選定が検索精度を大きく左右する点が実装中の制約として挙げられている。
- mysql2 でクエリ実行する際、プリペアドステートメントに
LIMITをバインドできない既知の落とし穴に注意が必要。 - 応用先としてハイブリッド検索、日時条件付き検索、ユーザー権限制御、AI エージェントの長期メモリ統合などが想定範囲として挙げられている。
Supabase CLIをゼロから設定する手順とマイグレーション運用フロー
Source: Zenn | Published: 2026-06-20 10:18 JST
- Supabase は「PostgreSQL に PostgREST・GoTrue・Realtime・Storage を重ねた構成」であり、本番適用済みスキーマは既存ファイルを編集せず新規マイグレーションファイル追加で差分管理する、というのが運用上の核と結論。
- 主要コマンドは
supabase init→supabase start→supabase migration new <name>→supabase db reset→supabase db push、型はsupabase gen types typescript --localで再生成する流れ。 - 本番 DB の管理用テーブルはファイル名で実行済みを記録するため、適用済みファイルを後から書き換えてもスキーマが食い違う事故が起きやすい。
- RLS ポリシーは複数定義時 OR 評価になるため、デバッグ用に書いた全許可ポリシーを本番から消し忘れて事故るパターンを名指しで警告している。
.temp/.branches/は環境依存の一時情報なので Git にコミットしてはいけない、誤コミット時はgit rm --cachedで事後対応する手順を提示。
Next.js × Supabase Authでパスワードリセット機能を実装したときに確認したこと
Source: Qiita | Published: 2026-06-20 19:39 JST
resetPasswordForEmail+/update-passwordページ +updateUserの 3 点セットで実装する際、メール内リンクがアプリに戻ってこない原因はほぼ Supabase コンソール側のリダイレクト URL 許可リスト漏れだと結論。- 許可リストには
http://localhost:3000/update-passwordと本番 URL、Netlify などのプレビュー環境分も個別に登録する必要がある。 - セキュリティ上、メールアドレスの存在有無が漏れる詳細エラーは出さず、次のアクションを示す案内（例: 期限切れなら再申請）を表示するのが望ましい。
- フォーム側は空文字・確認用パスワード一致・最低文字数チェックを明示的に書く前提で、実装直後に「再設定したパスワードで実ログインできるか」まで動作確認することを必須としている。
- パスワードリセットは派手さはないが、ユーザーがアプリに戻ってこられる導線として認証 UX 全体の信頼性を支える、という位置づけ。
Next.js × Prismaで日付検索をしたらタイムゾーンにハマった
Source: Qiita | Published: 2026-06-20 00:32 JST
- 筋トレ記録アプリで「特定の環境で一部レコードが取れない」症状の根本原因は、
setHours()/setDate()がサーバーのローカルタイムゾーンに依存して動くため、サーバーが JST 以外だと検索範囲が日本時間とズレる点にあったと特定。 - 対策はクライアントから
YYYY-MM-DD文字列とIntl.DateTimeFormat().resolvedOptions().timeZoneで取得したタイムゾーン名を API に明示送信する設計に変更すること。 - サーバー側では
date-fns-tzのfromZonedTime()を使い、指定タイムゾーン基準の日付を UTC に変換した上で Prisma の範囲検索を行う実装に直して解決した。 - 教訓として、Date を扱う処理は「どのタイムゾーンの値か」を必ずコードで明示し、サーバー実行環境に依存する書き方を排除することを挙げている。
- AI 生成コードのレビュー観点としてタイムゾーン検証を含めるべきだと注意喚起している。
Next.js + GA4 でコンバージョンイベントを型安全に配線する
Source: Qiita | Published: 2026-06-20 17:33 JST
- 文字列イベント名を呼び出し側に撒かず、「SSR ガード付き gtag ラッパー → イベント別の型付き関数 → コンポーネントでの呼び出し」の 3 層に分離する設計が、Next.js + GA4 計測の堅牢性と保守性を両立する結論。
declare globalでWindowを拡張してGtagFn型を当て、viewItem/beginCheckout/purchaseのような関数をtrack名前空間に集約する具体実装を提示。- SSR 環境では
typeof window === "undefined"ガードとwindow.gtag?.(...)の条件付き呼び出しが必須で、入れないと初回レンダリングで落ちる。 purchaseイベントはtransaction_idを必須にし、useEffectの依存配列を雑に書くと二重計上を起こすという落とし穴を明示。- デバッグは GA4 DebugView と Tag Assistant を併用、標準レポートは反映に数時間〜翌日かかる点も実運用での注意として記録。
公式ドキュメント「SupabaseをNext.jsで使用する」にてリストが空で返ってくる
Source: Qiita | Published: 2026-06-20 21:49 JST
- 公式 Next.js クイックスタート通りに RLS ポリシーを書いたのにログイン状態でデータが空配列になる原因は、
for select to anon using (true)のto anon指定により未認証ロールにしか SELECT が許可されていないため、と特定。 - ログイン済みリクエストでは Supabase クライアントが
authenticatedロールで JWT を投げるため、anon限定ポリシーには一切マッチせず結果が空になる挙動を実例で確認。 - 解決策は単純で、ポリシーから
to anonを削除してfor select using (true);に書き直すだけで、認証済みユーザーからも取得可能になる。 - 認証要件によっては
to authenticatedを明示する書き方や、to anon, authenticatedのように両方並べる書き方も選択肢として整理されている。 - ロール指定の有無で対象ユーザー層が変わる仕様を理解せずコピペするとハマるため、公式サンプルでもアプリの認証要件に合わせてロール部分を再確認する必要があるという注意喚起。
コーディング未経験の大学1年生がNext.js+Supabase+Gemini APIで海外テックメディアを1ヶ月で作った話
Source: Qiita | Published: 2026-06-20 21:19 JST
- AI 任せにせずコードの意味を理解し根本原因を追う姿勢があれば、未経験者でも 1 ヶ月で Next.js + Supabase + Gemini 構成の本番サービス（海外テックニュースのキュレーションメディア）を立ち上げ可能と結論。
- 技術構成は App Router + TypeScript、DB は Supabase、AI 要約は
gemini-2.5-flash-lite、デプロイは Vercel、定期実行は GitHub Actions で毎朝 7:00 JST に走らせ、配信は Resend を採用。 - 役割分担として ChatGPT を計画立案、Claude を設計・実装相談に使い分け、UI は後回しでまずパイプライン（収集→AI 処理→手動承認）を通すアプローチで開発を加速させた。
- 詰まったのは Supabase の環境変数未設定による反映失敗、GitHub Actions の YAML 構文エラー、Gemini 出力の文字化けで、いずれも応急処置でなく根本原因まで掘って修正した。
- 収集ソースは Hacker News や TechCrunch を含む海外 RSS フィード 12 件以上で、毎日自動収集を回している規模感。
【Cloudflare Event Driven】第3章：Cloudflare API TokenとAccount IDを確認する
Source: Zenn | Published: 2026-06-20 20:21 JST
- Terraform で Queue と D1 を構築する前段として、Cloudflare ダッシュボードからカスタム API Token と Account ID を取得する手順を整理した、6 章構成シリーズの中核となる第 3 章。
- API Token には最低限「アカウント→Workers スクリプト→編集」「アカウント→D1→編集」「アカウント→Queues→編集」の 3 スコープを付与する必要があるとスコープを明示。
- Account ID は Workers & Pages 画面右側に常に表示されているため、Token と一緒に控える運用フロー。
- API Token は作成直後の 1 回しか表示できないため、安全な場所に控えておくよう強調されている。
- 第 4 章で実際に Terraform を実行する流れになっており、本章と次章は分割せずセットで実施することが推奨されている。
【Terraform】EventBridge SchedulerでLambda関数にペイロードを渡す
Source: Zenn | Published: 2026-06-20 22:27 JST
- EventBridge Scheduler では
aws_scheduler_scheduleのtarget.inputにjsonencode([{...}])を入れるだけで Lambda に JSON ペイロードを渡せ、従来の EventBridge Rules で必要だったaws_lambda_permissionのリソースベースポリシーが不要になる、というのが Terraform 化のポイント。 - 検証バージョンは Terraform v1.15.6 / terraform-provider-aws v6.51.0、タイムゾーンは
Asia/Tokyoなどスケジュール側で指定可能。 - 受け側 Lambda が文字列を整数として受け取ろうとすると JSON デコードエラーになるなど、ペイロードの型不一致がハマりどころとして実例で示されている。
- ペイロードに未定義キーがあれば無視され、定義済みで未指定のキーは初期値で埋まる仕様も挙動として明文化。
- 監視はスケジュールグループ単位で組む前提で、運用しやすい単位を Terraform 側で先に切っておく構成を推奨。
All Articles
Zenn
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | Reactのアロー関数とPropsの書き方を理解する | アロー関数本体の () と {} の使い分けで return が要る/要らないが変わる挙動を Props 渡しの実例で再整理 | @Yuto | 16:44 |
| 2 | CI/CDのみを最速で学習する #1 準備編 | VSCode・Node.js・GitHub アカウントを前提に、CI/CD 学習用の最小 Node プロジェクトと package.json を作るところまでをセットアップ | @もふもふ | 17:02 |
| 3 | 【Claude Design】AI時代に実践するデザインシステム駆動開発 | Claude Design に design.md を読み込ませて、AI 生成 UI の画面ごとのトーン分裂を抑えるワークフローを実演 | @Nao8 | 13:54 |
Qiita
| # | Title | Summary | Author | Published |
|---|---|---|---|---|
| 1 | How I built a daily word game with no backend: a date seed and a precomputed BFS distance field（日付シードと事前計算 BFS 距離場でバックエンドなしの日替わりワードゲームを作った） | 日付を乱数シードにして全プレイヤーに同じ盤面を返し、回答距離の評価は事前計算した BFS 距離場の静的配列で済ます設計 | @horushe | 23:28 |
| 2 | VSCodeでCSS Modulesの入力補完を効かせる | typescript-plugin-css-modules を tsconfig.json の plugins に追加し VSCode 設定で TS workspace を選ぶだけで .module.css のクラス名が補完される手順 | @kkawaharanet | 22:48 |
| 3 | Phaser 3 + Vite + TypeScript でブラウザゲームを公開したときの技術選定 | 横スクロールランナー「Zero Run」公開時の Phaser 3 / Vite / TypeScript 採用理由と、ホスティングや Asset 管理含む構成判断の記録 | @harusaki_saku | 21:24 |
| 4 | 国土数値情報の将来推計人口データを全国版GeoJSONにまとめて可視化する | 4 府県分だった可視化基盤を全国版に拡張し、国土数値情報の将来推計人口を単一 GeoJSON にまとめて Leaflet で描画する実装 | @00b012deb7c8 | 23:00 |
| 5 | 津波の避難経路が「川・海」に向かう問題を、穴埋め＋道路スナップで直した | 全国津波避難マップで経路が水域に突っ込む不具合を、道路網への穴埋め＋スナップ処理で補正したルーティング側の修正記録 | @rubasu | 20:52 |
| 6 | Fluent UI 2 の Spinner を理解する — Progress Bar / Skeleton との使い分けと Fluent UI Blazor 5 比較 | Fluent UI 2 の Spinner / Progress Bar / Skeleton の使い分け基準を整理し、Fluent UI Blazor 5 実装との API 差を対比 | @tomokusaba | 20:34 |
| 7 | useStateの使い方を確認した話 | useState の構文と更新関数の挙動を、TODO アプリ実装を通じて自分用にハンズオン形式で確認したメモ | @ji_ko | 15:48 |
| 8 | Vueのv-showとv-ifは何が違うのか | v-show は CSS の display 切り替え、v-if は DOM 自体の生成破棄になる内部挙動の差と、頻繁切替/初回コストの観点での使い分け基準 | @tonbi_attack | 22:28 |
| 9 | 迷わず書けよ、書けば動くさ！Excel VBAを「動く仕様書」にしてTauri + Node.js sidecarでWindowsアプリ化した話 | 残存する Excel VBA 業務を仕様書代わりに読み込み、Tauri に Node.js sidecar を同梱した Windows アプリへ置き換えた構成事例 | @torifukukaiou | 23:46 |
| 10 | Search ConsoleのSEOレポートを、GitHub Actionsで毎週自動メール配信する（依存ゼロ） | Search Console API から「順位 8〜20 位の惜しい語」と「クリック 0 のクエリ」を抽出し、依存パッケージなしの素の Node + GitHub Actions で週次メール配信する仕組み | @coscoskosuda | 20:11 |
| 11 | PostgreSQL19でテンポラルテーブル設計の新時代へ(1) | PostgreSQL 18（2025/9）と 19（2026 秋予定）で追加されるテンポラルテーブル仕様を踏まえ、履歴管理を ORM 側から DB ネイティブに寄せる設計の入り口 | @harukat1232000 | 20:57 |
| 12 | パブクラ上の PostgreSQL を ClickPipes(PG→PG) で「Postgres by ClickHouse」へ連携してみた（初期ロード＋CDC） | パブリッククラウド上の Postgres を ClickHouse 提供の Postgres へ ClickPipes 経由で初期ロード＋CDC レプリケーションする検証手順 | @asahide | 20:52 |
| 13 | おうちサーバー構築報告：PostgreSQL 18.4 をインストール for Forgejo | GitLab から Forgejo への移行に伴い、自宅サーバーに PostgreSQL 18.4 を導入する手順と Forgejo 連携設定の記録 | @katz_engineer | 20:02 |
| 14 | 最初のアプリを公開して満足した瞬間、成長は止まる — 未経験者が”公開した後”に回すべき3つの一歩 | Next.js + Supabase で初アプリを出した未経験者向けに、リリース後に回すべき「使われ方の観測・改善ループ・次プロダクトの仕込み」3 ステップ | @ennagara128 | 11:06 |
| 15 | Claude Codeにスクショを貼ってUIのバグを直す：Playwright MCPで「変更→確認」を回す実践 | UI ズレを文章で説明する代わりに Playwright MCP で取得したスクショを Claude Code に渡し、変更→確認のループを自動で回す実践手順 | @StreamSolty | 16:07 |
| 16 | AI agent の PR は diff だけ見ても足りない | AI エージェント PR の本当の危険は巨大 diff ではなく「不自然に小さく綺麗な diff」だと指摘し、文脈未把握な改変を見抜くためのレビュー観点を提案 | @heftykoo | 00:13 |
Publickey
2026-06-20 付の記事はありませんでした。
gihyo.jp
2026-06-20 付の記事はありませんでした。
GIGAZINE
2026-06-20 付の Web 開発関連記事はありませんでした。
ITmedia News
2026-06-20 付の Web 開発関連記事はありませんでした。
TypeScript Blog
2026-06-20 付の記事はありませんでした。
Node.js Blog
2026-06-20 付の記事はありませんでした。
Astro Blog
2026-06-20 付の記事はありませんでした。
Cloudflare Blog
2026-06-20 付の記事はありませんでした。
Vercel Changelog
2026-06-20 付の記事はありませんでした。
AWS What’s New
2026-06-20 付の Web 開発関連記事はありませんでした。
Google Cloud Blog
2026-06-20 付の Web 開発関連記事はありませんでした。
Supabase Blog
2026-06-20 付の記事はありませんでした。
web.dev
2026-06-20 付の記事はありませんでした。
Mozilla Hacks
2026-06-20 付の記事はありませんでした。
CSS-Tricks
2026-06-20 付の記事はありませんでした。
Smashing Magazine
2026-06-20 付の記事はありませんでした。
Hacker News
2026-06-20 付の記事はありませんでした。