{"id":3432,"date":"2026-09-24T08:38:52","date_gmt":"2026-09-23T23:38:52","guid":{"rendered":"https:\/\/qol-kk.com\/wp2\/?p=3432"},"modified":"2026-09-24T08:38:52","modified_gmt":"2026-09-23T23:38:52","slug":"20260923-plan038","status":"publish","type":"post","link":"https:\/\/qol-kk.com\/wp2\/blog\/2026\/09\/24\/20260923-plan038\/","title":{"rendered":"React\u306e\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u96c6"},"content":{"rendered":"<h2>\u6982\u8981<\/h2>\n<p>React\u306e\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306f\u300c\u72b6\u614b\u3092\u6301\u3063\u305f\u30ed\u30b8\u30c3\u30af\u306e\u518d\u5229\u7528\u300d\u3092\u5b9f\u73fe\u3059\u308b\u4ed5\u7d44\u307f\u3067\u3059\u3002\u3057\u304b\u3057\u66f8\u304d\u65b9\u306e\u6307\u91dd\u304c\u306a\u3044\u307e\u307e\u5207\u308a\u51fa\u3059\u3068\u3001\u300c\u305f\u3060\u95a2\u6570\u306b\u5206\u3051\u305f\u3060\u3051\u300d\u3067\u7d42\u308f\u308a\u3001\u518d\u5229\u7528\u6027\u3082\u53ef\u8aad\u6027\u3082\u4e0a\u304c\u3089\u306a\u3044\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u672c\u8a18\u4e8b\u3067\u306f\u3001\u5165\u9580\u8005\u304c\u6700\u521d\u306b\u62bc\u3055\u3048\u308b\u3079\u304d\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306e\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3092\u3001TypeScript\u306e\u5b9f\u88c5\u4f8b\u3068\u3068\u3082\u306b5\u3064\u7d39\u4ecb\u3057\u307e\u3059\u3002\u5bfe\u8c61\u306f\u300c<code>useState<\/code>\u3068<code>useEffect<\/code>\u306f\u66f8\u3051\u308b\u304c\u3001\u81ea\u4f5c\u30d5\u30c3\u30af\u306e\u8a2d\u8a08\u306b\u81ea\u4fe1\u304c\u306a\u3044\u300d\u3068\u3044\u3046\u65b9\u3067\u3059\u3002<\/p>\n<h2>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306e\u57fa\u672c<\/h2>\n<p>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306f\u3001\u540d\u524d\u304c<code>use<\/code>\u3067\u59cb\u307e\u308a\u3001\u5185\u90e8\u3067React\u306e\u30d5\u30c3\u30af\u3092\u547c\u3076\u305f\u3060\u306e\u95a2\u6570\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">import { useState, useCallback } from \"react\";\n\nfunction useCounter(initial = 0) {\n  const [count, setCount] = useState(initial);\n  const increment = useCallback(() =&gt; setCount((c) =&gt; c + 1), []);\n  const reset = useCallback(() =&gt; setCount(initial), [initial]);\n  return { count, increment, reset };\n}<\/pre>\n<p><code>use<\/code>\u3067\u59cb\u3081\u308b\u3053\u3068\u3067React\u306eLint\u30eb\u30fc\u30eb\u304c\u4f7f\u3044\u65b9\u3092\u691c\u8a3c\u3067\u304d\u307e\u3059\u3002\u305d\u3057\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u300c\u72b6\u614b\u3092\u6301\u3064\u30ed\u30b8\u30c3\u30af\u300d\u3092\u5207\u308a\u96e2\u3057\u3001\u540d\u524d\u3092\u4ed8\u3051\u308b\u306e\u304c\u76ee\u7684\u3067\u3059\u3002<\/p>\n<h2>\u30d1\u30bf\u30fc\u30f31: \u72b6\u614b\u30ab\u30d7\u30bb\u30eb\u5316\u30d5\u30c3\u30af<\/h2>\n<p>\u95a2\u9023\u3059\u308b\u72b6\u614b\u3068\u64cd\u4f5c\u3092\u3072\u3068\u307e\u3068\u3081\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">function useToggle(initial = false) {\n  const [on, setOn] = useState(initial);\n  const toggle = useCallback(() =&gt; setOn((v) =&gt; !v), []);\n  return [on, toggle] as const;\n}<\/pre>\n<p>\u623b\u308a\u5024\u306f\u3001\u5024\u304c\u5c11\u306a\u304f\u9806\u5e8f\u306b\u610f\u5473\u304c\u3042\u308b\u306a\u3089\u30bf\u30d7\u30eb\u3001\u591a\u3044\u306a\u3089\u540d\u524d\u4ed8\u304d\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u3059\u308b\u3068\u8aad\u307f\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30d1\u30bf\u30fc\u30f32: \u30c7\u30fc\u30bf\u53d6\u5f97\u30d5\u30c3\u30af<\/h2>\n<p>\u975e\u540c\u671f\u51e6\u7406\u3092\u5305\u307f\u3001<code>data \/ loading \/ error<\/code>\u306e3\u72b6\u614b\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">type FetchState&lt;T&gt; = { data: T | null; loading: boolean; error: Error | null };\n\nfunction useFetch&lt;T&gt;(url: string): FetchState&lt;T&gt; {\n  const [state, setState] = useState&lt;FetchState&lt;T&gt;&gt;({\n    data: null,\n    loading: true,\n    error: null,\n  });\n\n  useEffect(() =&gt; {\n    let aborted = false;\n    const controller = new AbortController();\n    setState({ data: null, loading: true, error: null });\n\n    fetch(url, { signal: controller.signal })\n      .then((res) =&gt; {\n        if (!res.ok) throw new Error(`HTTP ${res.status}`);\n        return res.json() as Promise&lt;T&gt;;\n      })\n      .then((data) =&gt; !aborted &amp;&amp; setState({ data, loading: false, error: null }))\n      .catch((e: unknown) =&gt; {\n        if (aborted) return;\n        if (e instanceof Error &amp;&amp; e.name === \"AbortError\") return;\n        setState({\n          data: null,\n          loading: false,\n          error: e instanceof Error ? e : new Error(\"unknown\"),\n        });\n      });\n\n    return () =&gt; {\n      aborted = true;\n      controller.abort();\n    };\n  }, [url]);\n\n  return state;\n}<\/pre>\n<p>\u30dd\u30a4\u30f3\u30c8\u306f\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3067\u3059\u3002\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u5f8c\u306e<code>setState<\/code>\u3092\u9632\u304e\u3001<code>url<\/code>\u5909\u66f4\u6642\u306b\u524d\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u4e2d\u65ad\u3059\u308b\u3053\u3068\u3067\u7af6\u5408\u72b6\u614b\u3092\u907f\u3051\u3089\u308c\u307e\u3059\u3002\u5b9f\u52d9\u3067\u306fTanStack Query\u306a\u3069\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u4efb\u305b\u308b\u306e\u304c\u5b9a\u77f3\u3067\u3059\u304c\u3001\u5185\u90e8\u7406\u89e3\u306e\u305f\u3081\u306b\u4e00\u5ea6\u306f\u81ea\u4f5c\u3057\u3066\u304a\u304f\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30d1\u30bf\u30fc\u30f33: \u5916\u90e8\u30b7\u30b9\u30c6\u30e0\u8cfc\u8aad\u30d5\u30c3\u30af<\/h2>\n<p>\u30d6\u30e9\u30a6\u30b6API\u3084\u30a4\u30d9\u30f3\u30c8\u3092\u8cfc\u8aad\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">function useWindowSize() {\n  const [size, setSize] = useState(() =&gt; ({\n    width: window.innerWidth,\n    height: window.innerHeight,\n  }));\n\n  useEffect(() =&gt; {\n    const onResize = () =&gt;\n      setSize({ width: window.innerWidth, height: window.innerHeight });\n    window.addEventListener(\"resize\", onResize);\n    return () =&gt; window.removeEventListener(\"resize\", onResize);\n  }, []);\n\n  return size;\n}<\/pre>\n<p><code>addEventListener<\/code>\u3068<code>removeEventListener<\/code>\u306f\u5fc5\u305a\u30bb\u30c3\u30c8\u306b\u3057\u307e\u3059\u3002\u89e3\u9664\u3092\u6020\u308b\u3068\u30ea\u30b9\u30ca\u30fc\u304c\u7a4d\u307f\u4e0a\u304c\u308a\u3001\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u3084\u591a\u91cd\u767a\u706b\u306e\u539f\u56e0\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30d1\u30bf\u30fc\u30f34: \u5024\u306e\u4fdd\u6301\u30d5\u30c3\u30af<\/h2>\n<p><code>useRef<\/code>\u3092\u4f7f\u3063\u3066\u30ec\u30f3\u30c0\u30fc\u3092\u307e\u305f\u3044\u3067\u5024\u3092\u4fdd\u6301\u3057\u307e\u3059\u3002\u4ee3\u8868\u4f8b\u304c\u300c\u524d\u56de\u306e\u5024\u300d\u3092\u899a\u3048\u308b\u30d5\u30c3\u30af\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">function usePrevious&lt;T&gt;(value: T): T | undefined {\n  const ref = useRef&lt;T | undefined&gt;(undefined);\n  useEffect(() =&gt; {\n    ref.current = value;\n  }, [value]);\n  return ref.current;\n}<\/pre>\n<p><code>useRef<\/code>\u306f\u5024\u3092\u5909\u3048\u3066\u3082\u518d\u30ec\u30f3\u30c0\u30fc\u3092\u8d77\u3053\u3055\u306a\u3044\u305f\u3081\u3001\u300c\u8868\u793a\u306b\u4f7f\u308f\u306a\u3044\u304c\u899a\u3048\u3066\u304a\u304d\u305f\u3044\u5024\u300d\u306b\u5411\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n<h2>\u30d1\u30bf\u30fc\u30f35: \u30ed\u30b8\u30c3\u30af\u5408\u6210\u30d5\u30c3\u30af<\/h2>\n<p>\u5c0f\u3055\u306a\u30d5\u30c3\u30af\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u4e0a\u4f4d\u306e\u95a2\u5fc3\u4e8b\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">function useDebouncedValue&lt;T&gt;(value: T, delay = 300): T {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() =&gt; {\n    const id = setTimeout(() =&gt; setDebounced(value), delay);\n    return () =&gt; clearTimeout(id);\n  }, [value, delay]);\n  return debounced;\n}\n\nfunction useSearch(query: string) {\n  const debounced = useDebouncedValue(query, 400);\n  return useFetch&lt;SearchResult[]&gt;(`\/api\/search?q=${encodeURIComponent(debounced)}`);\n}<\/pre>\n<p>\u5358\u6a5f\u80fd\u306e\u30d5\u30c3\u30af\u3092\u5408\u6210\u3057\u3066\u300c\u5165\u529b\u3092\u9593\u5f15\u3044\u3066\u691c\u7d22\u3059\u308b\u300d\u3092\u8868\u73fe\u3057\u3066\u3044\u307e\u3059\u3002\u5c0f\u3055\u304f\u4f5c\u3063\u3066\u7d44\u307f\u5408\u308f\u305b\u308b\u3001\u3053\u308c\u304c\u8a2d\u8a08\u306e\u4e2d\u5fc3\u3067\u3059\u3002<\/p>\n<h2>\u8a2d\u8a08\u3092\u5d29\u3055\u306a\u3044\u305f\u3081\u306e\u6ce8\u610f\u70b9<\/h2>\n<ul>\n<li>\u30d5\u30c3\u30af\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u5225\u306e\u30d5\u30c3\u30af\u306e\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u3067\u306e\u307f\u547c\u3076\u3002\u6761\u4ef6\u5206\u5c90\u3084\u30eb\u30fc\u30d7\u306e\u4e2d\u3067\u547c\u3070\u306a\u3044\u3002<\/li>\n<li><code>useEffect<\/code>\/<code>useCallback<\/code>\/<code>useMemo<\/code>\u306e\u4f9d\u5b58\u914d\u5217\u306f\u3001\u5185\u90e8\u3067\u53c2\u7167\u3059\u308b\u5024\u3092\u3059\u3079\u3066\u5217\u6319\u3059\u308b\u3002<\/li>\n<li><code>eslint-plugin-react-hooks<\/code>\u3092\u5c0e\u5165\u3057\u3066\u6a5f\u68b0\u7684\u306b\u691c\u8a3c\u3059\u308b\u3002<\/li>\n<li>\u300c2\u56de\u66f8\u3044\u305f\u3089\u5171\u901a\u5316\u300d\u7a0b\u5ea6\u306e\u6e29\u5ea6\u611f\u306b\u3057\u3001\u65e9\u3059\u304e\u308b\u62bd\u8c61\u5316\u3092\u907f\u3051\u308b\u3002<\/li>\n<li>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306fJSX\u3092\u8fd4\u3055\u306a\u3044\u3002\u8868\u793a\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8cac\u52d9\u306b\u7559\u3081\u308b\u3002<\/li>\n<\/ul>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306e\u8a2d\u8a08\u306f\u300c\u72b6\u614b\u30ab\u30d7\u30bb\u30eb\u5316 \/ \u30c7\u30fc\u30bf\u53d6\u5f97 \/ \u5916\u90e8\u30b7\u30b9\u30c6\u30e0\u8cfc\u8aad \/ \u5024\u306e\u4fdd\u6301 \/ \u30ed\u30b8\u30c3\u30af\u5408\u6210\u300d\u306e5\u30d1\u30bf\u30fc\u30f3\u3092\u30d9\u30fc\u30b9\u306b\u8003\u3048\u308b\u3068\u6574\u7406\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\u3044\u305a\u308c\u3082\u300c\u95a2\u9023\u3059\u308b\u72b6\u614b\u3068\u64cd\u4f5c\u306b\u540d\u524d\u3092\u4ed8\u3051\u3001UI\u304b\u3089\u5207\u308a\u96e2\u3059\u300d\u3068\u3044\u3046\u540c\u3058\u539f\u5247\u306e\u5fdc\u7528\u3067\u3059\u3002\u307e\u305a\u5c0f\u3055\u304f\u4f5c\u308a\u3001\u5fc5\u8981\u306b\u306a\u3063\u305f\u3089\u5408\u6210\u3059\u308b\u3002\u3053\u308c\u304c\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3092\u7834\u7dbb\u3055\u305b\u306a\u3044\u30b3\u30c4\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React\u306e\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306f\u300c\u72b6\u614b\u3092\u6301\u3063\u305f\u30ed\u30b8\u30c3\u30af\u306e\u518d\u5229\u7528\u300d\u3092\u5b9f\u73fe\u3059\u308b\u4ed5\u7d44\u307f\u3067\u3059\u3002\u3057\u304b\u3057\u66f8\u304d\u65b9\u306e\u6307\u91dd\u304c\u306a\u3044\u307e\u307e\u5207\u308a\u51fa\u3059\u3068\u3001\u300c\u305f\u3060\u95a2\u6570\u306b\u5206\u3051\u305f\u3060\u3051\u300d\u3067\u7d42\u308f\u308a\u3001\u518d\u5229\u7528\u6027\u3082\u53ef\u8aad\u6027\u3082\u4e0a\u304c\u3089\u306a\u3044\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":3431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","_lightning_design_setting":[],"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[36],"tags":[1161,236,472],"class_list":["post-3432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-memorandum","tag-react","tag-236","tag-472"],"veu_head_title_object":{"title":"","add_site_title":""},"jetpack_publicize_connections":[],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/qol-kk.com\/wp2\/wp-content\/uploads\/2026\/09\/20260923-plan038-thumbnail.jpg","_links":{"self":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/3432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/comments?post=3432"}],"version-history":[{"count":1,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/3432\/revisions"}],"predecessor-version":[{"id":3444,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/posts\/3432\/revisions\/3444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/media\/3431"}],"wp:attachment":[{"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/media?parent=3432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/categories?post=3432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qol-kk.com\/wp2\/wp-json\/wp\/v2\/tags?post=3432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}