2025/02/28(é) JSConf.jp ãããã Nodeå¦å46æéç®
ããï¼ã¶æéã»ã©ã"Hotwire for Frontend Developers"ãããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã®ããã®Hotwireå ¥éãã¨ããã¦ã§ããµã¤ããä½ã£ã¦ãã¾ãããï¼ãã¼ã¿çã¨ãã¦å ¬éãã¦ãã¾ããï¼ Hotwireã¨Next.jsãã¡ããã¨è¦ã¦ããæ¯è¼ãã¦ãããããã¨ããã®ãæå¤§ã®ç®çã§ãåãUIãHotwireã®ã¨Next.jsã§ä½æãããã¢ãåãããããã³ã¼ããè¦ããããªããæ¯è¼ãã¦ããããã¨ããã®ã主æ¨ã§ããåãUIãNext.jsã®Pages Routerã¨App Routerã§ä½ã£ã¦ãããã®ãããã¾ãã®ã§ããã®æ¯è¼ãã§ãã¾ãã çµæ§ã³ã³ãã³ããå¤ãã®ã§ãZennã§ã¯ããããå°ããã¤å 容ãç´¹ä»ãã¦ããããã¨æãã¾ãã ã¾ãã¯ã覧ãã ããï¼ "Hotwire for Frontend Developers"
ããã«ã¡ã¯ããã¬ã¿ VPoEã®åå·ã§ãã ä»åã¯å¼ç¤¾ã§ããã³ãã¨ã³ãã¢ããªã±ã¼ã·ã§ã³ãæ°ããæ§ç¯ããéã®éçºç°å¢ã¨ãã¦ãä½ã®ã©ã¤ãã©ãªãå ¥ãããã¨ããéçºç°å¢åæã»ãããç´¹ä»ãããã¨æãã¾ãã Web Framework / CSS Framework / Tesing Framework / Linter / Formatterãããããå®çªã§ä½¿ãããã¡ã¯ãã大ä½ããã¾ããããè¿å¹´ã§ã¯æ°ããã©ã¤ãã©ãªãç»å ´ããã®ã§ã2024å¹´ç¾å¨ã»ææ°çããä»åã¯ç´è¿ã§ä½ãããå®éã®ãªãã¸ããªãä¾ã«ãç´¹ä»ãã¾ãã ä»åç´¹ä»ãããªãã¸ããªã®ã¢ããªã±ã¼ã·ã§ã³ã¯toBåãã®ç®¡çç»é¢ã®ã¢ããªã±ã¼ã·ã§ã³ã§ãç¹è³ªããé¨åãç¹ã«ãªãä¸è¬çãªWebã¢ããªã±ã¼ã·ã§ã³ã§ãã ããã§ã¯æ©éãpackage.jsonã®å 容ã¯ãè¦ã¦ããã¾ãããã "dependencies": { "next": "14.2.13", "rea
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
ãã®ã¨ã³ããªã¼ã¯ ä¸ä¼.comã®ã«ã¬ã³ãã¼ | Advent Calendar 2023 - Qiita ã®22æ¥ç®ã®è¨äºã§ãã ã¬ã¹ãã©ã³ãããã¯ãUIéçºãã¼ã ã®éæ²»ã§ãã ä¸ä¼ã¬ã¹ãã©ã³ã®ããã³ãã¨ã³ããæ å½ãã¦ãã¾ãã ä¸ä¼ã¬ã¹ãã©ã³ã§ã¯ Next.js App Router Remix ãæ¡ç¨ãã¦ãã¾ãã user-first.ikyu.co.jp æ¨å¹´ã®çµããé ããå§ã¾ã£ãä¸ä¼ã¬ã¹ãã©ã³ã®ãªãã¥ã¼ã¢ã«ã§ãããããã³ãã¨ã³ã㯠Nuxt v2 (Vue 2) ãã Next.js App Router (React) ã«ãã¨ãã大ããªåãæ¿ãã§ã䏿 £ãã ã£ãæã 㯠React åå¿è ãã²ã£ãããè½ã¨ãç©´ãå ¨é¨è¸ã¿æãã¦ãã¾ããã ä¾ãã°ããã¥ã¼ããªã¢ã«ã«å¾ã£ã¦ useState ã§å¤åããç¶æ ãå®ç¾©ãã¦ãæåã¯ããã§å ¨ã¦ããã¾ããã£ã¦ãã¾ãããæ©è½è¿½å ãã¦ããéç¨ã§ãã¤ã®éã«ãä¸
ããã«ã¡ã¯ã4æã«ãã³ãªã¼ã«å ¥ç¤¾ããSWE / ã¢ã¼ããã¯ã / SETã®sumirenã§ãã å¼ç¤¾ã§ã¯ã¬ã»ã³ã³ä¸ä½åã¯ã©ã¦ãé»åã«ã«ãã® Henry ãéçºã»æä¾ãã¦ãã¾ãã ä»åãHenryã®ããã³ãã¨ã³ããReact + ViteããNext.jsã«æ¸ãæãã¾ããã ãã®è¨äºã§ã¯ãæåã«Next.jsã¸ã®åãæ¿ãã«ãã£ã¦ããããããã¦ã¼ã¶ã¼ä½é¨ã®åä¸ã«ã¤ãã¦èª¬æãã¾ããæ¬¡ã«ããã®ã¦ã¼ã¶ã¼ä½é¨ã®åä¸ãã©ããã¦çããã®ãããã®èå¾ã«ããæè¡çãªè¦ç´ ãã¨ã³ã¸ãã¢åãã«è©³ç´°ã«è§£èª¬ãã¾ããæå¾ã«ãããã³ãã¨ã³ãã¢ã¼ããã¯ãã£ã«å¯¾ããæã ã®é·æçãªãã¸ã§ã³ã«ã¤ãã¦è¿°ã¹ã¾ãã 対象èªè Next.jså°å ¥ã«ããã¦ã¼ã¶ã¼ä½é¨åä¸ ã㢠å®éçãªããã©ã¼ãã³ã¹æ¯è¼ ã¦ã¼ã¶ã¼ä½é¨ãã©ãåä¸ããã FCPé«éåã®æè¡çãªä»çµã¿ Next.jsã¨Viteã®åºæ¬çãªã¢ã¼ããã¯ãã£ã®éã è£è¶³ï¼å·¥å¤«ãã¦ãããã¤
You can read more information about the benchmark here. Specs and Versions for this performance run: CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSDWindows 10 Pro 21H2 19044.2846Node.js 18.16.0Vite and React Plugin versions Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3
Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know â HTML, CSS and JavaScript. Itâs a love letter to web development. But donât take our word for it. Developers consistently rank Svelte as the framework theyâre most excited about using.
æåã«: clean architecture ã¯èª¤è§£ããã¦ãã ãClean Architecture é人ã«å¦ã¶ã½ããã¦ã§ã¢ã®æ§é ã¨è¨è¨ã(以ä¸ãClean Architectureã)ãèªãã ãã¨ãããã¾ãã?ä¾ã®åå¿åã®å³ããç¥ããªãã¨ãã人ãå¤ãã§ãããã ç»ååºå ¸: Robert C. Martin ãThe Clean Architectureã ãã¦ãããã§ã¯ã¤ãºã§ãããClean architecture ã¨ã¯ã controllers ã use casesãentities ã¨ããã¯ã©ã¹ãä½ã£ã¦ç¹ããã¢ã¼ããã¯ãã£ã®ãã¨ã ãâãÃãããã©ã£ã¡ã§ãããã? â â â æ£è§£ã¯Ãã§ãã ãã®åå¿åã¯ãããã¾ã§ clean architecture ã®ä¸ä¾ã¨ãã¦ãClean Acrhitectureãã§ç´¹ä»ããããã®ã§ãã ãããclean architecture ã¨ã¯ã¢
éçºã®åã«æ±ºãã¦ããã㨠å¾ãã夿´ããã®ãé£ãããã¨ã大ããªææ»ããçºçããå¯è½æ§ã®ãããã¨ãã§ããéãéçºã®ã¯ããã«æ±ºãã¦ããã¾ãã å¤è¨èªå¯¾å¿ã®æç¡ URLã«ä¾åããå¯è½æ§ãé«ãå¤è¨èªå¯¾å¿ã¯ãå¾ãã対å¿ããã¨å¶éãããã£ããç ´å£çãªå¤æ´ãå¿ è¦ã«ãªãå ´åãããã®ã§ãã¯ããã«æ±ºãã¦ããã¾ãã å¤è¨èªå¯¾å¿ããäºå®ã¯ãªãã£ããã©ãå¾ããå¿ è¦ã«ãªã£ã¦ãã¾ã£ãå ´åã¯ä»æ¹ãªãã¨æãã¾ãã OGPã®å¿ è¦æ§ åçã«ã¼ãã£ã³ã°ã«å¯¾ããOGPã®å¿ è¦æ§ã«ãã£ã¦ã¬ã³ããªã³ã°æ¹æ³ã®é¸å®ãCDNå¨ãã®é¸å®ãå¤ãã£ã¦ãã¾ãã SEOã®ãã¼ãº ãã¡ããOGPåæ§ã¬ã³ããªã³ã°æ¹æ³ã«å½±é¿ãã¾ãã OGPã«é¢ãã¦ã¯å¾ãããªãã¨ããªããã¨ãããã¾ãããSEOãéè¦ãªãµã¤ãã®å ´åãããããSPAã鏿ããªãæ¹ãé©ãã¦ããå¯è½æ§ãããã®ã§éè¦ã§ãã 対å¿ãã©ã¦ã¶/ãã¼ã¸ã§ã³ ãããæç¢ºã«ããªãã¨ãä¸é¨ã®ãã©ã¦ã¶ã§ä½¿ç¨ã§ããªãCS
Webpackã®å¾ç¶ã¨ãªãæ°ãã³ãã«ãã¼ã«ãTurbopackããç»å ´ãRust製ã®ãã¤ãã£ãã¢ããªã±ã¼ã·ã§ã³ã§Webpackã®700åé«éã«ãNext.js Conf 2022 Reactãã¼ã¹ã®ãµã¼ããµã¤ããã¬ã¼ã ã¯ã¼ã¯ã¨ãã¦ç¥ãããNext.jsã®éçºå ã®Vercelã¯ãæ¥æ¬æé10æ25æ¥æ·±å¤ã«ã¤ãã³ããNext.js Conf 2022ããéå¬ãNext.jsã®ææ°ãã¼ã¸ã§ã³ã¨ãªããNext.js 13ãã¨ãRust製ã®é«éãªãã³ãã«ãã¼ã«ãTurbopackããçºè¡¨ãã¾ããã Introducing Turbopack, the successor to Webpack. ~700x faster than Webpack 10x faster than Vite Native incremental architecture built with Rust Support f
ãã³ã¬ã¡ãã£ã¢éçºãã¼ã ã® id:mizdra ã§ããåå¹´ã»ã©åãããããã³ãã¨ã³ãã¨ãã¹ãã¼ããã¨ããè©æ¸ãããããã社å ã§ããã³ãã¨ã³ãã®åèæ´»åããã¦ãã¾ããå ·ä½çã«ã©ããªæ´»åããã¦ãããã«ã¤ãã¦ã¯ã社å ã®ããããã£ã¹ãã§å°ã話ãã¾ããã®ã§ãèå³ãããã°èãã¦ã¿ã¦ãã ããã developer.hatenastaff.com æè¿ãç§ã¯Reactãæ¡ç¨ãã社å ãããã¯ãã§ã®CSSã®æ¸ãæ¹ãæ¤è¨ãã¦ãã¾ãããæçµçã«ãã®ãããã¯ãã§ã¯ãCSS Modulesãæ¡ç¨ããã«è³ãã¾ãããããããã®éç¨ã§ãCSS Modulesã®ã¡ã³ããã³ã¹ä½å¶ã«å¯¾ãã¦æ¸å¿µããããå°æ¥çãªåç¶ãå±ã¶ã声ãçéã«ãããã¨ãç¥ãã¾ããã ãã ããå®éã«ã¡ã³ããã³ã¹ä½å¶ã«ã¤ãã¦èª¿ã¹ã¦ã¿ãã¨ãããä¸å ¨ã§ã¯ãªããã®ã®å¼ãç¶ãã¡ã³ããã³ã¹ãããã¦ãã¦ã使ç¨ãã§ãããã¨ãåããã¾ãããããã§ãä»åã¯CSS Modulesã«
pixivã§ã¯Next.jsãç¨ããããã³ãã¨ã³ãã®ãªãã¬ã¤ã¹ããã¸ã§ã¯ãã2022å¹´3ææ«ããè¡ã£ã¦ãããç¾æç¹(2022å¹´8æ)ã§ãªã¯ã¨ã¹ãæ©è½ãNext.jsã«ã¦ãªãã¬ã¤ã¹ãã¾ããã ä»åã®pixiv insideã§ã¯ãã¯ã·ãæ ªå¼ä¼ç¤¾ã§åãã¨ã³ã¸ãã¢ã®åãçµã¿ã¨ãã¦ãpixivã®ããã³ãã¨ã³ããNext.jsã§ãªãã¬ã¤ã¹ããåãçµã¿ã«ã¤ãã¦å®éã«åãçµãã ã¡ã³ãã¼ãããç´¹ä»ãã¾ãã ã¾ãã¯çããã®èªå·±ç´¹ä»ããé¡ããã¾ã namazu: pixivã®ã¦ã§ãé åã«é¢ããããã¯ãªã¼ããæ å½ãã¦ããnamazuã§ããä»åã®Next.jsåããã¸ã§ã¯ãã§ã¯PjMãNext.jsã®ãã¹ãã£ã³ã°åãã®å®è£ ãæ å½ãã¦ãã¾ãã shu: 2022å¹´3æã«å ¥ç¤¾ããshuã§ããNext.jsåã§ã¯ããã³ãã¨ã³ãã®è¨è¨ãå®è£ ãæ å½ãã¦ãã¾ãã mog: ã¨ã³ã¸ãã¢ã¨ãã¦ã¢ã«ãã¤ãããã¦ããmogã§ããNex
@1000ch (id:hc0001) ã§ããæ²é¡ã®éããå°ãåã«ãã¯ã¿ã¼ãºãã©ã¤ã ã® Frontend ããã¸ã§ã¯ãã§ä½¿ã lint ãã¼ã«ã¨ã㦠ESLint ã§ã¯ãªã XO ã使ã£ã¦ããæ¹éã«åãæ¿ãã¾ãããæè¿ãã®æ¯ãè¿ããè¡ã£ãã®ã§ããã®åå¿é²ã¨ãã¦æåã«èµ·ããã¾ãã github.com çµç·¯ã¨èª²é¡ ããã¾ã§ã¯ Create React App ã«ä»å±ãã ESLint ã«å ãã¦ã«ã¼ã«ãå°ãã«ã¹ã¿ãã¤ãºãã¦ããããããã¤ãã®ããã¸ã§ã¯ãã§ä½¿ã£ã¦ãã¾ãããããã«ã¯ããã¤ãã®èª²é¡ãåå¨ãã¦ãã¾ããã ESLint ããã³ãã®å¨è¾ºãã©ã°ã¤ã³ã®ä¾åé¢ä¿ãå«ãããã¼ã¸ã§ã³ã¢ãããã±ã¢ãç¶ããå¿ è¦ããã renovate ã dependabot ãªã©ãç¨ãã¦ï¼åï¼èªååã§ãããã®ã®ãä¾åã®æ°ã大ããã«å¿ãã¦ä¾ç¶ã¨ãã¦ã³ã¹ããé«ã ESLint ã®ã«ã¼ã«ãä¸é·æçã«ã¡ã³ããã³ã¹ããå¿ è¦ãã
at #ã¯ã¤ã³ã¨éjs ãªãããã³ãã¨ã³ãã« Edge Worker ãå¿ è¦ãªã®ããCloudflare Workers ãã©ã使ã£ã¦ãããã¿ãããªè©±ããã¾ãã
Apollo Client ã¯è¤é Apollo Client ãåãã¦ããã±ã¼ã¹ ä¸ä¼.com ã« Apollo Client ã¯å¿ è¦ãªããããããªã ã§ã¯ä½ã使ãã°ããã®ï¼ è¤éãªã¢ããªã±ã¼ã·ã§ã³ã«ã¯ Apollo ã使ãã°ããï¼ ããä¸ã¤ã®ãªãããªã¯ã©ã¤ã¢ã³ããRelay ã®è©± çµå±ãä½ã使ãã°ããã®ã ãã®è¨äºã¯ä¸ä¼ à åºå館 Frontend Meetup ã§ã話ããå 容ãããã°ã«ã¾ã¨ãããã®ã§ãã user-first.ikyu.co.jp speakerdeck.com GraphQL ã¯ã©ã¤ã¢ã³ãã¨èãã¦ä¸çªã«æãæµ®ãã¶ã©ã¤ãã©ãªã¯ä½ã§ããããï¼ å¤ãã®æ¹ã«ã¨ã£ã¦ã¯ Apollo Client ã§ã¯ãªããã¨æãã¾ããnpm trends ãè¦ã¦ã Apollo Client ã®ãã¦ã³ãã¼ãæ°ã¯ urql ã relay ãªã©ã»ãã®ã¯ã©ã¤ã¢ã³ãã¨æ¯ã¹å§åçã§ãã å®éãä¸ä¼
ããã³ãã¨ã³ãã¨èªåã®ãã£ãªã¢å½¢æã«ã¤ãã¦ããã®ã¹ãã«ããªã¼ã¨ã»ããã§è¦ãã¨ããããã§ãã https://whimsical.com/oPYtoDPyho6uWK1gDmD9e
ã©ã³ãã³ã°
ã©ã³ãã³ã°
ã¡ã³ããã³ã¹
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}