React Tokyo ãã¼ãã¢ãã #7 ã®ã¡ã¤ã³ãã¼ã¯ã®ã¹ã©ã¤ãã https://react-tokyo.connpass.com/event/358171/
ã¢ããªã±ã¼ã·ã§ã³ãµã¼ãã¹é¨ã®åèã§ãã ãAmplify Studioããããã®è¨äºãç®ã«ãã¾ãããã©ããããã§ãã触ã£ã¦ã¿ããã©è¯ãããã§ãããç¨åº¦ã®å 容ã§ç©è¶³ããªãã£ããã å ¬å¼ããã°ã§è¬³ã£ã¦ãã ãæå°éã®ããã°ã©ãã³ã°ã§Figmaãããã«ã¹ã¿ãã¯ã®Reactã¢ããªãå®ç¾ãã£ã¦ã®ããã³ããªãã ãã®æç¨¿ã®ãªãã§ãä¼ç¤¾ã®æ¬æ£ã«ããæ¸ç±ç®¡çã·ã¹ãã ãç¨åº¦ã¯ä½ãã¡ããã§ãããã£ã¦ã³ãã§ãããããã£ã¬ã³ã¸ãã¦ã¿ã¾ãã 1. Amplify Studio ã®éå§ Management Console ããã¢ããªã±ã¼ã·ã§ã³ã追å ãã¾ãã step-01 5åãããå¾ ã¤â¦ step-02 âãããªç»é¢ã表示ãããã®ã§ãAmplify Studio ãèµ·å step-03 åå¿ããªããç¡é¢¨â¦ ä¸ç㯠Safari ã¦ã¼ã¶ã¼ã«å ¨ç¶ããããããã¾ãããæ¹ã㦠Chrome ã§ Amplify Studi
æè¿Reactã¨Vueãã©ã£ã¡ãè§¦ãæ©ä¼ããã£ããããReactã¨Vueã©ãé¸å®ããã®ï¼ãã¨ããåããæããããã¹ãã¨çããããªãã£ããªãã¨å¾æããã£ãããã¦ããã®ã§ãVueã触ã£ã¦å¾ãããææ³ãã¾ã¨ãã¦ã¿ãã çµè«ã¨ãã¦ãªã«ãæ°ãããã¨ãçºè¦ããã¨ãããã®ã§ã¯ãªããä¸éã§è¨ããã¦ããäºãèªåãªãã«åæ§ç¯ããã ãã®çµè«ã«ãªã£ãã¨æãã TL; DRVueããã¯å ¨ä½çã«åªããï¼Gentleãï¼ãæããäºãå¤ããè¯ãç¹ã ã¨æããå¤§è¦æ¨¡ã«ãªãã¨ãReactã®å ç¢ãã¯é åçãVueã大ãããªã£ãæã«æ¯ãããè¨è¨ãåºæ¥ããã¯å人çã«ã¯æççããããã ã£ããVueãããã ã£ããReactãã¿ãããªåå²ç¹ãããã¨ããããã§ã¯ãªãã®ã§ãæçµçã«ã¯å¥½ã¿ã«ãªã£ã¦ããã¨æããããããã好ãããããããã好ãããããã¾ã§ã®ãã¬ã¼ã ã¯ã¼ã¯éæ´ä»åã®è©±ãããã«ããã£ã¦ãåã¨åãã¬ã¼ã ã¯ã¼ã¯ã®ä»ãåããã¾ã¨ãã¦ããã¨ã
å ¨ãããããªã ããã«ã¡ã¯ã ãã1ã2é±éããã React 㨠Redux 触ã£ã¦ããã§ããããã¾ãã«ãã¾ã¨ããªããã¥ã¡ã³ãããªããã©ãåããã¦è¯ãã®ãããããªãã£ãç¶æ ã§ããã ããããè²ã ä»çµã¿ã追ã£ã¦ãããã¡ã«ããããªæãã§æ¸ãã°ããã®ã§ã¯ãã¨ããã®ãããã£ã¦ããã®ã§åã®è¨è&ã³ã¼ãã§ã¾ã¨ãã¦ã¿ããã¨æãã¾ãã ç¬èªã®è§£éããç¥ããªãé¨åãããã®ã§ãå¤ãªã¨ããã¯ã³ã¡ã³ãããã ããã¨å©ããã¾ãã ã¾ã React ã«ã¤ã㦠React ã«ã¤ãã¦ã¯ããããæ¸ããã¦ãã®ã¨ããµã ãããããã«æµãã¦ãã ããããªãã¨ããªãã®ã§ç«¯æãã¾ãã qiita.com ä¸è¨ã®åºæ¬ãã³ã³ãã¼ãã³ãã®ä½¿ç¨ãããã¾ã§èªãã ãã ãããOKã§ãã éè¦ãªã®ã¯ã ï¼MVCã§è¨ãã¨ããã®ï¼Viewã®ã¿ãæ å½ããã JavaScriptã®ã³ã¼ãä¸ã«ï¼PHPã®æ§ã«ï¼ãHTMLã¿ã°(ã£ã½ããã®)ããæ¸ããã ãããã¸ãã
ReactStudioã使ã£ãã¢ããªã®ä½ãæ¹ã¯ãã¡ã React Studioã使ã£ã¦Qiitaã®è¨äºä¸è¦§ã¢ããªã使ãã¦ã¿ã ã¯ããã« reactã¨ããã¨JSXã®æ¸ãæ¹ãpropsãstateã®æåçãè¦ããå¿ è¦ãããããã å¦ç¿ã³ã¹ããå²ãã¨é«ãã§ãã£ãããç°å¢ãæ§ç¯ããã®ã«ä¸æéããã£ããçã ã¾ã ã¾ã ã¨ã£ã¤ãã«ãããå¦ããªãã©ã¤ãã©ãªã§ãã ããããä»åã¯ããããªReactããã©ãã°&ããããã§ã¢ããªã ä½ãã¦ãã¾ããã¼ã«ããã£ãã®ã§ç´¹ä»ãããã¨æãã¾ãã â»å°ãWindowsã¯ãªããMacã®ã¿ã§ä½¿ç¨ã§ãããã¼ã«ã§ãããã¾ãã®ã§ãäºããäºæ¿ä¸ããã å ¬å¼ãµã¤ã å ¬å¼ãµã¤ãã¸ã®URLã¯ãã¡ãã React Studio https://reactstudio.com/ ãã¼ã«ã®ä½¿ãæ¹ ReactStudioã§ã³ã³ãã¼ãã³ãããã¶ã¤ã³ãã¾ãã ãã®å¾ãã³ã¼ããèªåçæããã¾ãã ç¡æã§
Nintendo Switchã®ä¸ã§ã¯Reactãåãã¦ãï¼Nintendo eShopéçºç§è©±ãèãã¦ãã ç½ç³ ä¿å¹³ï¼HTML5 Experts.jpç·¨éé·ï¼ ããã«ã¡ã¯ãç·¨éé·ã®ç½ç³ã§ãã ãã®è¨äºã¯ã9æ24æ¥ã«éå¬ãããHTML5 Conference 2017ã«ç»å£ããã¨ãã¹ãã¼ãã«ãã話ãããã»ãã·ã§ã³ã®ãããã¯ãä¸å¿ã«èªã£ã¦ããã ããã¨ãããã®ã§ããã»ãã·ã§ã³ã®å 容ãããæ·±ãçè§£ããæå©ãã«ãªãã ãã§ãªããæ¬è¨äºåä½ã§ãé¢ç½ãèªãã§ããã ãããã¨ãç®æãã¦ãã¾ãã ä»åã¯ããNintendo Switchã¨Webãã¨ããè¬æ¼ãããã¦ãã任天å ããã«ãSwitchéçºã«ãããWebæè¡ã®æ´»ç¨æ¹æ³ããéçºç§è©±ã伺ã£ã¦ãã¾ããã任天å ã®ãäºäººã¯äº¬é½ããããªã¢ã¼ãã§ã®åæã«å¿ãã¦ããã ãã¾ããã Nintendo Switchã§ã¯Webæè¡ã大活èºï¼ ç½ç³ ç°¡åã«èªå·±ç´¹ä»ããé¡ãã§
æè¿ React ã§ SPA ( Single Page Application ) ãä½ãéã«ãRedux ã¨ããè¨èãããåºã¦ãã¾ãã Redux ã®å ¥éè¨äºãæ¤ç´¢ãã¦ã¿ãã¨ããµã³ãã«ã³ã¼ããè¼ã£ã¦ããè¨äºã¯ããããè¦ã¤ãããã¨ãã§ããã®ã§ããããããã Redux ãã©ããããã®ãªã®ããã¨ããç¹ã«ã¤ãã¦ç´¹ä»ãã¦ããè¨äºãå°ãªãããã«æããã®ã§ãä»åæ¸ãã¦ã¿ããã¨ã«ãã¾ãããããã§ãã®è¨äºã§ã¯ãRedux ã¨ã¯ä¸ä½ä½ãªã®ããRedux ã§ä½ãã§ããããã«ãªãã®ãã¨ããç¹ã«ã¤ãã¦ãæ´çãã¦ããããã¨æãã¾ãã åæï¼SPA 㨠ãç¶æ ã ã¾ã SPA ãä½ãããã§å¿ ããã¤ã³ãã¨ãªãã®ã¯ãã¢ããªã±ã¼ã·ã§ã³ã®ãç¶æ ããã©ã管çãææ¡ãããã¨ãããã¨ã§ãããç¶æ ãã¨ããã®ã¯ã¢ããªã±ã¼ã·ã§ã³ãæã£ã¦ããæ å ±ã®ãã¨ã§ãä¾ãã°TODOãªã¹ãã®ããã«ä½ãã®ä¸è¦§ã表示ããã¢ããªã±ã¼ã·ã§ã³ã§ããã°ã çµã
å æ¥è¡ãããFacebookã®éçºè åãã¤ãã³ããF8ãã§ãReact Fiberã®çºè¡¨ãè¡ããã¦ãã¾ããã ã¨ãã£ã¦ããReacté¢é£ã®æ°ãããããã¯ããçºè¡¨ãããã¨ããããã§ã¯ãªããReactãä¸ããæ¸ãç´ãããã¨ãããã¨ã®ããã§ãã Reactã¯ãªãFiberã§æ¸ãç´ãããã°ãªããªãã£ãã®ãï¼Fiberã解決ãããã¨ãã課é¡ã¯ä½ãªã®ãï¼ ãã®çããèãããã«ãReact Fiberç¾ç¶ç¢ºèªã¨ããããã°ã¨ã³ããªã§å¤§å¤è©³ç´°ã«Fiberã®äºã解説ããã¦ããå°æå¾¹ (Twitter: @koba04)ããã«ãå®éã®ã¨ããã詳ãã伺ã£ã¦ãã¾ããã React Fiberã¨ã¯ãªããªã®ããããã¦Reactã®å°æ¥åãæ¢ã£ã¦ã¿ã¾ãã React Fiberã¨ã¯ï¼ ç½ç³ React Fiberã£ã¦ãªãã§ããï¼ã¾ãã¯æ¦è¦ãæãã¦ãã ããã å°æ Facebookãå æ¥ã®F8ã«ã³ãã¡ã¬ã³ã¹ã§çºè¡¨ãããRea
Qwintryãã¼ã ã¯æè¿ãæ¢åã®ãã¹ã¦ã®ããã¸ã§ã¯ãã®ããã³ãã¨ã³ããVue.jsã«ç§»è¡ãã¯ããã¾ãããæ°ããããã¸ã§ã¯ãã§ãVue.jsã使ãã¾ãã ã¬ã¬ã·ã¼ãªDrupalã®ã·ã¹ãã ï¼qwintry.comï¼ ã¼ãããæ°ããæ¸ããªããqwintry.comã®ãã©ã³ã Yii2ã§åãb2bã·ã¹ãã ï¼logistics.qwintry.comï¼ ãã®ä»ãæ¯è¼çå°ããã®ããã¸ã§ã¯ãï¼ã»ã¨ãã©ã¯ãPHPã¨Node.jsã§ããã¯ã¨ã³ããæ§ç¯ãã¦ãããã®ï¼ ããã¸ã§ã¯ãã®è¦æ¨¡ã«ã¤ãã¦ããã¨ã Qwintry ã¯ä¸çä¸ã§ç´50ä¸äººã®é¡§å®¢ã使ã£ã¦ãã¾ããã¢ã¡ãªã«ã¨ãã¤ãã«å庫ãæã£ã¦ãã¦ãã¢ã¡ãªã«å½å æå¤§ã®éµéå ã®ã²ã¨ã¤ã§ãæ±æ¬§ã䏿±ã¸ã®åºè·ã«æ³¨åãã¦ãã¾ããQwintryã¯ãã¢ã¡ãªã«ã®ãªã³ã©ã¤ã³ã¹ãã¢ã§ã°ããºãè³¼å ¥ãã人ãã¡ã®ããã®ãã¼ã«ã§ããç§ãã¡ã®å庫ã«å±ããè·ç©ãã³ã³ããã¼ã«ããã«ã§ç®¡çã§
React vs Angular 2ã¬ã対決ï¼ã¨ãã¹ãã¼ããã¡ã«ãããã¤ã¬ãã«å¯¾è« (1 / 2) ã¼ TechFeed Live#2ã¬ãã¼ã ç½ç³ ä¿å¹³ï¼HTML5 Experts.jpç·¨éé·ï¼ ããã«ã¡ã¯ãç·¨éé·ã®ç½ç³ã§ãã æ¬è¨äºã¯ã2016å¹´9æã«éå¬ãããTechFeed Live#2 ãReact vs Angular 2ãã®æ¨¡æ§ããä¼ãããè¨äºã®åç·¨ã§ãï¼å¾ç·¨ã¯ãã¡ãï¼ã TechFeed Live#2ã¨ã¯ããTechFeedãå°ä¸ã«åºç¾ãããããã¨ãã³ã³ã»ããã¨ããããã¯ããã¸ã¼ã®ææ°ãã¬ã³ããã¨ã³ã¸ãã¢åãã«ç´¹ä»ããã¨ããã¤ãã³ãã§ãï¼TechFeedã¨ã¯ããæå 端ããããã«ããããããã£ããã³ãã¼ã¨ããã¨ã³ã¸ãã¢åãæ å ±åéã¢ããªã§ãï¼ãæ¬ã¤ãã³ãã¯ãReactã¨Angularãããæ¥½ããæ·±ãå¦ã¶ãããç¾ä»£ã®Webã¢ããªã«æ±ããããå種è¦ä»¶ã«ã¤ãã¦ãããããæ¯è¼ããâ¦ã¨
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}