ããã°ãèªåã®ãµã¤ãã®æ¹ã¸ç§»ç®¡ãã¾ãã
æ°ãããµã¤ãã®æ¹ã«ããã°ã移管ãããããæè¡æ¢ãã¯åæ¢ãããã¨ã«ãªãã¾ããããã®ãµã¤ãã®URLã§ãã https://blog.hiroppy.me 㯠301 ã§æ°ããæ¹ã¸ãªãã¤ã¬ã¯ãããããããéå»ã®è¨äºããªã³ã¯åãã«ãªããã¨ã¯ããã¾ããã
ããããã¯ã¦ãã®æ°ã¯URLã§æ±ºå®ããããããå ¨ã¦ã®è¨äºã0ã¨ãã表è¨ã¨ãªãã¾ãã
ä»ã¾ã§å¤ãã®æ¹ã«é²è¦§ãã¦ãããå¬ããæãã¾ããä»å¾ãæ°ããããã°ã®æ¹ã§ä¼ãããã¨æãã¾ãã
ã¡ã«ã«ãªãéè·ãã¦ãYuimediã«å ¥ç¤¾ãã¾ãã
äºåç®ã®éè·ããã°ã¨ãªã£ã¦ãã¾ãã¾ãããã6/30ããã£ã¦ã¡ã«ã«ãªãéè·ãã¾ããã
ä¸åç®ã®éè·ã®å¾ã«ãã¢ã¤ã«ã©ã³ãã«ä½ã¿ãªããã¡ã«ã«ãªWebã®ãªã¢ã¼ããã¯ãã£ã«é¢ããæè¡é¡§åã¨ãã¦1å¹´åã»ã©åããå¾ã«æ¥æ¬ã«å¸°ã£ãã¿ã¤ãã³ã°ã§ãèªããé ãã2019å¹´ã®11æã«äºåç®ã®æ£å¼ãªå ¥ç¤¾ããã¾ããã
ã¡ã«ã«ãª
å ¥ç¤¾å¾ããªã¢ã¼ããã¯ãã£ã¨ã¯ç°ãªãã¾ãããã¡ã«ã«ãªwebã®å·æ°ãããã¯ããã¯ãã¾ãã¨ãããã¨ã ã£ãã®ã§ãã¡ãã«ä¸å¹´ãããéçºã«é¢ãã£ã¦ãã¾ããããã®å¾ã«ãå度è¨ç«ãããã½ã¦ã¾ã¦ã®åæã¡ã³ãã¼ã¨ãã¦åå ãããã¨ã¨ãªãã¾ããã
ã¡ã«ã«ãª
ãã¼ã ã¡ã³ãã¼ã¨ã¯2017å¹´ãæè¡é¡§åæ代ããã®ç¥ãåããå¤ãããã©ã¤ãã¼ãã§ãéã¶ãããªäººãã¡ã°ããã§ãããæ°ã¶æå¾ã«ã¯ãæ°ã¥ããããã¼ã å ã®å¤å½äººã®æ¹ã®æ¯çãå¤ããªã£ã¦ãã¦å ±éè¨èªã¯ãã¹ã¦è±èªã¨ãªãã¾ããããã®é ã«ã¡ã«ã«ãªã®Webã0ããå·æ°ãããããã¯ããå§ã¾ããä¸å¹´è¿ãéçºã«é¢ããã¾ããã
ã½ã¦ã¾ã¦
ã½ã¦ã¾ã¦ã¯ã2021å¹´1æ28æ¥ã«è¨ç«ãããã¡ã«ã«ãªã®åä¼ç¤¾ã§ãããã¡ã«ã«ãªShopsã®éçºãè¡ãä¼ç¤¾ã§ããç«ã¡ä¸ãæããåå ãããã¨ã¨ãªããã¡ã«ã«ãªã®Webãã¼ã ããã½ã¦ã¾ã¦ã«åºåãã¾ãããä¼ç¤¾èªä½ã0ããã ã£ãã®ã§ãä½ããããæ°é®®ã§ããã³ãã£ã¼ä¼æ¥ã®ç«ã¡ä¸ãããããªæããªã®ããªã£ã¦ãµãããæãã¾ããããã®ææã¯èªåã®äººçã®ä¸ã§ãæ¿åãªçµé¨ãããããã®ä¼ç¤¾ã«å ¥ã£ã¦æ¬å½ã«è¯ãã£ãã¨ä»ã§ãæã£ã¦ãã¾ãã
éçºä½å¶
ã½ã¦ã¾ã¦ã¯ã¤ã³ãã©ããããã³ãã¨ã³ãã¾ã§ãä¸ã¤ã®ãªãã¸ããªã§éçºãè¡ãã¾ããããã§ã¯ããã³ãã¨ã³ããããã¯ã¨ã³ãã¿ãããªè·ç¨®åãããªãããªãã§ãã§ããã·ãã¢ã¨ã³ã¸ãã¢ãå¤ãçµç¹ã§ãããæè¡ã¹ã¿ãã¯ãè¯ãé¸æã ã¨æã£ã¦ãã¾ãã
ããã³ãã¨ã³ããæé«ã«æé©åãããã®ã§ããã°ãã¤ã³ãã©ããããã¯ã¨ã³ãã¾ã§å ¨ã¦é¢ãããªãã¨æ¬å½ã®æé©åã¯ã§ããªãã¨ããäºã¯æããæã£ã¦ãã¦ããã®éçºä½å¶ã¯èªåã«ãã£ãããã¦ãã¾ããã
ã¡ã«ã«ãªShopsã§è¡ã£ã¦ãããã£ãã·ã¥å¹çåã®ä»çµã¿ããã®éçºä½å¶ã§ãªããã°ãä½ããªãã£ãã§ããããã¤ã³ãã©ãããã¯ã¨ã³ãã®ä»çµã¿ãå ¨ã¦æåã®è¨è¨æ®µéãããã¼ã ã¿ããªã§èãã¦æ´ãããã¨ãã§ããã®ã¯æ£è§£ã ã¨æãã¾ãã
ããã³ãã¨ã³ã
æåã®ãªãªã¼ã¹ã¾ã§ã®ã¡ã«ã«ãªShopsã®ããã³ãã¨ã³ãã¯ãèªåãã¢ã¼ããã¯ãã£è¨è¨ã大åã®ãã¼ã¸ã®å®è£ ãè¡ãªã£ã¦ãã¾ãããéä¸ããåå ãã¦ãã ãã£ãããã³ãã¨ã³ãã®æ¹ããã¦ããããããã§å¾åã¯ããªãå©ãã¦ãããæè¬ãã¦ãã¾ãã1人ã®éçºã ã¨ãªããªãç¸è«ã§ãã人ãããªãã®ã§ãéä¸ãã2人ã«ãªã£ã¦ããã³ãã¨ã³ããå®å®ãã¦ãããã¨æãã¾ãã ä»ã§ã¯ãããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã4人ããã®ã§é ¼ããããã¿ããªã«ä»»ãããç¶æ ã¨ãªãã¾ããã
Enabling Team
éçºçµç¹ãã¡ããã¨æ´åããããªãªã¼ã¹å¾ã«ã¯Enablingãã¼ã ã§æ´»åãè¡ãã¾ãããè²ããªåéã®æ¹ããããã¼ã ãªã®ã¯å¤§å¤ããç°å¢ã§ãæä¼ã§ããç¥ããªããã¨ãå¤ãå¦ã³ãå¾ãç°å¢ã§ããã(ç¹ã«å¤§å¦ä»¥æ¥ã®MLåé)
Enabling Team: ç¹å®ã®æè¡/ãã¸ãã¹ãã¡ã¤ã³ã®ã¹ãã·ã£ãªã¹ãã§æ§æããããã¼ã ãStream-aligned teamã®ã±ã¤ãããªãã£ãåããå½¹å²ãæã¡ãStream-aligned teamãèªå¾çã«æ´»åãã¦æè¡ç解決æ³ä»¥å¤ã®èª²é¡ã«ãã©ã¼ã«ã¹ã§ããããã«ãããã¨ãã´ã¼ã«ã¨ãã
ãããã¯ãéçºã¯ã¡ã³ãã¼ã«ä»»ãã¦ãããã³ãã¨ã³ããã¡ã¤ã³ã«DXã®æ´å/æ¹åãããã©ã¼ãã³ã¹ãã¥ã¼ãã³ã°ã主ãªä»äºã¨ãã¦ãã¾ãããããã³ãã¨ã³ããå¾æã§ãªãæ¹ã§ãéçºã§ããããã«æ·å± ãã©ãã ãä¸ãããããèãã¦ãã¾ããã
ãªããããã®ãï¼
ã½ã¦ã¾ã¦ã®ç°å¢ã¯èªåã«ã¨ã£ã¦ããã¹ããªç°å¢ã§ãããããã§ã次ã®ä¼ç¤¾ãé¸ãã çç±ã¯è¤æ°ããã¾ãã
- ä¸åº¦ãtoBã«é¢ãã£ã¦ã¿ããã£ã
- çµç¹ã0ããä½ã£ã¦ã¿ãããªã£ã
- ãã§ã«æ°å¹´ä»¥ä¸ä»ãåãããã仲éãè¤æ°äººããã®ã§ãå®å¿ã§ãã
- 両親ãç é¢ã§åãã¦ãã¦ãéå»ã«è¤ç°ä¿å¥è¡ç大çã«åãã£ã¦ããããããå»çã«è¡ãå¯è½æ§ããã£ã¦ãã®åéã«èå³ããã£ã
- æ¥æ¬ã®å»çã®é ãã¨å¾ã«èªåã«éãããã£ã¦ããç³å°¿ç (éºä¼)çã®è§£æ±ºãå¾®åãªããã§ãæ¹åããã
èªåãããç¥ã£ã¦ããæ¹ã ã¨ããããªå®å®æèã®äººéããã³ãã£ã¼ã«è¡ãã¨ã¯æã£ã¦ãªãã£ãã¨æãã¾ãããèªããé ããã¨ãã¯æ£ç´ãã®ãããæ©ã¿ã¾ãããã人çãä¸åº¦ãããªã®ã§ããã°ã©ãã³ã°ä»¥å¤ã®åéã«å¯¾ãã¦ãææ¦ãã¦ã¿ããæããããã¾ãããtoBãã¨ã³ã¸ãã¢ãªã³ã°çµç¹ãå»çããã¹ã¦ããããã®ææ¦ã¨ãªãã¾ãã
Yuimedi
次ã®ä¼ç¤¾ã¯ãå»çç³»ã®ä¼ç¤¾ã¨ãªãã¾ãã
ããã§ã¯5, 6å¹´è¿ãä»ãåãããã@watildeã@leko ãã¯ããå McKinseyãAWSããå»è ãããªã©ã®å»çç³»ã®æ¹ããã®ããã«æ¬æ¥ä¼ããã¨ããªãã£ãè·ç¨®ã®æ¹ã¨åããã¨ã¨ãªããããã«ä»ãããå¤è§ãªè¦éãæã¤ãã¨ãã§ããã®ã§ã¯ãªããã¨æã£ã¦ãã¾ããèªåã¯å»çç³»ã®ç¥èãã»ã¼0ã®ç¶æ ã§ã¹ã¿ã¼ãããã®ã§ãå è¿°ã®ããã«ãããããããã°ã©ãã³ã°ä»¥å¤ã®å¦ç¿ã®æ¥ã ã¨ãªããããã1ã¤ã®æ¥½ãã¿ããªã¨ãæãã¾ãã
ãªã«ããã£ã¦ããä¼ç¤¾ãã«ã¤ãã¦ã¯ããã¡ããã®ããã°ãããããããã®ã§å¼ç¨ããã¦ãããã¾ãããããã«å ãã¦ãç¾å¨ã¯Next.jsãå©ç¨ãã¦ãã¾ãã
ãããã¯ãã¯ãç¾ç¶ã¨ãã¦ã¯ Node.js, Electron, TypeScript, React, NestJS, AWS ãããã®æè¡ã¹ã¿ãã¯ã®ä¸ã§ãnpm ã®ãããªã¨ã³ã·ã¹ãã ãæã¤å»çãã¼ã¿ã«ç¹åãã ELT ãã¼ã«ã®ãããªãã®ãä½ã£ã¦ãã¾ãããã®é åã§ã¯ãdbt ã Dataform ãªã©ãæ§ã ãªå é§è ãããç解ããã¦ãã¾ããããã«ã¹ã±ã¢æ¥çç¹æã®éæ©è½è¦ä»¶ãè¦æ±ãããã¦ã¼ã¶ã¼ä½é¨ã«å¤§ããªã®ã£ãããããããã§ããå©ç¨è ã®å£°ãèããªãããé·æçã«ç®æããã¸ã§ã³ã®å®ç¾ã«åããã¦å½¢ãå¤ããªãããã¼ã ä¸ä¸¸ã¨ãªã£ã¦ãããã¯ãã®éçºããã¦ãããã°ã¨æãã¾ãã
AWSを退職してYuimediに入社します – watilde's blog
ä»å¾ã®ä»äº / ã³ã³ã¿ã¯ã
ä»å¾ã¯ãé£ã¹ãã°ã®Webæè¡é¡§åã«å ãã¦ãéè·ã¯ãããã®ã®7/1ããã½ã¦ã¾ã¦ã§ãæè¡ãµãã¼ãã¨ãã¦å¾®åãªãããæä¼ããç¶ãã¦ããã¾ããä»å¾ã¨ããé£ã¹ãã°/ã½ã¦ã¾ã¦ããããããé¡ããã¾ããYuimediãã¯ããå社ã®ã話ãèãããå ´åã¯ãæ°è»½ã«ã«ã¸ã¥ã¢ã«é¢è«ãå¯è½ã¨ãªãã¾ããå¿åãå¤ããªã£ã¦ãã¾ã£ãã調æ´ãã¦ãã¾ãã¾ããããäºæ¿ãã ããã
- twitter: https://twitter.com/about_hiroppy
- yuimedi ãã£ãªã¢å¿å: https://herp.careers/v1/yuimedi
- calendly: https://calendly.com/hiroppy/30min
ãããã«
6/30 ã®å æ¬æ¨ãã«ãºã§ãã
ã¡ã«ã«ãªãéè·ãã¾ããããã£ã¡ã楽ããã£ãã§ãï¼ãããã¨ããããã¾ãã pic.twitter.com/jfVlqkqMI8
— è丸ãã¡ã³ (@about_hiroppy) 2022å¹´6æ30æ¥
30æ³ã«ãªã£ã
30æ³ã¨ããç¯ç®ã§ãããã社ä¼äººã«ãªã£ã¦ã7å¹´çµã£ãã®ã§ãã£ãããªã®ã§æ¯ãè¿ãããã¨æããä»æ¥ããformã®æ ã§20代ã使ããªããªã£ã¦ãã¾ã£ããã¨ã¯æ²ããã
ä»äº
èªåã®ãã£ãªã¢ã¯ã¨ã¦ãçããã¨æããæ°åã§ãã¯ã³ã´ã«å ¥ããå¾ã«ã¡ã«ã«ãªã¸è¡ããã¾ããã¯ã³ã´ã«è¡ã£ã¦ä»ç¾å¨ãã¡ã«ã«ãª(souzoh)ã«ãããåºæ»ããæè¿ãã¦ãããä¼ç¤¾ã¯æ¬å½ã«ããä¼ç¤¾ã ã¨æã£ãã
ããã§ã¯ãç«ã¡ä¸ããã§ã¼ãºã§ã¢ã¼ããã¯ãã£ã®æ§ç¯ããã¼ã¹ãæ¸ã0 ->1ããããã¨ãã»ã¨ãã©ã§ãã³ãã¬ãNäºåæ ¡ãnew ã¡ã«ã«ãªWebãã¡ã«ã«ãªShopsãªã©ãä½ã£ãããåç»ã®æé©åã®ç 究ãããããã¦ããããã¾ãç¥ããã¦ããªãããèªåã¯ç»åå¦çã®ç 究ã3-4å¹´éãã£ã¦ããã®ã§ãå°ãã ãç»åãåç»ã®æé©åã«ã詳ããã£ããæ¯ãè¿ã£ã¦ä¸çªè¯ãã£ããã¨ã¯ãéãè¯ãã£ãã®ãã©ãã®ãã¼ã ã仲ã®ããå人ãå¤ãåºæ¥ã¦ããã¾ãè¦å´ããªãã£ãã
æè¡é¢ã§ã¯ã2015å¹´ã®æ°åã®é ããreactã使ã£ã¦ã2018å¹´ãããã¾ã§redux, redux-sagaã使ã£ã¦ãããã2019å¹´ããã¯next.jsãapolloãgraphqlä¸æã¨ãªããä»ã§ããã£ã¨ä½¿ã£ã¦ãããã¡ã«ã«ãªShopsãä½ã£ã¦ä»¥éãè¤æ°ã®ããã¸ã§ã¯ãã§nestjsã使ã£ã¦ããã®ã§ä»å¾ã®ã¹ã¿ãã¯ã¨ãã¦åè£ã«å ¥ãããã
ã¾ããwebã«ãããæè¡é¡§åãå¤ãã®ä¼ç¤¾ã§ãããã¦ããã£ããéå»ã«ã¯ãã¡ã«ã«ãªãç¾å¨ã§ãç¶ãã¦ããé£ã¹ãã°ãä»ã«ãæ°ç¤¾ãã£ã¦ããã主ã«ããã©ã¼ãã³ã¹ãã¥ã¼ãã³ã°ã®ãµãã¼ããã³ã¼ãã¬ãã¥ã¼ããããè¨è¨ç¸è«ã§ããæ¹åã«å°ãã®ã大ããªä»äºã§ãããèªåã«ã¨ã£ã¦ã大ããªçºè¦ããããã¨ãå¤ãã
OSS
èªåã«ã¨ã£ã¦ã大ãã人çãå¤ãã£ããã®ã®ä¸ã¤ã ã£ãã大å¦çã®é ã¯OSSã¯ãã¾ããã£ã¦ãªãã£ããããã¯ã³ã´ã®æ°åã§å ¥ã£ãã¨ãã«åæã«æåOSSãã¡ã³ããã³ã¹ãã¦ããæ¹ããã¦å¤§ããªåºæ¿ãåããã2016å¹´ããã¯ãã£ã¨Node.jsã«é¢ããç¶ãã¦ãã¦2017å¹´ã«Node.jsã®core collraboratorã¨ãªã£ãããã®å¾ã«ãwebpackã®ã³ããã¿ã¼ã¨ãã¦ã2019年以éãopen collectiveçµç±ã§è³éããããã¤ã¤æ´»åãã¦ããã
ãã ã¡ã³ããã³ã¹ãããå´ã«ãªã£ã¦ãããã°ã©ãã³ã°ä»¥å¤ã§å¤ãã®åé¡ãèãããã¨ãå¤ããªã£ããã¬ãã¥ã¯ã¼ä¸è¶³ãããã«å¯¾ãã¦ã®ã³ããã¿ã¼ãå¢ããæ¡ç¨æ¹æ³ãªã©ãèªåãã¡ã¯google summer of codeããã¦ã³ããã¿ã¼ãå¢ããããè²ã èããæ°ãããã
ä»ã«ãOSSããã£ã¦ã¦ããã£ãã®ã¯ãæ¡å¤èªåã®ååãæµ·å¤ã§ç¥ããã¦ã¦ãã¢ã¤ã«ã©ã³ãã«ä½ãã§ãã¨ãã«ã²ã¹ãã§ããã¹ããã¨ã«ãªã£ãããããçµé¨ã¨ãªãæ©ä¼ãæã«å ¥ãããããªã£ããã¨ã ã¨æã£ãã
ä»äºã¨ã¯ãéã£ãå´é¢ã§å¤ãã®çµé¨ãã§ããOSSã¯ä»ã§ãèªåãè¦ãããä¸ã¤ã®æ¥½ããå ´æããªã¨æãã
çæ´»
ä»å¹´ã®2/20ã«ç±ãå ¥ãã¦ãè½ã¡çããã¨æãããã³ããã®å½±é¿ããããã¾ã ã¡ããã¨ä¸¡å®¶ã§é¡åããããããçè¡ã£ã¦ããªãã®ã§æ¡å¤ãã¿ãã¿ãã¦ãããçµå©å¼ã®æºåãä»çã£æä¸ã ããã³ããã«ãã延æãé¿ãããã£ãã®ã§ä»åã¯å®¶æå©ã«ããçµæãã¾ã ãã£ããåºæ¥ã¦ããé¨åãããããçæ´»ã«ã¯å¤§ããªå¤åã¯ãªãããä¸äººæ®ããã®ã¨ãã¨æ¯ã¹ã¦è¦åæ£ããçæ´»ã¨ãªãããã©ã¤ãã¼ãã大åã«ããããã«ãªã£ãã
æè¿ã¯ãå¥åº·ã«æ°ã使ãããã«ãªã£ã¦å¹´é½¢ãæãã¦ããããã ã妻ãæçã®ç®ç«ã®ãã©ã³ã¹ãåã£ã¦ããã¦ãããããã§åããã¯å¥åº·ã ã¨æããæè¬ãããªãã
ä»äºã§ããã½ã³ã³ã¿ã¦ã趣å³ã§ããã£ã¨ããã°ã©ãã³ã°ãã§ãã人çã®å 輩æ¹ã¯ã©ãããç¼çãã¦ããã ããã£ã¦æããããã¼ã®ç®ã«ããããå çã«è¨ããã¦ãå¯ãåã«10åãããç®ã温ãã¦ç¹ç¼ãã¦å¯ããã¨ã«ãã£ã¦èªåã¯ããç¨åº¦ç®ã®ç²ããåããã¦ããã
ã¾ããã¢ã¤ã«ã©ã³ãã®æ¹ã«ä¸åº¦å¸°ãããã®ã ããæ¦äºãã³ããããããã¤è¡ãã°ããã®ããã£ã¦æãã§æ©ã¿ãæ®ã£ã¦ããã
ä»å¾
ãããããã§ã¯ããããæ°ããææ¦ããã¤ã¤ä½ã¯è³æ¬ãªã®ã§å¥åº·ç¬¬ä¸ã§çãã¦ãããã¨ã«ãããã¨æããããå°ãç§çæ´»ãè½ã¡çãããOSSã«ãæ»ããã¨æãã
å¥åº·ãèããã¹ãã¼ã¸ã«ãªã£ã
æè¿ãOSSãã£ã¦ãªããã©é£½ããã®ï¼ã£ã¦ãã¾ã«èããããã¨ãããã飽ããã¨ããããããã¿ã¤ãã«éãåªå é ä½ãå¤ãã£ã¦ãã¾ã£ããå»å¹´ãå¥åº·è¨ºæãä¼ç¤¾ã§åãããã¹ã¦å¤§ä¸å¤«ã ã£ãã®ã ãã10æãããããæãããªä¸èª¿ãããã£ã¦ãã¦ä»ãéé¢ãã¦ããç¶æ ã§ããã
èªåãéé¢ãã¦ããã®ã¯ç¼ç§ã§ãããã¨ã³ã¸ãã¢ã¨ããä»äºæãèªåã«ã¨ã£ã¦ã¯ä¸çªå¤§åãªç®æã§ãããè¿ãã¥ããè² åµã¨ãªã£ã¦ãããç ç¶ã¨ãã¦ã¯ãç¼å§ãä¸ãã£ã¦ãã¦ãç·å éã®çãããã(æ¤æ»äºå®)ãè¦åã®ä½ä¸ããã¨ãã¨è¦åã¯ããªãæªãã®ã«æ´ã«è¿½ãæã¡ãããã£ã¦ãã¾ã£ããç¹ã«ç¼å§ãªãã¦ãªããªãæ²»ããªããã©ãããã°ãããã æãããç®ã®æè¡ã¯ã¾ã æ°ãé²ã¾ãªããæ¯æ¥ãç®è¬ããã£ãããããã¨ããæãªãããã©ãããæãã¦ãã¾ããããããã«ã¤ãããæããã®ãæ¯æ¥ã§ãã¦ããã
ä¸å¦ã®é ããã²ã¼ã ã®ããã«ããã°ã©ãã³ã°ã«ããã£ã¦ãæ°å¹´åã¾ã§ã¯æ¯æ¥13æé以ä¸ã§ãã¦ããæ¬å½ã«ä»ã®ç®ã«ã¯æè¬ãã¦ãã¦ããããè¦å´ããããã¨æããè¿ãããã£ã¨è¦ã¦ããã¨ãããã¨ã¯ããã£ã¨ç®ã®çèãç·å¼µãã¦ããã®ã ããç¸å½ç²ãã¦ããã¯ãã§ããããã ãããè¨ãããã50åãã½ã³ã³ãè¦ã¦ã10åä¼æ©ã§é ããè¦ãã ã¿ãããªãã¨è¨ãããããèªåã«ã¯ãããå°é£ã§ã³ã¼ãæ¸ãå§ããã¨æ°æéç¶ãã¦ãã¾ããã¨ããã50åã§ãããããããã°ã©ãã³ã°çµãããªãããã¨ããããç®ã温ããªããã£ã¦è¨ããã¦ããã®ã§ãå¯ãåã¯15åç¨åº¦æ¸©ãã¦ãããããã
ä»ã¯ãä»äºä»¥å¤ã§ã¯ãã¾ããã½ã³ã³ã»ã¹ãããè¦ãªãããã«ãã¦ãããããå°æ¥ããã©ã¤ãã¼ãã§ãã½ã³ã³ãè¦ãæéã¯æ¸ãã ããããå¯ãåã«ã¹ãããè¦ãªããã¨ãä¸è¦ç°¡åãããªãã¨ãã§ããªã人éãªã®ã§ãã¨ããããã¤ã³ã¿ã¼ãããä¾åèªä½ãåãé¢ããããå¯ãåã¯ã¹ããã§ã¯ãªããæ¬ãèªãããä»å¾ãç®ã使ããªããªã£ããä»äºã§ããã°ã©ãã³ã°ãããã¨ããã§ããªããªãã
æ£ç´ããã©ã¤ãã¼ãã§ãã³ã¼ãæ¸ãã¦ãªãã¨ä»äºã§ä½¿ã£ã¦ãªãæè¡ã«å¯¾ãããã£ããã¢ããã§ããªãä¸å®ãå°ãããããç´è¿ã¯ä½ã¨ãã£ã¨åãåããã¨æããã³ããã®æ§åè¦ãã¤ã¤ãå±±ç»ãããã£ã³ãã好ããªã®ã§ãããå°ãã¢ã¦ããã¢ã«æ³¨åãã¦ãããã®ããªã¼ã£ã¦æã£ããããããã¨ã¯ãä»äºã®æéã§ã©ãã ãå¹çããæ°ããç¥èãèªåã®ç¥ããªãç¥èãå¸åã§ãããã大åã ãªã£ã¦æããã
ä»å¹´30æ³ã«ãªããã¨ããããå¥åº·ã®åé¡ã«ç´é¢ãã復æ§ä¸å¯ã«ãªãåã«å¯¾å¦ãããã¨ã«ããã(æè¡ãã§ããã ãåé¿ããã) æ¢ã«29æ³ã§ã¬ã¿ãåºã¦ããã®ã§ã人ç100å¹´æ代çãããªããé»è³åæ©ãé²ãã§ã»ããã
webpackã«é¢ãã¦ããã£ããã¥ã¼ã¹ã¨ããã«å¯¾ããææ³
注æ: ããã¯å ¬å¼è¦è§£ã§ã¯ãªãããã 1ã¡ã³ãã¼ã®ææ³æã§ãã
æè¿ã®å¤§ããªãã¥ã¼ã¹ã¨ãã¦ã¯ãwebpackã®ä¸»è¦ã¡ã³ãã¼ã®2人(Sokra, Alexander)ã¯ç¾å¨verceléããããã¨ã§ãã
ð¥³News: I have joined the awesome team at â² @Vercel
— Tobias Koppers (@wSokra) 2021å¹´4æ13æ¥
While I'll continue to improve webpack, I'll also work on making Next.js even smoother...
Good news today, I have joined @vercelð
— Alexander Akait (@alexander_akait) 2021å¹´12æ29æ¥
ããã«ããã¡ã³ããã³ã¹ã®å®å®åº¦ãå¢ãããã¨ã¯ç¢ºãã§ããããç¾ç¶ã®åé¡ç¹ã¯ã¡ã³ããä¸è¶³ã§ããwebpackã§ããæ·±å»ã§ãã ä¾ãã°ä»æ¥ãé害ãçºçãã¦ããmini-css-extract-pluginã¯ä¸äººã§éçºãã¦ããããã¬ãã¥ã¯ã¼ããã¾ããããã®2å¹´ããããã£ã¨ãã®ãããªæãã§ãã
ã¢ã¯ãã£ããªã¡ã³ãã¼ã¯ããæ°äººã§ãããå½¼ããããªããªãã¨é端ã«é度ãä½ä¸ããããã¨ã§ãããããã®ä¸ã®äºäººãéããããã¨ã¯å人çã«ã¯å®å¿åº¦ãããè¯ãã£ããã¥ã¼ã¹ã§ããããããªãããå®å®ã¯ãã¦ã人æ°ãå¢ãããªãã¨ã¹ã±ã¼ã«ããªãã®ã§ãã©ãOSSã³ãã¥ããã£ãä»å¾ãåºãã¦ããã¡ã³ããã³ã¹ã§ãã人ãå¢ãããã¯éµã ã¨æãã¾ãã
ãã¦ãwebpackãvercelã®è¦æã«å¼ã£å¼µããããã©ããï¼ã¨èããããã¨ãããã¾ãããããã¯èªåã«ã¯ãããã¾ãããä¾ãã°ãlazy compilationã®å®è£ ãä»ã®ã«æ¯ã¹ã¦ããã¾ã§åªå 度ã¯é«ããªãã£ãè¨æ¶ã§ãããnext.jsã®onDemandEntriesãwebpack nativeã«å¯ããããã«åªå 度ãä¸ãã£ãã®ããªã¨æ³åã¯ãã¦ãã¾ãããã ãwebpackã¯ãµã¼ãã¹ã¨ããããããã¤ã³ãã©ã§ããããåºæ¬çã«å ¥ãæ©è½ã¯ã¦ã¼ã¶ã¼ã«è¯ãå½±é¿ããããã®ã°ããã§ã大ããªå¿é ã¯ãã¦ã¾ãããä¾ã¨ãã¦ãç¾å¨cssã«ç¬¬ä¸å¸æ°æ¨©ãä¸ããæ©è½ã追å ãã¦ãã¾ãããããã¯èª°ã«å¯¾ãã¦ãããå½±é¿ãä¸ãããã®ã ã¨èªä¿¡ãæã£ã¦è¨ãã¾ãã
ã¾ã ããªãå®é¨çã§ãããcssãwebpackã§åãããã«ãªãã¾ãããcss-loaderãmini-css-extract-pluginãããã«ããä¸è¦ã¨ãªãã¾ã / Release v5.66.0 · webpack/webpack https://t.co/abQDPRXiYH
— è丸ãã¡ã³ (@about_hiroppy) 2022å¹´1æ12æ¥
ä»ã«ããã£ã¦ããç¯å²ã§ã¯ãvercelãswcã®authorãå ¥ãããã¨ã«ããã話ãã¦ããã¨webpackã«ãacornããswcã¸ä¹ãæããå¯è½æ§ã¨åªå 度ãä¸ãã£ã¦ãã¦ãããã¨ãæãã¦ãã¾ããçç±ã¯æ確ã§ãnext.jsãå«ãJSçéã§ä»æ³¨ç®ããã¦ããéçºé度åä¸ã®ããã§ããä»å¾ãwebpackããswc(bundleæ©è½ãã¾ã ã¾ã å®é¨ä¸ã§ããæã£ã¦ãããã)ã¸next.jsèªä½ãå®å ¨ã«ä¹ãæããå¯è½æ§ã¯å¦å®ã§ãã¾ããããå é¨ã®äººéã§ã¯ãªãããããã¯ä»å¾ã«æ³¨ç®ãã¾ãããã
ã¡ãªã¿ã«swcãwebpackã®astãæ§ç¯æ¸ã¿ã§ãã
https://github.com/swc-project/swc/tree/main/crates/swc_webpack_astgithub.com
ä»ã«ã¯ãterser-webpack-plugin ã«swcã¨esbuildãå ¥ã£ãç¹ãåãçç±ã§ãã(ããããã±ã¼ã¸åã¨ä¸è´ãã¦ãªã ã¨ã¯æã£ã¦ãã¾ãã)
å¯ä¸å¿é ãã¦ããã®ã¯ãä»å¾ã®webpackã®openCollectiveã®éå¶ã«å¯¾ãã¦ã¯ã©ããªãã®ããªã£ã¦æã£ã¦ãã¾ããwebpackã¯OSSã®ä¸ã§å¤§éã®ã¹ãã³ãµã¼ããããã¨ã¯æåã§ããå°ãªãã¨ãv4ã¾ã§ã¯ãæ©è½è¿½å ãã¹ãã³ãµã¼ãã¦ã¼ã¶ã¼ã®æ票ã§åªå 度ã決ããã¨ãããã¨ã«ãã¦ãã¾ããã
v4ã§ã¯ä»¥ä¸ã®éã
ããããç¾å¨ã®v5ã§ã¯ãã¼ã¸èªä½ãæ©è½ãã¦ãã¾ããã
ã¹ãã³ãµã¼ã®æåãä¼ããããªãç¶æ ã§ã®openCollectiveã®éç¨ã¯ä»å¾ä¸æãªè¦ç´ ã¨ãªãã¾ãããã®ã¹ãã³ãµã¼ã¯æããã¦vercelã¨æ¯ã¹ã¦ã©ããããéã¿ãããã®ãï¼ ã voteãã¼ã¸æ©è½ãã¦ãªããã©ã©ããããã ã£ã ã¿ãããªåé¡ãæ®ã£ã¦ãã¾ãããã®åé¢ãåºæ¬ä¼ç¤¾ã®ä»äºã¨ãã¦OSSãããå ´åã¯é å½ãåãåããªãã®ã§ãããã«ãã¼ã«ã«å¤§ããªä½ããã§ããæ°ããã¡ã³ãããå ¥ãããããªãç¹ã¯è¯ãã£ãããªã¨æãã¾ããçµé¨ä¸ããéãæãã°ã¡ã³ããã³ã¹ãç¶ãããã§ã¯ãªãã§ããããªãããã¯ãã£ãã»ããããã¨ã¯æãã¾ãããããã«ããããã®ãããªä¸å®ã¯ããã¤ã¤ãããã»ã©å¤§ããªè³éãæã¤OSSã§ä¸ã¤ä¼ç¤¾ã«éãããç¶æ³ã«ãªã£ããã¨ãããOSSã¯åã ã¨æãã®ã§ãä»å¾ã«æ³¨ç®ã¨ããäºã«ãªãããã§ãã
ã¾ã¨ãããªã«ããªãã§ãããæ°å¹´openCollectiveã§éå¶ãã¦ãã¦ç¹ã«ã³ããã®å½±é¿ã§é å½é¡ãå¤§å¹ ã«å¤ãããOSSãã«ã¿ã¤ã ãå³ããç¶æ³ãããã¾ããããããä¼ç¤¾ã«éããã¦æ¬å½ã«è¯ãã£ãã¨æãã®ã¨åæã«ãä»å¾ã®OSSã³ãã¥ããã£éå¶ã«ã¤ãã¦ã注ç®ãã¦ããããã¨æãã¾ãã
2021å¹´ãæ¯ãè¿ã
(ãªãã2020å¹´ããªããã)
2021å¹´ã¯ãã»ã¼ä»äºã®å¹´ã§ããã
ä»äº
1æã«ã½ã¦ã¾ã¦ã¨ããä¼ç¤¾ãã§ããããã³ãã¨ã³ããå¾æãªã¨ã³ã¸ãã¢ãèªåããããªãç¶æ³ã§åãã¦ã®ãã³ãã£ã¼ã®ãããªåãæ¹ããã¾ããããªããªãã§ããªãä½é¨ã ã£ãã®ã§ãè¯ãçµé¨ã¨ãªã£ãã¨æãã¦ãã¾ãã
ä»åã®ãµã¼ãã¹ã¯ãwebviewãã¿ã¼ã²ããã ã£ããããããã©ã¼ãã³ã¹ããã£ã¨è¦éã«å ¥ããå¿ è¦ãããèªåã®å¾æãªé åã§ä»äºãã§ããã®ã大ããã£ãã§ããå¤ãã®ä»äºã ã¨ãããã©ã¼ãã³ã¹ã®åªå 度ã¯è´å½çã«ãªããªãéãä¸ããã¥ããé ç®ã ã¨æã£ã¦ãã¦ãããã容æã«è¡ãããã¨ãèªåã®ä¸ç¨®ã®ã¢ããã¼ã·ã§ã³ã¨ãªã£ã¦ãã¾ããã
ã¡ã«ã«ãªShopsã®ããã³ãã¨ã³ãæ§æã¯ä»¥ä¸ãåç §
ããã³ãã¨ã³ããå¾æãªäººã¯ãä»ã§ã¯ä¸äººã«ãªã£ã¦ãã¿ããªåªç§ã§å©ãã£ã¦ãã¾ãããä»å¾ãæ¡å¤§ããã¦ããããã«ãæ¥å¹´ã¯ãçºä¿¡ã«éããç½®ãããã¨æãã¾ãã
ä»ã®åãæ¹ãç¹æ®ã§ãèªåã¯Enabling Teamã¨ããã¨ããã«æå±ãã¦ãã¦ã主ã«éçºè ã®ã¤ã³ãã©æ´åãããã©ã¼ãã³ã¹ãã¥ã¼ãã³ã°çãè¡ãã®ãä»äºã¨ãªãã¾ãããããã¯ãã«ãã¾ãè¿ããªããã®åãæ¹ãèªåã«ãã£ã¦ãããã©ããã¯ããå°ãè¦æ¥µããå¿ è¦ãããã¨æã£ã¦ãã¾ãããä»ã®æ楽ãããã£ã¦ãã¾ãã
ã¾ããä»ã¾ã§é ãåå¨ã ã£ãCTOã®åæããã¨ã¨ã³ã¸ãã¢ã¨ãã¦åããã¼ã ã§åãã¦ãããã¨ã«æè¬ãã¦ãã¾ããã¨ã³ã¸ãã¢ãªã³ã°ä»¥å¤ã«ãå¤ãã®å¦ã³ããããæããã¯è¦éãå°ãã¯åºããªã£ãããªã¨æãã¾ãã
OSS
ä»å¹´ã¯ä»äºã§ã»ã¼ã§ãã¦ãã¾ããã§ããããã¾ã«MTGã¨ãã«åºãç¨åº¦ã§ãã¼ã ãã£ã³ãã«ã§ä¼è©±ããããããããã
ãã ãå®ã¯ä»ãä»äºã§ä½¿ã£ã¦ããchakra-uiã®coreãã¼ã ã«ã¯å ¥ã£ã¦ãã¦ãã³ããããã§ããç¶æ ã§ã¯ããã®ã§ããã©ã¼ãã³ã¹å¨ããã¡ããã¨æ´åãã¦ãããã°ã¨æã£ã¦ãã¾ãã
ãããã«ããã2022å¹´ã¯ä»äºã«æ¯ãå²åããã£ã¨æ¸ããããOSSã«æ»ããããã«ããããªã¨æã£ã¦ãã¾ãã
å¬ããã£ã話ã¨ãã¦ã¯ãä¸ã¤ã®ç®æ¨ã§ãã£ãèªåã®ãªãã¸ããªã§ã¹ã¿ã¼ã5000è¶ãããã¨ã§ãã
ããããããåãã¦èªåã®ãªãã¸ããªã§ã¹ã¿ã¼ã5000è¶ ããããããã£ã¡ãå¬ãããªð ä¸ã¤ã®ç®æ¨ãéæããã¾ããï¼ pic.twitter.com/VQWmVgpTor
— è丸ãã¡ã³ (@about_hiroppy) 2021å¹´10æ28æ¥
ãã¨ã¯ãwebpackã60000ãã¤ãã«è¶ãã¾ããã
webpackã®ã¹ã¿ã¼ãã¤ãã«60000ã«ãªãã¾ããð pic.twitter.com/i0Qy7u8e5c
— è丸ãã¡ã³ (@about_hiroppy) 2021å¹´12æ17æ¥
Media
ã³ããã®å½±é¿ããããã¤ãã³ãã®éå¬èªä½ãå°ãªãä¸ãç»å£ããæ©ä¼ãæä¾ãã¦ãããå¤ãã®ä¼ç¤¾/çµç¹ã«æè¬ãã¾ãã
2022å¹´
ãªã«ãå ¨ãéãåéã®æ°ãããã¨ããããã¨æãã¤ã¤ãå¥åº·ãç¶æã§ããããã«ããããããã°ã©ãã³ã°ãããå¥åº·ãåªå ã«ããããã«ããã
next.jsã§ã®ãã¡ã¤ã«ãã£ã³ã¯æé©åã®ä¸ä¾
ä»åã¯graphql-codegenã使ã説æãã¾ããä»åã®ä¾ã¯ãgraphql-codegen以å¤ã§ãçºçããå¯è½æ§ãããã¾ããèªåçæç³»ãä¸çªé¡èã«å½±é¿ãããããããã§ãã
graphql-codegenã¯ãããgraphqlã®ã¹ãã¼ãããtypescriptã®åå®ç¾©/reactã®hooksçãèªåçæããã®ã«ä½¿ããã¾ãããããã¯next.jsã¨çµã¿åãããå ´åãå°ãããªããã¼ãªé¨åãããã¾ãã
www.graphql-code-generator.com
graphql-codegenã¯ããã©ã«ãã§ã¯1ãã¡ã¤ã«ã«ãã¹ã¦åºåããã¾ãããããã«å¯¾ãnext.jsã¯åãã¼ã¸ãchunksã¨ãã¦åãããä½ãèããã«å®è£ ããã¨ããã³ãã«ããããã¡ã¤ã«éãè¨å¤§ã«ãªãå¯è½æ§ãããã¾ããnext.config.jsããwebpackã®è¨å®ãä¸æ¸ãã§ãã¾ãããoptimazationã¯ããªãä¸æ¸ããã¥ããããããä¸æ¸ãã¯åºæ¬é¿ããã¹ããªã®ã§ãã®ææ³ã¯åãã¹ãã§ã¯ãªãã§ãã
ä¾ãã°ãA
, B
, C
query ãä¾ã«ä»¥ä¸ãè¦ã¦ã¿ã¾ãããã
// generated/hooks.ts <- codegenã«ãã£ã¦ä½ããããã¡ã¤ã« import { gql } from '@apollo/client'; import * as Apollo from '@apollo/client'; export const ADocument = gql` query A { hero(episode: "JEDI") { name } droid(id: "2000") { name } } `; export function useAQuery(baseOptions?: Apollo.QueryHookOptions<AQuery, AQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useQuery<AQuery, AQueryVariables>(ADocument, options); } export function useALazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AQuery, AQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useLazyQuery<AQuery, AQueryVariables>(ADocument, options); } export const BDocument = gql` query B { hero(episode: "JEDI") { name } droid(id: "2000") { name } } `; export function useBQuery(baseOptions?: Apollo.QueryHookOptions<BQuery, BQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useQuery<BQuery, BQueryVariables>(BDocument, options); } export function useBLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<BQuery, BQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useLazyQuery<BQuery, BQueryVariables>(BDocument, options); } export const CDocument = gql` query C { hero(episode: "JEDI") { name } droid(id: "2000") { name } } `; export function useCQuery(baseOptions?: Apollo.QueryHookOptions<CQuery, CQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useQuery<CQuery, CQueryVariables>(CDocument, options); } export function useCLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CQuery, CQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useLazyQuery<CQuery, CQueryVariables>(CDocument, options); }
ä¸è¨ã®ãã¡ã¤ã«ããã³ãã«ããã¨ä»¥ä¸ã®ããã«åºåããã¾ããããã¯webpackãæé©åãè¡ãã¨ãã«æåã«tree shakingãè¡ããã¹ã¦ã®JSãã¡ã¤ã«ããimportããã¦ãããã®ã®ã¿ãå®è¡é¢æ°(ä»åã®ä¾ã ã¨e.d
ã®å¼æ°ã®ãªãã¸ã§ã¯ãå
ã®YW
çãããªã¬ã¼)ã¨ãã¦åæãã¾ããã¤ã¾ããå
¨ãã¼ã¸ã§ä½¿ããã¦ããªãqueryã¯ãã®e.d
ã®ç®æã«ã¯åæãããªããã¨ã¨ãªãã¾ãã ãã ãã使ããã¦ãªãqueryãå®ç¾©èªä½ã¯ããããã¨ã«æ³¨æãã¦ãã ããã
// query: A, query: B ã®ã¿ã誰ãã使ãCã¯ä½¿ã£ã¦ãªãåºåçµæ 7943: function (n, r, e) { "use strict"; e.d(r, { YW: function () { return b; }, $m: function () { return y; }, }); var t = e(6156), o = e(2465), u = e(7450), i = e(4569); function c() { var n = (0, o.Z)([ '\n query C {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (c = function () { return n; }), n ); } function a() { var n = (0, o.Z)([ '\n query B {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (a = function () { return n; }), n ); } function p() { var n = (0, o.Z)([ '\n query A {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (p = function () { return n; }), n ); } var d = {}, // <-- default options O = (0, u.Ps)(p()); function b(n) { // <-- query: A var r = s(s({}, d), n); return i.a(O, r); } var v = (0, u.Ps)(a()); function y(n) { // <-- query: B var r = s(s({}, d), n); return i.a(v, r); } (0, u.Ps)(c()); // <-- query: Cã¯ä½¿ããã¦ãªãã®ã§å¤æ°åãããªã },
ãã¨ãã©ãã®ãã¡ã¤ã«ããã使ããã¦ããªãå ´åã§ããçæãã¡ã¤ã«ã«query(doc)ãããã°ä»¥ä¸ã¯åºåã«å«ã¾ãã¾ãã使ããã¦ããå ´åãä¸è¨ã®exportã®é¨åã«å«ã¾ããã ãã§ãã¨ã¯åãã§ããããã¯æãç¡é§ãªé¨åã§ãããæ´ã«gqlãæååã ã£ããããã®ã§ãã¡ã¤ã«ãµã¤ãºãå§è¿«ãã¾ãã
function d() { var n = (0, u.Z)([ '\n query A {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (d = function () { return n; }), n ); }
ãã¦ãåé¡ç¹ã¨ãã¦ãã£ãè¨ã£ãnext.jsã¯åãã¼ã¸ã®ã¨ã³ããã¤ã³ããæã¤ç¹ã«æ»ã£ãå ´åãçæããããã¡ã¤ã«ãã°ãã¼ãã«ãªå ±éåãããç¶æ ã§å ¨ã¦ã®ã¨ã³ããã¤ã³ãã«ãã®ã³ã¼ã(chunkã®numberãä¸ç·) ãæ¿å ¥ãã¾ãã
ã¤ã¾ã以ä¸ã®ãããªãã¨ãçºçãã¾ãã
- Aãã¼ã¸ãquery: Aãåç § -> generatedãã¡ã¤ã«(7943)ãAã®chunkã«å«ã¾ãã
- Bãã¼ã¸ãquery: Bãåç § -> generatedãã¡ã¤ã«(7943)ãBã®chunkã«å«ã¾ãã
- Cãã¼ã¸ãquery: Cãåç § -> generatedãã¡ã¤ã«(7943)ãCã®chunkã«å«ã¾ãã
- Dãã¼ã¸ã¯ä½ããã°ãªã -> generatedãã¡ã¤ã«(7943)ãDã®chunkã«å«ã¾ããªã
ããã¯ãA, B, Cãã¼ã¸ã«ç¡é§ãªã³ã¼ããå¿ ãå«ã¾ãã¦ããã¨ãããã¨ã§ãã Aãã¼ã¸ã§query: Aãå¼ãã ã ãã«ãé¢ãããä»ã®ãã¼ã¸ã§ä½¿ããã¦ããqueryããã£ã³ã¯ã«åå¨ããããã¯Aããããã¨ä¸è¦ã§ããæ¬æ¥ããã¯ãçæãã¡ã¤ã«ãä¸ã¤ã«çµåããã¹ãã§ã¯ãªããã®è¦ªãã£ã³ã¯ã¨çµåãçæãã¡ã¤ã«ã¯å解ãããã¹ãã§ãã
以ä¸ã®ãããªã³ã¼ããæ¸ããæç¹ã§../generated/hooks
ãåç
§ãã¦ãããã¹ã¦ã®ãã£ã³ã¯ã¯ããããã«æé©åå¾ã®../generated/hooks
ãæã¤ãã¨ã«ãªãã¾ãã
import { useAQuery } from '../generated/hooks'
ãã®åé¡ã解決ããã«ã¯ï¼
2種é¡åé¿çãããã¾ãã
- _appã«å¯ãã
- 大è¦æ¨¡çæãã¡ã¤ã«ãåå²ãã
èªåã®çµè«ã¨ãã¦ã¯ã2ã¤ç®ãããªãã§ãããææª1ã¤ç®ã§ããã£ãã·ã¥ã®è¦³ç¹ããããã°åã®ä¾ããã¯ãã·ã¨ãªãã¾ãã
_appã«å¯ãã
appã¯ç¹æ®ãªãã¡ã¤ã«ã¨ãã¦ä½ç½®ã¥ãããããã¹ã¦ã®ãã¡ã¤ã«ã§å¼ã³åºããã¾ããã¤ã¾ããappã§ãã®å¤§è¦æ¨¡ãª1ãã¡ã¤ã«ãå¼ã¶ã¨åã¨ã³ããªã¼ãã¤ã³ãã«ãã../generated/hooks
ãææ ¼ãã_appã®ä¸ã«å
¥ãåã¨ã³ããªã¼ãã¤ã³ãããããªããªãã¾ããåã¨ã³ããªã¼ãã¤ã³ãããããã¨ãappãèªã¿è¾¼ãã ã¨ãã«ä¸è¦ãªqueryã大éã«å
¥ããã¨ã¯å¤ãããªãã§ãããappã¯ã©ãã§ã使ããã¡ã¤ã«ãªã®ã§ä¸åèªã¿è¾¼ãã°ãã®ã³ã¼ãèªä½ããã£ãã·ã¥ãå¹ããããããã¯ã¼ã¯å¹çã¯ä¸ããã¾ãã
大è¦æ¨¡çæãã¡ã¤ã«ãåå²ãã
queryãå¢ãã¦ããã¨æ°å/ä¸è¡ã«ãªã£ã¦ã¨ãã£ã¿ã§è¦ãã®ã大å¤ã«ãªãã®ã§æé©å以å¤ã®çç±ã§ãåããã»ããããã¨æãã¾ãã
幸ãã«ããgraphql-codegenã¯near-operation-fileãæä¾ãã¦ãããããããè¨å®ããã°å®äºã§ãã
www.graphql-code-generator.com
# codegen.yml schema: src/schema.json documents: 'src/**/*.gql' generates: src/types.ts: # åå®ç¾©ãéãã - typescript src/: # hooksã¨ãã¯ãã£ã¡ preset: near-operation-file presetConfig: baseTypesPath: types.ts # ä¸è¨ã®typesãã¤ãªãã plugins: - typescript-operations - typescript-react-apollo
ãããå®è¡ããã¨ãå.gql
ãã¡ã¤ã«ã®é£ã«tsã®ã³ã¼ããçæããã¾ãã
documents/ âââ a.generated.ts âââ a.gql âââ b.generated.ts âââ b.gql âââ c.generated.ts âââ c.gql
ãããåã¨ã³ããªã¼ãã¤ã³ããimportããã°ãã®ãã¡ã¤ã«ã ããèªã¿è¾¼ã¾ãããããã¡ã¤ã«ãµã¤ãºã¯æå°éã¨ãªããä¸è¦ãªqueryã®å®ç¾©ãå ¥ããã¨ã¯ããã¾ãããã¾ãå®å ¨ã«ç¡é§ããªããªãscope hoistingãããããçµåããç¡é§ãªé¢æ°å®è¡ãæ¸ãã¾ãã
concatenatedã¨æ¸ããã¦ããå ´åã¯ãscope hoistingãå¹ãã¦ããã¨ããããããã®ä¾ã ã¨è¦ªã®ã¨ã³ããªã¼ãã¤ã³ãã¨ã®çµåãããã¦ãã¾ãã
ãããã«
çµè«ã¨ãã¦ãã®ã±ã¼ã¹ã®å ´åãæåãªæé©åã¯ãã¡ã¤ã«ãé©åã«åå²ãããã¨ã§ãã
next.jsã¯ãä½ãæ°ã«ããã¨ãé«å質ãªã¢ããªã±ã¼ã·ã§ã³ãä½ãã¾ããããã®åæ±ç¨çãªãã®ã§ããããå¿ ãããæé©åãæ£ãããªãã¨ã¯éãã¾ããããã ãã³ãã©ã®ä¸æ¸ãã¯ãã¾ãè¯ãæ¹æ³ã§ã¯ãªããããã¥ã¼ãã³ã°ãããå ´åãä¸æ¸ã以å¤ã®æ¹æ³ã模索ããå¿ è¦ãããã¾ãããã®ä¾ã¯graphql-codegenãç¨ãã話ã§ããããããã«éãã大è¦æ¨¡ãªãã¡ã¤ã«ãæ±ã£ãå ´åã«çºçããããã©ã¼ãã³ã¹ã«å½±é¿ããå¯è½æ§ããããã注æãå¿ è¦ã§ãã
ãã¹ã¦ã®åºåãã¡ã¤ã«ã³ã¼ã
ä½ãããªãå ´åã®ã¨ã³ããªã¼ãã¤ã³ãã®ãã£ã³ã¯(Aãã¼ã¸)
(self.webpackChunk_N_E = self.webpackChunk_N_E || []).push([ [9], { 3242: function (n, r, e) { "use strict"; e.r(r), e.d(r, { default: function () { return y; }, }); var t = e(5893), o = e(6156), u = e(2465), i = e(7450), c = e(4569); function a() { var n = (0, u.Z)([ '\n query C {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (a = function () { return n; }), n ); } function f() { var n = (0, u.Z)([ '\n query B {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (f = function () { return n; }), n ); } function s(n, r) { var e = Object.keys(n); if (Object.getOwnPropertySymbols) { var t = Object.getOwnPropertySymbols(n); r && (t = t.filter(function (r) { return Object.getOwnPropertyDescriptor(n, r).enumerable; })), e.push.apply(e, t); } return e; } function p(n) { for (var r = 1; r < arguments.length; r++) { var e = null != arguments[r] ? arguments[r] : {}; r % 2 ? s(Object(e), !0).forEach(function (r) { (0, o.Z)(n, r, e[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(e)) : s(Object(e)).forEach(function (r) { Object.defineProperty( n, r, Object.getOwnPropertyDescriptor(e, r) ); }); } return n; } function d() { var n = (0, u.Z)([ '\n query A {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (d = function () { return n; }), n ); } var O = {}, b = (0, i.Ps)(d()); (0, i.Ps)(f()); (0, i.Ps)(a()); var y = function () { (function (n) { var r = p(p({}, O), n); return c.a(b, r); })().data; return (0, t.jsx)("h1", { children: "top" }); }; }, 7878: function (n, r, e) { (window.__NEXT_P = window.__NEXT_P || []).push([ "/a", function () { return e(3242); }, ]); }, }, function (n) { n.O(0, [971, 774, 888, 179], function () { return (r = 7878), n((n.s = r)); var r; }); var r = n.O(); _N_E = r; }, ]);
_appã«å¯ããå ´åã®ã¨ã³ããªã¼ãã¤ã³ãã®ãã£ã³ã¯(Aãã¼ã¸)
_appã«ãã¹ã¦ã®queryãæ¸ããã¦ããç¶æ
(self.webpackChunk_N_E = self.webpackChunk_N_E || []).push([ [9], { 9217: function (n, u, t) { "use strict"; t.r(u); var r = t(5893), _ = t(7943); u.default = function () { (0, _.YW)().data; return (0, r.jsx)("h1", { children: "top" }); }; }, 7878: function (n, u, t) { (window.__NEXT_P = window.__NEXT_P || []).push([ "/a", function () { return t(9217); }, ]); }, }, function (n) { n.O(0, [774, 888, 179], function () { return (u = 7878), n((n.s = u)); var u; }); var u = n.O(); _N_E = u; }, ]);
scope hoistingãããã¨ã³ããªã¼ãã¤ã³ãã®ãã£ã³ã¯(Aãã¼ã¸)
(self.webpackChunk_N_E = self.webpackChunk_N_E || []).push([ [9], { 4462: function (n, r, e) { "use strict"; e.r(r), e.d(r, { default: function () { return b; }, }); var t = e(5893), o = e(6156), c = e(2465), u = e(7450), i = e(4569); function f(n, r) { var e = Object.keys(n); if (Object.getOwnPropertySymbols) { var t = Object.getOwnPropertySymbols(n); r && (t = t.filter(function (r) { return Object.getOwnPropertyDescriptor(n, r).enumerable; })), e.push.apply(e, t); } return e; } function a(n) { for (var r = 1; r < arguments.length; r++) { var e = null != arguments[r] ? arguments[r] : {}; r % 2 ? f(Object(e), !0).forEach(function (r) { (0, o.Z)(n, r, e[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(e)) : f(Object(e)).forEach(function (r) { Object.defineProperty( n, r, Object.getOwnPropertyDescriptor(e, r) ); }); } return n; } function p() { var n = (0, c.Z)([ '\n query A {\n hero(episode: "JEDI") {\n name\n }\n droid(id: "2000") {\n name\n }\n}\n ', ]); return ( (p = function () { return n; }), n ); } var s = {}, O = (0, u.Ps)(p()); var b = function () { (function (n) { var r = a(a({}, s), n); return i.a(O, r); })().data; return (0, t.jsx)("h1", { children: "top" }); }; }, 7878: function (n, r, e) { (window.__NEXT_P = window.__NEXT_P || []).push([ "/a", function () { return e(4462); }, ]); }, }, function (n) { n.O(0, [971, 774, 888, 179], function () { return (r = 7878), n((n.s = r)); var r; }); var r = n.O(); _N_E = r; }, ]);