
AIã³ãŒãã£ã³ã°ã®åžžèãå€ããïŒClaudeã"èŠé"ãããç¥æ§ããSerenaã培åºè§£èª¬
AIã䜿ã£ãŠã³ãŒãã£ã³ã°ãããŠãããšããããªé¢šã«æããããšã¯ãããŸãããïŒ
ã倧ããªãã¡ã€ã«ãèªã¿èŸŒãŸãããã³ã«ã倧éã®ããŒã¯ã³ãæ¶è²»ãããŠããŸãâŠðžã
ã1ã€ã®ãã°ãçŽããŠããã£ãããå¥ã®3ã€ã®ãã°ãçãŸããŠããŸã£ãâŠðã
ãAIãã³ãŒãã®å šäœåãçè§£ããŠãããªããŠãäœåºŠãåã説æãç¹°ãè¿ããŠããâŠðã
ãããã®æ©ã¿ã¯ãAIãã³ãŒãããããã¹ãã®çŸ åããšããŠããèŠãããŠããªãããšã«èµ·å ããŸããããããããAIã人éã®ããã«ã³ãŒãã®ãæå³ãããæ§é ããçè§£ããŠããããâŠïŒ
ä»åã¯ããããªå€¢ã®ãããªæªæ¥ãå®çŸããããŒã«ãSerenaãã«ã€ããŠããã®é åãšäœ¿ãæ¹ããAIæè¡ã«è§Šããããšã®ããçããŸã«åããŠããã£ãããšè§£èª¬ããŠãããŸãïŒ
ãããããSerenaãã£ãŠäœè ïŒ ãªãå¿ èŠãªã®ïŒ
Serenaã¯ãäžèšã§ãããšãAIïŒç¹ã«ClaudeïŒã«ãããªãã®ãããžã§ã¯ãã³ãŒããæ·±ãçè§£ãããããã®è³¢ãéèš³è ãã§ãã
ããã¯ãAnthropic瀟ãæå±ããMCP (Model Context Protocol)ãšããèŠæ Œã䜿ã£ãŠãAIãšé£æºããããŒã«ã®äžçš®ã§ãã
ð äŸãããªãâŠ
ä»ãŸã§ã®AIã³ãŒãã£ã³ã°ã¯ãååãå°éæžïŒããªãã®ãããžã§ã¯ãã³ãŒãïŒããç®æ¬¡ã玢åŒã䜿ããã«1ããŒãžç®ããå šéšèªãã§ãç®çã®æ å ±ãæ¢ããããªãã®ã§ãããããã§ã¯æéããããããéäžã§ç²ããŠããŸããŸãããã
Serenaã¯ããã®å°éæžã®ããã«éåžžã«åªç§ãªãç®æ¬¡ããšã玢åŒããèªåã§äœæããŠãããç§æžã®ãããªååšã§ããAIã¯Serenaã«ããããšãã颿°ã®å®çŸ©ã¯ã©ãïŒããšèãã ãã§ãç¬æã«è©²åœããŒãžïŒã³ãŒãã®è©²åœç®æïŒãéãããšãã§ããããã«ãªãã®ã§ãã
ããã«ãããAIã¯ç¡é§ãªããŒãžãèªãå¿ èŠããªããªããããŒã¯ã³ã®æ¶è²»éãåçã«åæžããåŠçé床ãšç²ŸåºŠãé£èºçã«åäžãããããšãã§ããŸãã
Serenaãããããé©åœçãªå€åïŒãBefore vs Afterã
Serenaãå°å ¥ãããšãããªãã®ã³ãŒãã£ã³ã°äœéšã¯é©ãã»ã©å€ãããŸãã
ð± Before SerenaïŒåŸæ¥ã®AIã³ãŒãã£ã³ã°
ããŒã¯ã³ã®å€§éæ¶è²»ïŒãã¡ã€ã«ãéããã³ã«ãæ°åãæ°äžè¡ã®ã³ãŒãããã¹ãŠèªã¿èŸŒããããã³ã¹ãããããã
äœãããæèçè§£ïŒAIã¯ããã®é¢æ°ã®åœ¹å²ã¯âŠãããã®å€æ°ã¯âŠããšãã£ãã³ãŒãã®æ§é ãçè§£ã§ãããä¿®æ£ãçãå°ãªãã
æå³ããªãå¯äœçšïŒãã¿ã³ã®è²ãå€ããã ããªã®ã«ããµã€ãã®ã¬ã€ã¢ãŠãã厩ãããªã©ãäžã€ã®ä¿®æ£ãæ°ããªåé¡ãåŒãèµ·ããã
é ãã¬ã¹ãã³ã¹ïŒã³ãŒãå šäœãæ¯åèªãã§åæãããããåçãŸã§ã«æéããããã
âš After SerenaïŒæ°ããAIã³ãŒãã³ã£ã°äœéš
ããŒã¯ã³ã®åçåæžïŒSerenaãäœæãã玢åŒïŒã€ã³ããã¯ã¹ïŒã䜿ããé¢é£ç®æã ãããã³ãã€ã³ãã§èªããããããŒã¯ã³æ¶è²»ãæå°éã«ã
é«ãæèçè§£ïŒã»ãã³ãã£ãã¯æ€çŽ¢ïŒïŒã³ãŒãããæå³ãã§çè§£ããŸãããAãšããæ©èœã«é¢é£ããå šãŠã®ã³ãŒãçãæ¢ããŠããšãã£ãã人éã®ãããªæç€ºãå¯èœã«ãªããŸãã
æ£ç¢ºç¡æ¯ãªä¿®æ£ïŒã³ãŒãã®äŸåé¢ä¿ãçè§£ããŠãããããä¿®æ£ã«ããå¯äœçšãæå°éã«æããŸãã
è¶ é«éã¬ã¹ãã³ã¹ïŒå¿ èŠãªæ å ±ã«å³åº§ã«ã¢ã¯ã»ã¹ã§ãããããAIã®å¿çãéåžžã«éããªããŸãã
éæ³ã®ä»çµã¿ïŒSerenaã¯ã©ã®ããã«ã³ãŒããçè§£ããïŒ
Serenaã®è³¢ãã®ç§å¯ã¯ãäž»ã«2ã€ã®æè¡ã«æ¯ããããŠããŸãã
LSP (Language Server Protocol)
ããã¯ãããŸããŸãªããã°ã©ãã³ã°èšèªïŒPython, JavaScript, Goãªã©ïŒã®ãææ³ãããæ§é ããè§£æããããã®æšæºçãªä»çµã¿ã§ããSerenaã¯LSPãå©çšããŠãã³ãŒãããã ã®ããã¹ãã§ã¯ãªããã颿°ãã倿°ããã¯ã©ã¹ããšãã£ãæå³ã®ããå¡ïŒã·ã³ãã«ïŒãšããŠèªèããŸãã
ãããžã§ã¯ãã®ãªã³ããŒãã£ã³ã°ïŒåæèªã¿èŸŒã¿ïŒ
ããªããåããŠSerenaããããžã§ã¯ãã§äœ¿ããšããããªã³ããŒãã£ã³ã°ããšããããã»ã¹ãèµ°ããŸããSerenaã¯ãããžã§ã¯ãå ã®å šãã¡ã€ã«ãã¹ãã£ã³ããã©ãã«ã©ããªé¢æ°ããããã©ã®ãã¡ã€ã«ãäºãã«é¢é£ããŠãããããšãã£ãæ å ±ããŸãšãããã¡ã¢ãªãã¡ã€ã«ïŒçŽ¢åŒïŒããäœæããŸãã
ãã®åæã¹ãã£ã³ã¯äžåºŠããã§ããæ¬¡åããã¯ããã®ãã¡ã¢ãªãã¡ã€ã«ããåç §ãããããAIã¯ç¬æã«ãããžã§ã¯ãã®å šäœåãææ¡ã§ããã®ã§ãã
ããã«ããã®åŠçã¯ããªãã®PCäžïŒlocalhostïŒã§å®çµããŸãã倧åãªã³ãŒããå€éšã«éä¿¡ããããšãªããå®å šã«è§£æã§ããã®ã倧ããªãã€ã³ãã§ãããð¡ïž
å®è·µïŒSerenaã䜿ã£ãã³ãŒãã£ã³ã°æ¹åãŠã©ãŒã¯ã¹ã«ãŒ
ããã§ãå ·äœçãªäŸãèŠãŠã¿ãŸãããããããããã¶ã€ã³ã®ä¿®æ£äŸé Œã§ãã
ãé¡ïŒãŠã§ããµã€ãã®ãã®éšåãèæ¯ãèããã³ã¯ã§æåãçœã ããèªã¿ã«ããïŒæåãé»ã«ããŠïŒ
åŸæ¥ã®ããæ¹ (Without Serena)
ããªãïŒããã®HTMLãã¡ã€ã«ã®ãã®éšåãæåãé»ãããŠããšAIã«äŸé Œã
ïŒããªãã¯åé¡ã®éšåã®ã³ãŒããã³ããŒïŒããŒã¹ãããå¿ èŠããããããããŸããïŒ
AIïŒãã¯ããæ¿ç¥ããŸããããšèšã£ãŠãCSSãã¡ã€ã«å šäœãHTMLãã¡ã€ã«ãèªã¿èŸŒã¿ãcolor: white ãæ¢ã㊠color: black ã«å€æŽããããšè©Šã¿ãã
çµæïŒéãè¯ããã°æåãããããé¢ä¿ãªãéšåã®çœãæåãŸã§é»ãããŠããŸã£ãããCSSã®åªå é äœãçè§£ã§ããã«å€æŽãé©çšãããªãã£ãããææªã®å Žåã¯ã¬ã€ã¢ãŠãã厩ããŠããŸãããšãâŠã
Serenaã䜿ã£ãããæ¹ (With Serena)
ããªãïŒããã®ããŒãžã®ãã®ã»ã¯ã·ã§ã³ãæåãèªã¿ã«ããããèªã¿ãããããŠããšãããèªç¶ãªèšèã§AIã«äŸé Œã
Claude (AI)ïŒãSerenaãããåºçªã§ãïŒãã®ã»ã¯ã·ã§ã³ãæ åœããŠããã³ãŒãã¯ã©ãã§ããïŒã
SerenaïŒããä»»ããã ããã玢åŒã«ããã°ããã®ã¹ã¿ã€ã«ãå®çŸ©ããŠããã®ã¯ styles.css ãã¡ã€ã«ã®253è¡ç®ã«ãã .hero-section p ãšããã»ã¬ã¯ã¿ã§ããããã¡ãã§ããããšãé¢é£ã³ãŒãã ãããã³ãã€ã³ãã§Claudeã«æž¡ããŸãã
ClaudeïŒSerenaããåãåã£ãçç¢ºãªæ å ±ãããšã«ãcolor: #FFFFFF; ã color: #000000; ã«å€æŽããããšããå®ç§ãªä¿®æ£æ¡ãææ¡ã
çµæïŒããŒã¯ã³æ¶è²»ã¯æå°éãä¿®æ£ã¯è¿ éãã€æ£ç¢ºãä»ã®éšåã«åœ±é¿ãäžããããšãªããåé¡ã ãã綺éºã«è§£æ±ºãããŸããïŒð
Serenaã䜿ãå§ããããã®åªããã¹ããã
ããããè¯ãããã ãã©ãã³ãã³ãã©ã€ã³ïŒãã®é»ãç»é¢ïŒã¯ã¡ãã£ãšèŠæã§âŠããšæãããããããŸããããå®å¿ãã ããïŒåºæ¬çãªæµãã¯ãšãŠãã·ã³ãã«ã§ãäžåºŠèšå®ããã°ããã®å¹æã«ãã£ãšé©ãã¯ãã§ãã
ããã§ã¯ããã®æé ãäžã€ã²ãšã€ãäžå¯§ã«èŠãŠãããŸããããð ïž
Step 0: äœæ¥å Žã®æºå (Setting up your workspace)
ãŸããSerenaãåããããã®åå°ãæŽããŸããã䜿ãã®PCã«Claude CodeïŒãŸãã¯Claude DesktopïŒã®ã³ãã³ãã©ã€ã³ããŒã«ãšãuvãšããPythoné¢é£ã®ããŒã«ã管çãã䟿å©ãªéå ·ãã€ã³ã¹ããŒã«ãããŠããããšã確èªããŠãã ããããããã¯Serenaãšããåªç§ãªã¢ã·ã¹ã¿ã³ããè¿ãå ¥ããããã®æºåäœæã®ãããªãã®ã§ãã
Step 1: Claudeã«Serenaã玹ä»ãã (Introducing Serena to Claude)
次ã«ãClaudeã«ãããããã¯Serenaãããšäžç·ã«åããŠãããšæ£åŒã«ç޹ä»ããŠãããŸãããã®ããã®âéæ³ã®åªæâããã¡ãã®ã³ãã³ãã§ãã
claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena start-mcp-server --context ide-assistant --project $(pwd)å°ãé·ãèŠããŸãããåè§£ãããšãšãŠãã·ã³ãã«ã§ããããã¯ãClaudeã«å¯ŸããŠä»¥äžã®ãããªãé¡ããããŠããŸãã
claude mcp add serena: ãã¯ããŒããserenaãšããååã®æ°ããã¢ã·ã¹ã¿ã³ãïŒMCPïŒã远å ããŠïŒã
-- uvx ...: ããã®ã¢ã·ã¹ã¿ã³ãã¯ããã®GitHubã¢ãã¬ã¹ããuvxã£ãŠãã䟿å©ãªéå ·ã䜿ã£ãŠé£ããŠããŠãã
--context ide-assistant: ãä»åã¯ã³ãŒãã£ã³ã°ã®ãæäŒã圹ãšããŠãé¡ããããã
--project $(pwd): ããããŠãä»ãããã®ãããžã§ã¯ããã©ã«ããäžç·ã«èŠãŠã»ãããã ã
ãã®äžè¡ãå®è¡ããã ãã§ãããªãã®ClaudeãSerenaãšãã匷åãªé è³ãšãã£ãããšæãçµã³ãŸããð€
Step 2: æåã®æšæ¶ãšèªå·±çŽ¹ä» (The First Handshake and Introduction)
飿ºãã§ããããæ¬¡ã¯Serenaã«ããªãã®ãããžã§ã¯ãã«ã€ããŠèªå·±ç޹ä»ãããŠãããçªã§ããClaudeã®ãã£ããç»é¢ã§ã以äžã®ã³ãã³ããæã¡èŸŒãã§ã¿ãŸãããã
/mcp__serena__initial_instructionsãããå®è¡ãããšãSerenaãããªãã®ãããžã§ã¯ãå šäœãã¹ãã£ã³ãå§ããŸããããããŸãã«ãèšäºã®ååã§èª¬æããã玢åŒïŒã¡ã¢ãªãã¡ã€ã«ïŒããäœæããŠããç¬éã§ããSerenaããããžã§ã¯ãã®å°å³ãç±å¿ã«æžã蟌ãã§ããããšèãããšåãããããã§ãããðºïž
ãã®ããã»ã¹ã¯ããããžã§ã¯ãããšã«æåã®1åã ãå¿ èŠã§ãã
Step 3: ãããå§ãããïŒ (Ready, Set, Go!)
ãç²ãæ§ã§ããïŒããã§ããæºåã¯äžç«¯ã§ãã
ããšã¯ãã€ãéãClaudeã«è©±ããããã ããããªããã³ãŒãã£ã³ã°ã®çžè«ããããšãè£åŽã§ã¯Serenaããã®æ·±ãç¥èããã«æŽ»çšããŠãClaudeã«ç確ãªãã³ããéã£ãŠãããŸãã
ãã®3ã¹ãããã§ãAIãšã®ã³ãŒãã£ã³ã°ããããŸã§ãšã¯å¥æ¬¡å ã®å¿«é©ãã«ãªãããšãããã²äœæããŠãã ããã
ãŸãšãïŒSerenaãåãæãAIã³ãŒãã£ã³ã°ã®æ°ããå°å¹³
Serenaã¯ãåãªã䟿å©ããŒã«ã§ã¯ãããŸãããAIãéçºã®ããæäŒããããããããããžã§ã¯ããæ·±ãçè§£ãããä¿¡é Œã§ããããŒãããŒããžãšé²åããããã®ã倧ããªäžæ©ã§ãã
â ãã³ãã€ã³ãã®ç²ŸåºŠïŒå€ç§å»ã®ãããªç²Ÿå¯ãã§ã³ãŒããä¿®æ£ã
â é©ç°çãªã³ã¹ãå¹çïŒç¡é§ãªããŒã¯ã³æ¶è²»ããªãããã財åžã«åªããã
â ã¹ãã¬ã¹ããªãŒãªé床ïŒåŸ ã€æéãæžãããåµé ããæéãå¢ããã
â æ·±ãæèçè§£ïŒãããžã§ã¯ãå šäœãèŠæž¡ãåºãèŠéãAIã«äžããã
ã³ãŒãã£ã³ã°ã¯ããã£ãšåµé çã§ããã£ãšæ¥œãããã®ã§ããã¹ãã§ããSerenaã®ãããªããŒã«ã¯ãç§ãã¡ãç ©éãªäœæ¥ããè§£æŸããæ¬åœã«å€§åãªãã¢ã€ãã¢ã圢ã«ããããšããäœæ¥ã«éäžãããŠãããŸãã
ãã²ãã®æ°ããæ³¢ã«ä¹ããAIãšã®æ°ããé¢ä¿æ§ãç¯ããŠãããªãã®éçºäœéšã次ã®ã¬ãã«ãžãšåŒãäžããŠã¿ãŸãããïŒ
ããšãã
èè ãããã£ãŒã«
AIæè¡ã®è§£èª¬ãè¡ã£ãŠãã @kyutaro15 ã§ããææ°ã®AIæè¡ãåããããã解説ããããšãã¢ãããŒã«ããŠããŸãã
åèãªã³ã¯
ãããããããã³ã¡ã³ãããããã ãããšå¬ããã§ãïŒãŸããæ°ã«ãªãç¹ãããã°ãæ°è»œã«ã³ã¡ã³ãããŠãã ããã