{"componentChunkName":"component---src-templates-posts-tsx","path":"/category/ui","result":{"data":{"allContentfulBlogPost":{"totalCount":25,"edges":[{"node":{"slug":"typescript-react","title":"【TypeScript + React】カスタマイズ性の高い＆使いやすいボタンのコンポーネントを実装する","publishedAt":"2025/02/05","updatedAt":"2025/05/09","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/4tOpwCT5NT5KwxI4eS4fbs/cb912650f691014f908b67ab8848844b/typescript-react-button-image01.png"},"category":{"name":"UI"}}},{"node":{"slug":"typescript-react-hooks-modal","title":"【TypeScript + React Hooks】使い易いモーダルウィンドウのコンポーネントを作成する","publishedAt":"2023/05/11","updatedAt":"2024/04/19","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/6R10kN76fNyMTsvZ4uVSO2/6c7b06d7a7e837ab014d0380a6eb69c8/typescript-react-modal-screenshot.png"},"category":{"name":"UI"}}},{"node":{"slug":"drag-and-drop-custom-hooks","title":"【React + TypeScript】要素をドラッグ＆ドロップ可能にする","publishedAt":"2023/01/17","updatedAt":"2023/03/24","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/4vHXZVG8p2a1T4WAFXKRg0/bf6d443978ff933c4db307dcd279f1d7/draggable_elements_post_img_1.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-select-box-picker","title":"【React】時刻や生年月日などをセレクトボックスで選択するピッカーを作る","publishedAt":"2021/08/01","updatedAt":"2022/01/19","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/3QyidDyTroOPViK6b7RU35/aeffe073c0b92c6ba5132c2f199a213b/select-box-number-picker.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-wheel-number-picker","title":"【React】時間や生年月日などをダイヤル南京錠のように回転させながら選択するピッカーを作る","publishedAt":"2021/09/20","updatedAt":"2022/01/16","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/2BNsRAtCQ504RzLGprGX7Q/4fdd89c4d4bcc8a556515ed20f2ec9f9/react-wheel-number-picker2.png"},"category":{"name":"UI"}}},{"node":{"slug":"gatsby-contentful-search-realtime","title":"【Gatsby + Contentfulブログ】記事の検索結果をリアルタイムで一覧表示する","publishedAt":"2021/09/09","updatedAt":"2021/12/10","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/3umawn40ui65FqFZBbFdnA/889d96c685c96a518bca49a7d0bb1f7e/gatsby-thumbnail.png"},"category":{"name":"UI"}}},{"node":{"slug":"gatsby-contentful-more-see-button","title":"Gatsby+Contentfulブログの記事一覧をもっと見るボタンで進める","publishedAt":"2021/07/24","updatedAt":"2021/12/06","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/3umawn40ui65FqFZBbFdnA/889d96c685c96a518bca49a7d0bb1f7e/gatsby-thumbnail.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-dark-mode","title":"【React】サイトにダークモード機能を実装する","publishedAt":"2021/06/15","updatedAt":"2021/11/10","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/YOtbR1hTvtdzPKfDGRvm8/3b595b24edc78670264ea791f2755734/darkmodeimage.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-on-off","title":"【React】ON/OFFスイッチを作る","publishedAt":"2021/05/20","updatedAt":"2021/11/02","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/11qnFUJxRyaWLf5XCGtUxp/3237fc1d927da557c8306b369bf5a9b9/Screenshot_61.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-range-slider","title":"Reactでレンジスライダーを作る","publishedAt":"2021/02/08","updatedAt":"2021/05/10","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/64hHc7Q4HegtRpKL9tiecs/bee3b6aa90771b584cf74302167b5579/Screenshot_59.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-modal-window","title":"【React】モーダルウィンドウを作る","publishedAt":"2021/01/31","updatedAt":"2021/05/04","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/26Y8XYmdlhWNot91yCC2GU/0d796e0da5fb0c36e6c831bea4590b7a/Screenshot_56.png"},"category":{"name":"UI"}}},{"node":{"slug":"react-icon-image-generator","title":"【React】Twitterのようなアイコン画像を生成するUIを作る","publishedAt":"2021/02/13","updatedAt":"2021/05/04","headerImage":{"url":"https://images.ctfassets.net/w6gireivdm0c/4MlyBGoI1ZWe9M2NE8fP6t/49bb6cfaf5bb82efade0c74e1be373e8/Screenshot_57.png"},"category":{"name":"UI"}}}]}},"pageContext":{"basePath":"/category/ui/","limit":12,"skip":0,"filter":{"category":{"slug":{"eq":"ui"}}},"pageCount":3,"keyword":"UI"}},"staticQueryHashes":["1844329461","3128379502","414872454","482446646","854434927"],"slicesMap":{}}