å°å ¥ïŒMVC ãšã¯ãèšèšææ³ãã§ãã
ç§ãé·å¹Ž Web ãµã€ããéçšããŠããäžã§ãæåã«ææ¢ãã§åãå ¥ããèšèšãã¿ãŒã³ã MVC (Model-View-Controller) ã§ããããã®ãã¿ãŒã³ã®ãããã§ãåœæã®ã¹ãã²ããã£ã³ãŒãããè±åŽããã·ã¹ãã ã«äžå®ã®ç§©åºãããããããšãã§ããŸããã
ããããç§ãèªäœãã PHP ç¬èª MVC ã¯ããµã€ããæé·ããã«ã€ããŠèŽåœçãªä¿å®æ§ã®åé¡ã«çŽé¢ããŸããããã®çµéšãéããŠçæããã®ã¯ã**ãMVC ã¯åãªãäžå±€ã®ãã©ã«ãæ§é ã§ã¯ãªããçã®è²¬åã®åé¢ãšã¯ãããŒã¿ãšããžãã¯ã衚瀺ã®å¢çã峿 Œã«å®ãããšã§ããã**ãšããååã§ãã
æ¬èšäºã§ã¯ãç§ãç¬èª MVC ã®éçšã§çŽé¢ãã**ãåœãã®åé¢ãã®èª²é¡ãšãã¢ãã³ãª Next.js (React)/Django ãžã®ç§»è¡ãéããŠåŠãã ãçã®è²¬åã®åé¢ã**ã®æèšã解説ããŸãã
第1ç« ïŒç¬èª MVC ã§é¥ã£ããåœãã®è²¬ååé¢ãã®çœ
1. Controller ã®è¥å€§åïŒFat ControllerïŒåé¡
ç¬åŠè ãèªäœ MVC ã§æãé¥ããããçœ ããController ã®è¥å€§å (Fat Controller) ã§ããç§ã®æ§ã·ã¹ãã ãäŸã«æŒãããController ã以äžã®ãããªè€æ°ã®è²¬åãæ±ã蟌ãã§ããŸããã
- ããŒã¿ååŸ: Model ãåŒã³åºãã ãã§ãªããè€éãªããŒã¿éèšã¯ãšãªã Controller å ã§çŽæ¥çæããŠããŸãã
- æ¥åããžãã¯: ãŠãŒã¶ãŒã®å ¥åæ€èšŒãæ¡ä»¶åå²ãå€éš API ãšã®é£æºåŠçãªã©ãæ§ã ãªæ¥åããžãã¯ã Controller ã«èšè¿°ã
- View ãžã®äŸå: ããŒã¿ã View ã«æž¡ãåã«ãController åŽã§ View ã®è¡šç€ºåœ¢åŒã«åãããå å·¥åŠçãããŠããŸãã
ããã«ãããController ã¯ããã«æ°çŸè¡ã®ã³ãŒãã®å¡ãšãªããäžã€ã®åŠçã倿Žããã ãã§ãäºæãã¬å¥ã®æ©èœãå£ãããšãããææã®ã³ãŒãããšåããŸããã
2. Model ã®æã€ã¹ãã§ãªããç»é¢ããžãã¯ã
Controller ãè¥å€§åããè£åŽã§ãModel ããŸãäžé©åãªè²¬åãè² ã£ãŠããŸããã
- HTML çæã³ãŒãã®æ··å
¥: Model ã®äžã§ããŒã¿å å·¥åŠçãè¡ã£ãéããã®çµæã HTML ã®ã¿ã°ã§è£
食ã㊠View ã«è¿ããŠããŸãïŒäŸïŒ
<div>ã<br>ã Model å éšã§çæïŒã - å€éšãµãŒãã¹ãšã®å¯çµå: Model ãç¹å®ã®å€éš API ã®ããŒã¿åœ¢åŒã«åŒ·ãäŸåããŠããŸããAPI åŽã®ä»æ§å€æŽã§ Model å šäœã®ä¿®æ£ãå¿ èŠã«ãªã£ãŠããŸããã
çã® Model ã¯ã**ãããŒã¿ãšããžãã¹ããžãã¯ã«éäžããããšã**ã責åã§ãããç§ã®åæã® MVC ã¯ããã®å¢çç·ãææ§ã§ããã
3. View ã®ãå€ãããããžãã¯ã
PHP ã§æžããã View ãã¡ã€ã«ã§ã¯ãããŒã¿ã衚瀺ããã ãã§ãªããif ã foreach ãªã©ã®å¶åŸ¡æ§é ãè€éã«å
¥ãåã«ããŠããŸããã
- åé¡: View ã§ããžãã¯ãæžãããããšãView ã¯åãªããã³ãã¬ãŒãã§ã¯ãªããªãããã¹ããå°é£ãªã衚瀺ããžãã¯ãšãã¶ã€ã³ãæ··åšããå¡ãã«ãªã£ãŠããŸããŸãã
第2ç« ïŒã¢ãã³ Full-Stack ãå®çŸãããçã®è²¬åã®åé¢ã
Next.js (React)/Django ãžã®ç§»è¡ã¯ãåã«èšèªãå€ãã£ãã ãã§ãªãããã¬ãŒã ã¯ãŒã¯ã«ãã峿 ŒãªèŠçŽããçã®è²¬ååé¢ã匷å¶ããŠãããŸããã
1. Controller ã®æ¶æ» ãš View/Business Logic ã®åé¢
ã¢ãã³ãªæ§æã§ã¯ãController ã®åœ¹å²ã¯ãAPI ãµãŒããŒïŒDjangoïŒãš UI ã¬ã€ã€ãŒïŒNext.jsïŒã«åé¢ã»åžåãããŸããã
- Django (API ãµãŒããŒ):
- DRF ViewSets: Controller ã®ãªã¯ãšã¹ãåä»ãšã«ãŒãã£ã³ã°ã®è²¬åãæ ããŸããããããå éšã®æ¥åããžãã¯ã¯å šãŠ Model/Service å±€ã«åé¢ãããŠããŸãã
- Model/Service å±€: ããã**ãçã®ããžãã¹ããžãã¯ã**ãæ ãå Žæã§ããè€éãªããŒã¿éèšãããžãã¹ã«ãŒã«ã¯ãController ããå®å šã«åãé¢ããã Python ã¯ã©ã¹ãšããŠèšè¿°ããããã¹ãå®¹ææ§ã確ä¿ãããŸããã
- Next.js (UI ã¬ã€ã€ãŒ):
- Server Components: Controller ãè¡ã£ãŠããããŒã¿ååŸã®åŒã³åºããšãViewïŒReact ComponentïŒãžã®ããŒã¿åãæž¡ããæ ããŸãã
2. Model ã¯ãããŒã¿ãã®ãã®ãã«éäžãã
Django ORM ã® Model ã¯ãããŒã¿ããŒã¹ãšã®é£æºãšããŒã¿æ€èšŒã«éäžããView ã Controller ã®éœåã«åœ±é¿ãããªããªããŸããã
- Serializer ã®æŽ»çš: ããŒã¿ãš JSON ã®å€æã¯ DRF Serializer ãæ åœããModel ã HTML 圢åŒã API 圢åŒãæèããå¿ èŠãäžåãªããªããŸããã
- PostgreSQL ã®æŽ»çš: è€éãªããŒã¿éèšã¯ãModel ã®æã€ ORM ã®èœåãæå€§éã«åŒãåºã圢ã§å®çŸãããModel ã®è²¬åã¯ãå ç¢ãªããŒã¿å±€ããšããŠç¢ºç«ãããŸããã
3. View ã¯ã衚瀺ãã«éäžãã (React Component)
Next.js ã® React Component ã¯ãView ã®è²¬åãæ¥µããŠå³æ Œã«å®ããŸãã
- ããžãã¯ã®æé€: Tailwind CSS ãçšããŠã¹ã¿ã€ã«ã Component å éšã«éã蟌ãããïŒView ã®è²¬åã®ç¯å²å ïŒãAPI ããæž¡ãããããŒã¿ãå å·¥ã»æŽåœ¢ããã«è¡šç€ºããããšã«éäžã§ããŸãã
- Hooks ã®æŽ»çš: ç¶æ 管çãå¯äœçšãšãã£ãããžãã¯ã¯ãã«ã¹ã¿ã Hooks ã«åé¢ãããView ã®ã¬ã³ããªã³ã°ã³ãŒããã·ã³ãã«ã«ä¿ã€ããšãã§ããŸãã
ãŸãšãïŒèšèšååãããç¬åŠè ã®çŸ éç€
1. çã®è²¬åã®åé¢ããããã广
ãçã®è²¬åã®åé¢ããå®çŸããããšã§ããããžã§ã¯ãå šäœã«ä»¥äžã®å¹æãããããããŸããã
- ãã°ã®çºçæºã®ç¹å®å®¹ææ§: åé¡ã API å±€ã«ããã®ããããžãã¹ããžãã¯å±€ã«ããã®ããUI å±€ã«ããã®ããæç¢ºã«ãªãããããã°æéãå€§å¹ ã«åæžãããŸããã
- åå©çšæ§ã®åäž: Django ã® Service å±€ã§èšè¿°ããããžãã¹ããžãã¯ã¯ãWeb API ã ãã§ãªããå°æ¥çã«ã³ãã³ãã©ã€ã³ããŒã«ãã¢ãã€ã« API ãšããŠã容æã«åå©çšã§ããããã«ãªããŸããã
- ä¿å®æ§ã®åäž: éçºè ãä¿®æ£ãå ããã¹ããã¡ã€ã«ãè¿·ãããšããªããªããã³ãŒã倿Žã«ããæå³ããªã圱é¿ïŒãã°ïŒã®ç¯å²ãéå®ã§ããããã«ãªããŸããã
2. ç¬åŠè ã身ã«ã€ãããèšèšææ³ã
ç¬åŠã§ Web éçºãå§ããé ã¯ããã¬ãŒã ã¯ãŒã¯ã®æ©èœãèšèªã®ææ³ãèŠããããšã«å¿ æ»ã§ããããããããã®å€§èŠæš¡ãªç§»è¡ãããžã§ã¯ããéããŠã**ãæè¡ã¯å€ãã£ãŠããèšèšååã¯äžå€ã§ããã**ãšããæãéèŠãªæèšãåŠã³ãŸããã
MVC ã®çã®åã¯ãã³ãŒããåå²ããããšã§ã¯ãªããæªæ¥ã®ä¿å®ãšæ¡åŒµãèŠæ®ããŠãã³ãŒãã®åœ¹å²ïŒè²¬åïŒãå³å¯ã«å®çŸ©ããå®ãæãèšèšææ³ã«ãããŸãããã®èšèšææ³ããããç§ãããŒã éçºã§è²¢ç®ã§ããæå€§ã®åŒ·ã¿ã§ãã
ä»åŸãããã®èšèšååãçŸ éç€ãšããŠãå ç¢ã§æ¡åŒµæ§ã®é«ãã·ã¹ãã éçºã远æ±ããŠãããŸãã


ã³ã¡ã³ã