rikubaã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ / 2022å¹´9æœˆ3æ—¥ - ã¯ã¦ãªãƒ

ã“ã®ç™ºæƒ³ã¯ã™ã”ã„ï¼ ãƒ¢ãƒ€ãƒ³CSSã§å®Ÿè£…ã™ã‚‹ã€ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯

ãƒ¢ãƒ€ãƒ³CSSã§å®Ÿè£…ã™ã‚‹ã€ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚çŸ©å½¢ã®HTMLã¯divè¦ç´ 1ã¤ã ã‘ã€ãƒœãƒ¼ãƒ€ãƒ¼ãŒã©ã®ã‚ˆã†ã«ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³åŒ–ã•ã‚Œã¦ã„ã‚‹ã®ã‹ã€ãã®ä»•çµ„ã¿ãŒè¦–è¦šçš„ã«åˆ†ã‹ã‚‹ãƒ‡ãƒ¢ã‚‚ã‚ã‚Šã¾ã™ã€‚ CSS border animations by Bramus ä¸‹è¨˜ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„è¨³ã—ãŸã‚‚ã®ã§ã™ã€‚ â€»å…ƒã‚µã‚¤ãƒˆæ§˜ã®ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã«ã‚‚ã¨ã¥ã„ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ã¯ã˜ã‚ã« CSSã«ãŠã‘ã‚‹ãƒœãƒ¼ãƒ€ãƒ¼ã®è¨å®š ãƒœãƒƒã‚¯ã‚¹ãƒ¢ãƒ‡ãƒ«ã®ä¿æŒ ãƒœãƒ¼ãƒŠã‚¹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„: border-image çµ‚ã‚ã‚Šã« ã¯ã˜ã‚ã« ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¾ã™ã€‚ ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹ä»•çµ„ã¿ CSSã«ãŠã‘ã‚‹ãƒœãƒ¼ãƒ€ãƒ¼ã®è¨å®š CSSã§è¦ç´ ã«ãƒœãƒ¼ãƒ€ãƒ¼ã‚’å®Ÿè£…ã™ã‚‹ã«ã¯ã€border, outline, box-shadowã®3ã¤ã®ãƒ—ãƒãƒ‘ãƒ†ã‚£ãŒã‚ã‚Šã¾ã™ã€‚Modern CSS Solutionsã§è©³ã—ãèª¬

rikuba 2022/09/03

ãƒªãƒ³ã‚¯

Chakra UIã‚’è–„ãè»½é‡ã«ä½¿ã†

v2.4.2ã‹ã‚‰ChakraBaseProviderã¨ã„ã†ã‚‚ã®ãŒè¿½åŠ ã•ã‚Œã¦ã„ã¾ã™ã€‚ ã“ã‚Œã«ã¯ToastProviderãŒå«ã¾ã‚Œã¦ãŠã‚Šçµæžœã¨ã—ã¦framer-motionãŒbundleã•ã‚Œã¦ã—ã¾ã†ã®ã§ã€ã‚ˆã‚Šè»½é‡ã«ä½¿ã„ãŸã„æ–¹ã¯æœ¬è¨˜äº‹ã®å†…å®¹ã‚’å‚è€ƒã«ã—ã¦ã¿ã¦ãã ã•ã„ã€‚ https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%402.4.2 ã¯ã˜ã‚ã« ã“ã®è¨˜äº‹ã§èª¬æ˜Žã—ã¦ã„ã‚‹ChakraProviderã®ä½¿ã„æ–¹ã¯å…¬å¼ãƒ‰ã‚ãƒ¥ãƒ¡ãƒ³ãƒˆã§æŽ¨å¥¨ã•ã‚Œã¦ã„ã‚‹ã‚‚ã®ã§ã¯ã‚ã‚Šã¾ã›ã‚“ã®ã§ã”äº†æ‰¿ãã ã•ã„ã€‚ æ¦‚è¦ ï¼ chakra-ui/reactã§ã¯ãªã@chakra-ui/providerã®ChakraProviderã‚’ä½¿ã† themeã¯extendThemeã‚’ä½¿ã‚ãšcomponentsã®themeã‚’å¤–ã™ @chakra-ui/cliã§

rikuba 2022/09/03

React
CSS

ãƒªãƒ³ã‚¯

GitHub - styled-system/styled-system: â¬¢ Style props for rapid UI development

Add style props that hook into your own theme Quickly set responsive font-size, margin, padding, width, and more with props Influenced by constraint-based design system principles Typographic scale Spacing scale for margin and padding Works with any color palette Works with most css-in-js libraries, including styled-components & emotion Used in Rebass, Reflexbox, and the Priceline Design System "T

rikuba 2022/09/03

React
CSS

ãƒªãƒ³ã‚¯

ã€ä¿å˜ç‰ˆã€‘ã€Œãã®useEffectã®ä½¿ã„æ–¹ã‚ã£ã¦ã‚‹ï¼Ÿã€ã¨è¨€ã‚ã‚Œã‚‹å‰ã«

å‚è€ƒ ç›®çš„ ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã§ä½¿ç”¨ã•ã‚Œã¦ã„ã‚‹ä¸é©åˆ‡ãªuseEffectã‚’æ¸›ã‚‰ã™ æœ¬é¡Œ Reactã®å…¬å¼ãƒ‰ã‚ãƒ¥ãƒ¡ãƒ³ãƒˆã«useEffectã¯å¿…è¦ãªã„ã‹ã‚‚ã—ã‚Œãªã„ï¼Œã¨ã„ã†ã‚ˆã†ãªãƒšãƒ¼ã‚¸ãŒã‚ã‚Šã¨ã¦ã‚‚å‹‰å¼·ã«ãªã£ãŸã®ã§è¨˜äº‹ã«ã—ã‚ˆã†ã¨æ€ã„ã¾ã—ãŸï¼Ž ãƒ‡ãƒ¼ã‚¿ãƒ•ã‚§ãƒƒãƒãƒ³ã‚° ã‚¢ãƒ—ãƒªã®ãƒ‡ãƒ¼ã‚¿ãƒ•ã‚§ãƒƒãƒãƒ³ã‚°ã‚’useEffectå†…ã§è¡Œã†ã®ã¯ã‚ˆãçŸ¥ã‚‰ã‚Œã¦ã„ã‚‹æ–¹æ³•ã§ã™ï¼Ž Bad ðŸ’£ function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // ðŸ”´ Avoid: ã‚¯ãƒªãƒ¼ãƒ³ã‚¢ãƒƒãƒ—ãªã—ã§ã®ãƒ•ã‚§ãƒƒãƒãƒ³ã‚° fetchResults(query, page).then(json => { setResults(json); }

rikuba 2022/09/03

ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã®åˆæœŸåŒ–ã‚’ãƒˆãƒƒãƒ—ãƒ¬ãƒ™ãƒ«ã§è¡Œã†ï¼useSyncExternalStoreã‚’ä½¿ã†

React

ãƒªãƒ³ã‚¯

inAppBrowser.com

InAppBrowser.com Check if an in-app browser is injecting JavaScript code Some iOS and Android apps make use of a custom in-app browser (full details). This causes potential security and privacy risks to the user. âœ… This tool couldn't detect any JavaScript injections. However, this doesn't mean there were no code injections. As of iOS 14.3, Apple introduced a new way of running JavaScript code in a

rikuba 2022/09/03

ãƒªãƒ³ã‚¯

2022å¹´ã«ãŠã‘ã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºã®ãƒ™ãƒ¼ã‚¹ãƒ©ã‚¤ãƒ³

LINEæ ªå¼ä¼šç¤¾ã¯ã€2023å¹´10æœˆ1æ—¥ã«LINEãƒ¤ãƒ•ãƒ¼æ ªå¼ä¼šç¤¾ã«ãªã‚Šã¾ã—ãŸã€‚LINEãƒ¤ãƒ•ãƒ¼æ ªå¼ä¼šç¤¾ã®æ–°ã—ã„ãƒ–ãƒã‚°ã¯ã“ã¡ã‚‰ã§ã™ã€‚ LINEãƒ¤ãƒ•ãƒ¼ Tech Blog TL;DR:2022ã«ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºã§æœ€ã‚‚è€ƒæ…®ã™ã¹ããƒ¦ãƒ¼ã‚¶ãƒ¼ç’°å¢ƒã¯ã€ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹ã§ã¯ä½Žã‚¹ãƒšãƒƒã‚¯ã®Androidç«¯æœ«ã€æ¨™æº–ä»•æ§˜ã§ã¯2å¹´å‰ã®Safariã€ãã—ã¦ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ã§ã¯ï¼”Gã§ã™ã€‚ãã‚Œã«å¯¾ã—ã¦ã¯JSã¸ã®éŽå‰°ä¾å˜ãªã©ãŒåŽŸå› ã§ä¸»ã«ãƒ‘ãƒ•ã‚©ãƒ¼ãƒžãƒ³ã‚¹ã®é¢ã§ã®ã‚¦ã‚§ãƒ–å…¨ä½“ã®å¯¾å¿œãŒã‚ˆãã‚ã‚Šã¾ã›ã‚“ã€‚ ã“ã‚“ã«ã¡ã¯ï¼LINE ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºå®¤ã®ãƒ€ãƒãƒã‚¹ ã‚¢ãƒ©ãƒ³ã§ã™ã€‚ã“ã®è¨˜äº‹ã®ã‚¿ã‚¤ãƒˆãƒ«ã‚’è¦‹ã¦ã€Œé‡£ã‚Šã‚¿ã‚¤ãƒˆãƒ«ã§ã™ãã€œã€ã¨è€ƒãˆã¦ã„ã‚‹æ–¹ãŒã„ã‚‹ã¨æ€ã„ã¾ã™ãŒä»Šå›žã«é™ã£ã¦ã¯ãã‚Œã‚’å¤§ç›®ã«è¦‹ã¦ãã ã•ã„ã€‚ãã‚Œã¯ãªãœã‹ã¨è¨€ã„ã¾ã™ã¨ã€2021å¹´ã‹ã‚‰2022å¹´ã«ã‹ã‘ã¦ç§ãŸã¡ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãŒå…¨ä½“çš„ã«è€ƒãˆæ–¹ã‚’æ”¹ã‚ã‚‹å¿…è¦ãŒå‡ºã‚‹ã»ã©å¤§ããªå¤‰åŒ–ãŒã‚ã‚Šã¾ã—ãŸã€‚ ãã®å¤‰

rikuba 2022/09/03

ãƒªãƒ³ã‚¯

å®Ÿè£…ä¾‹ã‹ã‚‰è¦‹ã‚‹ React ã®ãƒ†ã‚¹ãƒˆã®æ›¸ãæ–¹ - Cybozu Inside Out | ã‚µã‚¤ãƒœã‚¦ã‚ºã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãƒ–ãƒã‚°

2024/04/17: æ›´æ–° å†…å®¹ã‚’æ›´æ–°ã—ãŸè¨˜äº‹ã‚’æ›¸ãã¾ã—ãŸã®ã§ã€ã‚ˆã‹ã£ãŸã‚‰ã“ã¡ã‚‰ã‚‚ä½µã›ã¦ã€ã”è¦§ãã ã•ã„ã€‚ zenn.dev ã“ã‚“ã«ã¡ã¯ï¼ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ã‚ã‚¹ãƒ‘ãƒ¼ãƒˆãƒãƒ¼ãƒ ã®@nus3_ã§ã™ã€‚ kintone ã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰åˆ·æ–°ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆï¼ˆãƒ•ãƒãƒªã‚¢ï¼‰ã§ã¯ã€å“è³ªã‚’ä¿ã£ãŸã¾ã¾é–‹ç™ºã‚’åŠ é€Ÿã•ã›ã‚‹ãŸã‚ã«ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ†ã‚¹ãƒˆã‚’ç©æ¥µçš„ã«è¡Œã£ã¦ã„ã¾ã™ã€‚ ä»Šå›žã¯ãã‚“ãªãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ†ã‚¹ãƒˆã®å®Ÿè£…ä¾‹ã‚’ã„ãã¤ã‹ç´¹ä»‹ã—ã¾ã™ã€‚ã“ã®è¨˜äº‹ãŒãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ†ã‚¹ãƒˆã‚’è¡Œã†ä¸Šã§ã®å‚è€ƒã«ãªã‚Œã°å¹¸ã„ã§ã™ã€‚ ãƒ†ã‚¹ãƒˆã«ä½¿ç”¨ã™ã‚‹ä¸»ãªãƒ‘ãƒƒã‚±ãƒ¼ã‚¸ ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ãƒ†ã‚¹ãƒˆ è£œè¶³: Testing Library ã®è¨˜æ³•ã‚’ãƒã‚§ãƒƒã‚¯ã—ã¦ãã‚Œã‚‹eslint-plugin-testing-library ã‚«ã‚¹ã‚¿ãƒ ãƒ•ãƒƒã‚¯ã®ãƒ†ã‚¹ãƒˆ è£œè¶³: React v18 ã§ã¯ @testing-library/react ã® renderHook ã‚’ä½¿ã† å‚è€ƒ

rikuba 2022/09/03

React
test

ãƒªãƒ³ã‚¯

About Queries | Testing Library

Overviewâ€‹Queries are the methods that Testing Library gives you to find elements on the page. There are several types of queries ("get", "find", "query"); the difference between them is whether the query will throw an error if no element is found or if it will return a Promise and retry. Depending on what page content you are selecting, different queries may be more or less appropriate. See the pr

rikuba 2022/09/03

ä½¿ç”¨ã™ã¹ãã‚¯ã‚¨ãƒªã®å„ªå…ˆé †ä½

test

ãƒªãƒ³ã‚¯

æŠ€è¡“æ–‡æ›¸ã®æ›¸ãæ–¹

howto-tech-docs.md æŠ€è¡“æ–‡æ›¸ã®æ›¸ãæ–¹ ã“ã®ãƒ¡ãƒ¢ã¯ã€ç§ï¼ˆ@ymmt2005ï¼‰ãŒé•·å¹´ã«ã‚ãŸã£ã¦ã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢ãƒ—ãƒãƒ€ã‚¯ãƒˆé–‹ç™ºã«é–¢ã‚ã£ã¦ãã¦ 2022å¹´ç¾åœ¨ã“ã†ã—ãŸã»ã†ãŒè‰¯ã„ã¨è€ƒãˆã¦ã„ã‚‹ãƒ™ã‚¹ãƒˆãƒ—ãƒ©ã‚¯ãƒ†ã‚£ã‚¹ã§ã™ã€‚ ç§‘å¦çš„ãªåˆ†æžç‰ã«åŸºã¥ãã‚ã‘ã§ã¯ãªã„çµŒé¨“å‰‡ã§ã‚ã‚‹ãŸã‚ã€ä»Šå¾Œã‚‚éšæ™‚è¦‹ç›´ã™ã“ã¨ãŒã‚ã‚Šã¾ã™ã—ã€ ã“ã“ã«æ›¸ã„ã¦ã‚ã‚‹ã“ã¨ãŒå¸¸ã«æ£ã—ã„ã‚ã‘ã§ã‚‚ã‚ã‚‰ã‚†ã‚‹ã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢é–‹ç™ºã«é©ã™ã‚‹ã‚ã‘ã§ã‚‚ã‚ã‚Šã¾ã›ã‚“ã€‚ ã—ã‹ã—ãªãŒã‚‰ã€å®Ÿå‹™çµŒé¨“ãŒè±Šå¯Œã§ã€ãƒ¢ãƒ€ãƒ³ãªæŠ€è¡“ã‚¹ã‚¿ãƒƒã‚¯ã«æ˜Žã‚‹ã„ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®çµŒé¨“å‰‡ã¯ä¸€å®šã® å½¹ã«ç«‹ã¤ã®ã§ã¯ãªã„ã‹ã¨è€ƒãˆã¦è¨˜ã—ã¾ã™ã€‚ æŠ€è¡“æ–‡æ›¸ã¨ã¯ ã“ã“ã§ã¯ã€ã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢é–‹ç™ºã§æŠ€è¡“è€…ãŒæ›¸ãã¹ãæ–‡æ›¸ã¨ã„ã†ã“ã¨ã«ã—ã¾ã™ã€‚ ã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã«ã‚‚å½¹å‰²ãŒã„ã‚ã„ã‚ã‚ã‚Šã€ã‚¢ãƒ¼ã‚ãƒ†ã‚¯ãƒˆã¨ independent contributor ã§ã¯æ›¸ãæ–‡æ›¸ãŒé•ã†ã¨ã„ã†ã“ã¨ã¯ã‚ã‚‹ã§ã—ã‚‡ã†ã‘ã‚Œã©ã€ã“ã“ã§ã¯ã”ã£ã¡ã‚ƒã«ã—ã¾ã™ã€‚

rikuba 2022/09/03

documentation

ãƒªãƒ³ã‚¯

å®Ÿè·µ Node.js Native ESM â€” Wantedlyã§ã®ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ç§»è¡Œäº‹ä¾‹ | Wantedly Engineer Blog

Wantedlyã§ã¯ã“ã®ãŸã³ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã®ã²ã¨ã¤ã‚’Native ESMåŒ–ã—ã¾ã—ãŸã€‚æœ¬è¨˜äº‹ã§ã¯Native ESMåŒ–ã®å¿…è¦æ€§ã¨ã€å¿…è¦ãªä½œæ¥ã«ã¤ã„ã¦èª¬æ˜Žã—ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã®æ¦‚è¦Node.jsã«ã¯Native ESMã¨ã„ã†ãƒ¢ãƒ¼ãƒ‰ãŒã‚ã‚‹ã€‚Native ESMã¯ã¾ã æ™®åŠã—ã¦ã„ãªã„ãŒã€ãƒ©ã‚¤ãƒ–ãƒ©ãƒªå´ã®æ›´æ–°ãŒé€²ã¿ã€ç§»è¡ŒãŒå¿…è¦ã«ãªã‚Šã¤ã¤ã‚ã‚‹ã€‚Native ESMã‚’ã‚ãã‚‹çŠ¶æ³ã¯ (ã“ã®è¨˜äº‹ã®é•·ã•ã‹ã‚‰ã‚ã‹ã‚‹ã‚ˆã†ã«) è‰²ã€…è¤‡é›‘ã§ã€æ¦‚å¿µã‚’ã¡ã‚ƒã‚“ã¨èª¬æ˜Žã™ã‚‹ã ã‘ã§ã‚‚å¤§å¤‰ã€‚Native ESMã¸ã®ç§»è¡Œã«ã‚ãŸã£ã¦ã¯ã•ã¾ã–ã¾ãªå›°é›£ãŒå¾…ã¡å—ã‘ã¦ã„ã‚‹ã€‚Native ESMã¨ã¯æ´å²çš„çµŒç·¯ã‹ã‚‰ã€JavaScriptã«ã¯è¤‡æ•°ã®ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã‚·ã‚¹ãƒ†ãƒ ãŒã‚ã‚Šã¾ã™ã€‚ãã®ã†ã¡Node.jså‘¨è¾ºã§ã‚ˆãä½¿ã‚ã‚Œã‚‹ã®ã¯CommonJS Modulesã¨ES Modulesã§ã™ã€‚ CommonJS Modules (CJS) ã¯å®Ÿè³ªçš„ã«

rikuba 2022/09/03

ãƒªãƒ³ã‚¯

ã€ã„ã¤ã‚„ã‚‹ã‹ï¼Ÿä»Šã§ã—ã‚‡ï¼ã€‘æž—å…ˆç”Ÿã®ã‚ãƒ£ãƒªã‚¢ãƒ‘ã‚¹ã€Œå‹ã¦ã‚‹å ´æ‰€ã§èª°ã‚ˆã‚Šã‚‚åŠªåŠ›ã™ã‚‹ã€‚ãã‚ŒãŒå‹ã¤ãŸã‚ã®æœ€å¼·ã®æ³•å‰‡ã€ - ãƒªã‚¯ãƒŠãƒ“NEXTã‚¸ãƒ£ãƒ¼ãƒŠãƒ«

ã€ã„ã¤ã‚„ã‚‹ã‹ï¼Ÿä»Šã§ã—ã‚‡ï¼ã€‘æž—å…ˆç”Ÿã®ã‚ãƒ£ãƒªã‚¢ãƒ‘ã‚¹ã€Œå‹ã¦ã‚‹å ´æ‰€ã§èª°ã‚ˆã‚Šã‚‚åŠªåŠ›ã™ã‚‹ã€‚ãã‚ŒãŒå‹ã¤ãŸã‚ã®æœ€å¼·ã®æ³•å‰‡ã€ ã€Œã„ã¤ã‚„ã‚‹ã‹ï¼Ÿä»Šã§ã—ã‚‡ï¼ã€ã®CMã§ã€ä¸€èºã€æ™‚ã®äººã¨ãªã£ãŸæž—å…ˆç”Ÿã€‚ ãƒ†ãƒ¬ãƒ“ã‚„æ–°èžã§è¦‹ãªã„æ—¥ã¯ãªã„ãã‚‰ã„ã®äººæ°—è€…ã ãŒã€ã“ã‚Œã¾ã§ã®äººç”Ÿã¯ã€æ³¢ä¹±ã«æº€ã¡ãŸã‚‚ã®ã ã£ãŸ â– ã†ã£ã‹ã‚Šã¨ã€å¤±æ•—ã¨ã€ã‚ãã‚‰ã‚ã®é€£ç¶šã ã£ãŸ ã‚„ã‚ŠãŸã„ã“ã¨ã‚’ä¸€å€‹ä¸€å€‹ã‚ãã‚‰ã‚ã¦ããŸäººç”Ÿã ã£ãŸã‚“ã§ã™ã€‚çµŒæ¸ˆå¦è€…ã«ãªã‚ŠãŸã„ã¨æ€ã£ã¦ã„ãŸã®ã«ã€å¤§å¦ã®å°‚æ”»ã¯æ³•å¦éƒ¨ã€‚å°ã•ã„ã“ã‚ã‹ã‚‰å‹‰å¼·ã—ã‹ã—ã¦ã“ãªã‹ã£ãŸã‹ã‚‰ã€æˆç¸¾ã¯ã‹ãªã‚Šã‚ˆã‹ã£ãŸã‚“ã§ã™ã€‚å…¨å›½æ¨¡è©¦ã§1ä½ã‚’å–ã£ãŸã“ã¨ã‚‚ã‚ã£ãŸã—ã€æ±äº¬å¤§å¦ã¯æ³•å¦éƒ¨ã§ã‚‚çµŒæ¸ˆå¦éƒ¨ã§ã‚‚ä½™è£•ã§å…¥ã‚Œã‚‹æˆç¸¾ã§ã—ãŸã€‚ãã‚Œã§ã‚‚æ³•å¦éƒ¨ã‚’é¸ã‚“ã ã®ã¯ã€å¦æ ¡å§‹ã¾ã£ã¦ä»¥æ¥ã®å¤©æ‰ã¨è¨€ã‚ã‚ŒãŸå…ˆè¼©ãŒçµŒæ¸ˆå¦éƒ¨ã«é€²ã‚“ã ã‹ã‚‰ã€‚å½¼ã¨åŒã˜é“ã«é€²ã‚“ã§ã‚‚å‹ã¦ãªã„ã¨æ€ã£ãŸã‚“ã§ã™ã€‚æ˜”ã‹ã‚‰åƒ•ã¯ã€è‡ªåˆ†ãŒå‹ã¦ã‚‹å ´æ‰€ã˜ã‚ƒãªã„ã¨è¡Œãæ°—ãŒã—ãªã„æ€§æ ¼ã§ã€‚ å¤§å¦æ™‚ä»£ã¯ã€ãƒãƒ–ãƒ«ã§ã—ã‚‡

rikuba 2022/09/03

life

ãƒªãƒ³ã‚¯

JavaScriptã§ã€Œãƒ‡ãƒ¼ã‚¿ã‚’å¯è¦–åŒ–ã€ä½•ã‚’ä½¿ã†ï¼Ÿã€€10ç¨®é¡žã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’æ¯”è¼ƒï¼šæä¾›ãƒ„ãƒ¼ãƒ«ã‚„ä»˜åŠ æ©Ÿèƒ½ã€çŸæ‰€ã€å°Žå…¥ï¼ä½¿ç”¨æ–¹æ³•ã‚’è§£èª¬ CoderPadã¯JavaScriptã§ã‚ˆãä½¿ã‚ã‚Œã‚‹10ç¨®é¡žã®ãƒ‡ãƒ¼ã‚¿å¯è¦–åŒ–ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ç´¹ä»‹ã—ãŸã€‚ApexCharã‚„Chart.jsã€D3.jsãªã©ã‚’æ‰±ã†ã€‚ ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°é¢æŽ¥ã«ä½¿ã‚ã‚Œã‚‹Webã‚µãƒ¼ãƒ“ã‚¹ãªã©ã‚’æ‰‹æŽ›ã‘ã‚‹CoderPadã¯2022å¹´8æœˆ23æ—¥ï¼ˆç±³å›½æ™‚é–“ï¼‰ã€ã€ŒJavaScriptã€ã§ã‚ˆãä½¿ã‚ã‚Œã‚‹10ç¨®é¡žã®ãƒ‡ãƒ¼ã‚¿å¯è¦–åŒ–ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’ç´¹ä»‹ã—ãŸã€‚ ãƒ‡ãƒ¼ã‚¿ã‚’ãƒ“ã‚¸ãƒ¥ã‚¢ãƒ«ã§ã‚°ãƒ©ãƒ•ã‚£ã‚«ãƒ«ãªãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã«åˆã‚ã›ã¦è¡¨ç¤ºã™ã‚‹ãƒ‡ãƒ¼ã‚¿å¯è¦–åŒ–ã¯ã€ãƒ‡ãƒ¼ã‚¿ã‚’åˆ†ã‹ã‚Šã‚„ã™ãã€åŠ¹çŽ‡çš„ã«ä¼ãˆã‚‹ä¸Šã§åŠ¹æžœçš„ã ã€‚ ç´¹ä»‹ã•ã‚Œã¦ã„ã‚‹10ç¨®é¡žã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã¯æ¬¡ã®é€šã‚Šã€‚ ãƒ»ApexChart ãƒ»Chart.js ãƒ»D3.js ãƒ»Techan.js ãƒ»AnyChart ãƒ»Taucharts ãƒ»Zoomcharts

rikuba 2022/09/03

visualization

ãƒªãƒ³ã‚¯

ApexCharts.js - Open Source JavaScript Charts for your website

What is ApexCharts? ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. It is an open-source project licensed under MIT and is free to use in commercial applications. DOWNLOAD VIEW DEMO Built for developers Integrating visualizations with ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready

rikuba 2022/09/03

ãƒªãƒ³ã‚¯

React Charts

Beautiful, flexible, highly-performant charts for ReactSo automagical and easy, you'll find any excuse to use it! Succinct & DeclarativeTime is short for front-end developers as it is, so having a charting system that is great out of the box, declarative, succinct and requires as little imperative scripting as possible not only helps you keep moving forward but lets you express your data visualiza

rikuba 2022/09/03

ãƒªãƒ³ã‚¯

ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

ã‚¿ã‚°

2022å¹´9æœˆ3æ—¥ã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (14ä»¶)

ã“ã®ç™ºæƒ³ã¯ã™ã”ã„ï¼ ãƒ¢ãƒ€ãƒ³CSSã§å®Ÿè£…ã™ã‚‹ã€ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯

Chakra UIã‚’è–„ãè»½é‡ã«ä½¿ã†

GitHub - styled-system/styled-system: â¬¢ Style props for rapid UI development

ã€ä¿å˜ç‰ˆã€‘ã€Œãã®useEffectã®ä½¿ã„æ–¹ã‚ã£ã¦ã‚‹ï¼Ÿã€ã¨è¨€ã‚ã‚Œã‚‹å‰ã«

inAppBrowser.com

2022å¹´ã«ãŠã‘ã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºã®ãƒ™ãƒ¼ã‚¹ãƒ©ã‚¤ãƒ³

å®Ÿè£…ä¾‹ã‹ã‚‰è¦‹ã‚‹ React ã®ãƒ†ã‚¹ãƒˆã®æ›¸ãæ–¹ - Cybozu Inside Out | ã‚µã‚¤ãƒœã‚¦ã‚ºã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãƒ–ãƒã‚°

About Queries | Testing Library

æŠ€è¡“æ–‡æ›¸ã®æ›¸ãæ–¹

å®Ÿè·µ Node.js Native ESM â€” Wantedlyã§ã®ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ç§»è¡Œäº‹ä¾‹ | Wantedly Engineer Blog

JavaScriptã§ã€Œãƒ‡ãƒ¼ã‚¿ã‚’å¯è¦–åŒ–ã€ä½•ã‚’ä½¿ã†ï¼Ÿã€€10ç¨®é¡žã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã‚’æ¯”è¼ƒ

ApexCharts.js - Open Source JavaScript Charts for your website

React Charts

ãŠçŸ¥ã‚‰ã›

ä»Šé€±ã®ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯æ•°ãƒ©ãƒ³ã‚ãƒ³ã‚°ï¼ˆ2025å¹´1æœˆç¬¬1é€±ï¼‰

ä»Šé€±ã®ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯æ•°ãƒ©ãƒ³ã‚ãƒ³ã‚°ï¼ˆ2024å¹´12æœˆç¬¬4é€±ï¼‰

ã€Œã‚ã¨ã§èªã‚€ã€ã‚¿ã‚°ã§æŒ¯ã‚Šè¿”ã‚‹2024å¹´ ã€œä»Šå¹´ã®ã€Œã‚ã¨ã§èªã‚€ã€ã€ä»Šå¹´ã®ã†ã¡ã«ã€œ

å…¬å¼Twitter

ã‚ãƒ¼ãƒœãƒ¼ãƒ‰ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆä¸€è¦§

ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

å…¬å¼Twitter

ã¯ã¦ãªã®ã‚µãƒ¼ãƒ“ã‚¹

ã‚¿ã‚°

2022å¹´9æœˆ3æ—¥ã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (14ä»¶)

ãŠçŸ¥ã‚‰ã›

ä»Šé€±ã®ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯æ•°ãƒ©ãƒ³ã‚­ãƒ³ã‚°ï¼ˆ2025å¹´1æœˆç¬¬1é€±ï¼‰

ä»Šé€±ã®ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯æ•°ãƒ©ãƒ³ã‚­ãƒ³ã‚°ï¼ˆ2024å¹´12æœˆç¬¬4é€±ï¼‰

ã€Œã‚ã¨ã§èª­ã‚€ã€ã‚¿ã‚°ã§æŒ¯ã‚Šè¿”ã‚‹2024å¹´ ã€œä»Šå¹´ã®ã€Œã‚ã¨ã§èª­ã‚€ã€ã€ä»Šå¹´ã®ã†ã¡ã«ã€œ

å…¬å¼Twitter

ã‚­ãƒ¼ãƒœãƒ¼ãƒ‰ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆä¸€è¦§

å…¬å¼Twitter

ã¯ã¦ãªã®ã‚µãƒ¼ãƒ“ã‚¹

2022å¹´9æœˆ3æ—¥ã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (14ä»¶)

ãŠçŸ¥ã‚‰ã›

ä»Šé€±ã®ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯æ•°ãƒ©ãƒ³ã‚ãƒ³ã‚°ï¼ˆ2025å¹´1æœˆç¬¬1é€±ï¼‰

ä»Šé€±ã®ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯æ•°ãƒ©ãƒ³ã‚ãƒ³ã‚°ï¼ˆ2024å¹´12æœˆç¬¬4é€±ï¼‰

ã€Œã‚ã¨ã§èªã‚€ã€ã‚¿ã‚°ã§æŒ¯ã‚Šè¿”ã‚‹2024å¹´ ã€œä»Šå¹´ã®ã€Œã‚ã¨ã§èªã‚€ã€ã€ä»Šå¹´ã®ã†ã¡ã«ã€œ

å…¬å¼Twitter

ã‚ãƒ¼ãƒœãƒ¼ãƒ‰ã‚·ãƒ§ãƒ¼ãƒˆã‚«ãƒƒãƒˆä¸€è¦§

å…¬å¼Twitter

ã¯ã¦ãªã®ã‚µãƒ¼ãƒ“ã‚¹