1<!DOCTYPE html><html lang="ja"><head><meta charSet="utf-8"/> 2<!-- This site is hosted on Netlify. Anyone can build and deploy a site 3 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=16e41a40-b53e-48e8-8ea7-a33c666ca914 4 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta name="viewport" content="width=device-width, initial-scale=1"/><title>ããã³ãã¨ã³ã | Reactããããããã°</title><meta name="theme-color" content="#ffffff"/><meta name="description" content="Reactãããããã¨ã³ã¸ãã¢ã¨ãã¦å¦ç¿ããäºãã¢ã¦ãããããã¦ããããã°ã§ã"/><meta property="og:title" content="ããã³ãã¨ã³ã | Reactããããããã°"/><meta property="og:image" content="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/a23d9b2484934b36b66bdb1c7a4a43ed/og_image.webp"/><meta property="og:url" content="https://react-uncle-blog.netlify.app/category/frontend"/><meta property="og:site_name" content="Reactããããããã°"/><meta property="og:description" content="Reactãããããã¨ã³ã¸ãã¢ã¨ãã¦å¦ç¿ããäºãã¢ã¦ãããããã¦ããããã°ã§ã"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja_JP"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@react_nextjs"/><meta name="twitter:description" content="Reactãããããã¨ã³ã¸ãã¢ã¨ãã¦å¦ç¿ããäºãã¢ã¦ãããããã¦ããããã°ã§ã"/><meta name="twitter:title" content="ããã³ãã¨ã³ã | Reactããããããã°"/><meta name="twitter:image" content="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/a23d9b2484934b36b66bdb1c7a4a43ed/og_image.webp"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><meta name="next-head-count" content="19"/><link rel="preload" href="/_next/static/css/49099e3be05cb491.css" as="style"/><link rel="stylesheet" href="/_next/static/css/49099e3be05cb491.css" data-n-g=""/><link rel="preload" href="/_next/static/css/a2f9eac61a4eb447.css" as="style"/><link rel="stylesheet" href="/_next/static/css/a2f9eac61a4eb447.css" data-n-p=""/><noscript data-n-css=""></noscript>
4<script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
4<script src="/_next/static/chunks/webpack-8fa1640cc84ba8fe.js" defer=""></script>
4<script src="/_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script>
4<script src="/_next/static/chunks/main-4dcb7f9b52833aba.js" defer=""></script>
4<script src="/_next/static/chunks/pages/_app-fda65f0ba1b6233a.js" defer=""></script>
4<script src="/_next/static/chunks/790-7f981858e437333a.js" defer=""></script>
4<script src="/_next/static/chunks/374-65f984da99867767.js" defer=""></script>
4<script src="/_next/static/chunks/pages/category/%5Bslug%5D-6a557fba285939e6.js" defer=""></script>
4<script src="/_next/static/wuyDY1Tt9_JiPbBLBcH9Y/_buildManifest.js" defer=""></script>
4<script src="/_next/static/wuyDY1Tt9_JiPbBLBcH9Y/_ssgManifest.js" defer=""></script>
4</head><body>
vendor: 67 bytes, line 4
4<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
4GTM-MPPZ8CN
vendor: 82 bytes, line 4
4" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
4<div id="__next"><header class="Header_root__AC5PG"><div><a title="Reactããããããã°" href="/">Reactããããããã°</a></div><ul class="Header_headerBanner__UuPtj"><li><a href="https://beta-reactjs-org-git-effects-fbopensource.vercel.app/" class="Header_image__fahSe"><img src="/images/react.svg" alt="react" height="24" width="24"/></a></li></ul></header><nav class="Navigation_root__sl0bV"><ul class="Navigation_lists__en2kN"><li><a href="/category/frontend"><p>ããã³ãã¨ã³ã</p><p class="Navigation_subtitle__QFamw">Frontend</p></a></li><li><a href="/category/others"><p>ãã®ä»</p><p class="Navigation_subtitle__QFamw">Others</p></a></li><li><a href="/sitemap"><p>ãµã¤ãããã</p><p class="Navigation_subtitle__QFamw">Sitemap</p></a></li></ul></nav><main class="Layout_root__llSmQ"><div><article><div class="BreadCrumb_root__z_4PY index_breadCrumb__TG52O"><img src="/images/home.svg" alt="home" class="BreadCrumb_homeIcon__G2jr_" height="11" width="11"/><div class="BreadCrumb_label__r9s_m">ããã</div><img src="/images/arrow-right.svg" alt="arrow-right" class="BreadCrumb_arrowRight__b3hDQ" height="16" width="16"/><div class="BreadCrumb_label__r9s_m">ããã³ãã¨ã³ã</div></div><div class="index_blogItem__sysTg"><div class="BlogCard_root__ltZQA"><a href="/blog/equality-vs-strict-equality"><img src="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/3bc749bf9dca4fbc8c9eb0a163fbcb38/javascript.webp" height="600" width="1200" alt="thumbnail" class="BlogCard_thumbnail__23tpT"/></a><div class="BlogCard_title__iRgjF"><h3><a href="/blog/equality-vs-strict-equality">JavaScript(TypeScript)ã®ç価æ¼ç®å(==)ãå³å¯ç価æ¼ç®å(===)ãããã¸ã§ã¯ãã§çµ±ä¸ãããï¼</a></h3></div><div class="BlogCard_date__SMuxr"><img src="/images/clock.svg" alt="æ¥ä»" height="16" width="16"/><time dateTime="2023-02-26T16:19:03.375Z">2023-02-26</time></div><div class="Chip_tags__P9wLg"><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/javascript"><span>JavaScript</span></a><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/typescript"><span>TypeScript</span></a><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/eslint"><span>ESLint</span></a></div></div><div class="BlogCard_root__ltZQA"><a href="/blog/react-default-export-vs-named-export"><img src="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/dc10b60546504ea99a6b5b7a3e7e3435/react.webp" height="600" width="1200" alt="thumbnail" class="BlogCard_thumbnail__23tpT"/></a><div class="BlogCard_title__iRgjF"><h3><a href="/blog/react-default-export-vs-named-export">Reactã§Default exportã¨Named exportã©ã¡ãã使ç¨ããã°è¯ãã®ã??</a></h3></div><div class="BlogCard_date__SMuxr"><img src="/images/clock.svg" alt="æ¥ä»" height="16" width="16"/><time dateTime="2022-11-24T07:51:19.109Z">2022-11-24</time></div><div class="Chip_tags__P9wLg"><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/react"><span>React</span></a><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/javascript"><span>JavaScript</span></a><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/typescript"><span>TypeScript</span></a></div></div><div class="BlogCard_root__ltZQA"><a href="/blog/eslint-rule-no-nested-ternary"><img src="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/3bc749bf9dca4fbc8c9eb0a163fbcb38/javascript.webp" height="600" width="1200" alt="thumbnail" class="BlogCard_thumbnail__23tpT"/></a><div class="BlogCard_title__iRgjF"><h3><a href="/blog/eslint-rule-no-nested-ternary">ESLintã®no-nested-ternaryã使ç¨ãã¦ä¸é
æ¼ç®åã®å¯èªæ§ãæ
ä¿ããã!!</a></h3></div><div class="BlogCard_date__SMuxr"><img src="/images/clock.svg" alt="æ¥ä»" height="16" width="16"/><time dateTime="2022-11-11T05:26:32.746Z">2022-11-11</time></div><div class="Chip_tags__P9wLg"><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/javascript"><span>JavaScript</span></a><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/eslint"><span>ESLint</span></a></div></div><div class="BlogCard_root__ltZQA"><a href="/blog/react-state-managment"><img src="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/dc10b60546504ea99a6b5b7a3e7e3435/react.webp" height="600" width="1200" alt="thumbnail" class="BlogCard_thumbnail__23tpT"/></a>
4<div class="BlogCard_title__iRgjF"><h3><a href="/blog/react-state-managment">Reactã®ç¶æ
管çã©ã¤ãã©ãªãæ¯è¼ãã¦ãã¹ããªé¸æããããï¼</a></h3></div><div class="BlogCard_date__SMuxr"><img src="/images/clock.svg" alt="æ¥ä»" height="16" width="16"/><time dateTime="2022-11-03T09:29:49.166Z">2022-11-03</time></div><div class="Chip_tags__P9wLg"><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/react"><span>React</span></a></div></div><div class="BlogCard_root__ltZQA"><a href="/blog/use-react-componentprops-type"><img src="https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/dc10b60546504ea99a6b5b7a3e7e3435/react.webp" height="600" width="1200" alt="thumbnail" class="BlogCard_thumbnail__23tpT"/></a><div class="BlogCard_title__iRgjF"><h3><a href="/blog/use-react-componentprops-type">Reactã®ComponentPropsåã使ã£ã¦ä¸è¦ãªPropsã¨ãå¥ããããï¼ï¼</a></h3></div><div class="BlogCard_date__SMuxr"><img src="/images/clock.svg" alt="æ¥ä»" height="16" width="16"/><time dateTime="2022-10-20T09:07:53.537Z">2022-10-20</time></div><div class="Chip_tags__P9wLg"><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/react"><span>React</span></a><a class="Chip_tag__sOqm3 BlogCard_tagList__SN35p" href="/tags/typescript"><span>TypeScript</span></a></div></div></div></article></div><aside class="Sidebar_root__owsvl"><a href="//af.moshimo.com/af/c/click?a_id=3737612&p_id=1159&pc_id=1748&pl_id=18859&guid=ON" rel="nofollow" referrerPolicy="no-referrer-when-downgrade"><img src="//image.moshimo.com/af-img/0402/000000018859.png" width="320" height="300" alt="midworks"/></a><img src="//i.moshimo.com/af/i/impression?a_id=3737612&p_id=1159&pc_id=1748&pl_id=18859" width="1" height="1" alt="midworks"/><label><div class="InputField_wrapper__E5_iR"><div class="InputField_inputWrapper__ofubS"><input readonly="" placeholder="æ¤ç´¢" class="InputField_input__YFlvN Sidebar_input__VwPO6" value=""/><div class="InputField_surffixIcon__pLFK_"><img src="/images/search.svg" alt="search" height="20" width="20"/></div></div></div></label><div class="Profile_root__xscWX"><div class="Profile_title__Hekxw"><img src="/images/profile.svg" alt="ãããã£ã¼ã«" height="40" width="40"/><div class="Profile_profile__mknnI"><h4>ãããã£ã¼ã«</h4><span>Profile</span></div></div><div class="Profile_profileContent__bOsIg"><div><img src="/images/postman.svg" alt="ãµã ãã¤ã«ã¢ã¤ã³ã³" height="100" width="100"/></div><div class="Profile_profileText__s1pwq"><p>Reactããããã§ãã</p><p>ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã§ãã</p><p>åå¼·ä¼ã®è¬å¸«ããã¦ã¾ãã</p><p>詳細ã¯<a class="Profile_profileDetail__ZUXbb" href="/profile"><span>ãã¡ã</span><img src="/images/arrow-right-blue.svg" alt="ãããã£ã¼ã«è©³ç´°" height="16" width="16" class="Profile_arrowIcon__SfZPW"/></a></p></div></div></div><div class="TagList_root__jnEcz"><div class="TagList_title__XwnXT"><img src="/images/tag.svg" alt="ã¿ã°ä¸è¦§" height="40" width="40"/><div class="TagList_tag__Ma7ah"><h4>ã¿ã°ä¸è¦§</h4><span>Tag Lists</span></div></div><div class="TagList_contents__W8pI0"><div class="Chip_tags__P9wLg"><a class="Chip_tag__sOqm3 TagList_tagList__SfkYL" href="/tags/react"><span>React</span></a><a class="Chip_tag__sOqm3 TagList_tagList__SfkYL" href="/tags/typescript"><span>TypeScript</span></a><a class="Chip_tag__sOqm3 TagList_tagList__SfkYL" href="/tags/javascript"><span>JavaScript</span></a><a class="Chip_tag__sOqm3 TagList_tagList__SfkYL" href="/tags/eslint"><span>ESLint</span></a><a class="Chip_tag__sOqm3 TagList_tagList__SfkYL" href="/tags/other"><span>ãã®ä»</span></a></div></div></div><div class="CategoryList_root__Rqqfh"><div class="CategoryList_title__TjcbN"><img src="/images/category.svg" alt="ã«ãã´ãªä¸è¦§" height="45" width="45"/><div class="CategoryList_category__nXnUe"><h4>ã«ãã´ãªä¸è¦§</h4><span>Caterory Lists</span></div></div><ul class="CategoryList_contents__kQGi7"><li class="CategoryList_item__2zKs7"><a href="/category/frontend">ããã³ãã¨ã³ã(5)</a></li><li class="CategoryList_item__2zKs7"><a href="/category/others">ãã®ä»(2)</a></li></ul></div></aside></main><footer class="Footer_root__5Kc40"><div class="Footer_linkArea__zDmo_"><a href="/privacy">å
責äºé
ã»ãã©ã¤ãã·ã¼ããªã·ã¼</a><div class="Footer_divider__haIKz"></div><a href="https://forms.gle/Dvt3wWcXDzENR97CA" target="_blank" rel="noopener noreferrer">ãååã</a></div><p class="Footer_copyLight__rZJpI">Â©ï¸ <!-- -->2023<!-- --> <!-- -->Reactããããããã°</p></footer><button type="button" class="Button_root__FRJ3A Layout_scrollButton__Ko5kT Layout_hidden__5qg4p"><img src="/images/arrow-up.svg" alt="ã¹ã¯ãã¼ã«ããã"/></button></div>
4<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"contents":[{"id":"equality-vs-strict-equality","createdAt":"2023-02-26T16:19:03.375Z","updatedAt":"2023-02-26T16:44:17.260Z","publishedAt":"2023-02-26T16:34:03.913Z","revisedAt":"2023-02-26T16:44:17.260Z","title":"JavaScript(TypeScript)ã®ç価æ¼ç®å(==)ãå³å¯ç価æ¼ç®å(===)ãããã¸ã§ã¯ãã§çµ±ä¸ãããï¼","body":"\u003cp\u003eã©ããReactããããã§ãã\u003cbr\u003e\u003cbr\u003eéå»ã®æ¡ä»¶ãå«ããJavaScript(TypeScript)ã®ç価æ¼ç®å(==)ãå³å¯ç価æ¼ç®å(===)ããã¡ãæ··ãã«ãªã£ã¦ä½¿ç¨ããã¦ããã®ãããè¦ããã¦ãã¾ããã\u003cbr\u003e\u003cbr\u003eä»åã¯ãç価æ¼ç®å(==)ã¨å³å¯ç価æ¼ç®å(===)ã詳細ã«è§£èª¬ããããã¸ã§ã¯ãã§çµ±ä¸ã§ããããã«ãã¾ãã\u003cbr\u003e\u003cbr\u003eç¹ã«ä»è¨èªããJavaScript(TypeScript)ã«ç§»è¡ãã¦ããæ¹ã¯æå¾ã¾ã§èªãã§ã¿ã¦ãã ããï¼\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h3c979e4c18\"\u003eç価æ¼ç®å(==)ã¨å
4³å¯ç価æ¼ç®å(===)ã®éã\u003c/h2\u003e\u003cp\u003eã¾ããç価æ¼ç®å(==)ã¨å³å¯ç価æ¼ç®å(===)ã使ç¨ããå ´åã®å¤å®çµæãè¦ã¦ããã¾ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"hbf435f6bb7\"\u003eç価æ¼ç®å(==)\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e// ç価æ¼ç®å\nconsole.log(1 == 1);\n// Expected output: true\n\nconsole.log('hello' == 'hello');\n// Expected output: true\n\nconsole.log('1' == 1);\n// Expected output: true\n\nconsole.log(0 == false);\n// Expected output: true\n\nconsole.log(null == undefined);\n// Expected output: true\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"hf42abc9437\"\u003eå³å¯ç価æ¼ç®å(===)\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e// å³å¯ç価æ¼ç®å\nconsole.log(1 === 1);\n// Expected output: true\n\nconsole.log('hello' === 'hello');\n// Expected output: true\n\nconsole.log('1' === 1);\n// Expected output: false\n\nconsole.log(0 === false);\n// Expected output: false\n\nconsole.log(null === undefined);\n// Expected output: false\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eä¸è¨ã¯\u003ca href=\"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eå
¬å¼\u003c/a\u003eãåèã«ãã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eç価æ¼ç®å(==)ã¨å
4³å¯ç価æ¼ç®å(===)ã®éãã¯ã\u003cstrong\u003eåã¾ã§\u003c/strong\u003eçããå¤å®ã§ããã»ã§ããªããã大ããªéãã«ãªã£ã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eä¸è¨ã確èªãã¦ã¿ã¾ãããã\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e// ç価\nconsole.log('1' == 1);\n// Expected output: true\n\n// å³å¯ç価\nconsole.log('1' === 1);\n// Expected output: false\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003estringåã®'1'ã¨numberåã®1ãæ¯è¼ãã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eç価æ¼ç®å(==)ã®éã1ã¨ãããã¼ã¿ãæ¯è¼ããã¨trueã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003eãããå³å¯ç価æ¼ç®å(===)ã®å ´åã ã¨ãstringåã®'1'ã¨numberåã®1ãã©ããåãæ¯è¼ãã¦falseã«ãªã£ã¦ãããã¨ããããã¾ãã\u003cbr\u003e\u003cbr\u003eãããã\u003cstrong style=\"background-color:#ffffff\"\u003eåã¾ã§\u003c/strong\u003eçããã確èªãã¦ãããã¨ãããã¨ã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003eä»ã«ãnullã¨undefinedãæ¯è¼ããéã«ãç価ã§ã¯ã©ã¡ãããã¼ã¿ãç¡ãã¨ããæå³ã§trueã«ãªãã¾ãããå³å¯ç価ã§ã¯nullåã¨undefinedåã®æ¯è¼ã«ãªãåãçããç¡ãã®ã§falseã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003e次ã«ãªããç価æ¼ç®åã使ç¨ãããã¨ã鿍奍ãªã®ã確èªãã¦ããã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h219becd0f0\"\u003eãªãç価æ¼ç®å(==)ããã¡ãªã®ã\u003c/h2\u003e\u003cp\u003eçµè«ããè¿°ã¹ãã¨ããã°ãçºçããå¯è½æ§ãããããã§ãã\u003cbr\u003e\u003cbr\u003eä¸è¨ã§å
·ä½çãªä¾ãè¦ã¦ã¿ã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003cpre\u003e\u003ccode\u003efunction validateInput(input) {\n if (input == 123) {\n console.log('input is valid');\n } else {\n console.log('input is invalid');\n }\n}\n\nvalidateInput('123');\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eä¾ãã°ãã¦ã¼ã¶ã¼ãå
¥åããå¤ãæ¤è¨¼ããããã«numberåã®å
¥åå¤ã¨stringåã®å
¥åå¤ãæ¯è¼ããå ´åãèãã¾ãã\u003cbr\u003e\u003cbr\u003eãã®å ´åãå³å¯ç価æ¼ç®å(===)ã使ç¨ããã«ç価æ¼ç®å(==)ã使ç¨ãã¦ããããstringåã®å
¥åå¤'123'ãnumberåã®123ã«å¤æãããå
¥åå¤ãæååã§ããã«ããããããinput is invalidã¨è¡¨ç¤ºããã¾ãã\u003cbr\u003e\u003cbr\u003eãã®ããã«ãç価æ¼ç®å(==)ã使ç¨ãããã¨ã§æå³ããªãå夿ãè¡ããããã°ã®åå ã¨ãªãå¯è½æ§ããããããå³å¯ç価æ¼ç®å(===)ã使ç¨ãããã¨ãéè¦ã§ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h7642621081\"\u003eESLintã®ãeqeqeqãã«ã¼ã«ã使ç¨ãã\u003c/h2\u003e\u003cp\u003eããã¾ã§ç価ã»å³å¯ç価æ¼ç®åã«ã¤ãã¦è§£èª¬ãã¦ãã¾ããããããã¸ã§ã¯ãã«ãã£ã¦ãã®è¾ºãææ§ã«ä½¿ç¨ããã¦ããããããã¨ãå¤ã
ããã¾ãã\u003cbr\u003e\u003cbr\u003eããã§ãç価æ¼ç®å(==)ã使ç¨ããéã«ã¨ã©ã¼ãåºãESLintã®ã«ã¼ã«\u003cstrong\u003eeqeqeq\u003c/strong\u003eãç´¹ä»ãã¾ãã\u003cbr\u003eå
¬å¼: \u003ca href=\"https://eslint.org/docs/latest/rules/eqeqeq\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eeqeqeq\u003c/a\u003e\u003cbr\u003e\u003cbr\u003e\u003cspan style=\"color:#24292e\"\u003eESLintèªä½ã®è©³ç´°ã¯å²æããã¦ããã ãã¾ãããeslint.json,yml,jsãªã©ã®rulesã«1è¡è¿½å ããã ãã§ãã(eslintã¯npm installããå¿
è¦ãã)\u003c/span\u003e\u003cbr\u003e\u003cbr\u003e\u003cspan style=\"color:#24292e\"\u003eeslint.json\u003c/span\u003e\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e{\n\t \"parser\": \"@typescript-eslint/parser\",\n\t \"plugins\": [\"import\", \"@typescript-eslint\", \"prettier\"],\n\t \"ignorePatterns\": [\"*.config.js\", \"*.setup.js\", \"*.js\"],\n\t \"extends\": [\n\t \"eslint:recommended\",\n\t \"next\",\n\t \"plugin:@typescript-eslint/recommended\",\n\t \"plugin:@typescript-eslint/recommended-requiring-type-checking\",\n\t \"plugin:import/recommended\",\n\t \"prettier\"\n\t ],\n\t ...\n\t \"rules\": {\n\t ...\n \"eqeqeq\": \"error\", // 追å \n\t ...\n \t }\n}\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003cspan style=\"color:#24292e\"\u003eã¨ãã£ã¿ã§ã¨ã©ã¼ãåºã¦ããã確èª\u003c/span\u003e\u003cbr\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/314c93c81c624ebb835f12579e6eb1e8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-27%200.22.21.png\" alt=\"\"\u003e\u003cbr\u003e\u003cbr\u003eç価æ¼ç®åã使ç¨ããéã«ã¨ã©ã¼ãåºã¦ãããã¨ã確èªã§ãã¾ããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"ha214098e44\"\u003eã¾ã¨ã\u003c/h2\u003e\u003cp\u003eç価æ¼ç®åãå³å¯ç価æ¼ç®åã«ã¤ãã¦èª¬æãã¦ãã¾ãããããã°ãæªç¶ã«é²ãããã«ã\u003cstrong\u003eå³å¯ç価æ¼ç®å(===)\u003c/strong\u003eã使ç¨ãã¾ãããã\u003cbr\u003e\u003cbr\u003eãããèªåã®ããã¸ã§ã¯ãã§çµ±ä¸ã§ãã¦ããªããã°ESLintã®ã«ã¼ã«ã\u003cstrong\u003eeqeqeq\u003c/strong\u003eãã使ç¨ãã¦ãã¨ã©ã¼ãåºããªããã¦ã³ã¼ãã®å質æ
ä¿ã«åãå
¥ãã¦ã¿ã¦ãã ããã\u003cbr\u003e\u003cbr\u003e\u003cspan style=\"color:#24292e\"\u003eééã£ã¦ããé¨åããã£ã¨è¯ãæ¹æ³ãããã°\u003c/span\u003e\u003ca style=\"background-color:#ffffff\" href=\"https://twitter.com/react_nextjs\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTwitter\u003c/a\u003e\u003cspan style=\"color:#24292e\"\u003eã§DMãé¡ããã¾ãã\u003c/span\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e","thumbnail":{"url":"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/3bc749bf9dca4fbc8c9eb0a163fbcb38/javascript.webp","height":600,"width":1200},"description":"JavaScript(TypeScript)ã®ç価æ¼ç®å(==)ãå³å¯ç価æ¼ç®å(===)ã«ã¤ãã¦è§£èª¬ãã¦ããã¾ããå³å¯ç価æ¼ç®å(==)ã使ç¨ããã¨ãã°ãçºçããå¯è½æ§ãããã®ã§å³å¯ç価æ¼ç®å(===)ã使ç¨ããããã«ãã¾ããã¾ããESLintã®ã«ã¼ã«ãeqeqeqãã使ç¨ãããã¨ã§ãããã¸ã§ã¯ãã§å³å¯ç価æ¼ç®å(===)ã«çµ±ä¸ãããã¨ãã§ããã½ã¼ã¹ã³ã¼ãã®å質æ
ä¿ã«ç¹ããã¾ãã","tags":[{"id":"javascript","createdAt":"2022-11-11T05:27:35.652Z","updatedAt":"2022-11-11T05:27:35.652Z","publishedAt":"2022-11-11T05:27:35.652Z","revisedAt":"2022-11-11T05:27:35.652Z","tag":"JavaScript"},{"id":"typescript","createdAt":"2022-10-20T09:17:30.354Z","updatedAt":"2022-10-20T09:17:30.354Z","publishedAt":"2022-10-20T09:17:30.354Z","revisedAt":"2022-10-20T09:17:30.354Z","tag":"TypeScript"},{"id":"eslint","createdAt":"2022-11-11T05:28:27.328Z","updatedAt":"2022-11-11T05:28:27.328Z","publishedAt":"2022-11-11T05:28:27.328Z","revisedAt":"2022-11-11T05:28:27.328Z","tag":"ESLint"}],"category":[{"id":"frontend","createdAt":"2022-10-20T09:14:38.518Z","updatedAt":"2023-02-26T16:32:46.893Z","publishedAt":"2022-10-20T09:14:38.518Z","revisedAt":"2023-02-26T16:32:46.893Z","category":"ããã³ãã¨ã³ã","post":[{"id":"use-react-componentprops-type"},{"id":"react-state-managment"},{"id":"eslint-rule-no-nested-ternary"},{"id":"react-default-export-vs-named-export"},{"id":"equality-vs-strict-equality"}]}]},{"id":"react-default-export-vs-named-export","createdAt":"2022-11-24T07:51:19.109Z","updatedAt":"2022-11-24T12:24:56.624Z","publishedAt":"2022-11-24T07:53:28.367Z","revisedAt":"2022-11-24T12:24:56.624Z","title":"Reactã§Default exportã¨Named exportã©ã¡ãã使ç¨ããã°è¯ãã®ã??","body":"\u003cp\u003eã©ããReactããããã§ãã\u003cbr\u003e\u003cbr\u003eä»åã¯JavaScript/TypeScriptã§ä½¿ç¨ããDefault exportã¨Named exportã®éãã¨ä½¿ãåããReactãã¼ã¹ã§ã¾ã¨ãã¦ã¿ã¾ããã\u003cbr\u003e\u003cbr\u003eããã¾ã§ãç§ã調ã¹ãä¸ã§ã®çµæãªã®ã§ããã®è¾ºãçè§£ããä¸ã§èªãã§ããã ããã¨å¹¸ãã§ãã\u003cbr\u003e\u003cbr\u003eãã£ãã両è
ã®éãã«ã¤ãã¦ç¢ºèªãã¦ããã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"heb509af4ee\"\u003eDefault export\u003c/h2\u003e\u003cpre\u003e\u003ccode\u003e/* export */\nconst Button = () =\u0026gt; {\n return \u0026lt;button\u0026gt;ãã¹ã\u0026lt;/button\u0026gt;;\n};\n\nexport default Button;\n\n---------------------------------------------------------------\n\n/* import */\n // å½åãã\nimport Button from '@/components/Button'; \u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h76fd8ea3f6\"\u003eimportããå´ã§å¯¾è±¡ãå½åããå¿
è¦ããã\u003c/h3\u003e\u003cp\u003eä¸è¨ã®ä¾ã§åèã«ããã¨ãButtonãèªåã§å½åããå¿
è¦ãããã¾ãã\u003cbr\u003e\u003cbr\u003eããã¯Buttonã³ã³ãã¼ãã³ãã«å¯¾ãã¦ãButtonã¨å½åãä½ã
4importãã¦ããã®ãæç¢ºã«ãããããã«ãªã£ã¦ãã¾ãããä¸è¨ã®å ´åã©ãã§ãããã\u003cbr\u003e\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e/* import */\nimport ScrollButton from '@/components/Button';\nimport SubmitButton from '@/components/Button';\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e対象ãèªåã§å½åã§ããã®ã¯ä¾¿å©ã§ã¯ããã¾ãã\u003cbr\u003e\u003cbr\u003eããããåãã³ã³ãã¼ãã³ãã使ç¨ãã¦ããã®ã«ãããã¼ã¸ã§ã¯ScrollButtonããããã¼ã¸ã§ã¯SubmitButtonã¨ãªã£ã¦ããã¨ã³ã³ãã¼ãã³ãåãçµ±ä¸ããããButtonã³ã³ãã¼ãã³ãèªä½ãã©ã®ãããªãã®ãä¸æç¢ºã«ãªãè¯ãããã¾ããã\u003cbr\u003e\u003cbr\u003eã¾ããmoduleã®å½åã夿´ããimportå
ã§ä¿®æ£ãã¹ããã£ãå ´åãåããã¦ã¿ãã¾ã§ã¨ã©ã¼ãè¦ã¤ãããªããã¨ã¯æ¬ ç¹ã§ãã\u003cbr\u003e\u003cbr\u003eDefault exportã使ç¨ãããªãå½åã¯ããã¸ã§ã¯ãã§ãã£ãã管çãããã¨ãéè¦ã«ãªã£ã¦ããã§ãããã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"hda47f5b166\"\u003eReact.lazyã使ç¨ããæã¯Default exportãã使ããªã\u003c/h3\u003e\u003cp\u003eããã§ã¯React.lazyã«ã¤ãã¦ãã¾ã触ãã¾ããããç°¡æ½ã«èª¬æããã¨ãã¡ã¤ã«ãåå²ãã¦é
å»¶èªã¿è¾¼ã¿ãã§ããæ©è½ã§ãã\u003cbr\u003e\u003cbr\u003eãããªæãâ\u003c/p\u003e\u003cpre\u003e\u003ccode\u003econst ButtonComponent = lazy(() =\u0026gt; import('../components/Button'));\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eButtonã³ã³ãã¼ãã³ããNamed exportã«ããã¨ã¨ã©ã¼ãçºçãã¾ãã\u003cbr\u003e\u003cbr\u003eå
¬å¼ã確èªãã¦ã¿ãæãNamed exportã«ã¯å¯¾å¿ãã¦ããªãããã§ãã\u003cbr\u003e\u003cbr\u003eæ°ã«ãªãæ¹ã¯å
¬å¼ã確èªãã¦ã¿ã¦ãã ããã\u003cbr\u003eå
¬å¼: \u003ca href=\"https://reactjs.org/docs/code-splitting.html#reactlazy\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eReact.lazy\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h7c575df7d2\"\u003eNamed export\u003c/h2\u003e\u003cpre\u003e\u003ccode\u003e/* export */\nexport const Button = () =\u0026gt; {\n return \u0026lt;button\u0026gt;ãã¹ã\u0026lt;/button\u0026gt;;\n};\n\n---------------------------------------------------------------\n\n/* import */\nimport { Button } from '@/components/Button'\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"he464f7da91\"\u003eimportãexportã§å½åãçµ±ä¸ã§ãã\u003c/h3\u003e\u003cp\u003eexportå´ã§å½åã夿´ããéã«ãimportå´ã§ã¨ã©ã¼ãåºãã\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e/* export */\n// TestButtonã«å¤æ´\nexport const TestButton = () =\u0026gt; {\n return \u0026lt;button\u0026gt;ãã¹ã\u0026lt;/button\u0026gt;;\n};\n\n---------------------------------------------------------------\n\n/* import */\nimport { Button } from '@/components/TestButton'\n// errorãåºã¦æ£å¸¸ã«importã§ããªã\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eDefault exportã ã¨ã¨ã©ã¼ãåºãªãã®ã§åããã¦ã¿ãã¾ã§å¤æ´ç¹ã«æ°ã¥ãã«ããé¨åãããã¾ãããNamed exportã ã¨å¤æ´ããã¿ã¤ãã³ã°ã§ã¨ãã£ã¿ä¸ã«ã¨ã©ã¼ã表示ããããã°ãæªç¶ã«é²æ¢ã§ãã¾ãã(VSCodeãæ³å®)\u003cbr\u003e\u003cbr\u003eã¾ããimportããéã«è£å®ãå¹ãã®ã§ã¿ã¤ã鲿¢ã«ããªãã¾ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h82d4f50b55\"\u003eTypeScriptã使ç¨ãã¦ããå ´åãimportå´ã§åå®ç¾©ã§ãã\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e/* Type Ailias export */\nexport type ApiResponse = {\n name: string;\n age: number;\n};\n\n/* interface export */\nexport interface ApiResponse {\n name: string;\n age: number;\n};\n\n---------------------------------------------------------------\n\n/* import */\nimport { ApiResponse } from './types' // Named import\nimport type { ApiResponse } from './types' // Type-Only Imports\nimport { type ApiResponse } from './types' // Type\u0026nbsp;Modifiers on Import Names\u0026nbsp;\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eåãimportããéã«ããã¤ãæ¹æ³ãããã®ã§é çªã«è¦
4ã¦ããã¾ãããã\u003cbr\u003e\u003cbr\u003eâ Named import\u003cbr\u003eNamed exportããéã«importãã¦ããæ§æã«ãªãã¾ãã\u003cbr\u003eãã®ã¾ã¾åãä»ä¸ããã°OKã§ãã\u003cbr\u003e\u003cbr\u003eâ Type-Only Imports and Export\u003cbr\u003eãã¡ãã¯\u003ca href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTypeScript3.8\u003c/a\u003eãã追å ãããæ©è½ã§ãmoduleããåãimportããéã«ãtypeã使ç¨ãã¦åã®ã¿ãimportã§ããæ§æã§ãã\u003cbr\u003e\u003cbr\u003eãããããã®æ§æã«ã¯å¶éãããå¤ã®importã¨åæã«ä½¿ç¨ãããã¨ã¯ã§ãããä¸ã¤ã®ã¢ã¸ã¥ã¼ã«ããåæ
å ±ã¨å¤ã©ã¡ããimportããå ´åã«ã¯ããããimportãå¥ã«æ¸ããªãã¦ã¯ããã¾ããã\u003cbr\u003e\u003cbr\u003eãããªæãâ\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e/* export */\nexport type Props = {\n children: string\n}\n\nexport const Button = ({ children }) =\u0026gt; {\n return \u0026lt;button\u0026gt;{children}\u0026lt;/button\u0026gt;;\n};\n\n---------------------------------------------------------------\n\n/* import */\nimport { Button } from '@/components/Button' // ã³ã³ãã¼ãã³ããimport\nimport type { Props } from '@/components/Button' // åãimport\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eâ type Modifiers on Import Names\u0026nbsp;\u003cbr\u003eãã®æ©è½ã¯\u003ca href=\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#type-modifiers-on-import-names\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTypeScript4.5\u003c/a\u003eã§è¿½å ãããæ©è½ã§ãä»åã®è¨äºãå·çãã¦ããæã«åãã¦ç¥ãã¾ããw\u003cbr\u003e\u003cbr\u003eç°¡åã«èª¬æããã¨ãType-Only Imports and Exportã§å¤ã¨åã®importãåæã«åºæ¥ãªãã£ããã®ãã§ããããã«ãªãã¾ããã\u003cbr\u003e\u003cbr\u003eãããªæãâ\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e/* export */\nexport type Props = {\n children: string\n}\n\nexport const Button = ({ children }) =\u0026gt; {\n return \u0026lt;button\u0026gt;{children}\u0026lt;/button\u0026gt;;\n};\n\n---------------------------------------------------------------\n\n/* import */\nimport { Button, type Props } from '@/components/Button' \u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eãã®å©ç¹ã¯åãmoduleããå¤ã¨åã®æ
å ±ãimportã§ããããã«ãªãã®ã§ãType-Only Imports and Exportã§å¤ã¨åãåãã¦ããé¨åãè§£æ¶ããã¾ããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"ha214098e44\"\u003eã¾ã¨ã\u003c/h2\u003e\u003cp\u003eDefault exportã¨Named exportã«ã¤ãã¦ã¾ã¨ãã¦ãã¾ããããNext.jsãªã©Default exportã使ç¨ããªãã¨ãããªãç®æä»¥å¤ã¯\u003cstrong\u003eNamed export\u003c/strong\u003eãä¸å¿ã«ä½¿ã£ã¦ããæ¹ãè¯ãã¨å¤æãã¾ããã\u003cbr\u003e\u003cbr\u003eãã¯ãå½åã§ãã°ãæªç¶ã«é²ããã¨ãã§ããã®ãéçºãé²ãã¦ããä¸ã§çç£æ§ãé«ããªãã®ã§ä¸çªã®å©ç¹ã ã¨æã£ã¦ãã¾ãã\u003cbr\u003eä»ã«ãTypeScriptã®æ©è½ãè±å¯ãªã®ãé
åã§ãã\u003cbr\u003e\u003cbr\u003eãã®è¾ºã¯å®æçãªè©±ã«ãªãã®ã§æ£è§£ã¯ããã¾ãããããã£ã¨è¯ãæè¦ãèãæ¹ãããã°\u003ca href=\"https://twitter.com/react_nextjs\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTwitter\u003c/a\u003eã§DMãã ããã\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e","thumbnail":{"url":"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/dc10b60546504ea99a6b5b7a3e7e3435/react.webp","height":300,"width":600},"description":"ããã³ãã¨ã³ãã ãã§ãªãããã¯ã¨ã³ãã§ãJavaScriptã®default exportsã¨name exportsã©ã£ã¡ã使ç¨ããã°è¯ããæ©ãã§ãã人ã¯å¤ãã¨æãã¾ããä»åã¯Reactããã¼ã¹ã«ãã¦ä¸¡è
ã®éãã«è§¦ããã±ã¼ã¹ãã¤ã±ã¼ã¹ã§ä½¿ç¨ã§ããããã«è§£èª¬ãã¦ããã¾ãã","tags":[{"id":"react","createdAt":"2022-10-20T09:16:54.710Z","updatedAt":"2022-10-20T09:16:54.710Z","publishedAt":"2022-10-20T09:16:54.710Z","revisedAt":"2022-10-20T09:16:54.710Z","tag":"React"},{"id":"javascript","createdAt":"2022-11-11T05:27:35.652Z","updatedAt":"2022-11-11T05:27:35.652Z","publishedAt":"2022-11-11T05:27:35.652Z","revisedAt":"2022-11-11T05:27:35.652Z","tag":"JavaScript"},{"id":"typescript","createdAt":"2022-10-20T09:17:30.354Z","updatedAt":"2022-10-20T09:17:30.354Z","publishedAt":"2022-10-20T09:17:30.354Z","revisedAt":"2022-10-20T09:17:30.354Z","tag":"TypeScript"}],"category":[{"id":"frontend","createdAt":"2022-10-20T09:14:38.518Z","updatedAt":"2023-02-26T16:32:46.893Z","publishedAt":"2022-10-20T09:14:38.518Z","revisedAt":"2023-02-26T16:32:46.893Z","category":"ããã³ãã¨ã³ã","post":[{"id":"use-react-componentprops-type"},{"id":"react-state-managment"},{"id":"eslint-rule-no-nested-ternary"},{"id":"react-default-export-vs-named-export"},{"id":"equality-vs-strict-equality"}]}]},{"id":"eslint-rule-no-nested-ternary","createdAt":"2022-11-11T05:26:32.746Z","updatedAt":"2022-11-11T07:28:03.056Z","publishedAt":"2022-11-11T06:26:50.618Z","revisedAt":"2022-11-11T07:28:03.056Z","title":"ESLintã®no-nested-ternaryã使ç¨ãã¦ä¸é
æ¼ç®åã®å¯èªæ§ãæ
ä¿ããã!!","body":"\u003cp\u003eã©ããReactããããã§ãã\u003cbr\u003eå
æ¥ãä¸é
æ¼ç®åã«ã¤ãã¦ãã¤ã¼ãããéã«åé¿ããã£ãã
4®ã§è©³ããæ·±æããã¦ãããã¨æãã¾ãã\u003cbr\u003e\u003c/p\u003e\u003cblockquote class=\"twitter-tweet\"\u003e\u003cp lang=\"ja\" dir=\"ltr\"\u003eãã¾ã«ä¸é
æ¼ç®åã®ä¸ã«ä¸é
æ¼ç®åãæ¸ã人ããããã©å¯èªæ§æªããã¦NGãªæ°ãããã\u003cbr\u003eåºæ¬ãï¼ã¤ã®ä¸é
æ¼ç®åã§è§£æ±ºã§ããªãã®ã§ããã°ifæä½¿ã£ã¦æ¸ããæ¹ãè¯ãã\u003c/p\u003e\u0026mdash; Reactãããã (@react_nextjs) \u003ca href=\"https://twitter.com/react_nextjs/status/1589819315716788224?ref_src=twsrc%5Etfw\"\u003eNovember 8, 2022\u003c/a\u003e\u003c/blockquote\u003e\u003cscript async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\u003cp\u003eç¹ã«åå¦è
ã®æ¹ã«ã¯åºããå
容ã ã¨æãã®ã§æå¾ã¾ã§èªãã§ãç¾å ´ã§ä»å解説ããåºæ¥äºãããã°ãã®è¨äºã®å
容ãå
ã«ãã¤ã£ã¦ã¿ã¦ãã ããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h407456acd2\"\u003eä¸é
æ¼ç®åã¨ã¯\u003c/h2\u003e\u003cp\u003eä¸é
æ¼ç®åãåãããªãæ¹åãã«è»½ã解説ãã¾ãã\u003cbr\u003eãã¡ããã¡ãåã¿ç ãã¦èª¬æããã¨ã\u003cstrong\u003eif ã else ã \u003c/strong\u003eã¨æ¸ãããæã«ä¸æã§æ¸ã¾ããæ¼ç®åã®ãã¨ã§ãã\u003cbr\u003e\u003cbr\u003eifæã®å ´å\u003c/p\u003e\u003cpre\u003e\u003ccode\u003econst num = 4\n\nif (num === 4) {\n // çã®å¦ç\n} else {\n // å½ã®å¦ç\n}\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eä¸é
æ¼ç®åã®å ´å\u003c/p\u003e\u003cpre\u003e\u003ccode\u003econst num = 4\n\nnum === 4 ? /* çã®å¦ç */ : /* å½ã®å¦ç */\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eä¸é
æ¼ç®åã®å ´åãifæã¨æ¯ã¹ã¦ä¸æã§è¨è¼ã§ããã®ã§å¯èªæ§ãè¯ããªãã¾ãããï¼\u003cbr\u003e\u003cbr\u003eã§ã¯ã次ã«ä¸é
æ¼ç®åã®å
¥ãåã«ã¤ãã¦è¦ã¦ããã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"ha7d379640e\"\u003eãªãå
¥ãåã«ãªã£ãä¸é
æ¼ç®åããã¡ãªã®ã\u003c/h2\u003e\u003cp\u003eã¾ãã¯å
¥ãåã«ãªã£ãä¸é
æ¼ç®åã¨ã¯ã©ã®ãããªãã®ããµã³ãã«ãä½ãã¾ããã\u003cbr\u003e\u003cbr\u003eå
¥ãåã®ä¸é
æ¼ç®å\u003c/p\u003e\u003cpre\u003e\u003ccode\u003econst num = 4;\nconst num1 = 5;\n\nnum === 4\n ? console.log('4ã§ã')\n : num1 === 5\n ? console.log('5ã§ã')\n : console.log('4ã§ã5ã§ããªãã§ã');\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eä¸ã¤ãã¤ç¢ºèªãã¦ããã¾ãããã\u003cbr\u003e\u003cbr\u003eã¾ããnumã4ã®æã¯ã4ã§ããããã°ã«è¡¨ç¤ºããã¾ãã\u003cbr\u003enumã4ãããªãæã¯ãnum1ã5ã§ããã°ã5ã§ããã表示ãããnum1ã5ã§ãªãæã¯ã4ã§ã5ã§ããªãã§ããããã°ã«è¡¨ç¤ºãããä¸é
æ¼ç®åã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003eãã¡ããã¡ãèªã¿ã¥ããã§ããããã\u003cbr\u003eèªåã§ãµã³ãã«ä½ã£ã¦ã¦ãå¯èªæ§æªããã¦é ãæ··ä¹±ãã¦ãã¾ããw\u003cbr\u003e\u003cbr\u003eãã®ç¨åº¦ã®ç°¡åãªå¦çã§ããã°ææªèªããªãããªãã®ã§ããããããReactã®JSXå
ã§è¨è¿°ããã¦ããæã«ã¯ä¸ã
èªã¿åãã®ã«æéãã¹ãã¬ã¹ãããã£ã¦ãã¾ãã§ããããã\u003cbr\u003e\u003cbr\u003eTwitterã§ãè¨è¼ãã¾ããããå
¥ãåã«ãªãå ´åã¯ifæã使ç¨ãã¦å¯èªæ§ãé«ãã¾ãããã\u003cbr\u003e\u003cbr\u003eå
¥ãåã«ãªã£ãä¸é
æ¼ç®åãifæã§æ¸ããå ´å\u003c/p\u003e\u003cpre\u003e\u003ccode\u003econst num = 4;\nconst num1 = 5;\n\nif (num === 4) {\n console.log('4ã§ã');\n} else if (num1 === 5) {\n console.log('5ã§ã');\n} else {\n console.log('4ã§ã5ã§ããªãã§ã');\n}\u003c/code\u003e\u003c/pre\u003e\u003cp\u003eå
¥ãåã«ãªã£ã¦ããæãããã½ã¼ã¹éã¯è¥å¹²å¢ãã¾ãããããã¨è¦ãæã«ãªãã®å¦çãæ¸ãã¦ããã®ãããã«ãããããã«ãªãã¾ããã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"hd8969f652e\"\u003eESLintã®no-nested-ternaryã«ã¼ã«ã使ç¨ãã\u003c/h2\u003e\u003cp\u003eããã§ä¸é
æ¼ç®åã®å
¥ãåãããæã«ã¨ã©ã¼ãåºãESLintã®ã«ã¼ã«\u003cstrong\u003eno-nested-ternary\u003c/strong\u003eãç´¹ä»ãã¾ãã\u003cbr\u003eå
¬å¼: \u003ca href=\"https://eslint.org/docs/latest/rules/no-nested-ternary\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eno-nested-ternary\u003c/a\u003e\u003cbr\u003e\u003cbr\u003eESLintèªä½ã®è©³ç´°ã¯å²æããã¦ããã ãã¾ãããeslint.json,yml,jsãªã
4©ã®rulesã«1è¡è¿½å ããã ãã§ãã(eslintã¯npm installããå¿
è¦ãã)\u003cbr\u003e\u003cbr\u003eeslint.json\u003c/p\u003e\u003cpre\u003e\u003ccode\u003e{\n\t \"parser\": \"@typescript-eslint/parser\",\n\t \"plugins\": [\"import\", \"@typescript-eslint\", \"prettier\"],\n\t \"ignorePatterns\": [\"*.config.js\", \"*.setup.js\", \"*.js\"],\n\t \"extends\": [\n\t \"eslint:recommended\",\n\t \"next\",\n\t \"plugin:@typescript-eslint/recommended\",\n\t \"plugin:@typescript-eslint/recommended-requiring-type-checking\",\n\t \"plugin:import/recommended\",\n\t \"prettier\"\n\t ],\n\t ...\n\t \"rules\": {\n\t ...\n \"no-nested-ternary\": \"error\", // 追å \n\t ...\n \t }\n}\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eã¨ãã£ã¿ã§ã¨ã©ã¼ãåºã¦ããã確èª\u003cbr\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/3ac8a14acf454241adff120f4eb61037/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-11%2016.28.20.png\" alt=\"\"\u003e\u003cbr\u003eå
¥ãåã«ãªã£ãå ´åã¯ã¨ã©ã¼ãåºã¦ã¾ããï¼\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"ha214098e44\"\u003eã¾ã¨ã\u003c/h2\u003e\u003cp\u003eä¸é
æ¼ç®åã«ã¤ãã¦è²ã
æ¸ãã¦ãã¾ããããåºæ¬\u003cstrong style=\"background-color:#ffffff\"\u003eif ã else ã \u003c/strong\u003eã®å ´åã¯ä½¿ç¨ããæ¹ããããå
¥ãåã«ãªãéã¯\u003cstrong style=\"background-color:#ffffff\"\u003eifæ\u003c/strong\u003eã使ç¨ãã¾ãããã\u003cbr\u003e\u003cbr\u003eããã¸ã§ã¯ãã«ãã£ã¦ã¯ãããããä¸é
æ¼ç®åãç¦æ¢ãã¦å
¨é¨ifæã§æ¸ãã¨ãããããããã§ãã\u003cbr\u003e\u003cbr\u003e大äºãªã®ã¯ã±ã¼ã¹ãã¤ã±ã¼ã¹ã§ä½¿ãåããããã¨ã ã¨æãã¾ãã\u003cbr\u003e\u003cbr\u003eããã¸ã§ã¯ãã§ã¡ã³ãã¼ã®ã¹ãã«ããã©ãã©ãªå ´åã¯ã\u003cstrong style=\"background-color:#ffffff\"\u003eno-nested-ternary\u003c/strong\u003eã使ç¨ããã«ã¼ã«ãçµ±ä¸ãã¦ã½ã¼ã¹ã³ã¼ãã®å質ãæ
ä¿ãã¦ããã¾ãããã\u003cbr\u003e\u003cbr\u003eããã¯JavaScriptã®ã¿ã«ãªãããä¸é
æ¼ç®åã使ç¨ãããè¨èªå
¨ã¦ã«å
±éãã¦ãããã¨ãªã®ã§æ¯éåèã«ãã¦ã¿ã¦ãã ããã\u003cbr\u003e\u003cbr\u003e\u003cbr\u003eééã£ã¦ããé¨åããã£ã¨è¯ãæ¹æ³ãããã°\u003ca href=\"https://twitter.com/react_nextjs\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTwitter\u003c/a\u003eã§DMãé¡ããã¾ãã\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e","thumbnail":{"url":"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/3bc749bf9dca4fbc8c9eb0a163fbcb38/javascript.webp","height":600,"width":1200},"description":"ESLintã®ã«ã¼ã«no-nested-ternaryã«ã¤ãã¦è¨åãã¦ããã¾ãããã®ã«ã¼ã«ã¯ä¸é
æ¼ç®åã®å
¥ãåãç¦æ¢ããã«ã¼ã«ã§ããä¸é
æ¼ç®åã®å
¥ãåã¯å¯èªæ§ãæªãã®ã§ããã¸ã§ã¯ãã§è¦ãããããã®ã«ã¼ã«ãå
¥ãã¦ã½ã¼ã¹ã³ã¼ãã®å¯èªæ§ãæ
ä¿ãã¾ãããã","tags":[{"id":"javascript","createdAt":"2022-11-11T05:27:35.652Z","updatedAt":"2022-11-11T05:27:35.652Z","publishedAt":"2022-11-11T05:27:35.652Z","revisedAt":"2022-11-11T05:27:35.652Z","tag":"JavaScript"},{"id":"eslint","createdAt":"2022-11-11T05:28:27.328Z","updatedAt":"2022-11-11T05:28:27.328Z","publishedAt":"2022-11-11T05:28:27.328Z","revisedAt":"2022-11-11T05:28:27.328Z","tag":"ESLint"}],"category":[{"id":"frontend","createdAt":"2022-10-20T09:14:38.518Z","updatedAt":"2023-02-26T16:32:46.893Z","publishedAt":"2022-10-20T09:14:38.518Z","revisedAt":"2023-02-26T16:32:46.893Z","category":"ããã³ãã¨ã³ã","post":[{"id":"use-react-componentprops-type"},{"id":"react-state-managment"},{"id":"eslint-rule-no-nested-ternary"},{"id":"react-default-export-vs-named-export"},{"id":"equality-vs-strict-equality"}]}]},{"id":"react-state-managment","createdAt":"2022-11-03T09:29:49.166Z","updatedAt":"2023-01-04T07:44:18.895Z","publishedAt":"2022-11-03T09:41:48.135Z","revisedAt":"2023-01-04T07:44:18.895Z","title":"Reactã®ç¶æ
管çã©ã¤ãã©ãªãæ¯è¼ãã¦ãã¹ããªé¸æããããï¼","body":"\u003cp\u003eã©ããReactããããã§ãã\u003cbr\u003e\u003cbr\u003eæ¨ä»ã®ReactãNext.jsã®é²åã®æ©ãã«ã¯ã¨ã¦ãé©ãã¦ãã¾ãã\u003cbr\u003eããã¯Reactã«è¿½å¾ããã©ã¤ãã©ãªãåæ§ã§ãã\u003cbr\u003e\u003cbr\u003eç¹ã«Reactã®ç¶æ
管çã©ã¤ãã©ãªã¯æ¦å½æä»£ãè¿ããæ§ã
ãªç¶æ
管çã©ã¤ãã©ãªãå°é ãã¦ãã¾ããã\u003cbr\u003e\u003cbr\u003eä»åã¯ã©ã¤ãã©ãªã®ç´¹ä»ããããã使ç¨ããã¦ããã§ãããç©ã«ãã©ã¼ã«ã¹ãã¦èªåãªãã«ã¾ã¨ãã¦ã¿ããã¨æãã¾ãã\u003cbr\u003e\u003cstrong style=\"font-size: 0.75em\"\u003eâ»2022å¹´çã«æ´æ°ãã¾ããã\u003c/strong\u003e\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h79b411f1c1\"\u003eçµå±ãç¶æ
管çã©ã¤ãã©ãªã¯ä½ã人æ°ãªã®ãï¼ï¼\u003c/h2\u003e\u003cp\u003eJavaScript Rising Startsã®State Managementé¨é(2022)ã¨npm trendsãè¦ã¦ããã¾ãããã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"hb15961a87d\"\u003eJavaScript Rising Starts\u003c/h3\u003e\u003cp\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/d255fe29668645fa816337fa365156fd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-01-04%2016.34.51.png\" alt=\"\"\u003e\u003cbr\u003eâ» \u003ca href=\"https://risingstars.js.org/2021/en#section-statemanagement\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eJavaScript Rising Starts\u003c/a\u003eã¨ã¯Githubã®ã¹ã¿ã¼æ°ã§ã®ã©ã³ãã³ã°ãã¾ã¨ãããã®(2022/1/4ç¾å¨)\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"ha421048148\"\u003enpm trends\u003c/h3\u003e\u003cp\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/6f482c67016f458db6892ccd0bac23d4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-02%2019.36.09.png\" alt=\"\"\u003e\u003cbr\u003eâ»\u003ca href=\"https://npmtrends.com/jotai-vs-recoil-vs-redux-vs-valtio-vs-zustand\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e npm trends\u003c/a\u003eã¨ã¯npmãããã¦ã³ãã¼ããããããã±ã¼ã¸ã®æ°ãã°ã©ãè¡¨ç¤ºåºæ¥ããã®(2022/11/2æç¹)\u003cbr\u003e\u003cbr\u003e2022å¹´çJavaScript Rising Startsã§ã¯Zustandãå§åçãªäººæ°ã§ä¸ä½ãç²å¾ãã¦ãã¾ãã\u003cbr\u003eèªåãäºæ³ãã¦ããéããJotaiãRecoilãæããã¦å ã
ã®3ä½ã«ãªãã¾ãããã\u003cbr\u003eããã¦åãæ¨ãã¦ããValtioãReduxãæãã¦6ä½ã¾ã§ä¸ãã£ã¦ãã¾ããã\u003cbr\u003eä»å¹´åº¦ä¸ã«ã¯Recoilãæãã¨æããã¾ãã\u003cbr\u003e\u003cbr\u003eä¸è»¢ãnpm trendsã§ã¯70ä¸ãã¦ã³ãã¼ãããã¦ããReduxãå§åã\u003cbr\u003eZustandãªã©ã¯ã¾ã ã¾ã ããããã£ã¦æãã§ãããã\u003cbr\u003e\u003cbr\u003eReduxã¯10å¹´åããããããã£ãã
4®ã§ãã¦ã³ãã¼ãæ°ãå¤ãããæè¿ã§ã¯ä»ã®ã©ã¤ãã©ãªã®å¢ããå¢ãã¦ãã¦äººæ°ãè½ã¡ã¦ãã¦ãã¾ããã\u003cbr\u003e\u003cbr\u003eã§ã¯ã次ã«Storeã»Atomãã¼ã¹ã«ã¤ãã¦è§£èª¬ããåã©ã¤ãã©ãªã®æ
å ±ãè¦ã¦ããããã¨æãã¾ãã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h4d05cf9f01\"\u003eStoreãã¼ã¹ã®ç¶æ
管çã©ã¤ãã©ãª\u003c/h2\u003e\u003cp\u003eã¾ãæåã«Storeãã¼ã¹ã¨ã¯ä½ãå³ã§è§£èª¬ãã¦ããã¾ãã\u003cbr\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/2a7de941b18f451d9a69243632a6af31/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-02%2023.23.28.png\" alt=\"\"\u003e\u003cbr\u003eé丸ã¯ã³ã³ãã¼ãã³ãã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003eStoreãã¼ã¹ã¨ã¯ç¶æ
ãStoreã¨ããä¸ã¤ã®ãªãã¸ã§ã¯ãã¨ãã¦ç®¡çããåã³ã³ãã¼ãã³ãããåç
§ã§ãããã¨ãè¨ãã¾ãã\u003cbr\u003e\u003cbr\u003eãã使ãããã©ã¤ãã©ãªã¨ãã¦\u003cstrong\u003eRedux\u003c/strong\u003eã\u003cstrong\u003eZustand\u003c/strong\u003eãªã©ãããã¾ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h227615658d\"\u003eRedux\u003c/h3\u003e\u003cp\u003eå
¬å¼: \u003ca href=\"https://redux.js.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ehttps://redux.js.org/\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\u003cul\u003e\u003cli\u003eFacebook(ç¾Meta)社ãæå±ãã¦ãããFluxã¢ã¼ããã¯ãã£ãæ¡ç¨ãã¦ãã\u003c/li\u003e\u003cli\u003eå䏿¹åã«ãã¼ã¿ãæµãã¦ããã®ã§ããã¼ã¿ã®æµãã追å¾ãããããªã\u003c/li\u003e\u003cli\u003eå¤§è¦æ¨¡ãªã¢ããªã§ã¯ããå
ç¢åã§ããã®ã§åãçºæ®ã§ãã\u003c/li\u003e\u003cli\u003eActionãDispatchãReducerãStoreãªã©ãã¡ã¤ã«ãåå²ãã¦ç®¡çããã®ãä¸è¬çã§ãã¡ã¤ã«æ°ãå¢å ããã®ãåé¡\u003c/li\u003e\u003cli\u003eæããä¸çªæå¤æ®ã§ã·ã§ã¢çãé«ãç¶æ
管çã©ã¤ãã©ãª\u003c/li\u003e\u003cli\u003eReduxã§éåæå¦çãå®ç¾ãããã«ã¯ãå¥ã§middllewareã©ã¤ãã©ãª(redux-thunkãredux-saga)ãå°å
¥ããæ¹ãããã\u003c/li\u003e\u003cli\u003eã©ããã¦ãåå¦è
ã«ã¯å¦ç¿ã³ã¹ããé«ããªã£ã¦ãã¾ãã\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eRedux DevTools\u003c/a\u003eã¨ããChromeã®æ¡å¼µæ©è½ããããç¶æ
ã®å¤æ´ãç»é¢ã§ç¢ºèªã§ãã\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cbr\u003eãªã¹ã¹ã¡åº¦: â
â
âââ\u003cbr\u003e\u003cbr\u003eç¶æ
管çã®æµããå䏿¹åã®æµã«çµããã®ã§ãã°ãçºçããå¯è½æ§ã大å¹
ã«åæ¸ã§ãã¾ãã\u003cbr\u003e\u003cbr\u003eãããããã¡ã¤ã«æ°ã®å¢å ããè¤éã«ãªã£ã¦ãããã¨ãå¤ãããå人çã«ã¯ãã¾ã使ç¨ããããªãã§ãã\u003cbr\u003e\u003cbr\u003eæè¿ã¯ãæ°è¦éçºã§å°å
¥ããã¨ããã¯ãã¾ãè¦ãªããªã£ã¦ãã¦ãè±Reduxãé²ãã§ãã¾ãã\u003cbr\u003e\u003cbr\u003eStoreã«å
¨ãã¼ã¿ãã¶ã¡è¾¼ã人ã¨ã¯ä»²è¯ãã§ãããã«ããã¾ãããç¬\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h7526918382\"\u003eZustand\u003c/h3\u003e\u003cp\u003eå
¬å¼: \u003ca href=\"https://zustand-demo.pmnd.rs/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ehttps://zustand-demo.pmnd.rs/\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\u003cul\u003e\u003cli\u003eå
¬å¼ã®ã¯ããã(?)ã坿ãã§ã\u003c/li\u003e\u003cli\u003eReduxã®ãããªãã¤ã©ã¼ãã³ãã¬ã¼ãã使ããå¿
è¦ããªãç°¡æ½ã«è¨è¿°ã§ãã(Redux-Toolkitãããã«ç°¡æ½ã«ããæã)\u003c/li\u003e\u003cli\u003e\u003ca style=\"background-color:#ffffff\" href=\"https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eRedux DevTools\u003c/a\u003eã«ã対å¿ãã¦ãã\u003c/li\u003e\u003cli\u003eReduxãçè§£ãã¦ãã人ã ã¨ãå¦ç¿ã³ã¹ããã»ã¼ããããªã\u003c/li\u003e\u003cli\u003eãµã¤ãºããã¡ããã¡ã軽ã\u003c/li\u003e\u003cli\u003eä¸å¿Storeãè¤æ°ä½ããããã\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cbr\u003eãªã¹ã¹ã¡åº¦: â
â
â
â
â\u003cbr\u003e\u003cbr\u003eå人çã«ã¯çµæ§ãªã¹ã¹ã¡ãªç¶æ
管çã©ã¤ãã©ãªã\u003cbr\u003e\u003cbr\u003eå
¬å¼ã®ã¯ãããã坿éãã¦æ¨ãã¦ããã¨ãããããã¾ãã\u003cbr\u003e\u003cbr\u003eStoreãè¤æ°ä½ããã®ã§å®å
¨ãªStoreãã¼ã¹ã¨ã¯è¨ãã¾ãããä¸å¿æ¬ãã¯ããã«å
¥ãã¦ãããã¨ã«ã\u003cbr\u003e\u003cbr\u003eStoreãã¼ã¹ã¨Atomãã¼ã¹ã®ä¸éå°ç¹ã ã¨èªèãã¦ããããã¨å¹¸ãã§ãã\u003cbr\u003e\u003cbr\u003eReduxãããã«ã³ã³ãã¯ãã«ãããã®ã§ãReduxããç½®ãæããæã«å¦ç¿ã³ã¹ããã»ã¼ããããªãã®ã§ãªã¹ã¹ã¡ã®ä¸åã\u003cbr\u003e\u003cbr\u003eèªã¿æ¹ã¯ãã¤ãèªã§ã\u003cspan style=\"color:#333333\"\u003eãã¥ã¼ã¹ã¿ã³ããã¨èªã
4ãããã§ãã\u003c/span\u003e\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h3e55398a54\"\u003eAtomãã¼ã¹ã®ç¶æ
管çã©ã¤ãã©ãª\u003c/h2\u003e\u003cp\u003e次ã«Atomãã¼ã¹ã«ã¤ãã¦è§£èª¬ãã¦ããã¾ãã\u003cbr\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/00004adda2254de994f0ac396c194830/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-11-02%2023.33.12.png\" alt=\"\"\u003e\u003cbr\u003e\u003cbr\u003eAtomãã¼ã¹ã¨ã¯ãStoreãã¼ã¹ã¨ã¯ç°ãªãè¤æ°ã®Atomã§ç¶æ
管çãè¡ããã¨ãè¨ãã¾ãã\u003cbr\u003e\u003cbr\u003eåã³ã³ãã¼ãã³ãããè¤æ°ã®Atomãåç
§ã§ããå½¢ã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003eå¿
è¦ã§ããã°éã«Selectorãæã¿ãAtomã®ãã¼ã¿ãå å·¥ãã¦ãã¡ããããåç
§å¯è½ã§ãã\u003cbr\u003e\u003cbr\u003eãã使ãããã©ã¤ãã©ãªã¨ãã¦\u003cstrong style=\"background-color:#ffffff\"\u003eRecoil\u003c/strong\u003eã\u003cstrong style=\"background-color:#ffffff\"\u003eJotai\u003c/strong\u003eãªã©ãããã¾ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"hc41e2fe005\"\u003eRecoil\u003c/h3\u003e\u003cp\u003eå
¬å¼: \u003ca href=\"https://recoiljs.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ehttps://recoiljs.org/\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\u003cul\u003e\u003cli\u003eMeta社ãéçºããç¶æ
管çã©ã¤ãã©ãª\u003c/li\u003e\u003cli\u003e大ããåãã¦AtomãSelectorã¨ããæ¦å¿µããã\u003c/li\u003e\u003cli\u003eåºæ¬ã¯Atomã®ã¿ã§ç¶æ
管çã¯å®çµã§ãã\u003c/li\u003e\u003cli\u003eAtomãç¶æ
管çãè¡ãé¨åãSelectorã¯Atomããæ´¾çããããå¤ãä½ãããæã¨ãã«å©ç¨ã§ãã\u003c/li\u003e\u003cli\u003eAtomãä¸ã¤ã«ã¾ã¨ãã¦Reduxã®Storeã®ããã«æ±ããã¨ãã§ãã\u003c/li\u003e\u003cli\u003e\u003ca href=\"https://chrome.google.com/webstore/detail/recoil-dev-tools/dhjcdlmklldodggmleehadpjephfgflc\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eRecoil Dev Tools\u003c/a\u003eããããAtomã®ç¶æ
ã確èªã§ãã\u003c/li\u003e\u003cli\u003ehooksã®useStateã®æ§ãªå½¢å¼ã§Atomããç¶æ
ãåç
§ã§ãã\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cbr\u003eãªã¹ã¹ã¡åº¦: â
â
â
ââ\u003cbr\u003e\u003cbr\u003eMeta社ãéçºããç¶æ
管çã©ã¤ãã©ãªã\u003cbr\u003e\u003cbr\u003eã¾ã æ£å¼ãªãªã¼ã¹ã§ã¯ãªãã®ã§ä»å¾ç ´å£ç夿´ãå
¥ãå¯è½æ§ãããããæè¿ã¯éçºç¾å ´ã§ãã使ç¨ããã¦ããå°è±¡ãããã¾ãã\u003cbr\u003e\u003cbr\u003eç¶æ
ã䏿ã®keyã使ã£ã¦ç®¡çããã®ã§ãuuidãªã©ã使ç¨ãkeyã被ããªãããã«ããã®ãè¯ãã§ãã\u003cbr\u003e(åå¼·ä¼ã§æãã¦ããã£ã)\u003cbr\u003e\u003cbr\u003eããã±ã¼ã¸ãµã¤ãºããããã¨éãã®ã§è¤éãªç¶æ
管çãå¿
è¦ã§ãªããã°ãã®å¾åºã¦ãã\u003cstrong\u003eJotai\u003c/strong\u003eã§ãè¯ãæ°ããã¾ãã\u003cbr\u003e\u003cbr\u003eããã¯ã°ã©ã¦ã³ããMeta社ãªã®ã§å°æ¥æ§ã¯æå¾
ã§ãããã§ãï¼\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"he797c16ec4\"\u003eJotai\u003c/h3\u003e\u003cp\u003eå
¬å¼: \u003ca href=\"https://jotai.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ehttps://jotai.org/\u003c/a\u003e\u003cbr\u003e\u003c/p\u003e\u003cul\u003e\u003cli\u003eã»ã¼Recoilã¨ä¸ç·(Recoilããç°¡æ½ã«è¨è¿°ã§ãã)\u003c/li\u003e\u003cli\u003eåºæ¬Atomãç¶æ
管çãè¡ãé¨åãSelectorçãªãã®ã¯ãªããRecoilã¨åãã§Selectorã¨ã»ã¼åçã®ãã®ãä½ãã\u003c/li\u003e\u003cli\u003e\u003ca style=\"background-color:#ffffff\" href=\"https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eRedux DevTools\u003c/a\u003eã使ç¨ã§ãã\u003c/li\u003e\u003cli\u003eTwitterã§ã®ãµãã¼ããç±ã(\u003ca href=\"https://twitter.com/jotaifriends\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eJotai Friends\u003c/a\u003e)\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cbr\u003eãªã¹ã¹ã¡åº¦: â
â
â
â
â\u003cbr\u003e\u003cbr\u003eä½è
ã¯æ¥æ¬äººãªã®ã§æ¥æ¬èªã®æ
å ±ãè±å¯ã§
4å
¬å¼ããã¥ã¡ã³ãã詳細ã«è¨è¼ããã¦ããã\u003cbr\u003e\u003cbr\u003eJotaiã¯Recoilã®ææ³ã«å¼·ãå½±é¿ãåãã¦ãããã»ã¼Recoilã¨åãæ¸ãæ¹ãã§ããã\u003cbr\u003e\u003cbr\u003eå人çã«ã¯ããã±ã¼ã¸ãµã¤ãºãå°ãããReact Hooksãå¦ãã§ãã人ã§ããã°å¦ç¿ã³ã¹ããã»ã¼ããããªãã®ã§ãªã¹ã¹ã¡ã§ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"ha214098e44\"\u003eã¾ã¨ã\u003c/h2\u003e\u003cp\u003eããã¾ã§äººæ°ãé«ãç¶æ
管çã©ã¤ãã©ãªãç´¹ä»ãã¦ãã¾ããã\u003cbr\u003e\u003cbr\u003eè²ã
調æ»ããä¸ã§ãå人çãªææãå«ãè¨è¼ãã¦ãã¾ããããAtomãã¼ã¹ã¯ç¶æ
管çãè¤æ°ã®Atomã§è¡ããããã£ãã管çããªãã¨ã«ãªã¹ãªã³ã¼ããçã¾ããããªäºæããã¾ããã\u003cbr\u003e\u003cbr\u003eã©ã¡ãã«ããç¶æ
管çã©ã¤ãã©ãªãæ±ãã«ã¯è¨è¨ãå½ã«ãªã£ã¦ããã®ã§ãå人ã®ããã¸ã§ã¯ãã«ãã£ããã®ãã§ããã ãæ£ç¢ºã«é¸å®ããåãå¿
è¦ã«ãªã£ã¦ãããªã¨æãã¾ãã\u003cbr\u003e\u003cbr\u003eã¡ãªã¿ã«çè
ã¯ç´¹ä»ããã©ã¤ãã©ãªå
¨ã¦ä½¿ç¨ããçµé¨ãããã¾ãããä¸çªä½¿ãããããªã¨æã£ãã®ã¯\u003cstrong\u003eJotai\u003c/strong\u003eã§ããã\u003cbr\u003e\u003cbr\u003eä»ã«ãSWRãReact Queryãªã©ã
4§ç¶æ
管çããæ¹æ³ãããã¾ããä»åã¯çãã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eä»å¾ã¯ReduxãZustandãªã©ã®è¨äºãæ¸ãã¦ãããã¨æãã¾ãã\u003cbr\u003e\u003cbr\u003eããã¾ã§åäººã®ææãªã®ã§ééã£ã¦ããé¨åãããã°Twitterãªã©ã§DMãã ããã\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003ca href=\"https://valtio.pmnd.rs/docs/introduction/getting-started\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eValtio\u003c/a\u003e使ã£ã¦ã¿ãããã\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e","thumbnail":{"url":"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/dc10b60546504ea99a6b5b7a3e7e3435/react.webp","height":300,"width":600},"description":"Reactã®ç¶æ
管çã©ã¤ãã©ãªã«ã¤ãã¦èå¯ãã¦ããã¾ããStoreãã¼ã¹ã®Reduxã»ZustandãAtomãã¼ã¹ã®Recoilã»Jotaiã«ã¤ãã¦ã®ç¹å¾´ã解説ãã¾ãããã®è¨äºãèªããã¨ã§è¦ä»¶ã«ãã£ãã©ã¤ãã©ãªãé¸å®ã§ããåèã«ãªãã°ã¨æãã¾ãã","tags":[{"id":"react","createdAt":"2022-10-20T09:16:54.710Z","updatedAt":"2022-10-20T09:16:54.710Z","publishedAt":"2022-10-20T09:16:54.710Z","revisedAt":"2022-10-20T09:16:54.710Z","tag":"React"}],"category":[{"id":"frontend","createdAt":"2022-10-20T09:14:38.518Z","updatedAt":"2023-02-26T16:32:46.893Z","publishedAt":"2022-10-20T09:14:38.518Z","revisedAt":"2023-02-26T16:32:46.893Z","category":"ããã³ãã¨ã³ã","post":[{"id":"use-react-componentprops-type"},{"id":"react-state-managment"},{"id":"eslint-rule-no-nested-ternary"},{"id":"react-default-export-vs-named-export"},{"id":"equality-vs-strict-equality"}]}]},{"id":"use-react-componentprops-type","createdAt":"2022-10-20T09:07:53.537Z","updatedAt":"2022-10-21T13:47:16.972Z","publishedAt":"2022-10-20T09:18:50.802Z","revisedAt":"2022-10-21T13:47:16.972Z","title":"Reactã®ComponentPropsåã使ã£ã¦ä¸è¦ãªPropsã¨ãå¥ããããï¼ï¼","body":"\u003cp\u003eã©ããReactããããã§ãã\u003cbr\u003e\u003cbr\u003eããã°ããªãªã¼ã¹ãã¦æºè¶³ãã¦ãã¾ããããè¨äºãå·çããªãã¨ä¾¡å¤ãç¡ããªã£ã¦ãã¾ãã®ã§ãã ãããã«ã¢ããããããã¦ãããã¨æãã¾ãã\u003cbr\u003e\u003cbr\u003eä»åã¯æ±ç¨ã³ã³ãã¼ãã³ãã®ä½ãæ¹ã§ãã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h22ff7066ae\"\u003eä¸è¬çãªæ±ç¨ã³ã³ãã¼ãã³ãã®ä½ãæ¹\u003c/h2\u003e\u003cp\u003eããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã§ããã°ã³ã³ãã¼ãã³ã使ã¯é¿ãã¦éããªãéã§ããããã\u003cbr\u003e\u003cbr\u003eä»åã®ã¡ã¤ã³ã«è¡ãåã«ä¸è¬çã«ä½ããã¦ããã³ã³ãã¼ãã³ãã®ä½ãæ¹ããããããã¾ãããã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"he0a8675f39\"\u003eãã¿ã³ã³ã³ãã¼ãã³ãã®å ´å\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003eimport type { FC, ReactNode } from \"react\";\n\ntype Props = {\n children: ReactNode;\n onClick: () =\u0026gt; void;\n};\n\nexport const Button: FC\u0026lt;Props\u0026gt; = ({ children, onClick }) =\u0026gt; {\n return \u0026lt;button onClick={onClick}\u0026gt;{children}\u0026lt;/button\u0026gt;;\n};\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h458ac61db2\"\u003eããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ãã®å ´å\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003eimport type { ChangeEventHandler, FC } from \"react\";\n\ntype Props = {\n value: string | number;\n onChange: ChangeEventHandler\u0026lt;HTMLInputElement\u0026gt;;\n};\n\nexport const TextFiled: FC\u0026lt;Props\u0026gt; = ({ value, onChange }) =\u0026gt; {\n return \u0026lt;input type=\"text\" value={value} onChange={onChange} /\u0026gt;;\n};\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eãã¿ã³ã³ã³ãã¼ãã³ãã¯ã¯ãªãã¯ãå¯è½ã\u003cbr\u003eããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ãã¯å
¥åãå¯è½ãªæä½éã®æ©è½ãåãã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eã§ã¯æ¬¡ã«ããã¿ã³ã³ã³ãã¼ãã³ãã«ãã¿ã³ã®ã¿ã¤ããæ´»æ§ or éæ´»æ§ã®æ©è½ã追å ãã¦ã¿ã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003cpre\u003e\u003ccode\u003eimport type { FC, ReactNode } from \"react\";\n\ntype Props = {\n children: ReactNode;\n onClick: () =\u0026gt; void;\n disabled: boolean; // 追å \n type: \"button\" | \"reset\" | \"submit\"; // 追å \n};\n\nexport const Button: FC\u0026lt;Props\u0026gt; = ({ children, onClick, type, disabled }) =\u0026gt; {\n return (\n \u0026lt;button type={type} onClick={onClick} disabled={disabled} \u0026gt;\n {children}\n \u0026lt;/button\u0026gt;\n );\n};\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003edisabledã¨typeã追å ãã¾ããã\u003cbr\u003eä¸è¨ã®æ§ã«ä½ãæ©è½ã追å ãããæã¯ããã¿ã³ã³ã³ãã¼ãã³ãã®ä¿®æ£ã»ãã¿ã³ã³ã³ãã¼ãã³ããå¼ã³åºãã¦ãã親ã³ã³ãã¼ãã³ãã®ä¿®æ£ãå¿
è¦ã«ãªãã¾ãã\u003cbr\u003e\u003cbr\u003eä¸è¦æ®éã«è¦ãã¾ãããããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ãã®å ´åidãonBulrãnameãonKeyDownçã®è¦ç´ ãã¤ãã³ããå¿
è¦ã«ãªã£ãæã«è¿½å ãã¦ããã®ã¯ã¡ã³ãã³ã¹ããããããåãåãPropsã
4®åå®ç¾©ãåé·ã«ãªã£ã¦ããã¾ãã\u003cbr\u003e\u003cbr\u003eããã§æ¬¡ã«åºã¦ãã\u003cstrong\u003eComponentProps\u003c/strong\u003eåãæä¸ä¸»ã¨ãªãã¾ãã\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"h49c99ca828\"\u003eComponentPropsåã使ç¨ããæ±ç¨ã³ã³ãã¼ãã³ãã®ä½ãæ¹\u003c/h2\u003e\u003cp\u003eComponentPropsåã¨ã¯ãç°¡åã«èª¬æããã¨æå®ããã³ã³ãã¼ãã³ãã®Propsåãåå¾ã§ããåã§ãã\u003cbr\u003e\u003cbr\u003eâãããªæã\u003c/p\u003e\u003cpre\u003e\u003ccode\u003etype Props = ComponentProps\u0026lt;typeof Button\u0026gt;;\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003cimg src=\"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/2cd2e5c370cc44659337313de7847da3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-10-19%2020.31.43.png\" alt=\"\"\u003e\u003cbr\u003e\u003cbr\u003eä¾ãã°ãå
ã»ã©ã®ãã¿ã³ã³ã³ãã¼ãã³ããComponentPropsåã«æå®ããã¨ã\u003cbr\u003eãã¿ã³ã³ã³ã³ã¼ãã³ãã®Propsã®åãå
¨ã¦åå¾ã§ãã¾ãã\u003cbr\u003e\u003cbr\u003eã§ã¯ãå
ã»ã©ã®ãã¿ã³ã»ããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ããä¿®æ£ãã¦ããã¾ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h75643da8d3\"\u003eãã¿ã³ã³ã³ãã¼ãã³ãã®å ´å(ComponentProps ver)\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003eimport type { FC, ReactNode, ComponentProps } from \"react\";\n\ntype Props = {\n children: ReactNode;\n} \u0026amp; ComponentProps\u0026lt;\"button\"\u0026gt;;\n\nexport const Button: FC\u0026lt;Props\u0026gt; = ({ children, ...props }) =\u0026gt; {\n return \u0026lt;button {...props}\u0026gt;{children}\u0026lt;/button\u0026gt;;\n};\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e親ã³ã³ãã¼ãã³ã\u003c/p\u003e\u003cpre\u003e\u003ccode\u003eimport { Button } from \"../components/button\";\n\nconst Index = () =\u0026gt; {\n const onClickHandler = () =\u0026gt; console.log(\"click\");\n\n return (\n \u0026lt;Button type=\"button\" onClick={onClickHandler}\u0026gt;\n ãã¹ã\n \u0026lt;/Button\u0026gt;\n );\n};\n\nexport default Index;\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\u003ch3 id=\"h2deda0682e\"\u003eããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ãã®å ´å(ComponentProps ver)\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003eimport type { ComponentProps, FC } from \"react\";\n\ntype Props = ComponentProps\u0026lt;\"input\"\u0026gt;;\n\nexport const TextFiled: FC\u0026lt;Props\u0026gt; = ({ ...props }) =\u0026gt; {\n return \u0026lt;input {...props} /\u0026gt;;\n};\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e親ã³ã³ã³ã¼ãã³ã\u003c/p\u003e\u003cpre\u003e\u003ccode\u003eimport { ChangeEvent, useState } from \"react\";\nimport { TextFiled } from \"../components/textFiled\";\n\nconst Index = () =\u0026gt; {\n const [value, setValue] = useState(\"\");\n\n const onChangeHandler = (e: ChangeEvent\u0026lt;HTMLInputElement\u0026gt;) =\u0026gt;\n setValue(e.target.value);\n\n return \u0026lt;TextFiled value={value} onChange={onChangeHandler} /\u0026gt;;\n};\n\nexport default Index;\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003eé çªã«è¦ã¦ããã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003col\u003e\u003cli\u003eãã¿ã³ãããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ã両æ¹ã«\u003cstrong\u003eComponentProps\u003c/strong\u003eã追å \u003c/li\u003e\u003cli\u003eåãåãPropsãã¹ãã¬ããæ§æã§ä¸æ¬ã«åãåããããã«ä¿®æ£\u003c/li\u003e\u003cli\u003eåãåã£ãPropsãåè¦ç´ ã«è¿½å \u003c/li\u003e\u003c/ol\u003e\u003cp\u003e\u003cbr\u003eã¾ã1ã§ãããComponentPropsåã追å ãã¦ãã¿ã³ã®è¦ç´ (type,onClick,disabledç)ãããã¹ããã£ã¼ã«ãã®è¦ç´ (type,onChange,valueç)ã®åãå
¨ã¦åãåã£ã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eããã¦2ã¨3ã§åãåã£ãPropsãå±éãã¦ãã¦ããå½¢ã«ãªã£ã¦ãã¾ãã\u003cbr\u003e\u003cbr\u003eããã§è¦ªã³ã³ãã¼ãã³ãããPropsãæ¸¡ãã¦ããã¿ã³ãããã¹ããã£ã¼ã«ãã³ã³ãã¼ãã³ãã¯ä¿®æ£ããã«æ¸ãã®ã§ã¡ã³ãã³ã¹ããããããã³ã¼ãé
4ã忏ã§ãã¾ããã\u003cbr\u003e\u003cbr\u003eãã ããReactã®inputè¦ç´ ã¯onChangeãvalueãå¿
é ãªã®ã§ãã®å ´åã¯ãä¸è¨ã®æ§ã«Omitã§ComponentPropsããå¿
è¦ãªåã¯é¤å¤ãã¦ãæç¤ºçã«Propsã®åå®ç¾©ãæ¸ããã¨ã§ãã°ãåé¿ããããã«ãã¾ãããã\u003cbr\u003e\u003c/p\u003e\u003cpre\u003e\u003ccode\u003eimport type { ChangeEventHandler, ComponentProps, FC } from \"react\";\n\ntype Props = {\n value: string | number;\n onChange: ChangeEventHandler;\n} \u0026amp; Omit\u0026lt;ComponentProps\u0026lt;\"input\"\u0026gt;, \"value\" | \"onChange\" \u0026gt;;\n\nexport const TextFiled: FC\u0026lt;Props\u0026gt; = ({ value, onChange, ...props }) =\u0026gt; {\n return \u0026lt;input {...props} value={value} onChange={onChange} /\u0026gt;;\n};\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003cbr\u003e\u003c/p\u003e\u003ch2 id=\"ha214098e44\"\u003eã¾ã¨ã\u003c/h2\u003e\u003cul\u003e\u003cli\u003eComponentPropsåã¯æå®ããã³ã³ãã¼ãã³ãã®åãå
¨ã¦åå¾ã§ãã\u003c/li\u003e\u003cli\u003eæ®éã®HTMLã¿ã°ã®æ¯ãèãããã¦ã»ããå ´åã¯ãComponentPropsã§åå®ç¾©ããæ¹ãã¡ã³ãã³ã¹ããã½ã¼ã¹éã忏ã§ãã\u003c/li\u003e\u003cli\u003eã³ã³ãã¼ãã³ãã«å¿
é ãªåã¯Omitçã§ComponentPropsããé¤å¤ããæç¤ºçã«Propsã®åå®ç¾©ããã¦ãã°ãé²ã\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cbr\u003e\u003cbr\u003eå
¬å¼ããã¥ã¡ã³ãã«è¼ã£ã¦ããªãã£ãã®ã§çè§£ããã®ã«æéããããã¾ãããã\u003cbr\u003e\u003cbr\u003eééã£ã¦ããé¨åãåããã«ããé¨åã¯\u003ca href=\"https://twitter.com/react_nextjs\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTwitter\u003c/a\u003eã§DMãé¡ããã¾ãã\u003cbr\u003e\u003cbr\u003e\u003c/p\u003e","thumbnail":{"url":"https://images.microcms-assets.io/assets/92d5d05a58d743f0abd69ff4e6ea61a5/dc10b60546504ea99a6b5b7a3e7e3435/react.webp","height":300,"width":600},"description":"Reactã®ComponentPropsåã«ã¤ãã¦è§£èª¬ãã¦ãã¾ããä¸è¬çãªã³ã³ãã¼ãã³ãã®ä½ãæ¹ãããComponentPropsåã使ç¨ããã³ã³ãã¼ãã³ãã®ä½æãè¡ãä¸è¦ãªPropsãåãé¤ãäºãã§ãã¾ãã","tags":[{"id":"react","createdAt":"2022-10-20T09:16:54.710Z","updatedAt":"2022-10-20T09:16:54.710Z","publishedAt":"2022-10-20T09:16:54.710Z","revisedAt":"2022-10-20T09:16:54.710Z","tag":"React"},{"id":"typescript","createdAt":"2022-10-20T09:17:30.354Z","updatedAt":"2022-10-20T09:17:30.354Z","publishedAt":"2022-10-20T09:17:30.354Z","revisedAt":"2022-10-20T09:17:30.354Z","tag":"TypeScript"}],"category":[{"id":"frontend","createdAt":"2022-10-20T09:14:38.518Z","updatedAt":"2023-02-26T16:32:46.893Z","publishedAt":"2022-10-20T09:14:38.518Z","revisedAt":"2023-02-26T16:32:46.893Z","category":"ããã³ãã¨ã³ã","post":[{"id":"use-react-componentprops-type"},{"id":"react-state-managment"},{"id":"eslint-rule-no-nested-ternary"},{"id":"react-default-export-vs-named-export"},{"id":"equality-vs-strict-equality"}]}]}],"category":"ããã³ãã¨ã³ã","totalCount":5,"categoryType":"frontend"},"__N_SSG":true},"page":"/category/[slug]","query":{"slug":"frontend"},"buildId":"wuyDY1Tt9_JiPbBLBcH9Y","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
4</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.