JSでギャルゲー！～JavaScriptでノベルゲーエンジン作ったった～

はじめましての方ははじめまして、ご存知の方はそうだよヒズミさんだよ（
「9割はじめてだろ！」
「知ってるよ！」
）
この本は、わたくし、遠藤ヒズミが開発しているWebノベルゲームエンジンのWebTaleKitの紹介本です。

出来たばかりで、まだ、知名度が低いので、名前を覚えていってくれたら、幸いです。使った感想(@endo_hizumi)まで送ってくれると、泣きます。喜びでな！！

Transcript

2. JS ͰΪϟϧήʔʂ ʙJavaScript ͰϊϕϧήʔΤϯδϯ࡞ͬͨͬͨʙ ԕ౻ώζϛɹஶ 2025-11-16 ൛ ΦτΪϤ΢Ϗ ൃߦ
3. ͸͡Ίʹ ͸͡Ί·ͯ͠ͷํ͸͸͡Ί·ͯ͠ɺ͝ଘ஌ͷํ͸ͦ͏ͩΑώζϛ͞ΜͩΑʢ9 ׂ͸ ͡ΊͯͩΖʂ ɹ͜ͷຊ͸ɺΘͨ͘͠ɺԕ౻ώζϛ͕։ൃ͍ͯ͠Δ Web ϊϕϧήʔϜ Τϯδϯͷ WebTaleKit ͷ঺հຊͰ͢ɻ ग़དྷͨ͹͔ΓͰɺ·ͩɺ஌໊౓͕௿͍ͷͰɺ໊લΛ͍֮͑ͯͬͯ͘ΕͨΒɺ޾͍Ͱ ͢ɻ࢖ͬͨײ૝ (@endo_hizumi) ·Ͱૹͬͯ͘ΕΔͱɺٽ͖·͢ɻتͼͰͳʂʂ ϊϕϧήʔϜͱ͸ ͦ΋ͦ΋ͷɺϊϕϧήʔϜʹ͍ͭͯɺ؆୯ʹઆ໌͢ΔͱిࢠࢴࣳډͰ͢ɻը໘ͷߏ ੒͕ɺԼͷը૾ͷΑ͏ͳഎܠ͕͋ͬͯɺΩϟϥΫλʔͷֆ͕͋Γɺը໘ͷԼ෦ʹɺจ ষ͕Ұจࣈͣͭग़ͯ͘Δ΋ͷͰ͢ɻ ʢ࠷ۙͩͱɺιγϟήͷձ࿩ύʔτͷը໘ͱݴͬ ͨํ͕Θ͔Γ΍͍͢ʁʣ WebTaleKit ͱ͸ WebTaleKit ͸ɺHTML+CSS+JavaScript ͷ Web ϑϩϯτΤϯυٕज़Ͱϊϕ ϧήʔϜΛ࡞Διϑτ΢ΣΞͰ͢ɻҙ֎ͱɺθϩ͔Β࡞Ζ͏ͱ͢Δͱɺจࣈදࣔͷ࢓ ํɾΩϟϥͷදࣔɾηʔϒˍϩʔυͷ࢓૊ΈͳͲɺͪΌΜͱطଘͷΤϯδϯແ͠Ͱ࡞ Ζ͏ͱ͢Δͱɺٕज़ऀͰ΋ΊΜͲ͍࣮͘͞૷͕ଟ͍ͷͰ͢ɻ ͜ͷຊ͸ͦͷ WebTaleKit ͷجૅߏ଄ͱಈ࡞ͷ࢓૊ΈΛɺ঺հ͢Δ͜ͱͰɺଘࡏ Λ஌ͬͯ΋Β͓͏ͱ͍͏෺Ͱ͢ɻ ಡऀλʔήοτʢͲΜͳਓ޲͚͔ʣ ͜ͷදࢴΛݟͯɺؾʹͳͬͨ͋ͳͨɻͦΜͳ͋ͳͨ͸ɺ಺༰͕ؾʹͳͬͯɺͩ͘ ͬͨ͞ͷͰ͠ΐ͏ɻͦΜͳ͋ͳͨͷͨΊͷຊͰ͢ɻϑϩϯτΤϯυٕज़Ͱɺ͔ͬ͠Γ ͱͨ͠ϊϕϧήʔϜ͕࡞ΕΔͷ͕ɺ͜ͷ WebTaleKit Ͱ͢ɻ 2
4. ໔੹ࣄ߲ ຊॻʹهࡌ͢Δ಺༰͸චऀͷॴଐ͢Δ૊৫ͷެࣜݟղͰ͸͋Γ·ͤΜɻ·ͨɺຊॻ ͸ՄೳͳݶΓਖ਼֬Λظ͢Α͏ʹ౒Ί͍ͯ·͕͢ɺචऀ͕ͦͷ಺༰Λอূ͢Δ΋ͷͰ͸ ͋Γ·ͤΜɻͦͷͨΊɺຊॻͷهࡌ಺༰ʹج͍ͮͨಡऀͷߦҝɺٴͼಡऀ͕ඃͬͨଛ ֐ʹ͍ͭͯචऀ͸ͳΜΒ੹೚Λෛ͏΋ͷͰ͸͋Γ·ͤΜɻ 3
5. ໨࣍ ͸͡Ίʹ 2 ϊϕϧήʔϜͱ͸ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 WebTaleKit ͱ͸ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 ಡऀλʔήοτʢͲΜͳਓ޲͚͔ʣ . . . . . . . . . . . . . . . . . . . . . 2 ໔੹ࣄ߲ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 ୈ 1 ষ ։ൃܦҢ 5 ୈ 2 ষ ಛ௃ 6 2.1 ಛ௃ᶃɿHTML Ͱࣗ༝ʹ UI Λ࡞ΕΔ! . . . . . . . . . . . . . . 6 2.2 ಛ௃ᶄɿΦʔτεέʔϧରԠ . . . . . . . . . . . . . . . . . . . . 7 2.3 ಛ௃ᶅɿ؀ڥߏங͕؆୯ . . . . . . . . . . . . . . . . . . . . . . 7 2.4 ಛ௃ᶆɿͱ͖ͬͭ΍͍͢ಠࣗݴޠ . . . . . . . . . . . . . . . . . . 8 ୈ 3 ষ ࠓޙͷల๬ 12 ෇࿥ A ෇࿥ 13 ͋ͱ͕͖ 15 ஶऀ঺հ 16 4
6. ୈ 1 ষ ։ൃܦҢ ؆୯ʹݴ͏ͱɺϊϕϧήʔϜΛ࡞Γ͍ͨͳ͊ɻɹˠɹগ͠ௐ΂ΔɻطଘͷΤϯδ ϯͷߏจ֮͑Δͷ໘౗ͩɻˠ ͩͬͨΒɺԶͷߟ͑ͨ࠷ڧͷϊϕϧήʔϜΤϯδϯΛ ଄ͬͪΌ͓͏͔ʁ ͦΜ͘Β͍ͷϊϦͰ͢ɻ ʢझຯͳΜͩ͠ɺࣗݾຬ଍্౳ʂʜͰ΋ɺ࢖ͬͯ͘ΕΔͱ خ͍͠ͳʣ WebAudio ͰԻΛ໐Β͢͜ͱ͕Ͱ͖ɺCanvas ͰֆΛඳ͘͜ͱ͕Մೳɻͦͯࣗ͠෼ ͕ JavaScript ͷϓϩάϥϚʔͳͷͰɺ࡞Δ͜ͱ͕ՄೳͳΜͰ͢ͶɻझຯͳΜͰ͢͠ɺ ࢼ͠ʹ࡞ͬͯΈΑ͏ɻ ͦΜͳԣணϞϊ͕ɺٕज़ྗΛ͍͕࣋ͬͯͨͨΊʹɺҰ೥͘Β͍ͰɺجຊతͳػೳΛ ࣋ͬͨΞϧϑΝ൛͕ϦϦʔεग़དྷͨΘ͚Ͱ͢Ͷɻ ʢਖ਼֬ʹ͸ɺ2023 ೥ 8 ݄͔Βߏ૝Λ ߟ͍͑ͯͯɺver.0.1 ϦϦʔε͕ 2024 ೥ 1 ݄͔ͩΒɺ൒೥΋ܦͬͯͳ͍ʜϚδͰʁ ܭࢉϛεͬͯͳ͍ʁ ઃܭ͔ΒϦϦʔε·Ͱײ֮తʹ͸Ұ೥൒͘Β͍ͷؾ࣋ͪͳΜͩ ͚Ͳɻ ʣ 5
7. ୈ 2 ষ ಛ௃ 2.1 ಛ௃ᶃɿHTML Ͱࣗ༝ʹ UI Λ࡞ΕΔ! ਤ 2.1: HTML Ͱࣗ༝ʹ UI Λ࡞ΕΔ! WebTaleKit ͸ɺϒϥ΢βͰಈ͘͜ͱΛར༻ͯ͠ɺϢʔβʔͷૢ࡞͢Δը໘ʢʹ Ϣʔβʔ UIʣΛ HTML ͱ CSS Ͱߏ੒͞Ε͍ͯ·͢ɻ͜ΕʹΑΓɺήʔϜ։ൃऀ͸ɺ ඞཁʹԠͯ͡ɺը໘ΛΧελϚΠζ͢Δ͜ͱ͕༰қʹͳΓ·͢ɻ·ͨɺಛผͳߏจ΋ ͳ͍ͷͰɺϓϨʔϯͳ HTML ͳͷͰɺσβΠφʔͱ෼ۀ͢Δ͜ͱ΋ՄೳͰ͢ɻՃ͑ ͯɺϞμϯϑϨʔϜϫʔΫͷ Vue.js/React/Svelte Λۦ࢖ͨ͠Ϧονͳ UI ΋ߏஙՄ ೳͰ͢ɻ 6
8. ୈ 2 ষ ಛ௃ 2.2 ಛ௃ᶄɿΦʔτεέʔϧରԠ 2.2 ಛ௃ᶄɿΦʔτεέʔϧରԠ ਤ 2.2: ΦʔτεέʔϧରԠ ࠓͷ࣌୅ɺήʔϜͷ࣮ߦ؀ڥ͸༷ʑͰ͢ɻεϚʔτϑΥϯɺλϒϨοτɺPCɺ͞ Βʹ͸େը໘σΟεϓϨΠ·ͰɻWebTaleKit ͷΦʔτεέʔϧػೳ͸ɺ͋ΒΏΔը ໘αΠζͰಉ͡ήʔϜମݧΛఏڙ͠·͢ɻ ։ൃऀ͸ෳࡶͳϨεϙϯγϒରԠΛߟ͑Δඞཁ͸͋Γ·ͤΜɻΤϯδϯ͕ࣗಈతʹ ࠷దͳදࣔΛ࣮ݱ͠·͢ɻ 2.3 ಛ௃ᶅɿ؀ڥߏங͕؆୯ Ϧετ 2.1: ؀ڥߏங npm create tale-game ͨͬͨ 1 ߦͷίϚϯυɻͦΕ͚ͩͰɺ ͋ͳͨͷήʔϜ։ൃ؀ڥ͕੔͍·͢ɻNode.js ͑͞Πϯετʔϧ͞Ε͍ͯΕ͹ɺWindows Ͱ΋ Mac Ͱ΋ Linux Ͱ΋ɺ͙͢ʹ։ൃ Λ࢝ΊΒΕ·͢ɻ 7
9. ୈ 2 ষ ಛ௃ 2.4 ಛ௃ᶆɿͱ͖ͬͭ΍͍͢ಠࣗݴޠ ͓खຊ༻ͷαϯϓϧήʔϜ΋ಉࠝ͞Ε͍ͯΔͷͰɺ໎͏͜ͱͳ͘ɺήʔϜ։ൃΛ࢝ ΊΒΕ·͢ɻ 2.4 ಛ௃ᶆɿͱ͖ͬͭ΍͍͢ಠࣗݴޠ ਤ 2.3: HTML ϥΠΫ HTML ϥΠΫͰ௚ײతɻӳ୯ޠϕʔεͰཧղ͠΍͍͢ɻ ਤ 2.4: จࣈͷදࣔ จࣈ͸͜ͷΑ͏ʹ͢Δͱɺදࣔ͞Ε·͢ɻ 8
10. ୈ 2 ষ ಛ௃ 2.4 ಛ௃ᶆɿͱ͖ͬͭ΍͍͢ಠࣗݴޠ ਤ 2.5: ؔ਺ͷݺͼग़͠ ͦͯ͠ɺJavaScript ͷϝιουΛ௚઀ݺͼग़ͤΔॊೈੑɻ ਤ 2.6: REST API ͱͷ࿈ܞ REST API ͱͷ࿈ܞ΋ଐੑҰͭͰ࣮ݱɻࠓͷ࿩୊ͷ ChatGPT ͱͷ࿈ܞ΋͜ΕͰ ՄೳͰ͢ɻ ͜ΕΛ hoge.scene ͱͯ͠ɺsrc/scene σΟϨΫτϦʹอଘ͠·͢ɻ 9
11. ୈ 2 ষ ಛ௃ 2.4 ಛ௃ᶆɿͱ͖ͬͭ΍͍͢ಠࣗݴޠ ਤ 2.7: อଘ Ϗϧυ͢Δͱɺ࣍ʹࣔ͢ hoge.js ͱ͍͏ JavaScript ϑΝΠϧʹม׵͞Ε·͢ɻ 10
12. ୈ 2 ষ ಛ௃ 2.4 ಛ௃ᶆɿͱ͖ͬͭ΍͍͢ಠࣗݴޠ ਤ 2.8: ม׵ WebTaleKit ͷΤϯδϯ͸ɺ͜ͷ JavaScript ϑΝΠϧΛಡΈࠐΜͰɺήʔϜΛಈ ࡞ͤ͞·͢ɻ ϓϩάϥϚʔ͸΋ͪΖΜɺσβΠφʔ΍γφϦΦϥΠλʔʹ΋༏͍͠ઃܭͰ͢ɻ͜ ͜Ͱɺ঺հ͍ͯ͠Δͷ͸ɺ΄ΜͷҰ෦Ͱ͢ɻଞͷλάͳͲ͸ɺ෇࿥ʹ͋Δ URL ͔Β ֬ೝͰ͖·͢ɻ 11
13. ୈ 3 ষ ࠓޙͷల๬ Ξοϓσʔτ༧ఆͱͯ͠͸ɺ࣍Λ༧ఆ͍ͯ͠·͢ɻ ද 3.1: Ξοϓσʔτ༧ఆ όʔδϣϯ ίʔυωʔϜ ओͳػೳ 0.1.0 ॳԻ (HATUNE) ॳظϦϦʔε 0.2.0 ૅ (ISHIZUE) جຊػೳͷ҆ఆԽɺطಡ؅ཧɺ৚݅෼ذ 0.3.0 ෣གྷ (BUYO) ΞχϝʔγϣϯɾτϥϯδγϣϯڧԽ 0.4.0 ڱؒ (HAZAMA) ϑϨʔϜϫʔΫ࿈ܞʢVue/React/Svelteʣ 0.5.0 ૢख (AYATURI) ήʔϜύουରԠɺԻ੠ API ࿈ܞ 0.6.0 བྷ܁ (KARAKURI) ։ൃπʔϧॆ࣮ɺϓϥάΠϯγεςϜ 0.7.0 ௲Γ (TSUZURI) GUI ΤσΟλͷఏڙ 0.8.0 ਝཕ (JINRAI) ύϑΥʔϚϯε࠷దԽ 0.9.0 ग़ౡ (DEJIMA) ଞΤϯδϯͱͷޓ׵ੑ 1.0.0 ڿ݄ (AKATSUKI) ϝδϟʔϦϦʔε 12
14. ෇࿥ A ෇࿥ • GitHub ϨϙδτϦɿhttps://github.com/EndoHizumi/webTaleKit ਤ A.1: ϦϙδτϦ • ϑΟʔυόοΫϑΥʔϜɿhttps://forms.gle/KMRWLinYNAfqt8PfA ਤ A.2: ϑΥʔϜ • σϞϯετϨʔγϣϯɿ https://test-game-chi.vercel.app/ 13
15. ෇࿥ A ෇࿥ ਤ A.3: σϞ • υ Ω ϡ ϝ ϯ τɿ https://endohizumi.github.io/webTaleKit/ tag-reference.html ਤ A.4: υΩϡϝϯτ 14
16. ͋ͱ͕͖ ͑ʁ ͋ͱ͕͖ʁ ԶͪΌΜɺཱͭௗ੻Λ୙ͣͬͯ͞ɺλΠϓͳΜ͚ͩͲͳ͊ʙɹ ͋ʔɺ͸͍͸͍ɻΘ͔͔ͬͨΒɺॻ͘Αɻ WebTaleKit ͷ։ൃܦҢ͸ɺӕِΓͳ͘ɺԣணͱ޷ح৺Ͱɺ։ൃΛ࢝Ίͨ΋ͷͰ͢ ͕ɺաڈͷܦݧ͔Βɺ࣮૷Λল͘ͱ͜Ζ͸ϥΠϒϥϦʔΛར༻ͯ͠ɺলྗԽΛ͓ͯ͠ Γ·͢ɻ ݸਓ։ൃͷ೉͍͠ͱ͜Ζ͸ɺϞνϕʔγϣϯ؅ཧͰɺϚΠϖʔεʹ͍͘ΒͰ΋ɺ஗ ͘Ͱ͖ͪΌ͍·͢ɻίʔυ΋Ԛ͘Ͱ͖·͢͠ɾɾɾ͔݄̏ͷ࣮૷΋Α͘Θ͔Βͳ͍͜ ͱʹͳͬͯ͠·͏͜ͱ΋βϥͰ͢ɻ ίʔυΛԚ͘ॻ͍ͯɺ೔͕։͍ͯɺಈ͔͠ํ͕Θ͔Βͳ͍ͳΜͯ͜ͱ΋͋ΔͷͰɺ webTaleKit Ͱ͸ɺͦ͏ͳΒͳ͍Α͏ɺϏϧυपΓ͸ɺNodeJS ͷΤίγεςϜʹ ৐͔ͬͬͨΓɺͳΔ΂͘ɺҰൠతͳॻ͖ํʹͦ͏Α͏ʹͯ͠·͢ɻ࠷ۙ͸ɺΠϯλʔ ϑΣʔε΍ڍಈͳͲઃܭΛߟ͑ͯɺ࣮૷͸ AI Ͱߦͬͯɺࣗ෼ͷϞνϕʔγϣϯ͕௿ ͍ͱ͖ͷิ׬΋ߦ͍ͬͯ·͢ɻ ʢ·͊ɺϨϏϡʔ͸ࣗ෼ͳͷͰɺͦ͜Ͱࢭ·͍ͬͯΔ Ͱ͚͢ͲͶʣ Τϯδϯ෦෼΋ແཧ΍Γ࣮૷͠ͳ͍Α͏ʹɺόά͕͋Ε͹ɺॲཧશମͷྲྀΕΛमਖ਼ ͨ͠ΓɺͳΔ΂͘γϯϓϧʹͳΔΑ͏ʹ࣮૷͍ͯ͠Δͭ΋ΓͰ͢ɻ ʢͦ͏͠ͳ͍ͱɺ ະདྷͷࣗ෼͕๨Εͯ͠·͏ͷͰʣϞδϡʔϧ෼͚ͯɺ੹຿Λ෼୲ͯ͠ɺࣗ෼͕ೲಘͰ ͖Δͱ͜Ζ·Ͱɺߟ͑·͢ɻ ݸਓͷझຯ։ൃ͔ͩΒͦ͜ɺͳͥͦ͏ͨ͠ͷ͔Λ໌֬ʹ͍͖͍ͯͨ͠Ͱ͢ɻ ʢͩͬ ͯɺ࣌ؒత੍໿΋ܦࡁత੍໿ͳ͍ͷʹɺࡶͳ࣮૷ͬͯɾɾɾɾԿ͕͍ͨ͠ΜͩΖ͏ͱ ࢥͬͪΌ͏ʣ ͍΍ɺ࢓ࣄ͕ࡶͰ͍͍ͱ͍͏Θ͚͡Όͳ͍Ͱ͢Ͷɻ݁ہɺ࣮૷ͨ͠੹೚͕͋Δͷ ͰɺͪΌΜͱॻ͍ͯ·͢ɻ ʢ࣮૷ͷ࢓ํΑΓ΋෺͕͋Δ͜ͱ͕ॏཁͳہ໘΋͋ΔͷͰɺ έʔεόΠέʔεͰ͕͢ʣ ͍Ζ͍Ζͱɺͩ͜Θͬͯɺ։ൃΛਐΊ͍ͯΔͷͰɺࠓޙͷϦϦʔεʹ͝ظ଴ͩ͘ ͍͞ɻ 2025 ೥ 11 ݄ ԕ౻ώζϛ 15
17. ஶऀ঺հ ԕ౻ώζϛ ࠓ೥Ͱ̕೥໨ͷ Web ΤϯδχΞΒ͍͕͠ɺ೥਺૬Ԡͷܦݧɾ஌͕ࣝ͋Δ৺഑ͯ͠ Δ 35 ࡀͷஉੑɻݴޠ͸ɺPython ͱ Vue.js ͕͓޷͖ɻͪΐͬͱมΘͬͨΨδΣοτ Λങͬͯ͘Δͷ͕झຯɻSES ͰγεςϜͷίʔσΟϯάͰ൧Λ৯͍͕ͬͯͨɺ2025 ೥ 7 ݄ʹ SaaS اۀ΁స৬ͨ͠ɻ 16
18. JS ͰΪϟϧήʔʂ ʙJavaScript ͰϊϕϧήʔΤϯδϯ࡞ͬͨͬͨʙ 2025 ೥ 11 ݄ 16 ೔ɹॳ൛ୈ 1 ࡮ɹൃߦ ஶɹऀ ԕ౻ώζϛ ൃߦॴ ΦτΪϤ΢Ϗ ࿈བྷઌ endohizumi0114@gmail.com ҹ࡮ॴ ɹ ɹ (C) 2025 ԕ౻ώζϛ