ReactNativeã§ã¹ããåãã®ã¢ããªãäœã ââä»å°åžäž»å¬ã®ãReactNativeåå¿è åããã³ãºãªã³ãã¬ããŒã
ä»å°åžããã£ãŒã«ãã«å 端æè¡ãšæ§ã ãªç£æ¥ãæãåãããæ°äºæ¥ã®åµåºãå 端IT人æã®è²æã»äº€æµã«ããã€ãããŒã·ã§ã³ãçã¿åºããéœåžäœéšã®ã¢ããããŒããç®æããããžã§ã¯ããSENDAI X-TECH Innovation Projectãããã®ç¬¬5匟äŒç»ãšããŠã2/16(å)ïœ2/17ïŒæ¥ïŒã®2æ¥ã«æž¡ããä»å°åžã§ãReactNativeåå¿è åããã³ãºãªã³ããéå¬ãããŸããããã®åãçµã¿ãšã€ãã³ãã®æ§åãã玹ä»ããŸãã
ä»å°ã§ãææ°æè¡ãåŠã¹ãå Žãšäº€æµããã³ãã¥ããã£ã
ãŸãã¯äž»å¬ã®ä»å°åžç£æ¥æ¯è課ã»èæšç°çããããããªãŒããã³ã°ã®æšæ¶ãšãä»å°åžããããŸã§åãçµãã§ãããSENDAI X-TECH Innovation Projectãã«ã€ããŠã®ç޹ä»ããããŸããã
ãä»å°ã§ã¯ãããŸã§å 端ITæè¡ãåŠã¶å Žãããšã³ãžãã¢ã³ãã¥ããã£ãå°ãªããããããæ±äº¬ãŸã§è¡ã£ãŠåå ããŠãã人ãããŸãããããããã¯ä»å°ã§ãããããå Žãäœã£ãŠããããããã®ãããžã§ã¯ãããã£ããã«GoãšGCPã®ä»å°ã³ãã¥ããã£ã¯ç«ã¡äžãã£ãŠããŸãããã²ãä»å°ã§ãå 端ITæè¡ãåŠã³ã亀æµã§ããã³ãã¥ããã£ãçãäžããŠãããŸãããã

â²ä»å°åž ç£æ¥è£œäœéš ç£æ¥æ¯è課 èæšç°çãã
ReactNativeã§ã¹ããåãã®ã¢ããªãäœããïŒ
ä»åã®ãã³ãºãªã³ã§ã¯ãReactNativeãšããFacebook瀟ãäœã£ãããŒã«ãããã䜿ã£ãŠãJavaScriptã ãã§iPhone/Androidã«å¯Ÿå¿ããã¢ããªãäœããŸãã
è¬åž«ãåããŠãããã®ã¯ãã颚åã°ã©ããŒãããITèžäººãã®æç§°ã§ãèåãªProduct Founder & Engineerå¢äº éäžéããã§ãã

â²Product Founder & Engineerå¢äº éäžéãã
ãã¬ã¿ããã€ã«ãå§ããšããB2CãB2Bãããã¯ãã®éçºãè¡ãåãæ¥çèå人ãžã®ã€ã³ã¿ãã¥ãŒã幎30åãè¶
ããè¬æŒããªãŒãã³ãœãŒã¹ãžã®é¢ãããªã©ãå€éšãžåããçºä¿¡ãç©æ¥µçã«è¡ãªã£ãŠãããæ¥ç±³ã§èš4åã®èµ·æ¥ãããã®ã¡ã2018幎10æã«ç¬ç«ã"Product Founder"ãšããŠåºããããã¯ãã®éçºã«é¢ãããè¶£å³ã¯ãæè¿å§ããDJã
å¢äºãããšã¡ã³ã¿ãŒãåããŠãããã®ã¯ãReactNativeã³ãã¥ããã£ãéå¶ããäžç°äžæãããšèæšäº®å€ªããã®ãäºäººã§ãã

â²äžç° äžæãã
æ°åã§æ ªåŒäŒç€ŸãªãŒã¯ãã¡ã³ã«ãŠãšã³ãžãã¢ãæ
åœããã®åŸã¹ã¿ãŒãã¢ããã«ãŠäžäººç®ã®ãšã³ãžãã¢ãšããŠéçºããã®åŸããªãŒã©ã³ã¹ã«ãªããReactãReact Nativeã®éçºãã¡ã€ã³ã§é²ããåããReactNativeã³ãã¥ããã£ã®éå¶ãè¡ãã

â²èæš äº®å€ªãã
æ°åã§ãœãŒã·ã£ã«ã²ãŒã ç³»ã®äŒç€Ÿã«å
¥ç€Ÿããããã®åŸããã¥ã®ã£ãã¿ãŒæ ªåŒäŒç€Ÿã«è»¢è·ããReactNativeã§äžããã¢ããªãç«ã¡äžãå匷äŒãã³ãã¥ããã£éå¶ãæäŒãããã«ãªããçŸåšãæ ªåŒäŒç€Ÿãµã€ããŒãšãŒãžã§ã³ãã«è»¢è·ããããã³ããšã³ããšã³ãžãã¢ãšããŠåŸäºããŠããã
ReactNativeã®éçºç°å¢ãæºåãã
å¢äºããã¯ä»åã®ãŽãŒã«ãšããŠãäºæ¥éã ãã§ReactNativeãå®å šã«èŠããã®ã¯é£ããã®ã§ãæãåãããŠãèªåã§æžãããã®ããèªåã®ã¹ããã§åãããšãäœéšããŠããããèªå·±åŠç¿ã®ãã£ãããšããŠããããã°ãšå眮ãããè¬çŸ©ãå§ããŸããã

ãã¹ããã¢ããªã«ã¯ããããªäœãæ¹ãããããã€ãã£ãã®æ¹ãããã©ãŒãã³ã¹ãããããOSç¹æã®æ©èœã䜿ããããéçºãé£ãããªã©ãããããã¡ãªããã»ãã¡ãªãããããããšå¢äºããã¯èªããŸãã
- ãã€ãã£ã
- Webã¢ããª
- PWAïŒProgressive Web AppsïŒ
- ããã¢ããªïŒCordovaïŒ
- ãã«ããã©ãããã©ãŒã ïŒUnityãReactNativeïŒ
ä»åãã³ãºãªã³ã§åŠã¶ReactNativeã¯ãReact.jsãããŒã¹ã«ãããã«ããã©ãããã©ãŒã éçºç°å¢ã§ãJavaScriptïŒES6ïŒãšJSXã§æžãããŒã«ãããã§æäŸãããŠããŸãã
äž»ãªã¡ãªããã»ãã¡ãªããã¯ä»¥äžã®éãã§ãã
ïŒã¡ãªããïŒ
- äž¡æ¹ã«åããŠäžåºŠã«äœãã
- äœ¿ãæ £ããèšèªã䜿ãã
- éçºããŒã«ã䜿ãããã
ïŒãã¡ãªããïŒ
- 䜿ããªãæ©èœããã
- æ©èœå·®ãèããŠå®è£ ããå¿ èŠããã
- ããŒã«ã®æäŸãçµãããšæ»ã¬
ReactNativeã¯ãéåžžXcodeãAndroid Studioãªã©ã®nativeéçºç°å¢ãAppleIDãªã©ãèšå®ãå¿ èŠã§ãããexpo.ioãã€ã³ã¹ããŒã«ããã°å¿ èŠãããŸãããexpo.ioãšã¯ãReactNativeçšã®éçºç°å¢ã§ãå°çšãã¬ã€ã€ãŒãå ¥ããã°Xcodeãªãã§ã宿©ã§çšŒåããŸãããŸããã³ãŒããæžãæãããšãªã¢ã«ã¿ã€ã ã«åæ ãããŸãã
ããã§ä»åã®ãã³ãºãªã³ã§ã¯ReactNativeã®éçºãããç°¡åã«è¡ãããã«ExpoãšExpo Snackãå©çšããŸããexpo snackã䜿ãããšã§ããã©ãŠã¶ã ãã§ReactNativeã®éçºç°å¢ãæ§ç¯ããããšãã§ããŸãããŸãã¯expo/expo snackã䜿ãããã«ãexpoã¢ã«ãŠã³ããäœæããexpo clientãã¹ããŒããã©ã³ã«ã€ã³ã¹ããŒã«ããŸãã

ååäžã¯ããããReactNativeãéçºããããã®ç°å¢ãæºåããäºåå±ã§çšæãããåŒåœãé£ã¹ãŠãååŸããã¯ããããæãåãããŠã®ãã³ãºãªã³ã«ç§»ããŸãã

å¿ èŠãªããã±ãŒãžãã€ã³ã¹ããŒã«ããŠãå ¥åãã©ãŒã ã远å
ååŸããã¯å®éã«ã³ãŒããæžããªãããReactNativeãåŠãã§ãããŸããä»åäœãã®ã¯ãTODO管çã®ã¢ããªãGoogleã®Firebaseã䜿ã£ãŠããããã¯ãŒã¯äžã®ãµãŒããŒã«TODOããŒã¿ãä¿åããä»ç«¯æ«ããããã§ãå ±æã§ããããã«ããŸãããŸããReactNative Elementsãšãããšãã¥ã¬ãŒã¿ã®ã©ã€ãã©ãªã§iPhoneãAndroidãªã©ãæ§ã ãªç«¯æ«ã§ãèŠãç®ã厩ããªãããã«ãäœã£ãŠãããŸãã
ãŸãã¯Expoã®èšå®ãªã©ãè¡ããReactNativeElementsãã€ã³ã¹ããŒã«ããã®åŸãå ¥åãã©ãŒã ã远å ããApp.jsã®æç« ãæžãæãããªã©ã®äœéšãè¡ããŸãããå®éã«ã³ãŒããæžããåŸã«ãå¢äºãããã詳ããã³ãŒãã®è§£èª¬ãããŠãããããšã§ãããçè§£ãæ·±ããŠããã¹ã¿ã€ã«ã§ãã³ãºãªã³ã¯é²ãã§ãããŸãã


ç¶ããŠãå ¥åãã¿ã³çšã®ã«ã¹ã¿ã ã¢ã€ã³ã³ã©ã€ãã©ãªãreact-native-vector-iconsããã€ã³ã¹ããŒã«ããå ¥åãã©ãŒã ã远å ãå¿ èŠãªã©ã€ãã©ãªãèªã¿èŸŒã¿ãå¿ èŠãªã³ãŒããconstructorãrenderã«å¿ èŠãªé¢æ°ã远èšããããã¹ã¿ã€ã«ã®å€æŽãªã©ãå®è·µããŸãããã¡ã³ã¿ãŒã®äžç°ãããèæšããã®ç±å¿ãªãµããŒãããããé 調ã«ãã³ãºãªã³ã®èª²é¡ãé²ããŠããåå è ã®çããã



TODOãªã¹ã衚瀺ã®ãã©ãŒã ã远å ãã
次ã®ã¹ãããã§ã¯ãTODOãªã¹ãã«ã¿ã¹ã¯ã远å ããããã®ãã©ãŒã ã远å ããæé ãåŠã³ãŸãããè€æ°ã®ã¿ã¹ã¯ã衚瀺ãããããã«ã¯ãApp.jsã«ã©ã€ãã©ãªã远èšãã衚瀺確èªçšã®ãããŒããŒã¿ã远èšããŸãããªã¹ã衚瀺ã®é¢æ°ãšãã§ãã¯ããã¯ã¹ããªã¹ããªã©ã®ã¹ã¿ã€ã«ã远å ããŸãã


Firebaseã®ãããžã§ã¯ããäœæãã
ç¶ããŠã®ãã³ãºãªã³ã¯ãFirebaseã®èšå®ãšãããžã§ã¯ãã®äœæã«ã€ããŠãGoogle Cloud Platformã§ãããžã§ã¯ããäœæããFirebaseã®ãããžã§ã¯ãã远å ããŠãããŸãããŠã§ãã¢ããªã«Firebaseã远å ã§èšå®æ å ±ãååŸããCloud Firestoreã§ããŒã¿ããŒã¹ãäœæãfirebase packageãã€ã³ã¹ããŒã«ããŸããããã«ãFirebase Cloudstoreãèšå®ããããŒã¿ããŒã¹ãäœæã§ããããšã確èªããäœæ¥ãè¡ããŸããã


1æ¥ç®ã®ãã³ãºãªã³ã¡ãã¥ãŒãäºå®ãããæ©ãã«çµãã£ããããçµäºæéãŸã§ReactNativeã«é¢ããåå è ããã®è³ªçå¿çã³ãŒããŒãå±éãåèæžç±ãReactNativeã䜿ã£ãã¢ããªå®çžŸãªã©ãæ§ã ãªè³ªåãå¯ããããå¢äºãããäžç°ãããèæšããããäžå¯§ã«åçãããŠããã ããŸããã

ãã³ãºãªã³çµäºåŸã¯ãããŒã«ã§ä¹Ÿæ¯ïŒ
1æ¥ç®ã®ãã³ãºãªã³çµäºåŸã¯ãæèŠªäŒãéå¬ãããŸãããè¬åž«ã®å¢äºãããã¡ã³ã¿ãŒã®äžç°ãããèæšãããä»å°åžåœ¹æã®èæšç°ããã»äœè€ãããTECH PLAYéå¶äºåå±ã»ã¹ã¿ããã亀ããŠããŒã«ã§ä¹Ÿæ¯ïŒåå è å士ã®äº€æµãç©æ¥µçã«è¡ãããä»å°ã§ãä»åŸãããããã³ãºãªã³ãã³ãã¥ããã£ãã¢ããããŒãããŠããããšçãäžãããŸããã
)


TODOã¿ã¹ã¯ã衚瀺ã»è¿œå ã»åé€ããŠã¿ã
äºæ¥ç®ã®ååäžã¯ãæšæ¥ã®ãã³ãºãªã³ã§è¡ã£ãFirebaseã«ããŒã¿ãä¿åããããããã¹ãã衚瀺ããæé ãåäœç¢ºèªãªã©ã«ã€ããŠã埩ç¿ãå ŒããŠãæ¹ããŠè©³ãã解説ãããŸããã

ç¶ããŠã¯ãTODOã¢ããªç»é¢ã«è¿œå ããããã¹ãã衚瀺ããæé ã«ã€ããŠãApp.jsãšfirebase.jsã®ã³ãŒããä¿®æ£ããSimulatorã§åäœç¢ºèªãããšãããŸã§ããã³ãºãªã³ãããã«ãçµãã£ãã¿ã¹ã¯ãã¢ããªç»é¢ã®ãã§ãã¯ããã¯ã¹ãã¿ãããããšãã«ãã¢ã€ãã åé€ããæé ãã¹ã¿ã€ã«ã·ãŒããããã£ãŠãã¶ã€ã³ãå€ããäœæ¥ãªã©ã«ã€ããŠãå®è·µããŸããã


ååäžæåŸã¯ãå¢äºãããæ®æ®µã¢ããªã®ãã¶ã€ã³ãèãããšãã®åèã«ããŠãããµã€ããšããŠã以äžã®ãµã€ãã玹ä»ããŠãããŸããã
Dribbbleã¯ãã¶ã€ããŒããã¶ã€ã³ãªãœãŒã¹ãå ¬éããŠãããµã€ãã§ãã¢ããªã®ãã¶ã€ã³ãUI/UXãªã©ã®åèã«ããŠããã®ã ãããPinterestã¯ãèªåã®å¥œããªç»åãéããŠç·šéã»å ±æãã§ãããµãŒãã¹ã§ãå¢äºããã¯å¥œããªã¯ã«ãã®åçãã¢ããªã®ã¢ã€ãã¢ãªã©ã®åèã«ããŠããããã§ããã€ã¡ãŒãžã«è¿ãè²ãæ¢ããšãã«ãã䜿ã£ãŠãããµã€ãã¯ãCOLOURloversã玹ä»ãããŸããã

ReactNativeã§ã«ã¡ã©ã¢ããªæ©èœãäœã£ãŠã¿ã
äºæ¥ç®ã®ãæŒãäºåå±ã§çšæãããåŒåœã§ã©ã³ãäŒæ©ããåŸãååŸããã¯åå è ããã®èŠæã§ãReactNativeãšExpoãšããã©ã€ãã©ãªã䜿ã£ãŠã«ã¡ã©ã¢ããªã®æ©èœã«è¿œå ãããã³ãºãªã³ãè¡ãããŸããã

äºæ¥éã®ãã³ãºãªã³ãçµããåå è ã®ææ³ã¯ïŒ
ä»åã®åå è ã®çããã«ææ³ãèããŠã¿ããšããããReactNativeã«å¯Ÿããçè§£ãæ·±ãŸã£ãããç°å¢èšå®ãªã©ãäžå¯§ã«æããŠããããŠããã£ãããä»åŸãåŠãã§ããããããšãã£ãã³ã¡ã³ãã倿°ããã ããŸããã

ã1人ã§ãããšãããŠããŸãç°å¢èšå®ã®éšåïŒExpoãFirebaseïŒãæããŠããããŠããã£ãã§ãã
ãGitHubã®è³æãããããããçšæããŠãããŠãããåŸã®åŸ©ç¿ã«ã掻çšã§ããŠè¯ããšæããŸãã
ããµã³ãã«ã¢ããªãšããã¥ã¡ã³ãããã£ããçšæãããŠããŠãšãŠãããã£ãã§ãã
ãå®éã«2æ¥ãããŠã¹ããã¢ããªã®ãã³ãºãªã³ããã£ãŠãããå匷äŒã¯ãªããªããªãã®ã§ãåå ã§ããŠæ¬åœã«ããã£ããšæããŸãã
ã解説ããšãŠãéçã®éã£ããã®ã§å€§å€ããããããã£ãã§ãããµããŒãäœå¶ã«é¢ããŠãååã«ãã©ããŒããŠããã ãã ç¶æ³ã§ããã£ãã
ãiOSãAndroid察å¿ã®ã¢ããªãéçºããã¢ãããŒã·ã§ã³ãäžãããŸããã
ä»å°åžã§ã¯ãä»åŸããããããã³ãºãªã³ãå匷äŒãéå¬ããŠããäºå®ã§ããåå ããŠã¿ãããšæã£ãæ¹ã¯ããã²ãä»å°åžã®ã°ã«ãŒãããã§ãã¯ããŠã¿ãŠãã ããã ãŸããGoogle Cloud PlatformïŒGCPïŒã®ãŠãŒã¶ãŒã°ã«ãŒãã§ã¯ãGCPUGä»å°ãç«ã¡äžããŸããã®ã§ãèå³ã®ããæ¹ã¯ããã²ãã¡ãããã§ãã¯ãïŒ
ããããã€ãã³ã
é¢é£ããã€ãã³ã

ãå¢åžããŸããïŒãReactNativeåå¿è åããã³ãºãªã³ïŒ- Re...
2019幎02æ16æ¥ (å)ããããã®èšäº

ããšã¿ãšãµã€ããŒãšãŒãžã§ã³ãããFlutterããã«æŽ»çšããéçºäºäŸããšã³ãžãã¢ã®ãã ãããèªãââTOYOTA Developers Night

ãåŸç·šãSwiftã§ãiPhoneã¢ããªäœãäœéšããã³ãºãªã³ïŒ










