Hatena Blog Tags
はてなブログ トップ
react
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

react

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
lelelemon’s blog•2時間前

学習記録：React + TypeScript で API 接続の入口 — fetch と状態と境界

日付: 2026-05-02 時間: 約 60 分⚠️鋭意学習中の内容につき、一部誤りのある可能性があります。もし誤っている内容があったらすぐに修正しますので、お気づきの方はそっとご指摘いただけたらとても喜びます🙇 はじめに こんにちは。今回は、Vite + React + TypeScript で外部 API を fetch し、loading / error / 成功を useState で画面に載せるところまでを一通りやりました。今日の学習教材は以下です。github.com 今日やったこと npm create vite@latest … --template react-ts で試作…

#TIL

関連ブログ

Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•5時間前

`useEffect` の第2引数（依存配列）を空にしていい場面・してはいけない場面——しまなみガイドの実装から整理した

はじめに しまなみ海道の観光ガイドサイトを個人で開発しています。カスタムフックを書くたびに useEffect の第2引数（依存配列）をどう書くか迷いました。 useEffect(() => { // 何か処理 }, []) // ← これは正しいのか？ 「とりあえず [] にしとけばいい」と思っていた時期があります。実際には [] が正しい場面と、[] にしてはいけない場面があります。 このサイトで書いたカスタムフックを素材に、4パターンに整理しました。 まず：依存配列とは何か useEffect の第2引数は「この値が変わったときに再実行する」というリストです。 useEffect(() …

#useEffect#TypeScript
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•3日前

`Promise.all` で複数APIを並列fetchしつつ、1件失敗しても残りを使う設計——しまなみガイドのバス時刻表実装

はじめに しまなみ海道の観光ガイドサイトを個人で開発しています。マップ上にバス停を表示し、タップすると時刻表を見られる機能を実装したとき、Promise.all の使い方でひとつ判断が必要になりました。 このサイトはしまなみ海道エリアをカバーするため、複数のバス事業者の時刻表データを扱います。 中国バス 尾道バス 井笠バス 鞆鉄バス 4事業者それぞれの JSON ファイルを読み込んで、ひとつにマージして使います。このとき「4件を並列で取得したいが、1件が404でも残り3件は表示したい」という要件がありました。 左：バス停レイヤーOFF、右：バス停レイヤーON。4事業者のデータを並列フェッチし、…

#Next.js#TypeScript#非同期処理
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•6日前

ライブラリなしでスワイプ対応 BottomSheet を React に実装した——CSSトランジションが「一発で動かない理由」と double rAF trick

はじめに：なぜゼロから書いたのか しまなみ海道の観光ガイドサイトを個人で開発しています。マップ上のスポットをタップすると詳細が表示されるモバイルUIを作るため、BottomSheet が必要になりました。 最初は Radix UI の <Dialog> や vaul（Drawer ライブラリ）を試しました。動きはします。ただ、使いながら「なぜこう動くのか」がわからないまま実装が進んでいく感覚に違和感がありました。 ライブラリを使えば1時間で終わる話を、わざわざ自分で書いた理由はそこです。ゼロから書いて中身を理解したかったのです。 結果として、CSSトランジションの落とし穴・スワイプ速度計算・ア…

#TypeScript#Next.js#UI実装
every Tech Blog•8日前

Next.js 16 のキャッシュとどう付き合うか ― 実装と運用のあいだで考えたこと

Next.js 16 のキャッシュとどう付き合うか ― 実装と運用のあいだで考えたこと 目次 Next.js 16 のキャッシュとどう付き合うか ― 実装と運用のあいだで考えたこと はじめに Next.js のキャッシュを整理する ブラウザ（Router Cache） CDN・Edge（HTTP Cache） サーバー（Data Cache = use cache） キャッシュに関する思想と変更の歴史 1. App Router 初期 — 暗黙的なキャッシュ 2. Next.js 15 — uncached by default への揺り戻し 3. Next.js 16 — Cache Com…

#Next.js#キャッシュ#フロントエンド
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•8日前

useCallback が必要な場面・不要な場面——「とりあえず入れとく」はパフォーマンスを悪化させる

しまなみ海道の観光サイト勉強も兼ねて作り始めたとき、カスタムフックを書くたびに useCallback を巻いていました。 「関数の再生成を防ぐんでしょ？ 入れておいて損はないよね」——そう思っていました。 実際には、不要な useCallback はコードを読みにくくするだけでなく、パフォーマンスをわずかに悪化させることもあります。どこで使うべきで、どこでは要らないのかを整理しました。 useCallback がやっていること const handleClick = useCallback(() => { doSomething(); }, []); useCallback はメモ化された関…

#useCallback#カスタムフック#Next.js
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•11日前

カスタムフックで「どこで何が動くか」を整理——useIsMobile / useGeolocate / useCloseAll の設計

はじめに 左がデスクトップ、右がモバイルの表示です。ナビゲーションの構成やボタンの配置が変わります。 React を書いていると、コンポーネントの中にロジックが増えてきます。useEffect が2つ、useState が3つ、コールバックが4つ……気づいたら何をしているファイルなのかわからなくなっていました。 カスタムフックはこの問題を解決する手段です。「どこで何が動くか」をフックという単位に切り出すことで、コンポーネントは「何を表示するか」だけに集中できます。 ただ、カスタムフックを「なぜ作るか」は一つではありませんでした。本サイトを作りながら、目的が全然違う3種類のカスタムフックが生まれ…

#Next.js#カスタムフック#Zustand
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•11日前

自前キャッシュをTanStack Queryに移行した——176行のコードが82行に

はじめに 本サイトの地図画面には、ホテルのマーカーをタップすると詳細情報をAPIから取得して表示する機能があります。 この機能、最初は自分でキャッシュを実装していました。同じホテルを2回タップしたときにAPIを叩かないように、Map オブジェクトを使ってメモリに保存していたのです。 動いてはいました。でも、コードを見るたびに「これ、本当に正しく動いているのか？」という不安がありました。今回 TanStack Query（React Query）に移行したら、そのコードが丸ごと消えました。 移行前のコード——自前で全部やっていた src/hooks/hotels/useHotelDetail.t…

#TanStack Query#React Query
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•12日前

jQueryとReactの対比で学ぶ宣言的UI——サイト内の絞り込み機能で気づいた「状態を渡すだけ」の正体

左：検索前の全29件表示 右：「尾道」と入力した直後の12件。コードは状態を変えただけです。 はじめに 「宣言的UI」という言葉、React の入門記事でよく目にするのですが、最初はいまいちピンときませんでした。 「命令的との違い」を読んで、なるほど。と思いつつ、実際に手を動かすまでは腹落ちしていませんでした。その感覚が変わったのは、本サイトを Next.js で作り始めて、スポットの絞り込み機能を実装したときのことです。 この記事では、jQuery を知っている人に向けて「宣言的UIとは何か」を before/after の対比で整理します。 jQuery で書くとしたら——「ワイが全部やる…

#jQuery#JavaScript#TypeScript
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•15日前

"use client" はどこに書くのか——エラーが出るたびにつけ足していたら全部 Client Component になっていた

を取得し、クライアント領域（紫）のHomeClient・SpotsListClientにpropsで渡します。MapboxやuseStateなどブラウザ専用の処理（オレンジ）はツリーの末端に置きます">サーバー領域（緑）でgetAllSpots()を実行してSpotを取得し、クライアント領域（紫）のHomeClient・SpotsListClientにpropsで渡します。MapboxやuseStateなどブラウザ専用の処理（オレンジ）はツリーの末端に置きます 以前、fs を使ったらビルドエラーが出た話を書きました。 mojitonews.hateblo.jp あのときは「fs はサーバー専用…

#Next.js#TypeScript#個人開発