ããã³ããšã³ããšããã¯ãšã³ãïŒåœ¹å²ãšã¹ãã«ã®éãã解説
ããã³ããšã³ããããã¯ãšã³ãã®åœ¹å²ãå¿ èŠãªã¹ãã«ã«ã€ããŠæ·±ãæãäžããŠãããŸããäž¡è ã®åœ¹å²ããã®éããçè§£ããããšã§ããã£ãªã¢éžæãæ¡çšèšç»ã®ãã³ããåŸãããšãã§ããã§ããããããã³ããšã³ããšããã¯ãšã³ã
Webéçºã¯ããã³ããšã³ããšããã¯ãšã³ãã®ååã«ãã£ãŠæãç«ã£ãŠããŸãã ããã³ããšã³ãã¯äž»ã«ãŠãŒã¶ãŒãçŽæ¥è§Šããéšåãã€ãŸããŠã§ãããŒãžãã¢ããªã±ãŒã·ã§ã³ã®ã€ã³ã¿ãŒãã§ãŒã¹ãæããŸããäžæ¹ã§ããã¯ãšã³ãã¯ã¢ããªã±ãŒã·ã§ã³ã®è£åŽã«ããããŠãŒã¶ãŒããã¯èŠããªããµãŒããŒãµã€ãã®ããã°ã©ã ãããŒã¿ããŒã¹ã®é åãæããŠããŸãã
ããã³ããšã³ããšã³ãžãã¢ã¯äž»ã«HTMLãCSSãJavaScriptãé§äœ¿ããŠãŠã§ãããŒãžãã¢ããªã±ãŒã·ã§ã³ã®ã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ãã䜿ãããããèŠãç®ã®æé©åãæ åœããŸãã
ããã¯ãšã³ããšã³ãžãã¢ã¯ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®è£åŽã§æŽ»åãããµãŒããŒãµã€ãã®ããã°ã©ãã³ã°ãããŒã¿ããŒã¹ã®èšèšã»ç®¡çãæ åœããŸããããŒã¿ã®åŠçãä¿ç®¡ãã·ã¹ãã ã®å®å®æ§ã確ä¿ãããŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³ãã¹ã ãŒãºã«å©çšã§ããããã«ããŸãã
ãã®ããã«ããã³ããšã³ããšã³ãžãã¢ãšããã¯ãšã³ããšã³ãžãã¢ã¯ãããããç°ãªã圹å²ãæãããŸããã坿¥ã«é£æºãåã£ãŠãŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœãäžããŠããã®ã§ãã
ãã®èšäºã§ã¯äž¡è ã®åœ¹å²ãäœæ¥ç¯å²ãå¿ èŠãªã¹ãã«ã«ã€ããŠæ·±ãæãäžããŠãããŸããããã³ããšã³ããšã³ãžãã¢ãšããã¯ãšã³ããšã³ãžãã¢ã®åœ¹å²ãçè§£ããããšã§ããã£ãªã¢éžæãæ¡çšèšç»ã®ãã³ããåŸãããšãã§ããã§ãããã
ããã³ããšã³ããšã³ãžãã¢ãšã¯ïŒ
ããã³ããšã³ããšã³ãžãã¢ã®åœ¹å²
ããã³ããšã³ããšã³ãžãã¢ã®åœ¹å²ã¯ããŠãŒã¶ãŒãçŽæ¥è§ŠãããŠã§ãããŒãžãã¢ããªã±ãŒã·ã§ã³ã®ã€ã³ã¿ãŒãã§ãŒã¹ãèšèšããå®è£ ããããšã§ãã
å ·äœçãªäœæ¥é åãšããŠã¯HTMLãCSSãJavaScriptã䜿çšããŠããŠã§ãããŒãžã®æ§é ïŒHTMLïŒãã¹ã¿ã€ãªã³ã°ïŒCSSïŒãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ãåäœïŒJavaScriptïŒãäœæããããšã§ãã䜿ããããé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšã圹å²ãšãªããŸãã
ããã³ããšã³ããšã³ãžãã¢ã¯ã¬ã¹ãã³ã·ããã¶ã€ã³ã®å®è£ ã«ãæ·±ãé¢äžããŸããããã¯ç°ãªãããã€ã¹ãç»é¢ãµã€ãºã«å¯Ÿå¿ããæé©ãªè¡šç€ºãä¿èšŒããéèŠãªèŠçŽ ã§ããããã«ãã£ãŠããŠãŒã¶ãŒãã¹ããŒããã©ã³ãã¿ãã¬ããããã¹ã¯ããããªã©æ§ã ãªããã€ã¹ããå©çšããŠãã䜿ãããããšã¯ã¹ããªãšã³ã¹ãæäŸããããšãã§ããŸãã
ãŸãããã©ãŠã¶ã®äºææ§ãèæ ®ããç°ãªããã©ãŠã¶ã§ã®åäœã確èªããªããéçºãè¡ãå¿ èŠããããŸãããã©ãŠã¶ã«çµã¿èŸŒãŸããŠããéçºè ããŒã«ã掻çšããããã¯ãã¹ãã©ãŠã¶ãã¹ãã宿œãããªã©ããŠãã®å質ãé«ããŠãããŸãã
ç·æ¬ãããšãããã³ããšã³ããšã³ãžãã¢ã¯ãŠãŒã¶ãŒãçŽæ¥è§Šããéšåãæ åœãããŠã§ãããŒãžãã¢ããªã±ãŒã·ã§ã³ã®äœ¿ãããããèŠèŠçãªé åãåäžããã圹å²ãæãããŸãããã®ããã«ã¯HTMLãCSSãJavaScriptãçç¥ããææ°ã®ããã³ããšã³ãæè¡ããã¬ãŒã ã¯ãŒã¯ã®ç¥èãå¿ èŠã§ãã
ããã³ããšã³ããšã³ãžãã¢ã«æ±ããããã¹ãã«
ããã³ããšã³ããšã³ãžãã¢ã«ã¯å¹ åºãã¹ãã«ã»ãããæ±ããããŸãã以äžã«ããããã®äž»èŠãªã¹ãã«ã説æããŸãã ç¹ã«è¿å¹Žã¯ReactãVue.jsãªã©ã®ç»å Žã«ãããJavaScriptã®éèŠæ§ãé«ãŸã£ãŠããŸããããã³ããšã³ãã®äžã§ã忥åãé²ãã§ããäŒæ¥ãããããã§ãã
HTMLïŒHyperText Markup LanguageïŒ: HTMLã¯ãŠã§ãããŒãžã®æ§é ãå®çŸ©ããèšèªã§ããããã³ããšã³ããšã³ãžãã¢ã¯ã³ã³ãã³ãã®ã¬ã€ã¢ãŠããèŠçŽ ã®é çœ®ãæ£ããè¡ãããã«ãHTMLã®åºç€çãªç¥èãå¿ èŠã§ãã
CSSïŒCascading Style SheetsïŒ: CSSã¯ãŠã§ãããŒãžã®ã¹ã¿ã€ã«ããã¶ã€ã³ãå¶åŸ¡ããã¹ã¿ã€ã«ã·ãŒãèšèªã§ããè²ããã©ã³ããã¬ã€ã¢ãŠããªã©ãèšå®ãããŠãŒã¶ãŒã«èŠèŠçãªé åãæäŸããŸããæè¿ã¯Bootstrapã®ãããªCSSãã¬ãŒã ã¯ãŒã¯ã®æŽ»çšãé²ãã§ããããã®ç¥èãå¿ èŠãšãããŸãã
JavaScript: JavaScriptã¯ãŠã§ãããŒãžã«åçãªèŠçŽ ã忹忧ã®ããåäœïŒã€ã³ã¿ã©ã¯ãã£ããã£ïŒã远å ããããã®ããã°ã©ãã³ã°èšèªã§ãããŠãŒã¶ãŒãšã®å¯Ÿè©±ããªã¢ã«ã¿ã€ã ãªæ å ±ã®æŽæ°ãå¯èœã«ãã䜿ãããããšã¯ã¹ããªãšã³ã¹ãæäŸããŸãã
ãã¬ãŒã ã¯ãŒã¯ãšã©ã€ãã©ãªã®ç¥è: ããã³ããšã³ããšã³ãžãã¢ã¯ReactãAngularãVue.jsãªã©ã®ãã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã䜿ãããªãå¿ èŠããããŸãããããã®ããŒã«ã¯ãå¹ççãªã³ãŒãã®èšè¿°ãã³ã³ããŒãã³ãã®åå©çšãå¯èœã«ããŸããè¿å¹Žç¹ã«éèŠèŠãããŠããã¹ãã«ã§ãã
ãã¹ããšãããã°: ããã³ããšã³ããšã³ãžãã¢ã¯ãäž»ã«JavaScriptéšåã®ãŠããããã¹ããçµ±åãã¹ããè¡ãããã°ãèŠã€ããŠä¿®æ£ããèœåãæ±ããããŸããããã«E2Eãã¹ããšåŒã°ãããã©ãŠã¶ã§ã®åäœãèŠãç®ã確èªããå¿ èŠããããŸãã
ã¬ã¹ãã³ã·ããã¶ã€ã³: ããã³ããšã³ããšã³ãžãã¢ã¯ãç°ãªãããã€ã¹ãç»é¢ãµã€ãºã«é©å¿ããã¬ã¹ãã³ã·ããªãã¶ã€ã³ãäœæããèœåãæ±ããããŸããããã«ãã£ãŠããŠãŒã¶ãŒãã©ã®ããã€ã¹ããå©çšããŠã䜿ããããç¶æ ã«ããããšãã§ããŸããå è¿°ããBootstrapã®ãããªCSSãã¬ãŒã ã¯ãŒã¯ã¯ã¬ã¹ãã³ã·ã察å¿ãå©ããŠãããŸãã
ãã©ãŠã¶éçºããŒã«ã®æŽ»çš: ããã³ããšã³ããšã³ãžãã¢ã¯ãChrome DevToolsãFirefox Developer Toolsãªã©ã®ãã©ãŠã¶éçºããŒã«ã䜿ã£ãŠããããã°ããµã€ãããã©ãŒãã³ã¹ã®æé©åãè¡ããŸãã
ããŒãžã§ã³ç®¡çã·ã¹ãã : ãããžã§ã¯ãã®ç®¡çãããŒã ã§ååããŠéçºãè¡ãããã«ãGitã®ãããªããŒãžã§ã³ç®¡çã·ã¹ãã ã®äœ¿çšçµéšãæ±ããããŸãã
ãããžã§ã¯ã管çã®èœå: ã¿ã¹ã¯ã®åªå é äœä»ããã¿ã€ã ãããžã¡ã³ããããŒã ã³ãã¥ãã±ãŒã·ã§ã³ãªã©ããããžã§ã¯ããå¹ççã«é²ããããã®ã¹ãã«ãéèŠã§ããç¹ã«ããªãŒã©ã³ã¹ãšããŠæŽ»åããå Žåã«ã¯éèŠãªã¹ãã«ãšãªããŸãã
ã³ãã¥ãã±ãŒã·ã§ã³ã¹ãã«: äžã€ã®WebãµãŒãã¹ãäœãäžããããã«ã¯ãããŒã å ã§ã®ã³ãã¥ãã±ãŒã·ã§ã³ãä»ã®éçºè ãšã®ååãå¿ èŠãªå Žåãã»ãšãã©ã§ãããŸããéæè¡è ã«ãæè¡çãªã³ã³ã»ããã説æã§ããã³ãã¥ãã±ãŒã·ã§ã³èœåãéèŠãããŸãã ããªãŒã©ã³ã¹ã®æ¹ããä»äºãç²åŸããããã«ãéèŠãªã¹ãã«ã§ãã
ããã©ãŒãã³ã¹ã®æé©å: ããã³ããšã³ããšã³ãžãã¢ã¯ããŠã§ãããŒãžãã¢ããªã®èªã¿èŸŒã¿é床ãæé©åããããUI/UXã«é¢ããç¥èãé§äœ¿ããŠãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããå¿ èŠããããŸããSEOãªã©Webãµã€ãã®é客ãæé©åããããã®ç¥èãé«ãè©äŸ¡ãããŸãã
ããã¯ãšã³ããšã³ãžãã¢ãšã¯ïŒ
ããã¯ãšã³ããšã³ãžãã¢ã®åœ¹å²
ããã¯ãšã³ããšã³ãžãã¢ã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ããœãããŠã§ã¢ã®è£åŽã§åäœããéšåãæ åœããŸããäž»ãªåœ¹å²ã¯ä»¥äžã®éãã§ãã
ãŸããããã°ã©ãã³ã°èšèªã䜿çšããŠãµãŒããŒãµã€ãã®åŠçãéçºããŸããããã«ãã£ãŠããŠãŒã¶ãŒãè¡ã£ãæäœã«å¿ããŠããŒã¿ãåŠçããé©åãªæ å ±ãè¿ãããšãã§ããŸãã
ããŒã¿ããŒã¹ã®èšèšãšç®¡çãããã¯ãšã³ããšã³ãžãã¢ã®éèŠãªåœ¹å²ã§ããããŒã¿ã®ä¿ç®¡ãååŸãæ£ç¢ºãã€å¹ççã«è¡ããã·ã¹ãã å šäœã®æ£åžžãªéçšãæ åœããŸãã
APIïŒApplication Programming InterfaceïŒã®èšèšãšå®è£ ãããã¯ãšã³ããšã³ãžãã¢ã«æ±ããããã¹ãã«ã§ããããã«ãã£ãŠãããã³ããšã³ããšããã¯ãšã³ãã®ç¹ã蟌ã¿ãå®çŸããããä»ã®ã·ã¹ãã ããµãŒãã¹ãšã®ããŒã¿ã®ããåããå¯èœã«ãªããŸãã
ã»ãã¥ãªãã£å¯Ÿçãããã¯ãšã³ããšã³ãžãã¢ã®éèŠãªè²¬åã§ããããŒã¿ã®ä¿è·ããã©ã€ãã·ãŒã®ç¢ºä¿ã«ã€ããŠãé©åãªå¯Ÿçãè¬ããŸãã
çµç¹ã«ã€ã³ãã©å°éã®ãšã³ãžãã¢ãäžåšã®å Žåã«ã¯ããµãŒããŒã®èšå®ãšéçšã圹å²ã®äžç°ãšãªããŸãããªã³ãã¬ãã¹ã§Linuxãªã©ã®ãµãŒããŒãéçšããããAWSãMS Azureãªã©ã®ã¯ã©ãŠããã©ãããã©ãŒã ã䜿çšããŠãã·ã¹ãã ã®å®å®æ§ãä¿ã¡ãªããé©åã«éçšããŸãããããã¯ãŒã¯ã®èšå®ãæ ãå Žåãããã§ãããã
ããã¯ãšã³ããšã³ãžãã¢ã®åœ¹å²ã«ã¯å€ãã®åé¡è§£æ±ºãå«ãŸããŸããã·ã¹ãã ã®é害ããšã©ãŒãçºçããå Žåã«ãã®åå ãç¹å®ããä¿®æ£ã宿œããã®ã§ãã
ããã¯ãšã³ããšã³ãžãã¢ã¯ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®è£åŽã§ã®åäœãæ åœããããŒã¿åŠçãã»ãã¥ãªãã£ããµãŒããŒã®ç®¡çãªã©å€å²ã«ãããæè¡ã¹ãã«ãé§äœ¿ããŠã䜿ããããå®å šãªã¢ããªã±ãŒã·ã§ã³ãéçºãããŠãŒã¶ãŒãžã®åªããäœéšã®æäŸãæ¯ããŠããŸãã
ããã¯ãšã³ããšã³ãžãã¢ã«æ±ããããã¹ãã«
ããã¯ãšã³ããšã³ãžãã¢ã«æ±ããããã¹ãã«ãå¹ ãåºãã§ãã以äžã«ãããã¯ãšã³ããšã³ãžãã¢ã«æ±ããããäž»èŠãªã¹ãã«ã解説ããŸãã
ããã°ã©ãã³ã°èšèªã®ç¿åŸ: ããã¯ãšã³ããšã³ãžãã¢ã«ã¯PythonãJavaãRubyãPHPãNode.jsãªã©äœãããã®ããã°ã©ãã³ã°èšèªãç¿åŸããŠããããšãæ±ããããŸãããããã®èšèªã䜿ã£ãŠãµãŒããŒãµã€ãã®åŠçãå®è£ ããŸããããããã®èšèªãç¿åŸããŠãããšãä»ã®èšèªã§ãã£ãŠã察å¿ã¯ãããããªããŸãã
ãã¬ãŒã ã¯ãŒã¯ã®äœ¿çšçµéš: ã¢ããªã±ãŒã·ã§ã³ã®éçºãå¹çåããããã«ãDjangoãLaravelãRuby on Railsãªã©äœããã®ãã¬ãŒã ã¯ãŒã¯ã®å©çšçµéšãæ±ããããŸããããã«ãã£ãŠãå ±éã®ã¿ã¹ã¯ãæ§é ãç°¡ç¥åããéçºå·¥æ°ãåæžããããšãã§ããŸãã
ããŒã¿ããŒã¹ã®ç¥è: ããŒã¿ã®ä¿ç®¡ãååŸãæ åœãããããããŒã¿ããŒã¹ã«é¢ããç¥èãå¿ èŠã§ããããŒãã«ãæ§ç¯ãããããŒã¿ãååŸããããã®SQLã¯ã»ãŒå¿ é ã®ã¹ãã«ã§ããããããžã§ã¯ãã«ãã£ãŠã¯NoSQLããŒã¿ããŒã¹ã«é¢ããç¥èãå¿ èŠãšãªããŸããããŒã¿ããŒã¹ã®èšèšãã¯ãšãªã®æé©åãéèŠãªã¹ãã«ã§ãã
APIã®èšèšã»éçºèœå: ããã¯ãšã³ããšã³ãžãã¢ã¯ãããã³ããšã³ããå€éšãµãŒãã¹ãšã®ããŒã¿ã®ããåããå¯èœã«ããAPIã®èšèšãšå®è£ ãè¡ããŸãã
ã»ãã¥ãªãã£å¯Ÿçã®çè§£: ããŒã¿ã®ä¿è·ãšã»ãã¥ãªãã£ã確ä¿ããããã®æ¹æ³ãçè§£ããé©åãªå¯Ÿçãè¬ããå¿ èŠããããŸããå人æ å ±ãæ©å¯æ å ±ä¿è·ã®èгç¹ãããå®å šæ§ãèæ ®ããã·ã¹ãã ã®èšèšãå®è£ ãã§ããããšã¯éèŠèŠãããŠããŸãã
ãã¹ããå質管ç: ãŠããããã¹ããçµ±åãã¹ããè¡ããã·ã¹ãã ã®æ£ç¢ºæ§ãå®å®æ§ã確ä¿ããå¿ èŠããããŸãã
ãµãŒããŒã®èšå®ã»éçš: ã€ã³ãã©ãšã³ãžãã¢ãšã®åæ¥ãé²ãã§ããçµç¹ããããŸãããå€ãã®ããã¯ãšã³ããšã³ãžãã¢ã¯ãµãŒããŒã®èšå®ãéçšãè¡ããŸããLinuxãAWSãMS Azureãšãã£ãã¯ã©ãŠããã©ãããã©ãŒã ã®ç¥èã¯éçºãè¡ãäžã§ãå¿ èŠãšãªããŸãã
ããŒãžã§ã³ç®¡çã·ã¹ãã : ãããžã§ã¯ãã®ç®¡çãããŒã ã§ååããŠéçºãè¡ãããã«ãGitã®ãããªããŒãžã§ã³ç®¡çã·ã¹ãã ã®äœ¿çšçµéšãæ±ããããŸãã
åé¡è§£æ±ºèœå: ããã¯ãšã³ããšã³ãžãã¢ã¯ã·ã¹ãã ã®é害ããšã©ãŒã解決ããèœåãæ±ããããŸããåé¡ãçºèŠãããããã°ãããŠè§£æ±ºãããã¹ãã«ãéèŠã§ãã
æ§èœæé©å: ãµãŒããŒãµã€ãã®ããã©ãŒãã³ã¹ãæé©åã§ããå¿ èŠããããŸããããã¯ã€ã³ãã©é¢ã®æ¹åã®å ŽåããããŸãããããã°ã©ã ã®æ¹åãããããŸããã倧éã®ã¢ã¯ã»ã¹ããµãŒãã¹æ¡å€§ã«åããã¹ã±ãŒã©ããªãã£ã®ææ³ãç¥èãšããŠæã£ãŠããå¿ èŠããããŸãã
ã³ãã¥ãã±ãŒã·ã§ã³ã¹ãã«: ãµãŒããŒãµã€ãã®éçºã«ã¯ããŒã å ã§ã®ã³ãã¥ãã±ãŒã·ã§ã³ãä»ã®éçºè ãšã®ååãå¿ èŠãšãªããŸããããã³ããšã³ããšã³ãžãã¢ãšã®ã³ãã¥ãã±ãŒã·ã§ã³ãçºçããã§ããããããžãã¹ãµã€ããªã©éæè¡è ã«ãæè¡çãªã³ã³ã»ããã説æã§ããå¿ èŠããããŸãã
ç·æ¬ãããšãããã¯ãšã³ããšã³ãžãã¢ã¯ããŒã¿åŠçããµãŒããŒã®ç®¡çãã»ãã¥ãªãã£ãªã©å¹ åºãæè¡ã¹ãã«ãæã¡ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®è£åŽã§ã®åäœãæ åœããŸããããã«ãã£ãŠã䜿ããããå®å šãªã¢ããªã±ãŒã·ã§ã³ãéçºãããŠãŒã¶ãŒã«åªããäœéšãæäŸããŸãã
ãŸãšã
ããã³ããšã³ããšã³ãžãã¢ãšããã¯ãšã³ããšã³ãžãã¢ã¯ãWebéçºã«ãããŠããããç¬èªã®åœ¹å²ãæ ããŸããããã³ããšã³ããšã³ãžãã¢ã¯ããŠãŒã¶ãŒãçŽæ¥è§Šããéšåãæ åœããããã¯ãšã³ããšã³ãžãã¢ã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®è£åŽã§åäœããéšåãæ åœããŸãã
ããã³ããšã³ããšã³ãžãã¢ã®äœæããã€ã³ã¿ãŒãã§ãŒã¹ããã®æäœããããã¯ãšã³ããšã³ãžãã¢ã®äœæããããã°ã©ã ãåŠçããå¿ èŠãªããŒã¿ãæäŸããŸãããã®é£æºã«ãã£ãŠããŠãŒã¶ãŒã¯ã¹ã ãŒãºã§é åçãªãšã¯ã¹ããªãšã³ã¹ã享åããããšãã§ããã®ã§ãã äž¡è ã®é£æºããã£ãŠããã䜿ããããé åçãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãçãŸãããšèšããã§ãããã
äžæ¹ã§ãæšä»SPAïŒSingle Page ApplicationïŒãå°é ããŠãããªã©ãããã³ããšã³ããšããã¯ãšã³ãã®å¢ãçããªã£ãŠããŠãããã©ã¡ãã®ãšã³ãžãã¢ããããããã®å°éåéã§ã®ã¹ãã«ãç¥èãæã¡ã€ã€ããè¿ãé åã®ã¹ãã«ãç¥èãæã€å¿ èŠãåºãŠããŠããŸãã®ã§ãèªé åã®å°éç¥èã ãã§ã¯ãªããå°éé åãåºããŠããããšã«ãåãçµãã§ã¿ãŠãã ããã












