2024-12-15 Shinyai.js #1
React 19 + Jotaiを試ã—ã¦æ°—ã¥ã„ãŸï¿½æ³¨æ„点
2024-12-15 Shinyai.js #1
Dynamic IOã®æˆã‚Šç«‹ã¡ã¨"use cache"ã®æ·±å±¤
"use cache"ã¯ã€Next.jsã®Dynamic IOã§åˆ©ç”¨ã™ã‚‹ã“ã¨ãŒã§ãã‚‹æ–°ãŸãªãƒ‡ã‚£ãƒ¬ã‚¯ãƒ†ã‚£ãƒ–ã§ã™ã€‚本稿ã¯ç†è€…ã®å‚™å¿˜éŒ²ã‚’å…¼ãã¦ã€Dynamic IOã®æˆã‚Šç«‹ã¡ã‚„"use cache"ã®å†…部実装ã«ã¤ã„ã¦è§£èª¬ã™ã‚‹ã‚‚ã®ã§ã™ã€‚ Dynamic IOã®æˆã‚Šç«‹ã¡ Dynamic IOã¯2024å¹´10月ã®Next Confã§ç™ºè¡¨ã•ã‚ŒãŸã€Next.jsã«ãŠã‘ã‚‹æ–°ã—ã„コンセプトを実証ã™ã‚‹ãŸã‚ã®å®Ÿé¨“的モードã§ã™ã€‚Dynamic IOã¯ãã®åã®é€šã‚Šã€ä¸»ã«å‹•çš„I/O処ç†ã«å¯¾ã™ã‚‹æŒ¯ã‚‹èˆžã„を大ãã変更ã™ã‚‹ã‚‚ã®ã§ã™ã€‚ 具体的ã«ã¯ã€ä»¥ä¸‹ã®å‡¦ç†ã«å¯¾ã™ã‚‹æŒ¯ã‚‹èˆžã„ãŒå¤‰æ›´ã•ã‚Œã¾ã™ã€‚ データフェッãƒ: fetch()ã‚„DBアクセスãªã© Dynamic APIs: headers()ã‚„cookies()ãªã© Next.jsãŒãƒ©ãƒƒãƒ—ã™ã‚‹ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«: Dateã€Mathã€Node.jsã®cryptoモジュールãªã© ä»»æ„ã®éžåŒæœŸ
Recoilを剥ãŒã—ã¦ã„る話
2024/12/10ã«é–‹å‚¬ã•ã‚ŒãŸ3社åˆåŒãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰åˆåŒå‹‰å¼·ä¼šã§è©±ã—ãŸå†…容 https://prtimes.connpass.com/event/335335/
React v19 – React
React 19 is now stable! Additions since this post was originally shared with the React 19 RC in April: Pre-warming for suspended trees: see Improvements to Suspense. React DOM static APIs: see New React DOM Static APIs. The date for this post has been update to reflect the stable release date. In our React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In
Framer Motion is now independent, introducing Motion - Motion Blog
Framer Motion is now independent, introducing Motion First, some personal news: Next week will be my last at Framer. Writing that feels pretty wild. Making Framer Motion has been the best job of my life. To do so for six years within the best product team in the world, both a massive learning experience and a privilege. However, that leads to some news that I'm incredibly excited to share. With Fr
react-to-web-component を使ã£ã¦ React コンãƒãƒ¼ãƒãƒ³ãƒˆã‚’ Web Components ã«å¤‰æ›ã™ã‚‹
react-to-web-component を使ã£ã¦ React コンãƒãƒ¼ãƒãƒ³ãƒˆã‚’ Web Components ã«å¤‰æ›ã™ã‚‹ 2024.10.20 @r2wc/react-to-web-component 㯠React コンãƒãƒ¼ãƒãƒ³ãƒˆã‚’ Web Components ã«å¤‰æ›ã™ã‚‹ãŸã‚ã®ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ã“ã®ãƒ©ã‚¤ãƒ–ラリを使用ã™ã‚‹ã“ã¨ã§ã€React コンãƒãƒ¼ãƒãƒ³ãƒˆã‚’ä»»æ„ã® HTML è¦ç´ ã¨ã—ã¦ä½¿ç”¨ã™ã‚‹ã“ã¨ãŒå¯èƒ½ã«ãªã‚Šã¾ã™ã€‚
Restyle - Zero Config CSS for React
The simplest way to add CSS to React. No build configuration required. Inputimport { styled } from "restyle"; const Button = styled("button", { padding: "0.5rem 1rem", borderRadius: "4px", backgroundColor: "blue", color: "white", }); export default function Page() { return ( <Button css={{ paddingInline: "0.8rem", backgroundColor: "pink", }} onClick={() => alert()} > Click me! </Button> ); } Outpu
Next.js App Router åˆæŽ¡ç”¨ï¼ æ–°è¦ãƒ—ãƒãƒ€ã‚¯ãƒˆã§ã®æŽ¡ç”¨ç†ç”±ã¨æ±ºå®šãƒ—ãƒã‚»ã‚¹ - SmartHR Tech Blog
ã“ã‚“ã«ã¡ã¯ï¼ãƒ—ãƒãƒ€ã‚¯ãƒˆã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®shiraã§ã™ã€‚ 2024å¹´6月ã«ãƒªãƒªãƒ¼ã‚¹ã—ãŸæŽ¡ç”¨ç®¡ç†æ©Ÿèƒ½ã®é–‹ç™ºã‚’ã—ã¦ã„ã¾ã™ã€‚ support.smarthr.jp 採用管ç†æ©Ÿèƒ½ã§ã¯Next.jsã®App Routerを採用ã—ã¦ã„ã¾ã™ã€‚SmartHRã§ã¯ã“ã‚Œã¾ã§App Routerを使ã£ãŸãƒ—ãƒãƒ€ã‚¯ãƒˆãŒãªã„状態ã ã£ãŸã®ã§ã€æŠ€è¡“é¸å®šæ™‚ã¯æŽ¡ç”¨ã™ã‚‹ã‹è¿·ã„ã¾ã—ãŸã€‚ ã“ã®è¨˜äº‹ã§ã¯App Routerを採用ã™ã‚‹ã¾ã§ã®çµŒç·¯ã¨æŽ¡ç”¨ã—ã¦ã¿ã¦ã©ã†ã ã£ãŸã‹ã«ã¤ã„ã¦ç´¹ä»‹ã•ã›ã¦ã„ãŸã ãã¾ã™ã€‚ Pages Routerã¨App Routerã«ã¤ã„㦠ã¾ãšã¯ã˜ã‚ã«Pages Routerã¨App Routerã«ã¤ã„ã¦è»½ã説明ã—ã¾ã™ã€‚ã”å˜çŸ¥ã®æ–¹ã¯èªã¿é£›ã°ã—ã¦ãã ã•ã„。 2024å¹´9月ç¾åœ¨ã€Next.jsã®ãƒ«ãƒ¼ãƒ†ã‚£ãƒ³ã‚°ã‚·ã‚¹ãƒ†ãƒ ã¯2ã¤ç”¨æ„ã•ã‚Œã¦ã„ã¾ã™ã€‚ãã‚ŒãŒPages Routerã¨App Routerã§ã™ã€‚ Pages Routerã¯Ne
Server actions are here! — Waku
Server actions are here!Enjoy full support for React 19’s server actions API. While Waku already had limited support for server actions, today’s v0.21 release brings full support for the React server actions API. This includes inline server actions created in server components, server actions imported from separate files, and the invocation of server actions via <form> element action props. Server
React / Remix ã¸ã®ä¾å˜ã‚’最å°ã«ã™ã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰è¨è¨ˆ - 一休.com Developers Blog
CTO 室ã®æ©ç”°(@takashi_onda)ã§ã™ã€‚ 一休レストランã®ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクトを担当ã—ã¦ã„ã¾ã™ã€‚ Intro 一休レストランã§ã¯ã€ä»¥å‰ã”紹介ã—ãŸã‚ˆã†ã«ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã§ React / Remix を利用ã—ã¦ã„ã¾ã™ã€‚ user-first.ikyu.co.jp 一方ã€è¨è¨ˆæ–¹é‡ã¨ã—ã¦ã¯ã€React / Remix ã¸ã®ä¾å˜ãŒæœ€å°ã«ãªã‚‹ã‚ˆã†ã«å¿ƒæŽ›ã‘ã¦ã„ã¾ã™ã€‚ 今日ã¯ã€ãã‚“ãªä¸€è¦‹çŸ›ç›¾ã™ã‚‹ã‚ˆã†ãªè¨è¨ˆæ–¹é‡ã«ã¤ã„ã¦ã€ã”紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã‚’èªã‚“ã§ã„ãŸã ã Remix ã«èˆˆå‘³ã‚’ã‚‚ãŸã‚ŒãŸã‚‰ã€æ˜Žå¾Œæ—¥ 2024/8/7(æ°´) 19:00〜 ã®ã‚ªãƒ³ãƒ©ã‚¤ãƒ³ã‚¤ãƒ™ãƒ³ãƒˆ offers-jp.connpass.com ã«ã‚‚ã”å‚åŠ ã„ãŸã ã‘ã‚‹ã¨å¬‰ã—ã„ã§ã™ã€‚ ã“ã®è¨˜äº‹ã§ã”紹介ã—ã¦ã„ã‚‹ç–Žçµåˆãªãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ã‚’実ç¾ã™ã‚‹ Remix ã®é…力ã«ã¤ã„ã¦ãŠè©±ã—ã¾ã™ã€‚ ãªãœä¾å˜ã‚’最å°ã«ã™ã‚‹ã®ã‹ï¼Ÿ R
Next.js App Router / React Server Components(RSC)ã‚’ç´è§£ã„ã¦ã¿ãŸ - estie inside blog
デザインエンジニアã®è¡¨(@HirokiOmote)ã§ã™ã€‚ Next.jsã§App RouterãŒãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¦ã€1å¹´ãŒéŽãŽã¾ã—ãŸã€‚ 弊社ã§ã¯ã€@hiroppyã•ã‚“を技術顧å•ã«è¿Žãˆã€Frontendã‚’ä¸å¿ƒã¨ã—ãŸé•·æœŸçš„ãªæŠ€è¡“é¸å®šã«ã”å”力ã„ãŸã ãã¾ã—ãŸã€‚ 本日ã¯ã€ãã“ã§å¾—ãŸå¦ã³ã‚’ã”紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ App Routerã«ã¤ã„㦠2023å¹´5月ã«Next.js 13.4ãŒstableã¨ã—ã¦ãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã€App RouterãŒç™»å ´ã—ã¾ã—ãŸã€‚ ãƒ„ãƒªãƒ¼æ§‹é€ ã§ã®ãƒ•ã‚¡ã‚¤ãƒ«é…ç½®ãŒåŸºæœ¬ã¨ãªã‚Šã¾ã—ãŸã€‚ ディレクトリ構æˆã¨ãƒ«ãƒ¼ãƒ†ã‚£ãƒ³ã‚° pageå˜ä½ãƒ»feature(機能)ã”ã¨ã«åˆ‡ã‚Šåˆ†ã‘ãŸãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªæ§‹æˆãŒå¯èƒ½ã«ãªã£ãŸãŸã‚ã€ã‚ˆã‚Šç›´æ„Ÿçš„ã§å†åˆ©ç”¨æ€§ã®é«˜ã„æ§‹é€ ãŒå®Ÿç¾ã—ã¾ã—ãŸã€‚ // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ â””
Next.js ã‹ã‚‰ Prisma ORM を利用ã™ã‚‹
Next.js ã« Prisma ORM ã‚’å°Žå…¥ã™ã‚‹æ–¹æ³•ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ Next.js プãƒã‚¸ã‚§ã‚¯ãƒˆã®é››å½¢ã‚’ä½œæˆ $ mkdir hello-next-app && cd hello-next-app $ npm init -y $ npm install next react react-dom --save $ npm install typescript @types/node @types/react --save-dev $ code src/index.tsx
react-railsã§ã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã—ã¤ã¤ã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã§setStateã§ãã¦æœ€é«˜ã«ãªã£ãŸ - Qiita
土日ã§react-railsã¨turbolinksを勉強ã—ã¦ã¿ãŸæˆæžœã§ã™ ã‚„ã‚ŠãŸã„ã“㨠画é¢é·ç§»ã™ã‚‹ã¨ãã¯<div id='content'></div> ã®ä¸èº«ã ã‘入れ替ãˆã¦ã€pushStateã§è¡Œãæ¥ã§ãるよã†ã«ã—ãŸã„ reactを使ã£ãŸãƒªãƒƒãƒãªãƒšãƒ¼ã‚¸ã§ã‚‚ã€ã‚¤ãƒ‹ã‚·ãƒ£ãƒ«ãƒãƒ¼ãƒ‰ã‚„SEOã®ç‚ºã«ã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ã§ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã—ã¦ãŠããŸã„ サーãƒãƒ¼ã‚µã‚¤ãƒ‰ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã—ãŸè¦ç´ ã‚’ç ´æ£„ã™ã‚‹ã“ã¨ãªãReactã§åˆæœŸåŒ–ã—ã¦setStateã§ã‚¬ãƒ³ã‚¬ãƒ³Viewを書ãæ›ãˆãŸã„ çµæžœã©ã†ãªã£ãŸã‹ サーãƒãƒ¼ã‚µã‚¤ãƒ‰ã§ReactComponentをレンダリングã—ã¦ã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã®React.renderã§åˆæœŸåŒ–æƒ…å ±ã‚’æƒãˆã¦å¼•ã継㎠ã©ã‚“ãªç”»é¢ã§ã‚‚app.component.setState({})ãŒåæ˜ ã•ã‚Œã¦æœ€é«˜ Turbolinksã§ReactComponentをマウントã—ãŸãƒ«ãƒ¼ãƒˆè¦ç´ ã ã‘入れ替㈠ãã®ç‚ºã«Turboli
React Server Components and Remix
One big question keeps coming up after the Remix v1 release: What about React Server Components? Great question! Like many of you, we've been experimenting with React Suspense since it was first announced in 2018. In fact, the early versions of Remix used it. Realizing it probably wouldn't be released by the time we were ready, we built the async parts of Remix into the framework and are very happ
ãƒãƒ³ãƒ‰ãƒ«ã‚µã‚¤ã‚ºã‚¼ãƒã® React Server Components ã®ç´¹ä»‹ – React Blog
日本語版サイト (ja.reactjs.org) ã®ãƒ–ãƒã‚°ã‚»ã‚¯ã‚·ãƒ§ãƒ³ã¸ã®è¨˜äº‹æŽ²è¼‰ã«ã¯è‹±èªžç‰ˆã‚µã‚¤ãƒˆã¨æ¯”ã¹ã¦ã‚¿ã‚¤ãƒ ラグãŒã‚ã‚Šã¾ã™ã€‚ 最新ã®ãƒ–ãƒã‚°è¨˜äº‹ã¯è‹±èªžç‰ˆã§ã”確èªãã ã•ã„。 日本語版サイトã§ã¯è‹±èªžç‰ˆãƒ–ãƒã‚°ã«å®šæœŸçš„ã«è¿½å¾“ã—ã¤ã¤ã€2020 年以é™ã®è¨˜äº‹ã‚’éšæ™‚翻訳ã—ã¦ã„ã¾ã™ã€‚ 2020 å¹´ã¯é•·ã„ 1 å¹´ã§ã—ãŸã€‚本年ã®æœ€å¾Œã«ã€æˆ‘々ã®ç ”究ã«ãŠã‘る特別ãªãƒ›ãƒªãƒ‡ãƒ¼ã‚¢ãƒƒãƒ—デートã¨ã—ã¦ã€ãƒãƒ³ãƒ‰ãƒ«ã‚µã‚¤ã‚ºã‚¼ãƒã§å‹•ä½œã™ã‚‹ React サーãƒã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ç´¹ä»‹ã‚’ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ サーãƒã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®ç´¹ä»‹ã®ãŸã‚ã®ãƒˆãƒ¼ã‚¯ã¨ãƒ‡ãƒ¢ã‚’用æ„ã—ã¾ã—ãŸã€‚休暇期間ä¸ã«ãƒã‚§ãƒƒã‚¯ã™ã‚‹ã‚‚よã—ã€æ¥å¹´ä»•äº‹ã«æˆ»ã£ã¦ããŸæ™‚ã«è¦‹ã¦ã¿ã‚‹ã®ã§ã‚‚よã„ã§ã—ょã†ã€‚ React サーãƒã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¯ç¾åœ¨ã‚‚ç ”ç©¶é–‹ç™ºä¸ã§ã™ã€‚開発ã®é€æ˜Žæ€§ã‚’高ã‚ã€React コミュニティã‹ã‚‰åˆæœŸã®ãƒ•ã‚£ãƒ¼ãƒ‰ãƒãƒƒã‚¯ã‚’é ‚ããŸã‚ã«å…±æœ‰ã—ã¦ã„ã¾ã™ã€‚ãã®ãŸã‚ã®æ™‚é–“ã¯ã¾ã ã¾ã ã‚ã‚Šã¾ã™ã®ã§ã€ä»Š
PPRã¯ã‚¢ã‚¤ãƒ©ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ãªã®ã‹
先日ã€Next.jsã®æ–°ãŸãªãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ãƒ¢ãƒ‡ãƒ«ã§ã‚ã‚‹Partial Pre-Rendering(以é™PPR)ã«ã¤ã„ã¦è¨˜äº‹ã‚’投稿ã—ã¾ã—ãŸã€‚ ã“ã®è¨˜äº‹ã‚’書ã„ã¦ã‚‹æ™‚ã¯æ„è˜ã—ã¦ãªã‹ã£ãŸã®ã§ã™ãŒã€æ„Ÿæƒ³ã§ã‚¢ã‚¤ãƒ©ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ã«è¨€åŠã•ã‚Œã‚‹ã‚±ãƒ¼ã‚¹ãŒæ•£è¦‹ã•ã‚Œã¾ã—ãŸã€‚社内ã§ä¸Šè¨˜è¨˜äº‹ã®è©±é¡Œã«ãªã£ãŸæ™‚ã‚‚åŒæ§˜ã«ã€ã‚¢ã‚¤ãƒ©ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ã¨ã®é•ã„ã«ã¤ã„ã¦å•ã‚ã‚Œã¾ã—ãŸã€‚ çµè«–ã‹ã‚‰è¨€ã†ã¨ã€PPRã¨ã‚¢ã‚¤ãƒ©ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ã¯å…¨ãç•°ãªã‚‹ã‚‚ã®ã§ã™ã€‚本稿ã§ã¯PPRã¨ã‚¢ã‚¤ãƒ©ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ã®é•ã„ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ PPR ã¾ãšã¯PPRã¨ã‚¢ã‚¤ãƒ©ãƒ³ãƒ‰ã‚¢ãƒ¼ã‚テクãƒãƒ£ã®æ¦‚è¦ã‚’改ã‚ã¦æ•´ç†ã—ã¾ã—ょã†ã€‚ PPRã¯ãƒšãƒ¼ã‚¸ã‚’static renderingã¨ã—ã¤ã¤ã€éƒ¨åˆ†çš„ã«dynamic renderingã«ã™ã‚‹ã“ã¨ãŒå¯èƒ½ãªãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ãƒ¢ãƒ‡ãƒ«ã§ã™ã€‚具体的ã«ã¯ã€ç”»é¢ã‚’build時(ã‚‚ã—ãã¯revalidate後)ã«é™çš„生æˆã—ã¤ã¤ã€ãƒªã‚¯ã‚¨ã‚¹ãƒˆæ¯Ž
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
https://expo.dev/blog/universal-react-server-components-developer-preview
フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒˆã‚™ã®ç¾åœ¨åœ°ã¨ã“ã‚Œã‹ã‚‰
GraphQL ã‚ã‚‹ã„㯠React ã«ãŠã‘る自律的ãªãƒ‡ãƒ¼ã‚¿å–å¾—ã«ã¤ã„ã¦
https://akifumisato.github.io/slide-of-web-developer-conference-2024/1
{{#tags}}- {{label}}
{{/tags}}