ãðªã¡ã³ã¿ãªã³ã°å®çžŸ.06ããã«ãªã¢ãŒãã®ããªãŒã©ã³ã¹æ¡ä»¶ç²åŸð¥æªçµéš&3ã¶æã§Webã¢ããªã®éçºæ¡ä»¶å泚ïŒ
ãã®åºŠã¡ã³ãã£ãŒã®æ¹ãããWebã¢ããªã®ããªãŒã©ã³ã¹æ¡ä»¶ç²åŸè ãåºãŸããïŒ
ããã§ãæ¬ãã©ã³ãåè¬ããŠã©ãã ã£ãã®ãççŽãªãæ°æã¡ãã€ã³ã¿ãã¥ãŒããŸããã
åè¬ãæ€èšãããŠããæ¹ã¯ãã²ã芧ãã ããïŒ
ç¥æŽ
- ååïŒããã¯ããŒã ïŒ
- Ryotaãã
- 幎霢
- 24æ³
- æ§å¥
- ç·æ§
- å±
äœå°
- æ±äº¬
- ãããŸã§ã®è·æŽ
- ITäŒæ¥ç·åè·ïŒ2幎ç®ïŒçŸè·ïŒã2021幎5æããWebç³»ããªãŒã©ã³ã¹
- é«å以éã®åŠæŽ
- å倧åã»çµæžåŠéšïŒ4幎éïŒ1幎äŒåŠãäŒåŠæã¯ããªãŒã©ã€ã¿ãŒãšããŠåãïŒ
- æ¬ãã©ã³ãå¥çŽãããŸã§ã®ããã°ã©ãã³ã°åŠç¿çµéš
- 倧åŠåæ¥åã®2ã¶æéããã¶ã€ã³ã«ã³ããèŠãªããHTMLã»CSSã§ã³ãŒãã£ã³ã°
- ITäŒæ¥å ¥ç€ŸåŸã«ç ä¿®ãåãããäž»ã«Webã®ä»çµã¿ãRuby on RailsãAWSãããŒã¿ããŒã¹ãpythonãªã©ã
- æ¬ãã©ã³ã®åè¬æé
- 4ã¶æé
ãªããšã³ãžãã¢ãç®æããŸãããïŒ
ãã¬ã³ãã®ç§»ãå€ãããæ¿ãããé »ç¹ã«æ°ããæè¡ãåãå
¥ããæ©äŒãããä»äºãæ§ã«åã£ãŠããããã§ãã
åŠçæ代ã¯ããã°ã®å·çãããªãŒã©ã€ã¿ãŒãšããŠåããŠããŸãããåçŽã«æžãããšå¥œãã§ã䟡å€æäŸãé¢çœããšæããŠããŸãããããããåŸã
ã«å¥ã®åœ¢ã§äŸ¡å€æäŸããããšã«åãçµãã§ã¿ãããšæ°æã¡ãå€åããŠãããŸããã
ãã®åŸçŸåšãæ¬æ¥ãšããŠå€ããŠããäŒç€Ÿã«ãäŒç»è·ãšããŠå
¥ç€ŸããŸããããããããããããšã«ãã£ã¬ã³ãžã§ããç°å¢ã§ããã£ããããèå³ããã£ãITã»Webéçºã®ç ä¿®ãåããããã«ãªããŸãããçµæçã«ãããèªåã«åããä»ã«è³ããŸãã
æ°ãããµãŒãã¹ã®äžã§ããªãæ¬ãã©ã³ãåè¬ããŸãããïŒ
å®ã¯åŠçæ代ãMENTAãå©çšããWebå¶äœã®å匷ãããŠããŸãããèªåã§ããããããšã決ãããããã¡ã³ã¿ãŒããµããŒãããŠãããã¹ã¿ã³ã¹ã ã£ãã®ã§ããèªåã«åã£ãŠããŸããããã¹ã¯ãŒã«ã¯ããããšãæåãã決ãŸã£ãŠããåŸåã«ããããåè£ããå€ããŸããã
äŒè€ããã®ãã©ã³ãéžãã çç±ã¯ãäž»ã«ãã®2ã€ã§ãã
- ã¬ãã¥ãŒã®æ°ãå€ããè©äŸ¡ãé«ãã£ããã
- æããŠããããæè¡ïŒReact,Vueãªã©ïŒãèªåã®èå³ç¯å²ã«éãªã£ãããã
åè¬åã¯ãèªåã§ã¢ããªãäœã£ãŠåçåããããšããç®æšããããŸããããªãªãžãã«ã¢ããªéçºãŸã§ãã©ããŒããŠãããããšã«ãé åã«æããåè¬ã決ããŸããã
å®éã«ãµããŒããåããŠã¿ãŠã©ãã§ãããïŒ
ççŽã«ãç¬åŠãããããªãæéãççž®ã§ãããšæã£ãŠããŸããååŠè
ã«ã¯å€æãé£ããã€ã³ãããã®é çªããã«ãªãã¥ã©ã ããã£ããããŠããã®ã§é²ããããã£ãå°è±¡ã§ããReactãVueãªã©ã®åºç€çãªéšåãè¿·ããåŠç¿ããããšãã§ããŸããã
ãŸããé±äžã§ã¡ã³ã¿ãªã³ã°ã®æ©äŒããã£ãã®ã§åŠç¿ãµã€ã¯ã«ãç¯ãããšãã§ããŸãããããã®æ¥ãŸã§ã«ãããŸã§ã¯é²ãããããšãããã©ã¹ã®æ°æã¡ã«ããªããã®ã§è¯ãã£ãã§ããã
å®éã®ã¡ã³ã¿ãªã³ã°ã§ã¯ãã©ãã©ãããã³ãã§ããã ããŸããïŒç¬ïŒãåçŽã«åããã®ãäœãã ãã§ã¯ãªãããããã¯ããããæžãæ¹ã«ããæ¹ããããçãšçŸåœ¹ã®æ¹ã«æããŠããããã®ã§å€§å€åºæ¿ã«ãªããŸããã
åŠç¿äžã¯ãã©ã®ããã«ã«ãªãã¥ã©ã ãé²ããŠããŸãããïŒ
æåã¯Reactã®åŠç¿ããå§ãã€ã€ã䞊è¡ããŠES6ã®æžãæ¹ãåŠã³ãŸããã次ã«Next.jsãåŠã³ãããããçšããªããTodoã¢ããªãäœæããŸããããµãŒããŒã¯åŠç¿ã³ã¹ããäœããªFirebaseã䜿çšãããããæ¯èŒçæ©ããããã€ããããšãã§ããŸããããããŸã§ã§åè¬éå§ãã2ã¶æçšåºŠã§ãã
ãã®åœæããããªãŒã§ã®åèšéçºã«é¢å¿ãåãå§ããŸãããæ¡ä»¶ç²åŸã«åããŠã®èª¿æŽãå§ãŸãã䞊è¡ããŠVueïŒNuxt.jsïŒAmplifyïŒGraphQLã®åŠç¿ãå§ããŸããã
æçµçã«Vue+Nuxt.jsãããŒã¹ã«ããŠTodoã¢ããªãäœæã§ããŸããããã¡ãã¯çŽ1ã¶æã§çµãããŸãããã
ãã®åŸã¯æ¡ä»¶ã®é¢è«ãééããããªãŒã©ã³ã¹ãšããŠæºããããšã«ãªããŸããã
åŠç¿ããèšèªã»ãã¬ãŒã ã¯ãŒã¯ãæããŠãã ãã
ç»é¢ç³»ïŒReact,Next.js,Material-UI,Vue,Nuxt.js,Vuetify,TypeScript
ãµãŒããŒã»ã€ã³ãã©ç³»ïŒFirebase,Amplify,GraphQL
ã©ã®ãããªã¢ããªãäœæããŸãããïŒ
Todoã¢ããª2ã€ïŒReact,VueãããŒã¹ã«1ã€ãã€ïŒ
ã¢ããªã®æŠèŠ
Todoã¢ããª
- ãŠãŒã¶ãŒèªèšŒæ©èœ
- Todoã®è¿œå ãç·šéãåé€æ©èœ
- ã³ã¡ã³ãæçš¿ãåé€æ©èœ
ã¢ããªã®ç»åäŸ
䜿çšèšèªã»ãã¬ãŒã ã¯ãŒã¯
â ReactããŒã¹ïŒReact,Next.js,Material-UI,Firebase
â¡VueããŒã¹ïŒVue,Nuxt.js,Vuetify,TypeScript,Amplify,GraphQL
äœææé
â ReactããŒã¹ïŒçŽ2ã¶æ
â¡VueããŒã¹ïŒçŽ1ã¶æ
â»åŠç¿æéãå«ããŠã
ã¢ããªãäœã£ãææ³
åçŽã«æ¥œããã£ãã§ããïŒå šç¶ç¥ããªãããšã ããã ã£ãã®ã§ãããåŠã³ãšåæã«ã§ããããšãå¢ããŠãã£ãã®ã§ããããããããŸãããä»ãŸã§JSç³»ã®ã¢ãã³ãªãã¬ãŒã ã¯ãŒã¯ã觊ãæ©äŒãããŸããªãã£ãã®ã§ãHTMLã»CSSã ãã§ã¯ã§ããªãæ©èœãå®è£ ããããšãã§ãæ°é®®ã§ãããã
ãŸããReactãšVueã©ã¡ããå匷ããããè¿·ã£ãŠããæ¹åãã«ãããã2ã€ã®ç¹åŸŽããäŒãããŸãã
ReactïŒJavascriptã§èšè¿°ããå²åãå€ããããã¯ãšã³ãã®åŠçãããã°ã©ãã³ã°ã«æ £ããŠãã人ã«ã¯ãšã£ã€ãããããReactNativeãããã®ã§ãå°æ¥çã«ã¹ããã®ã¢ããªãäœããã人ã«åããŠããã
VueïŒãã£ã¬ã¯ãã£ãã䜿ãããšã§JSããžãã¯ãèªåã§æžãéãæžããããHTMLãJSãCSSãåé¢ããŠèšè¿°ãããŠããã®ã§Webå¶äœãªã©çµéšããŠã人ã¯ãšã£ã€ãããããéãšã³ãžãã¢ã®äººã«ãã³ãŒããèŠãããå°è±¡ã
ã©ã¡ããã§è¿·ã£ãå Žåãå ¥ãããè·å Žã»æ¡ä»¶ãã©ã¡ããéèŠããŠãããã§æ±ºããã¹ãã ãšæããŸãã
察å¿ããå 容
Webãšã³ãžãã¢å°±è·ãã©ã³ïŒé±1ã¡ã³ã¿ãªã³ã°ïŒ
æçµçµæ
ãã«ãªã¢ãŒãã®Webã¢ããªéçºæ¡ä»¶ãå泚ãããŸããïŒ
ããªãŒã©ã³ã¹æ¡ä»¶ç²åŸãŸã§ã®è©³çŽ°ã»ææ³
ç¥äººã«æ¡ä»¶ããªããçžè«ããããšã§ãããåŠç¿ã®éçšãå
±æããŠããã®ã§ããããè©äŸ¡ãããã®ã話ãæ¯ã£ãŠãããŸããã
ãŸããå¥ã®ç¥äººããWebå¶äœã®æ¡ä»¶ãé ããŠããŸããããã¯é£äºã®éã«ãç»é¢ç³»ã®åŠç¿ãããŠãããšè©±ããããšããã£ããã§ããäœã§ãçºä¿¡ããããšã倧äºã ãšæããŸãïŒ
ã¡ãã»ãŒãž
å人ã«åãããŠäžå¯§ã«ã«ãªãã¥ã©ã ãæäŸããŠãããŸããååŠè
ã«ãšã£ãŠ1çªå€§å€ãª0ãã1ãéæããããŒãããããšããŠéå®ãããšæããŸããã
ãŸããèªåãã©ããªããããèŠã€ãçŽããã£ããã«ãªããããã«åãã£ãŠåŠç¿ã§ããç°å¢ã ãšæããŸããã³ããã§å€§å€ãªææãç¶ããŸãããã€ã³ãããããŠã¹ãã«ã¢ãããããä»äºã¯å¿
ãããã¯ãã§ããå¿æŽããŠããŸãïŒ
ã€ã³ã¿ãã¥ãŒã¯ä»¥äžã«ãªããŸããRyotaãããããããšãããããŸããïŒ
æ¬ãã©ã³ã«é¢å¿ãããæ¹ã¯ãæåã®ã¹ããããšããŠZoomçžè«ãã©ã³ã®åè¬ããªã¹ã¹ã¡ããŠããŸãã
- ããäŒæ¥ã«è¡ãããããã©ãã©ã®æè¡ãã©ã®ãããåŠç¿ããã°ãããåãããªã
- æªçµéšããWebãšã³ãžãã¢ã«è»¢è·ãããããã©ãã©ãããã°ãããã€ã¡ãŒãžã§ããªã
- ãªãªãžãã«ããŒããã©ãªãªãµã€ã/ã¢ããªãäœæãããïŒ
ãªã©ãªã©ããäžäººãã²ãšãã®ãæ©ã¿ã«åãããŠãã¢ãªã³ã°ããå
·äœçãªã¢ã¯ã·ã§ã³ãã©ã³ãæ瀺ãããŠããã ããŸãããŸããç¶ç¶ãã©ã³éžæã®çžè«ãåãä»ããŠãããŸãã
çŸåšåé¡ã»ãŒã«ãè¡ã£ãŠããããããèå³ãããæ¹ã¯ãæ°è»œã«ãç³ã蟌ã¿ãã ããïŒ
ðZoomçžè«ãã©ã³ã¯ãã¡ã
â»ãZoomçžè«ãã©ã³å¥çŽè
éå®ç¹å
žãZoomçžè«ãã©ã³å¥çŽè
ã«ã¯ãç¶ç¶ãã©ã³å¥çŽåŸã«å©çšã§ããã¹ãã«ãã§ãã¯ãå匷æ³Tipsçãããã¯ã¢ããããŠãæäŸããããŸãïŒè©³çŽ°ã¯Zoomçžè«å¥çŽåŸã«å
±æããããŸãã
ç¶ç¶ãã©ã³ã®ã玹ä»
- ãç¬åŠæ¯æŽãã©ã³ãæå®ã§èªèµ°ãã©ããŒð¥çéã§ã¢ããªãäœããããã«ãªãç¬åŠã«ãªãã¥ã©ã ïŒãã£ããã§è³ªåãæŸé¡ãã³ãã¥ããã£æåŸ ã 19,800åïŒæ
- ãWebå¶äœãã©ã³ãæ¡ä»¶ç²åŸãã©ããŒðæªçµéšããæè¡æå°ãæ¡ä»¶çŽåãŸã§å®å šãµããŒãïŒæ¡ä»¶ç²åŸåŸãç¶ç¶ãµããŒããããªãã®åžå ŽäŸ¡å€ãé«ããŸãã転è·ãçžè«å¯ðã 24980åïŒæ
- ãã¢ããªãªãªãŒã¹ãã©ã³ããªãªãžãã«ã¢ããªéçºã«ç¹åð±äŒç»ã»ä»æ§èšèšã»æè¡éžå®ããæè¡åŠç¿ãéçºãŸã§äžæ°é貫ãµããŒãããŸããé§ãåºãå人éçºè åãð»ã 29,800åïŒæ
- ãWebãšã³ãžãã¢å°±è·ãã©ã³ãã³ã¹ãæ匷ð¥ãªãªãžãã«ã¢ããªéçºã§ããŸãïŒå°çšã«ãªãã¥ã©ã ãå人ã¢ããªéçºã転è·ãŸã§ãµããŒãããŸããæ1ã¡ã³ã¿ãªã³ã°ã 29,800åïŒæ
- ãçéïŒWebãšã³ãžãã¢å°±è·ãã©ã³ãð¥1çªäººæ°ïŒð¥æªçµéšãããªãªãžãã«ã¢ããªéçºïŒè»¢è·ïŒæçã§ãã«ã¹ã¿ãã¯ãšã³ãžãã¢ç®æããŸãðãé±1ã¡ã³ã¿ãªã³ã°ã 49,800åïŒæ