react

ピンをタップすると吹き出し型のポップアップが表示され（左）、詳細を見るボタンからボトムシートが開いてホテルの空室確認や詳細情報を確認できます（右） JavaScriptの非同期処理を書くとき、async/awaitと.then()チェーンのどちらを使うか迷ったことはありませんか？ 「async/awaitの方がモダンだから常にそっちを使う」と思っていた時期が私にもありました。しかし実際にしまなみ海道の観光サイトを開発していると、同じプロジェクトの中で両方を意図的に使い分けている箇所が出てきました。この記事ではその理由を整理します。 ランキング参加中プログラミング ランキング参加中旅行ランキング…

しまなみ海道の観光ガイドサイトをNext.js 15で個人開発する中で、通常のReactの作法——親子の一方向データフロー・ツリー内でのDOM管理——から外れた設計が必要になる場面が3つありました。forwardRef による命令型API・createPortal によるDOMへの脱出・Zustand によるプロバイダーなしの状態管理です。前回の記事（useRef・useCallback・AbortController編）の続きになります。 ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ このサイトでは地図機能を中心に据えており、しまなみ海道 観光マップとし…

しまなみ海道の観光ガイドサイトをNext.js 15で個人開発する中で、Reactの非同期処理まわりで詰まったことを3つのテーマで整理します。「stateに入れない（useRef）」「再生成させない（useCallback）」「止める（AbortController）」——この3軸で読んでいただければと思います。 ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ このサイトでは地図機能を中心に据えており、しまなみ海道 観光マップとしてスマートフォン・デスクトップどちらからでも使えるようにしています。地図上にはホテルと観光スポットのピンをレイヤーで切り替えて表示…

きっかけはビルドエラーでした ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ しまなみ海道の観光ガイドサイトを開発していたとき、MDX ファイルを読み込む処理を書きました。 // lib/spots.ts import fs from 'fs' import path from 'path' export function getAllSpots() { const dir = path.join(process.cwd(), 'content/spots') return fs.readdirSync(dir) } 「動くだろう」と思ってビルドしたら、こん…

はじめに 「ユーザーが選んだ日付が、なぜか今日の日付で登録される」 こんなバグ報告を受けたとき、あなたはどこから調査を始めるだろうか。バックエンドのパース処理？データベースのタイムゾーン設定？ 実は今回の原因は、Reactの最も基本的な特性 ── setStateの非同期性 ── にあった。 この記事では、マルチステップフォーム（ウィザード形式のフォーム）で実際に遭遇したバグを題材に、2つの問いを追う。 1つ目は 「なぜこのバグが生まれたのか」 ── Reactの状態更新のメンタルモデルの話。 2つ目は 「なぜテストで防げなかったのか」 ── テストピラミッドの隙間の話だ。 背景・課題 マルチ…

こんにちは。ネットワールド技術担当の山下です。 Webアプリを作っていると、どこかのタイミングで「そろそろログイン機能が必要だな」となりますよね。ただ、認証まわりを全部自前で作ろうとすると、画面だけでは済みません。ユーザー管理、パスワード管理、セキュリティ対策、ソーシャルログイン対応など、考えることが一気に増えてきます。 そこで今回は、OktaのAuth0を使って、Reactアプリケーションにログイン機能を追加する検証をやってみました。題材は Vite + React + TypeScript のシンプルな SPA です。Auth0 React SDK を使って、ログイン、ログアウト、ユーザー…

MyTalent CRMでフロントエンド開発を行なっている田中です🙍‍♀️ 現在、MyTalent CRM（以下CRM）では、フロントエンドのフレームワークを Nuxt.js から React へ移行しています。 Vue.js（Nuxt.js）を愛していた私としてはちょっぴり残念に思っていますが、こういった機会は滅多にないと思い、二つのVSCodeを色分けしてNuxt.jsとReactの反復横跳びを楽しんでいます🤸 Claude Codeを相棒に、このリプレイスプロジェクトを少しでも効率的に、そしてアプリケーションをより堅牢にするために最近行なったことをご紹介します。 Nuxt→Reactのし…