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

react

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

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

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

#useCallback#カスタムフック#Next.js

関連ブログ

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

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

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

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

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

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

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

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

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

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

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

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

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

猫の細道を訪れてMDXでサイトに追加した——frontmatterが地図ピンになる仕組みと画像管理

猫の細道を訪れてMDXでサイトに追加した——frontmatterが地図ピンになる仕組みと画像管理の話 現地に行って写真を撮り、帰ったらMDXを書くだけでサイトが更新できる。しまなみ海道の観光ガイドサイトをNext.js 15で個人開発していて、この運用が実際に成立した話です。 ランキング参加中プログラミングランキング参加中旅行ランキング参加中弱小ブロガーズ 猫の細道に行ってきた 尾道の山手にある猫の細道は、幅1〜2m・全長約200mの石畳の路地です。千光寺へと続く坂道の途中にあり、古い民家の壁や石垣に沿って続く細い路地に、猫にまつわるオブジェや陶器が点在しています。 訪れたのは早朝5時50分…

#尾道観光#猫の細道#Next.js
Shimanami RouteLab｜しまなみ海道のスポット紹介サイトを個人開発•9日前

async/await と .then() チェーン——しまなみ海道観光サイトで両方使い分けた理由

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

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

forwardRef・createPortal・Zustand——しまなみ海道観光サイトでReactの作法を少し外す設計をした話

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

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

useRef・useCallback・AbortController——しまなみ海道観光サイトに組み込んだ地図機能で"stateに入れない・再生成させない・止める"を実践した話

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

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

`fs` を使ったらエラーが出た——Next.js の Server / Client Component を理解するまで

きっかけはビルドエラーでした ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ しまなみ海道の観光ガイドサイトを開発していたとき、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) } 「動くだろう」と思ってビルドしたら、こん…

#NextJs#TypeScriipt#個人開発