)BUFOB
&OHJOFFS
4FNJOBS

ʮϓϩμΫτΛࢧ͑Δ"*ฤʯ LLMΛʮػೳʯͱͯ͠૊ΈࠐΉٕज़ id: nanimono_demonai ʮFigma to ͸ͯͳCMSʯʹ͓͚ΔϓϩϯϓτΤϯδχΞϦϯά͔Β AIΤʔδΣϯτߏஙʹΘͨΔਫ਼౓޲্ͷي੻ 

ࣗݾ঺հ Figma to ͸ͯͳCMSͱ͸ ඼࣭޲্ͷ֩৺: Unknown Unknowns ։ൃͷي੻ 2 

ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • ΢ΣϒΞϓϦέʔγϣϯΤϯδχΞ • ͸ͯͳCMSͷ։ൃϦʔμʔ • େֶͰ͸ػցֶशʢػց຋༁ʣΛݚڀ͍ͯͨ͠ 3 

ΠϯτϩμΫγϣϯ 4 

͸ͯͳCMSͱ͸ 5 https://www.hatena.ne.jp/cms/ ௚ײతͳૢ࡞ੑ ڧݻͳηΩϡϦςΟ ॊೈͳίϯςϯπ؅ཧ ࠷৽ػೳΛ͍ͭͰ΋ • ͸ͯͳͷ๏ਓ޲͚αʔϏε 

ʮFigma to ͸ͯͳCMSʯͱ͸ 6 

՝୊: FigmaͰ࡞ͬͨσʔλΛHTMLʹ͍ͨ͠ • ղܾ͍ͨ͠՝୊ • Web੍࡞ʹ͓͚ΔʮσβΠϯʢFigmaʣʯͱʮ࣮૷ʢίʔυʣʯͷ෼அ • ػೳ֓ཁ • FigmaͷσβΠϯσʔλΛAI͕ཧղ͠ɺ͸ͯͳCMSͰར༻Մೳͳࣗવͳίʔυ ΁௚઀ม׵ɾऔΓࠐΈΛߦ͏ • ಛ௃ • ϢʔβʔଆͰͷAIܖ໿΍ϝϯςφϯε͕ෆཁͳʮػೳʯͱͯ͠ͷ૊ΈࠐΈ • ͸ͯͳCMSΛར༻Ͱ͖ΔͳΒ͹ɺFigmaϓϥάΠϯܦ༝͢Δ͚ͩ 7 

ຊ೔ͷςʔϚ 8 

඼࣭޲্ͷ֩৺ɿUnknown Unknownsʢະ஌ͷະ஌ʣ • ඼࣭޲্ͷͨΊʹԿ͕Ұ൪େࣄ͔ʁ • ୯ʹରࡦΛଧͭ͜ͱͰ͸ͳ͘ɺʮԿ͕͏·͍͔͘ͳ͍ͷ͔Λ஌Δʯ͜ͱ • Ξϓϩʔν • ·ͣAI͕ಈ࡞͢ΔϓϩτλΠϓΛ༻ҙ͢Δ • ݱ࣮ʹ͍ۙσʔλΛೖྗ͠ɺపఈతʹࣄྫऩूΛߦ͏ • ࣮ࡍʹFigmaͰσβΠϯ͞ΕͨWebϖʔδͳͲ 9 ʮ͏·͍͔͘ͳ͍ࣄྫʯͱ͍͏ະ஌ͷྖҬΛط஌ʹม͑Δ͜ͱ͕ ରࡦΛଧͭͨΊͷେલఏͱͳΔ 

ຊ೔ͷςʔϚͱ͸ ͲͷΑ͏ͳʮࣦഊʯʹग़ձ͍ɺ Ͳ͏ʮ࢓૊ΈʯͰղܾ͔ͨ͠ͷه࿥ 10 

ୈʓஈ֊ɿϧʔϧϕʔεͷஅ೦ͱAIͷ࠾༻ • ࠷ॳͷݕ౼ɿϧʔϧϕʔεม׵ • FigmaσʔλʢڊେͳJSONʣΛϓϩάϥϜͰHTML΁ม׵͢ΔطଘϥΠϒϥϦ΍ OSSΛ୳Δ • ݁Ռɿෆ࠾༻ • طଘͷ΋ͷͰ͸χʔζΛຬͨͤͣɺࣗલ࣮૷͸ෳࡶ͗ͯ͢ίετ͕ݟ߹Θͳ͔ͬͨ • ҙࢥܾఆɿLLMͷ࠾༻ • ʮద੾ͳϓϩϯϓτΛ༩͑Ε͹ظ଴͢Δग़ྗ͕ಘΒΕΔʯͱ͍͏PoCΛܦͯ࠾༻ Λܾఆ • Ϣʔβʔʹ͸AIͷෳࡶ͞ҙࣝͤ͞ͳ͍ʮػೳʯͱͯ͠ͷϓϥάΠϯԽΛ໨ࢦ͢ 11 

ୈҰஈ֊ɿʮਆϓϩϯϓτʯͷݬ૝ͱน • ਆϓϩϯϓτ΁ͷظ଴ • ׬ᘳͳࢦࣔจʢਆϓϩϯϓτʣΛ௥ٻ͠ɺ1ճͷਪ࿦Ͱ݁ՌΛಘΑ͏ͱͨ͠ • Figmaͷੜσʔλ΍εΫϦʔϯγϣοτΛ౉͢ͳͲɺೖྗͷ޻෉ΛڽΒ͢ • ௚໘ͨ͠ʮτʔΫϯ਺ͷนʯ • ڊେͳσβΠϯΛม׵͠Α͏ͱ͢ΔͱɺLLMͷग़ྗτʔΫϯͷ্ݶʹ͋ͨΔ • ݁ՌɿʮԿ͕͏·͍͔͘ͳ͔ͬͨͷ͔ʯ • ग़ྗ్͕தͰऴΘͬͯ͠·͏ 12 ิ଍ (FNJOJ

1SPͰ͸ɺೖྗτʔΫϯ͸ສ͋Δͷʹग़ྗτʔΫϯ͸ສτʔΫϯ͕ݶք ຐ๏ͷढจ୳͠ʹ͸ݶք͕͋ͬͨ 

ୈೋஈ֊ɿ࠶ؼతϑϩʔʢRecursive FlowʣʹΑΔಥഁ 13 ิ଍ ࠶ؼతʹೖྗ͢Δͱɺલճͷग़ྗ͸ೖྗͱͳΓɺ·ͨೖྗ͸--.ʹͱͬͯ͸ʮਖ਼͍͠΋ͷʯͱͯ͠ѻΘΕ·͢ɻ
͜͜Ͱલճͷग़ྗʹΤϥʔ͕͋ΔͱɺͦͷΤϥʔ͕ʮਖ਼͍͠΋ͷʯͱͯ͠ޙଓͷग़ྗʹӨڹ͠ଓ͚·͢ɻ
࠶ؼతͳϑϩʔΛ༻͍Δͱɺ͜ͷΑ͏ͳΤϥʔͷ஝ੵΛͲ͏௿ݮ͢Δ͔ߟ͑Δඞཁ͕͋ΔͷͰ͢ɻ • ղܾࡦ • Ұ౓ʹશͯΛग़ྗͤͣɺग़ྗΛෳ਺ճʹ෼ׂͯ͠ܧଓͤ͞Δ࢓૊ΈΛ࣮૷ • খઆͷੜ੒Ͱ͸ষ͝ͱʹৄࡉͳจΛ࡞ΔΑ͏ʹɺHTMLͱStylesheetΛผʑʹग़ྗͤ͞ΔΑ͏ʹ • ٕज़త޻෉ • LangChain.jsΛ࠾༻͠ɺAIϓϩόΠμʔؒͷࠩҟΛٵऩ • લճͷग़ྗΛೖྗʹ໭͢࠶ؼతͳख๏ʢRecurrent FlowʣΛ࣮૷ • ݁ՌɿʮԿ͕͏·͍͔͘ͳ͔ͬͨͷ͔ʯ • ڊେͳσβΠϯ΋ม׵Մೳʹͳͬͨ • ͔͠͠ɺσβΠϯͷதؒ෦෼͕ܽམͨ͠ΓɺҰ؏ੑ͕ࣦΘΕΔ 

ୈࡾஈ֊ɿAIΤʔδΣϯτߏஙͱࣗݾධՁϧʔϓ 14 ิ଍ --.
BT
+VEHFͷϊ΢ϋ΢͸͜ͷαΠτΛࢀߟʹ͠·ͨ͠ɻ • զʑͷ݁࿦ • Agentic Work fl owͷ৺ଁ෦ɿʮࣗݾධՁϧʔϓʢRe fl ectionʣʯ • Generatorʢੜ੒୲౰ʣɿ·ͣίʔυΛ࡞Δ໾ׂ • EvaluatorʢධՁ୲౰/LLM as Judgeʣɿ • ੜ੒෺͕σβΠϯ௨Γ͔ɺෆඋ͕ͳ͍͔νΣοΫ͢Δ໾ׂ • ੍ޚϑϩʔɿ • ෆ߹֨ͳΒվળҊΛఴ͑ͯGeneratorʹࠩ͠໭͠ɺ࠷େධՁճ਺·Ͱϧʔϓ https://hamel.dev/ ࣗ཯తʹग़ྗΛ൑ఆɾमਖ਼͢ΔAIΤʔδΣϯτɾϫʔΫϑϩʔ΁ͷҠߦ 

੍ޚϑϩʔ֓ཁ • ࠷ऴஈͰग़ྗΛධՁ͢Δ • ධՁͷ࠷େ਺͸1ճ • มߋͷ༨஍͕͋Δ͕όϥϯε͕ྑ͔ͬͨ • ܁Γฦ͢Օॴ͸ಉ͡ೖྗ͕࿈ଓ͢ΔͨΊ ΩϟογϡΛಋೖ 15 ิ଍ ਪ࿦ʹ͸͕͔͔࣌ؒΔͨΊɺ
-BNCEBͰͷ࣮ߦ͓Αͼ"NB[PO
424ͰΩϡʔΠϯά 

EvaluatorΛʮެฏͳ৹ࠪһʯʹ͢ΔͨΊͷઃܭ 16 • AIͷධՁΛ҆ఆͤ͞ΔͨΊͷ޻෉ • 1. ϖϧιφࢦఆɿ۩ମతͳ໾ׂΛ೚໋͠ɺ࢓༷Λೖྗ͢Δ • 2. ݫ֨ͳϑΥʔϚοτʢJSONʣͰग़ྗ • ػց͕ղऍՄೳͳܗࣜͰɺείΞͱ۩ମతͳվળҊΛఏग़ͤ͞Δ • վળ఺ʹ͸༏ઌ౓΋ग़ྗͤ͞Δ • 3. ग़ྗͱ͸ಠཱͤ͞Δ • Generatorͷग़ྗΛਖ਼͍͠΋ͷͱѻΘͳ͍Α͏ʹ͢Δ • ॏཁͳઃఆ • ʮग़ྗ్͕தͰऴΘ͍ͬͯΔ৔߹͸0఺ͱ͢ΔʯͳͲɺϓϩμΫτͷৡΕͳ͍ϥΠϯΛ໌จԽ͢Δ ਓ͕ؒݟ͚ࣦͭͨഊࣄྫΛEvaluatorʹϑΟʔυόοΫ͢Δ͜ͱͰਫ਼౓޲্ΛਤΔ! 

ٕज़ج൫ɿLangGraph.jsͱτϨʔγϯά 17 • LangGraph.jsͷ࠾༻ • LLM൛ReduxͷΑ͏ͳෳࡶͳάϥϑߏ଄ͷ੍ޚͱεςʔτ؅ཧʹར༻ • LangGraph.jsͷϫʔΫεϖʔεΛϓϩτλΠϓͱͯ͠׆༻ • ؂ࢹͱσόοάʢLangfuseʣ • தؒεςοϓͷਪ࿦΍πʔϧར༻ɺফඅίετΛՄࢹԽ • EvaluatorͷείΞ΍ίϝϯτ͸ਓؒ΋֬ೝͰ͖ΔΑ͏ʹ͠ɺվળʹ׆༻ • Ωϟογϡઓུ • Vertex AIͷίϯςΩετΩϟογϡΛ׆༻͠ɺAPIίʔϧΛ࠷దԽ 

݁࿦ɿAIϓϩμΫτ։ൃ͸ʮ࣮ݧʯͷ࿈ଓͰ͋Δ 18 • ֶͼ • AIͷ੍໿ʢτʔΫϯ੍ݶ΍ਫ਼౓ྼԽʣΛ௚ࢹ͠ɺ࢓૊ΈͰղܾ͢Δ • Ұݟ͏·͍͍ͬͯ͘ΔΑ͏ʹݟ͑ͯ΋ɺҰ෦ͷࣄྫͷࣦഊΛݟམͱ͞ͳ͍ • Ձ஋ͷ֩৺͸ʮ୯ҰͷAIʯͰ͸ͳ͘ɺͦΕΒΛݡ͘࿈ܞͤ͞ΔʮAIγεςϜʯ ͷσβΠϯʹ͋Δ • ਓ͕ؒͦ͜ʮԿ͕͏·͍͔͘ͳ͍͔ʯΛݟ͚ͭଓ͚Δ • ࣄྫऩू͸ɺߴ౓ͳAIΤʔδΣϯτΛϓϩμΫτʹ૊ΈࠐΉͨΊʹॏཁ • ग़ྗ݁Ռͷ࠷௿඼࣭ϥΠϯΛ໌จԽ • ·ͨ৽͍ࣦ͠ഊΛݟ͚ͭͨΒɺͦΕͷରࡦΞϓϩʔνΛಋೖ͢Δ ิ଍ ϓϥάΠϯͷ޻෉͸ͪ͜ΒͷεϥΠυΛࢀর͍ͩ͘͞ɻ https://speakerdeck.com/nanimonodemonai/hatenacmsde fi gmawoqu-riip-musisutemunishi-wareteiruji-shu 

ऴ 19