ããŒããŒã¹éå°æ»è
ã
ããã³ããšã³ãéçºè
ãšããŠãã£ãªã¢ãžã£ã³ãïŒ â
ð¢æ¡å
äºé
ããããŸãã
髿¿çž®ããã³ããšã³ãã³ãŒã¹ã®ã¢ããããŒãè¬çŸ©äºº
ãå®ç§ãªããã³ããšã³ãã³ãŒã¹ããæ°ãã«ãªãŒãã³ããŸããã
ðð»æ°ããããã³ããšã³ãè¬çŸ©ïŒ
2025幎ã®ããã®æ°ããããã³ããšã³ãããŒããã£ã³ãè¬çŸ©ããã匷åã§ããã现ããå
å®¹ã§æ°ãã«ãªãŒãã³ããŸããïŒ
ãªããš4ã€ã®ããŒãã§æ§æããããå®ç§ãªããã³ããšã³ãã³ãŒã¹ãã§ãçŽ æ©ãå®è·µçãªåŠç¿å
å®¹ã«æé·ããŠã¿ãŠãã ããã
[ã¹ã¿ãŒãããªãŒãã£ã³ã]ã[CSS&Javascript Master]ã [Web Front-end Bootcamp]ã[Hybrid App Bootcamp]
å®å
šã«ãµããã§ãããã€ããªããã¢ããªã®ã³ãŒã¹ãŸã§ã150æéãè¶
ãã髿¿çž®ããã³ãè¬çŸ©ãç¶ããŠããŸã:)
2025幎ããé«ããã£ãªã¢ãžã£ã³ããããŠã¿ãŠãã ããð
ã³ãŒããã£ã³ãã¯ããªãã®æé·ãå¿æŽããŸãã
ð¥ Attention!
ãã®è¬çŸ©ã¯ãã³ãŒãã£ã³ã°ããŒããã£ã³ãã§å®éã«äœ¿çšããè¬çŸ©ã§ãããŒããŒã¹ããéå°æ»è
ããããŠãžã¥ãã¢éçºè
ãŸã§ãã¹ãŠåè¬å¯èœãªã«ãªãã¥ã©ã ã§æ§æãããŠããŸãã
ãæ¬ç©ã®ãããŒããã£ã³ãã§äœãããŸãã
[髿¿çž®ããã³ããšã³ãã³ãŒã¹]
â
å匷ãå®åã®ããã«ïŒå®åã«é©çšããæ¹æ³ãæããŠãããå®åäžå¿è¬çŸ©
â
éå°æ»è
ããå°æ»è
ãŸã§çãçè§£ã§ããã«ã¹ã±ãŒãã«ãªãã¥ã©ã
â
[React, Next.js, Graphql]ææ°æè¡ã®èšèªåŠç¿ãšãããžã§ã¯ãã®å®è£
â
å°±è·ç92ïŒ
ã®èªå®ããããæ¬ç©ãããŒããã£ã³ãã®ã«ãªãã¥ã©ã ã«é²ã
â
ããŒããŒã¹ãå¯èœãªå®å
šåºç€ããéçºè
å°±è·ã¬ãã«ãŸã§æé·
ãããªæ¹ã«ã¯
ãã以äžã«æé©ã§ãã
A to Zã
ããã®è¬çŸ©ããããã
éçº..ïŒäœãç¥ããªããã©
å°±è·ã¬ãã«ãŸã§æé·ãããã§ãã
å®åã§äœ¿çšããæè¡ãš
æ¬ç©ã®ããŠããŠãåŠã³ããã§ãã
ç§ãã¡ã¯ãªã
ReactãšNext.jsã䜿çšããå¿
èŠããããŸããïŒ
Next.jsã¯Reactã©ã€ãã©ãªã®ãã¬ãŒã ã¯ãŒã¯ã§ãã Reactãšã¯ç°ãªããããã©ã«ãã§Next.jsã¯Server-Side RenderingïŒSSRïŒãè¡ããããæ€çŽ¢ãšã³ãžã³æé©åïŒSEOãSearch OptimiziationïŒã«æé©ã§ãããŸãããã¬ã¬ã³ããªã³ã°ã«ããããããããããŒã¿ãã¬ã³ããªã³ã°ãããããŒãžãã€ã³ããŒãã§ããããã«ããŠãããã®ã§ããŠãŒã¶ãŒäœéšã®é¢ã§ãæå©ã§ãã
ããã«å ããŠãããŒãžããŒã¹ã®ã«ãŒãã£ã³ã°ãã€ã¡ãŒãžã®æé©åãbuilt-in-cssãªã©ãæäŸããããšã§ãããžã§ã¯ãã®ããã©ãŒãã³ã¹ãåäžãããéçºè
ãéçºããããç°å¢ãæäŸããã®ã§ãå¹ççã§ããã©ãŒãã³ã¹ã®é«ãéçºãã§ããŸãã
ã¡ãã£ãšåå¿è
ã§ã倧äžå€«ã§ãã
ãŸãã¯åºç€ããæŒããŠã¿ãŸããããïŒ
ãã³ãŒãã£ã³ã°ã®ã錻ãè
ãç¥ããªãç§âŠéçºè
ãšããŠå°±è·ã§ãããïŒããããªå¿é
ã¯ããã«å
¥ããŠãããŠãã ãããä»åã®è¬çŸ©ã§ã¯ãåå¿è
ãçŸæ¥éçºè
ã¬ãã«ã«æé·ã§ããããããã£ããããåºç€è¬çŸ©ããå§ããŸãããïŒ
ð§©åºç€ã®ã¹ãããstep01ã
ã³ãŒãã£ã³ã°ã¯äœã§ããïŒããã°ã©ã ã®ã€ã³ã¹ããŒã«ããåºç€ãç¯ã
Webã»ã¢ããªéçºã®åºç€ã®äžã§ãåºç€ãHTMLã»CSSã»Javascriptã®åºæ¬çãªææ³ãšæŽ»çšæ¹æ³ãåŠã³ãåŠãã å
容ã«åºã¥ããŠäŒå¡ç»é²ãšããããŒã ããŒãžãå®è£
ããŸãã
ð§© åºç€ãæã€step02ã
60以äžã®ææ°ã®ããããã£ã§CSSïŒ
仿¥åŠãã å
容ã¯ä»æ¥åŸ©ç¿ãããïŒè¬çŸ©ã®åè¬åŸãååãªç·Žç¿ãéããŠå®å
šã«ç§ã®ãã®ã«åžåããã®ã«åœ¹ç«ã¡ãŸãã
ð§©åºç€ã®ã¹ãããstep03ã
Javascriptã§WebããŒãžã®æ©èœãããè±ãã«ã
äžç·ã«äœ¿ãããŒã«ãšJavascriptãåäœããåçãã³ãŒãã®æžãæ¹ãäžå¿ã«åŠç¿ããd-day counterãšto-do listãå®è£
ããåŠãã å
容ãå®å
šãªç§ã«ããæéã§ãã
ééäžã€ãŸã§èŠéããªã
ãç·ãè¶ãããããã³ããšã³ãã«ãªãã¥ã©ã
#01. Reactã®åºç€
Reactã®åºç€ããå§ããŸããããïŒãŸããåçš®ããã±ãŒãžãã€ã³ã¹ããŒã«ããŸãããããŠJavascriptã©ã³ã¿ã€ã ç°å¢ã§ããNode.jsãçè§£ããReactã§ãããžã§ã¯ããäœæããŸãã
#02.ããŒã¿éä¿¡
Rest-APIãšGraphQLã®éããçè§£ããApollo Clientãä»ããŠããã¯ãšã³ããšã®éä¿¡æ¹æ³ãåŠã³ãŸãã
#03.ã«ãŒãã£ã³ã°ãšåã¬ã³ããªã³ã°
ããŒãžç§»åæ¹åŒã§ããRouterãšDynamic Routingã®éããçè§£ããŠæŽ»çšã§ããŸãã
#04.ãã©ã«ãæ§é ã»propsã»ã³ã³ããŒãã³ãã®åå©çšæ§
Container/Presenter ãã¿ãŒã³ãçè§£ããã³ã³ããŒãã³ããåå©çšããæ¹æ³ã§å¹çãé«ããŸãã
#05.ã¿ã€ãã¹ã¯ãªãã
ã¿ã€ãã¹ã¯ãªããã®ããŸããŸãªã¿ã€ããçè§£ããç§ã®ããŒããã©ãªãªã«é©çšããŸãã
#06.ãã¬ãŒã ã¯ãŒã¯/ã©ã€ãã©ãªãšã¬ã€ã¢ãŠã
æ§é
WebããŒãžãé£Ÿãæ§ã
ãªã©ã€ãã©ãªããããã®æŽ»çšæ³ãåŠã³ã䜿ããããã®ããã®ããŒãžããŒã·ã§ã³ãšç¡éã¹ã¯ããŒã«ãå®è£
ããŸãã
#07.ã³ã³ããŒãã³ããšã©ã€ããµã€ã¯ã«
ã¯ã©ã¹ã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ãšé¢æ°åã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ã®éããçè§£ãããããå
ã«æŽ»çšããæ¹æ³ãåŠç¿ããŸãã
#08.ããã¯ãšã³ãæ§é ãšãã¡ã€ã¢ããŒã¹
APIãçŽæ¥äœã£ãŠã¿ãŠãããã¯ãšã³ãã®åºç€ãçè§£ã§ããŸããããŸããBAASãµãŒãã¹ã§ããFirebaseãæŽ»çšããŠã¿ãŸããããããã¯ãšã³ããçè§£ããããã³ããšã³ãéçºè
ãšã¯ïŒããŸãé
åçã§ã¯ãããŸãããïŒ
#09.ç»åã®ã¢ããããŒã
ãããŒã ããŒãžã«ããããªç»åãèŒãããïŒãç»åã¢ããããŒãã®ããã»ã¹ãçè§£ããæ€èšŒãéããŠçŽæ¥ã¢ããããŒãã§ããŸãã
#10.æ€çŽ¢
WebããŒãžã«æ€çŽ¢æ©èœã¯æ¬ ãããŸãããæ€çŽ¢ããã»ã¹ãçè§£ãããããŠã³ã¹ãé©çšããŠèªåã®WebããŒãžãæå€§éã«é«ããŸãã
#11.ãã°ã€ã³ãšæš©éã®åå²
JWTããŒã¯ã³æ¹åŒã®ãã°ã€ã³ããã»ã¹ãçè§£ããŸãããŸãããã°ã€ã³ã®æç¡ã§æš©éåå²ãèšå®ããRecoilãæŽ»çšããŠGlobalstateã管çã§ããŸãã
#12.ãã©ãŒã ã©ã€ãã©ãª
React-Hook-FormãšyupãæŽ»çšããŠæ¢åã®ã³ãŒãããªãã¡ã¯ã¿ãªã³ã°ããŠãããå¹ççã«ãµãŒãã¹ãæ¹åã§ããŸãã
#13.ã«ã¹ã¿ã ããã¯
æ§é åè§£å²ãåœãŠãšã¿ã€ãã¹ã¯ãªããã®ãžã§ããªãã¯ã¿ã€ããæŽ»çšããŠã«ã¹ã¿ã ããã¯ãäœæã§ããŸãã
#14.ã«ã«ãªã®å°å³ãšãŠã§ããšãã£ã¿
SSRãšCSRãç¥ã£ãŠããŸããïŒãã®éããçè§£ããã«ã«ãªããããšãŠã§ããšãã£ã¿ã®äœ¿ãæ¹ãåŠã³ãŸãã
#15.ãæ¯æããšã€ãã³ãã«ãŒã
E-commerce platformã®äžæ žïŒãæ¯æãããã»ã¹ãçè§£ããŠå®è£
ããŠã¿ãŠãã ããããŸããJavaScriptã®é§ååçã«ã€ããŠããæ£ç¢ºã«çè§£ããŠãããŸãã
#16. refresh Token
refresh Tokenã䜿ã£ãŠãå®åã§ãå©çšã§ãããã°ã€ã³ããã»ã¹ãåŠç¿ããŸãã
#17.ããã©ãŒãã³ã¹ã®æé©å
useMemoãšuseCallbackãã€ã¡ãŒãžäžæURLãæŽ»çšããŠãæ¢åã®ã³ãŒãããŸãã§å®åã®ããã«ãªãã¡ã¯ã¿ãªã³ã°ã§ããŸãã
*åå¥ã®ã¯ã©ã¹çšAPIãæäŸããŸãã
#18.ãã¹ãã³ãŒããšé
åž
jestãšcypressãæŽ»çšããŠãã¹ãã³ãŒããäœæããŸããããããã«ããããŠããããã¹ããšçµ±åãã¹ããé²ããŠç§ã®ã³ãŒãããã¹ãããæéã§ãã
ç§ã®æã§åããã³ãŒãã§
ããŒããã©ãªãªã宿ãããŠãã ããã
âð»ã¢ããããŠãããªãŒããŒã
ããã°ãã³ãã¥ããã£ãªã©ããŠã§ãã®ã©ãããã§ãæããªãæ²ç€ºæ¿ãçŽæ¥å®è£
ã§ããŸããã³ãŒãã£ã³ã°ãçè«ã ãç¥ã£ãŠãããšããããšã¯äžå¯èœã§ãïŒãããžã§ã¯ãã®ç·Žç¿ãéããŠãããŒãžããŒã·ã§ã³ãç¡éã¹ã¯ããŒã«ãªã©ãããã€ãã®æ©èœã§ç¬èªã®ã³ãŒããåããŠãããŸãããããç§ã®åæ§ã«åã£ãUIã§é£Ÿãããšãã§ããã®ã§èå³ã ãã§ãªãå®åãäžãããŸãããïŒ
âð»æ²ç€ºæ¿ã§äœãã€ã³ããŒã¹ãã©ãããã©ãŒã
ããã..ã«ãããã¯ãããŸããïŒäŒå¡ç»é²ããã°ã€ã³ã決æžãã³ãã¥ããã£ãªã©å€ãã®æ©èœãå«ãã§ããE-commerceãŠã§ããµã€ããç§ã®æã§å®è£
ã§ããŸãããŸã å¹ãéãããããã®è¬çŸ©ãåè¬ãããçŽ æµãªããŒããã©ãªãªãäœãããŠãããã§ãã
ð¯ãã®è¬çŸ©ã§åŸãããããŒããã©ãªãªã§ãã
· 01. ããªãŒããŒã- UIã»ãªã¹ãã¢ããã»ããŒãžããŒã·ã§ã³ã»æçš¿ã®ä¿®æ£ãåé€ãªã©ãWebã®æãéèŠãªæ©èœãå®è£
ãããããããšã«äžã€ã®ããŒããã©ãªãªã宿ããŸãã
· 02. äžå€ããŒã±ãã- æåã®ããŒããã©ãªãªã§è£œäœããæ²ç€ºæ¿ãäžå€ããŒã±ããã«é«åºŠåããããŒããã©ãªãªã§ãããã°ã€ã³ã»æš©éåå²ã»æ±ºæžã»ç»ååŠçãªã©ã®æ©èœãå®è£
ããŸãã
ããã«ãå·ã®äžã€ãšããŠ
ã€ãŒãã³å€§ã®ã¹ã¿ãã¯ãäžåºŠã«ã²ããïŒ
è€æ°ã®èšèªãäžåºŠã«çè§£ããã®ã¯é£ããããšã§ãããã®è¬çŸ©ã§ã¯ããããžã§ã¯ããéããŠJavascriptãTypescriptãReactãNext.jsãGraphqlãªã©æ§ã
ãªã¹ã¿ãã¯ãçŽæ¥æŽ»çšããç¬èªã®WebããŒãžã宿ããŸããäžã€ã®æ©èœãå®çŸããããã«ææ©çã«é£çµãããèšèªã®äœ¿ãæ¹ãç¿åŸããèªç¶ã«çè§£ããããšã«ãªãã§ãããã
æ¬åœã®å®åã§ã¯æ§ã
ãªèšèªãé©åã«äœ¿çšããæé«ã®å¹çãåºãããšãã§ããã¯ãã§ãããïŒ
* version : åè¬æã«äœ¿çšããããŒãžã§ã³ã§ãã ïŒå¿
èŠã«å¿ããŠåèã«ããŠãã ããïŒïŒ
- next 12.1.0
- react": 17.0.2
- react-dom": 17.0.2
- typescript": ^4.8.4
- @types/node": 17.0.2
- @types/react": 17.0.2
- @apollo/client": ^3.6.9
- @emotion/styled": ^11.10.0
- @material-ui/core": 4.12.4
- antd": ^4.22.8
- eslint": ^8.0.1
- prettier": 2.7.1
ãVersionããšãã®æè¡ã¹ã¿ãã¯ã®çè§£ããªããŠã倧äžå€«ã§ããè¬çŸ©ã§äžå¯§ã§èŠªåã«èª¬æããŸã:)
ããé«ããã£ãªã¢ãžã£ã³ãã®ããã«
ããŒããã£ã³ãã®ææ¥è³æãæäŸããŸãã
ðã»ã¯ã·ã§ã³å¥åŠç¿è³æ
è¬çŸ©ãåè¬ããªããå
容ã®çè§£ãå©ããè³æã§ããå®éã®ããŒããã£ã³ãã®åè¬çã䜿ãè³æã ãã«ããŸã掻çšããã°ãéããéšåããã£ãŠã倧ããªå©ãã«ãªãã§ãããã
ðã»ã¯ã·ã§ã³å¥ã®èª²é¡è³æ
仿¥åŠãã å
容ã¯ä»æ¥åŸ©ç¿ãããïŒè¬çŸ©ã®åè¬åŸãååãªç·Žç¿ãéããŠå®å
šã«ç§ã®ãã®ã«åžåããã®ã«åœ¹ç«ã¡ãŸãã
ð ã»ã¯ã·ã§ã³å¥ããŒããã©ãªãª
åã»ã¯ã·ã§ã³ã§åŠãã æ©èœã掻çšããŠããŒããã©ãªãªãäœæããéã«åèã«ã§ããè³æã§ãããã®ã¬ãã¹ã³ã§ç§ã®ããŒããã©ãªãªã«2ã€ã®ãããžã§ã¯ãã远å ããŠãã ããïŒ
ãã®è¬çŸ©ã®åè¬ç
èªåã§äœã£ããµãŒãã¹ãã玹ä»ããŸãã
ðš Artipul
çŸå€§çã®äœåãç°¡åã«è³Œå
¥ã§ãããµãŒãã¹ã§ããã¡ã€ã³ããŒãžã ãã§ãªã決æžãªãŒãã³APIã§ãã€ã³ãå
é»ã決æžãå¯èœã«ããSocket.ioã䜿ã£ãŠãªã¢ã«ã¿ã€ã å
¥ææ©èœãŸã§å®è£
ããŸããã
ð Flog
æ
è¡ã¹ã±ãžã¥ãŒã«ã»å®¶èšç°¿ã»æ
è¡ãã°ã§æ§æãããæ
è¡ã¬ã€ãããã¯ãµãŒãã¹ã§ãã drag&dropæ©èœã§æ
è¡ã¹ã±ãžã¥ãŒã«ãçµããšãªã¢ã«ã¿ã€ã ã§DBã«ä¿åããã䜿ãããããé«ãŸããŸãããããã«ãä»ã®ãŠãŒã¶ãŒãšã¹ã±ãžã¥ãŒã«ãå
±æã§ããããã«å®è£
ããŸããïŒ
[髿¿çž®ããã³ããšã³ãã³ãŒã¹]
åè¬åŸã¯ç§ãéçºè
ïŒ
ðð»ââïžå®åã«ããã«æŽ»çšã§ããããŒããã©ãªãª2å
ðšð»âðèªåã§æé·ã§ããé äžãªéçºç¥èãæ§ç¯
ðð»ââïžå®åã§ã¹ã ãŒãºãªã³ãã¥ãã±ãŒã·ã§ã³ãè¡ããžã¥ãã¢éçºè
ðšð»âð»ä»ã®éšçœ²ãšã®ã³ã©ãã¬ãŒã·ã§ã³èœåã«åªããããã³ããšã³ãéçºè
ðð»ââïž èªåã§ãã§ããE-commerce Platformã®éçº
ããé«ããã£ãªã¢ãžã£ã³ãã®ããã«
ã髿¿çž®ããã¯ãšã³ãã³ãŒã¹ããçšæããŸããã
ðð»é¢é£ããããè¬çŸ©ïŒ
ç·Žç¿çšAPIã䜿çšããŠããã³ããšã³ãã®ææ°ã®æè¡ã¹ã¿ãã¯ãšéçºãµã€ã¯ã«ãçè§£ããããNode.jsãšNestãäžå¿ã«ããã¯ãšã³ããŸã§ããæ·±ãåŠã³ãŸããããå¿
èŠãªAPIãèªåã§äœæããããŒã¿ãæ±ãæ¹æ³ãæ€çŽ¢ãæ¯æããé
åžãªã©ãããã¯ãšã³ãã®ãã¹ãŠããç¥ããããŸããããã¯ãšã³ãã³ãŒã¹ãŸã§å®èµ°ãããã«ã¹ã¿ãã¯éçºè
ã§ããé«ããã£ãªã¢ãžã£ã³ãããŠãã ããð
åŸ
ã£ãŠïŒ
åè¬åã«ã確èªãã ããã
ð¡ã³ã³ãã¥ãŒã¿ã®ä»æ§ã確èªããŠãã ããã
ã»Mac OSã¯ä»æ§ã«ç¡é¢ä¿ã§ãã
· Window OSã䜿çšããå Žåã¯ãgit-bashã®ã€ã³ã¹ããŒã«ãå¿
èŠã§ãã
- ææ¥è³æ > ç°å¢èšå®ãåèã«ããŠãã ããã
- Intel Core i5 9äžä»£ä»¥äž / AMD RYZEN 5 2äžä»£ä»¥äž
- RAM 16GBä»¥äžæšå¥š
ð¡æ¥èª²è¡šãäœã£ãŠå®æçã«çå®ã«åŠç¿ããããšããå§ãããŸãã
ð¡åŠç¿è³æãåãåãããã«ã³ã©ãã¬ãŒã·ã§ã³ããŒã«ãNotionãã¢ã«ãŠã³ããäœæããŠãã ããã
ð¡åè¬ã«å¿
èŠãªåŠç¿è³æã¯ããã·ã§ã³ïŒãªã³ã¯ïŒã§æäŸãããŸãã
â»åŠç¿è³æã®èäœæš©ã¯ã³ãŒããã£ã³ãã«ãããŸããäžæ£ççšã»é
åžã»è€è£œãçŠæ¢ããŸãã
ãã
質åããããŸããïŒ
Q. äœã®ç¥èããªãåè¬ããŠãããã§ããïŒ
ã¯ããã³ãŒãã£ã³ã°ã®ã錻ãè
ãç¥ããªããŠã倧äžå€«ã§ããããæ·±ãåºãçè§£ã§ããããã«ãHTMLã»CSSã»Javascriptã®ãµããç§ããã»ã¹ãå«ãŸããŠããŸãã
Q. å¥ã®ææããããŸããïŒ
ããã·ã§ã³ã§ãå±ããããè¬çŸ©è³æããæŽ»çšããŠãã ããïŒæ¬è³æã¯å®éã®ããŒããã£ã³ãã§äœ¿çšãããŸãŸã®è³æã§ããç¡æççšã»é
åžã»è€è£œãçŠæ¢ããŸãã
Q. åºç€è¬çŸ©ïŒã¹ã¿ãŒãã¯ããªãã£ã³ããCSSãJavascriptïŒã®ææ¥è³æãªã¹ããæ··ä¹±ããŸãã
Q. åè¬äžã«æ°ã«ãªãç¹ããããŸããã
ã³ãã¥ããã£ã«è³ªåãæ®ããŠãã ãããã³ãŒããã£ã³ãããŒã ã¯ããã«çŽ æ©ãã¯ãŒã«ãªçããæ§ããŸã:)
ããŒã ã³ãŒããã£ã³ã
玹ä»ããŸãã