ããªã³ã©ã€ã³ãVue.jså ¥éè¬åº§ïœã¯ãããŠã®SPAéçº
ã€ãã³ãå 容
âãVue.jså
¥éè¬åº§ãã¯ãã誰ã§ãæ«æããã
楜ããVue.jsã䜿ã£ãSPAéçºãåŠã¹ãè¬åº§ã
ã§ãïŒ
ãšèããšãæªããæããŸããã
ãªããªãã
âãã®ïŒïŒãçè§£ããŠãã§ãããŸã§ãããããã§ãã
ã»ãããŒ(ææ¥)ã¯1æ¥ã®ã¿ã§ãããã»ãããŒçµäºåŸã
ç¡æéã§ãè¬çŸ©å
容ã«ã€ããŠãäœåºŠã§ã質åå¯èœã§ããã
ãåžæè
ã«ã¯ãäžäºº90åÃ2åã®åå¥ã¬ãã¹ã³ãã
ãç¡æãã§ä»ããŠããŸãã
äœåºŠãäœåºŠãç¹°ãè¿ããããªããçè§£ããŠ
ãã§ãããŸã§ããããŸãã
âãã®ïŒïŒãç°å¢æ§ç¯ïœåæ©ã®åæ©ããVue.jsãåŠã¶ãããã§ãã
ããã³ããšã³ãã«ãããŠããç°å¢æ§ç¯ãè€éã«ãªã£ãŠããŸããã
ããã¬ãŒã ã¯ãŒã¯ã®ããã®ãã¬ãŒã ã¯ãŒã¯ãã£ãŠäœïŒããšæããŸãããïŒ
ååŠè
ããçµéšã®æµ
ãæ¹ãããã£ãšãæåã«ã€ãŸãããã€ã³ãã¯ã
ããã°ã©ãã³ã°ã§ã¯ãªãããã®å段éã®ç°å¢æ§ç¯ãå€ãã§ãã
ãããå«ã§ãååŒ·ãæ¢ããŠããŸãããšã¯ãéåžžã«å€ããšæããŸãã
(ç§ããã®äžäººã§ããããã)
âãã®ïŒïŒããšã©ãŒè§£æ±º(èªå·±è§£æ±º)ã®éçãã€ããããšãã§ãã
ããã«ãªããããã§ãã
Vue.jsã«éããããšã©ãŒãèªåã§è§£æ±ºã§ããªããšã
ãã€ãŸã§ãã£ãŠããæ¥œããããé¢çœãããªã©ã
(æçµçãª)éææãåŸãããšããé£ããã®ã§ã¯
ãªãã§ããããïŒ
ãã¡ããã5幎ã»10幎çµéšãç©ãã§ããæ°æé
åžã£ãŠããŸããšã©ãŒã¯ååšããŸãããããã§ãã
éçãåããã°ããã®è©Šè¡é¯èª€èªäœã楜ãã
ç¬éã ã£ããããŸãã
(ããºã«ãæ°åŠã®åé¡ãè§£ãã€ã¡ãŒãžãååŠè
ã
çµéšã®æµ
ãæ¹ã«ã¯ãçè§£ã§ããªããããããŸãããã
ãšã©ãŒããªããšããæ¬åœã«åã£ãŠããã®ããªïŒããš
éã«ãäžå®ã«ãªããããªãã§ãã)
ã»ãèªåãåãããªããšãããåæã»æŽçããåã
ã»ãèµ·ãã£ãŠããçŸè±¡ã®åå ãæ¢ããèŠåæ§ãèŠã€ããåã
ã»ãé¢é£ããçŸè±¡ã«ã€ããŠé¡äŒŒã®ãã®ã調ã¹ãåã
ã»ãèŠåãäºæ³ããŠãèªåã§ããããå®éšããŠã¿ãåã
ãããªãå®ç§ã«ã¯ãã§ããããã«ãªããŸãããã
ã³ã(åæ)ããã²ãæŽãã§æ¬²ãããšèããŠããŸãã
âåå è
çããã®éå»ã®ããã¯ã°ã©ãŠã³ã(å匷æŽã»çµéšæŽ)ã¯
ãã©ãã©ã§ãããããªãã«ãšã£ãŠãæ«æãããæ¥œããVue.jsã
åŠã¹ãè¬åº§ãã«ããŠé ãããšã倧倿é£ãã§ãã
ãç³ã蟌ã¿ã¯ãä»ã¹ã°ã
åè¬æ¥çšã確èªãã
å³äžã«ããããã®ã€ãã³ãã«ç³ã蟌ããã
ã¯ãªãã¯ããŠäžããã
âïŒãã®ã»ãããŒã§åŸãããããšïŒ
ã»Vue.js ã®åºç€ãçè§£ã§ãã
âãçè§£ããšã¯ãä»äººã«èª¬æãã§ããããã«ãªãããšïŒ
ã»Vue.jsã䜿çšããSPAã¢ããªãäœãããšãã§ãã
âVue.jsã䜿ã£ããToDoã¢ããª(SPA)ãéçºäºå®ïŒ
ã»å°±è·ã»è»¢è·ã«åããææç©ãäœãã
â颿¥çšææç©ã«ãJSã¢ãã³æè¡ãåãå
¥ããããšãã§ããïŒ
âïŒè¬åº§æŠèŠïŒ
æ¬è¬åº§ã¯ãHTML/CSSãJavaScriptãå匷ããæ¹åãã«ã
JavaScriptã®ã©ã€ãã©ãªã§ãããVue.jsã®åºç€ãç¿åŸããŠ
ããã ãè¬åº§ã§ãã
âïŒVue.jsãšã¯ïŒïŒ
Vue.jsãšã¯ãJavaScriptã®ãã¬ãŒã ã¯ãŒã¯ã®ïŒã€ã§ã
SPAãšã®çžæ§ããšãŠãè¯ãã
âïŒSPA(ã·ã³ã°ã«ã»ããŒãžã»ã¢ããªã±ãŒã·ã§ã³)ãšã¯ïŒïŒ
ããŒã¿ã®åãæž¡ãæã«ãæ¯åããŒãžãé·ç§»ããªããã°ãªã
ãŸããããSPAã§ã¯ããŒãžèªäœãé·ç§»ããã«ãïŒéšåã®
ã³ã³ããŒãã³ãã®åãæ¿ãã ãã§ãããŒã¿ãåãæž¡ãããšã
ã§ããã®ã§ãããåŠçãæ©ãWebã¢ããªãäœãããšãã§ããã
âïŒVue.jsã®ç¹åŸŽïŒ
ã»ãç°¡åã«äœ¿ããïŒã
Vue.jsã¯ãæ¢åã®HTML/CSSã«ãscriptã¿ã°ãäžè¡
远å ããã ãã§äœ¿ããç°¡åã«å°å
¥ã§ããŸãã
ã»ãã³ã³ããŒãã³ãã®äœ¿çšã
HTMLã®èšè¿°ãšãVue.js ã®èšè¿°ããŸãšããŠéšååãããã®ã
éšååãããã®ã¯ãäœåºŠãåå©çšã§ãããVue.js ã§ã¯ã
ãã®éšåãçµåããŠãWebããŒãžãæ§ç¯ããŠãããŸãã
ã»ãSPAã«åŒ·ãã
SPAã«æé©ãªãã¬ãŒã ã¯ãŒã¯ã§ãå¹çããSPAéçºã
ã§ããããã«ãªããŸãã
âïŒå匷ããå
容ïŒ
HTML/CSSïŒVue.jsãå©çšããŠãSPAã®Webã¢ããªã
å®éã«äœããªãããåŠãã§è¡ããŸããVue.jsã®ä»ã«ãã
SPAãäœããšãã«å¹ççã«éçºã§ããVue.jsã®ããŒã«ã
ãã©ã°ã€ã³ã®äœ¿ãæ¹ã解説ããŠãããŸãïŒ
âïŒãã®è¬åº§ã§ç¿åŸã§ããæè¡ïŒ
ã»Vue.jsåºç€
ã»SPAã¢ããªã±ãŒã·ã§ã³ã®äœãæ¹
ã»Vue CLI
ã»Vue Rooter
ã»VueX
âïŒè¬çŸ©å
容ïŒããâ»è©³çްã¯è¥å¹²ä¿®æ£ãšãªãå¯èœæ§ããããŸãã
ã»Vue.jsãšã¯ïŒ
ã»Vue CLIã®ç°å¢æ§ç¯æ¹æ³
ã»Vue.jsåºç€ææ³
ã»ã¢ããªã±ãŒã·ã§ã³å®ç¿(SPAã¢ããªäœæ)
âïŒåè¬åŸã®ã€ã¡ãŒãžïŒ
ã»Vue.js ã®åºç€ãçè§£ã§ãã
âãçè§£ããšã¯ãä»äººã«èª¬æãã§ããããã«ãªãããšïŒ
ã»Vue.jsã䜿çšããSPAã¢ããªãäœãããšãã§ãã
âVue.jsã䜿ã£ããToDoã¢ããª(SPA)ãéçºäºå®ïŒ
ã»å°±è·ã»è»¢è·ã«åããææç©ãäœãã
â颿¥çšææç©ã«ãJSã¢ãã³æè¡ãåãå
¥ããããšãã§ããïŒ
âïŒåå è
ã®å£°ïŒ
ã»éåžžã«å匷ã«ãªããŸããïŒ1æ¥ã§åŠã¶å
容ãšããŠã¯ã
ããªãããªã¥ãŒã ãããã®ã§ãæ¶åããããŠããªãéšåã¯ã
埩ç¿ãã€ã€ãè£è¬(åå¥ã¬ãã¹ã³)ãæŽ»çšãããŠé ãããš
èããŠããŸããæ¬æ¥ã¯ããããšãããããŸããïŒ(30代女æ§)
ã»ããã£ãã§ããèšèªåãããšé£ããã£ãã®ã§ããã
ãããã§ããšãŠãå匷ã«ãªããŸããã(30代女æ§)
ã»äžžäžæ¥ã®è¬çŸ©ããç²ãæ§ã§ãããå
容çã«ã¯ã
çµæ§æ¿ããã®ã§ããã®ã§ã倧å€çºã«ãªããŸããã
ãœãŒã¹ã³ãŒãã»ãªãŒãã£ã³ã°ã§ãå
容ãçè§£ãã
æ¹æ³ã¯ãšãŠãè¯ãã£ããšæããŸããå
šäœçã«ã¯
æºè¶³ããŸãããä»ã®è¬åº§ã§ãããŸãæ©äŒããã
ãŸããããå¿åãããŠããã ããŸããä»åã®å
容ã«
ã€ããŠããããäžåºŠèªã¿è¿ããŠããé£çµ¡ããããŠ
ããã ããŸããããããšãããããŸããã(20ä»£ç·æ§)
âïŒDTã®ãçŽæïŒ
æã
ã¯ãçåŸçããã®ãææãã«ã³ãããããŸãã
ããªãã諊ããªãéããæã
ã¯æ±ºããŠè«ŠããŸããïŒ
ã»çè§£ããŠãã§ãããŸã§ãããŸãã
ã»ç°å¢æ§ç¯å«ããåæ©ã®åæ©ããVue.js ãåŠã³ãŸãã
ã»ãšã©ãŒè§£æ±º(èªå·±è§£æ±º)ã®éçãã€ããããã«ãªã£ãŠããã ããŸãã
â»ã»ãããŒ(ææ¥)ã¯1æ¥ã®ã¿ã§ãããã»ãããŒçµäºåŸã
ãç¡æéã§ãè¬çŸ©å
容ã«ã€ããŠãäœåºŠã§ã質åå¯èœã§ããã
ããåžæè
ã«ã¯ãäžäºº90åÃ2åã®åå¥ã¬ãã¹ã³ãã
ããç¡æãã§ä»ããŠããŸãã
äœåºŠãäœåºŠãç¹°ãè¿ããããªããçè§£ããŠ
ãã§ãããŸã§ããããŸãã
âïŒå
šé¡è¿éä¿èšŒïŒ
äžãäžã®ããšãèããæ¬è¬åº§ã¯è¿éä¿èšŒãä»ããŠããŸãã
ã»ãããŒã«ãæºè¶³é ããªãã£ãå Žåããããªãçç±ã§ã
åè¬åŸ30æ¥éãå
šé¡è¿éä¿èšŒ(PayPalææ°æïŒæ¯èŸŒææ°æ
é€ã)èŽããŸãïŒ
ãç³ã蟌ã¿ã¯ãä»ã¹ã°ã
åè¬æ¥çšã確èªãã
å³äžã«ããããã®ã€ãã³ãã«ç³ã蟌ããã
ã¯ãªãã¯ããŠäžããã
âïŒåœæ¥ã®æµãïŒ
9:50ïŒGoogle Meetã«éå
â
10:00ïŒè¬çŸ©éå§
â
12:00ïŒãæŒäŒæ©
â
13:00ïŒè¬çŸ©åé
â (é©å®ãäŒæ©ãã)
17:00ïŒçµäº
â»ã»ãããŒ(ææ¥)ã¯1æ¥ã®ã¿ã§ãããã»ãããŒçµäºåŸã
ãç¡æéã§ãè¬çŸ©å
容ã«ã€ããŠãäœåºŠã§ã質åå¯èœã§ãã
â»å人æ
å ±ã¯äžåé瀺èŽããŸããããã質åãžã®åçãã
ãåŒç€Ÿããã°ãSNSãä»ã®åè¬çãžã®ç¶æ³å
±æã«äœ¿ãããŠ
ãé ãå ŽåããããŸãã
â»ãåžæè
ã«ã¯ãäžäºº90åÃ2åã®åå¥ã¬ãã¹ã³ãã
ããç¡æãã§ä»ããŠããŸãã
â»äœåºŠãäœåºŠãç¹°ãè¿ããããªããçè§£ããŠ
ããã§ãããŸã§ããããŸãã
âïŒãããªæ¹ã察象ãšããŠããŸãïŒ
ã»ãHTML/CSSãJavaScriptãå匷ãããã©ã次äœããã°ããã®ïŒã
ã»ãjQueryã¯äœ¿ãããã©ãããããJavaScriptãããåãããªãã
ã»ãJavaScriptã¯åãã£ãŠãããã©ãVue.js ãçè§£ã§ããªãã
ã»ãVue.jsã®åºç€ã¯åãããã©ãSPAã®äœãæ¹ãåãããªãã
ã»ãç°å¢æ§ç¯(Node.js/npm)ãã§ãããåã«é²ããªãã»ã»ã»ã
ã»ãæžç±ãèªãã§ã(é ã«)å
¥ã£ãŠããªãã»ã»ã»ãã
ã»ãç¹ã§ã¯åããããç·ã§ã¯çè§£ãç¹ãããªãã
ã»ãSPAã£ãŠäœïŒã©ã€ãã©ãªã£ãŠäœïŒãã¬ãŒã ã¯ãŒã¯ã£ãŠäœïŒã
ã»ããµãŒããµã€ãå°éã ããããã³ãæè¡ãç¿åŸããŠããããã
âæã
ã¯ãçåŸçããã®ãææã«ã³ããããããããš
èããŠããŸãã®ã§ããèŠæããããŸããããã§ããéãã
ææ¥å
ã«åã蟌ãã§åããŸãã
âæ¬ã»ãããŒã§ã¯ãç°å¢æ§ç¯ããåæ©ã®åæ©ããè¡ããŸããã
YoutubeãProgate(ããã²ãŒã)ããããã€ã³ã¹ããŒã«ãªã©ã§ã
äºç¿ããŠããã ããšãè¬çŸ©ã(äžéš)埩ç¿ãšãªããããªãã®
ãç¥èã®å®çããæ©ãã广ããããŸãã
â»ãçè§£ãããå¿
èŠã¯ãªãããåç»ã芳ã(æ
£ãã)ãã ãã§ã€ã€ã§ãã
â»ææåç»ãèŠãå¿
èŠã¯ãããŸããã
ãç³ã蟌ã¿ã¯ãä»ã¹ã°ã
åè¬æ¥çšã確èªãã
å³äžã«ããããã®ã€ãã³ãã«ç³ã蟌ããã
ã¯ãªãã¯ããŠäžããã
âïŒæ
åœè¬åž«ïŒ
ããã³ããšã³ãã«åŒ·ããPHPãšã³ãžãã¢
æŸäžæç¢
倧åŠã§ã¯éèå·¥åŠãå°æ»ããããã°ã©ããŒã®éã«é²ã¿ãŸããã
çŸåšã¯ãLaravelïŒVue.jsããã³ãReactïŒemotionïŒTypeScriptã«ãã
SPAéçºãããŠããŸãã
è¬çŸ©ã«åœãã£ãŠã®å¿æ§ãã¯ã
âã誰ã§ã楜ããã
âãããããããã
âãèªå(è¬åž«èªèº«)ãäžçªå匷ããã
ãã®ïŒã€ã«éç¹ã眮ããŠããŸãã
âã誰ã§ã楜ããã
ã³ãã¥ãã±ãŒã·ã§ã³ã¯ãæããäžã§ãæã倧åã§ãã
åžžã«çåŸçãããšã仲è¯ããªããããšãæèããŠããŸãã
âãããããããã
ç§èªèº«ãåç»ãæžç±ã§ç¬åŠããŠãããšããå
šãçè§£
ã§ããªãã£ãã®ããããèŠããŠããŸã(ç¬)ã誰ããã
ã§ããªãã£ãããããã誰ããããäœãããããªããã
çè§£ããŠãããã®ã§ãããªãããã©ãã§ã€ãŸãããŠãã
ã®ããçŽ æ©ãå¯ç¥ããŠã説æããããšãã§ããŸãã
âãèªå(è¬åž«èªèº«)ãäžçªå匷ããã
åœããåã®ããšã§ããããäººã«æãããããã«ã¯
èªåèªèº«ãã誰ãããäžçªå匷ããããšãæèããŠããŸãã
âïŒäž»å¬å£äœïŒ
æ ªåŒäŒç€ŸããªãŒã ã»ã·ã¢ã¿ãŒãæ± è¢ã»ãããŒã«ãŒã
ã170-0014æ±äº¬éœè±å³¶åºæ± è¢1-16-17 ã«ã¯ã ã©ãã«3F-A
(â
å¹³åéãååºè¡ãæ± è¢åéµäŸ¿å±ã®å¯Ÿé¢ã§ãâ
)
ãæå¯é§
ãJRå±±æç·ãæ± è¢é§
ãåå£åŸæ©ïŒå
â»ãªã³ã©ã€ã³(Web-LIVEææ¥)ã§ã®åè¬ãå¯èœã§ã(éžæåŒ)ïŒ
泚æäºé
â» ãã¡ãã®ã€ãã³ãæ å ±ã¯ãå€éšãµã€ãããååŸããæ å ±ãæ²èŒããŠããŸãã
â» æ²èŒã¿ã€ãã³ã°ãæŽæ°é »åºŠã«ãã£ãŠã¯ãæ å ±æäŸå ããŒãžã®å 容ãšå·®ç°ãçºçããŸãã®ã§äºããäºæ¿ãã ããã
â» ææ°æ å ±ã®ç¢ºèªãåå ç³èŸŒæç¶ããã€ãã³ãã«é¢ãããåãåããçã¯æ å ±æäŸå ããŒãžã«ãŠãé¡ãããŸãã

ãåãåãã
é¢é£ããã€ãã³ã

SESã»ITäŒæ¥äº€æµäŒã2026幎6æ19æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒæ± è¢ïŒ
2026/06/19(é) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎5æ15æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒæ± è¢ïŒ
2026/05/15(é) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎6æ11æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒæ± è¢ïŒ
2026/06/11(æš) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎5æ12æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒç¥ç°ïŒ
2026/05/12(ç«) éå¬
SESã»ITäŒæ¥äº€æµäŒã2026幎6æ2æ¥ãæ¡ä»¶ã»èŠå¡ã»ããŒãããŒãæ¢ããSESå¶æ¥æ åœè ããžãã¹äº€æµã€ãã³ãïŒç¥ç°ïŒ
2026/06/02(ç«) éå¬- TOP
- ã€ãã³ã
- ããªã³ã©ã€ã³ãVue.jså ¥éè¬åº§ïœã¯ãããŠã®SPAéçº
