Share
Embed
Slide 1
Slide 1 text
欲しいを叶える個人開発の進め方
JavaScriptでノベルゲームエンジン作った
19-D-9 Developers Summit 2026
遠藤ヒズミ
Slide 2
Slide 2 text
自己紹介
- 名前: 遠藤ヒズミ (@endo_hizumi)
- 分類: 霊長目ヒト科インドア属ニホン PCオタクモドキ種
- 頻出: 千葉県東葛地域
- 職業: レコメンド系 SaaS企業のフルスタック Rails使い
- 経歴: Vue.jsを中心にフロントエンドで４年
- 好き:ロボットアニメ・戦隊ヒーロー・ VTuber
Slide 3
Slide 3 text
お前も個人開発者 にならないか・・・？👹
Slide 4
Slide 4 text
個人開発はいいぞ・・・
Slide 5
Slide 5 text
欲しい機能 を持ったソフトウェア の開発が出来る
Slide 6
Slide 6 text
これに限るッ！！
欲しい機能 を持ったソフトウェア の開発が出来る
Slide 7
Slide 7 text
あなたの個人開発は何処から？ 💊
● 日常の個人的な不満点
○ 単調な繰り返しの定型業務
○ ミスが許されない手順（毎週のリリース作業とか）
○ 既存のサービスにないけど、欲しい機能がある
→ これを改善するソリューションを求めた時
Slide 8
Slide 8 text
僕の場合
- とっつきやすくノベルゲーム が作れる
- ゲームロジック開発に、TypeScriptが使える
- npmパッケージ が、使える
- ゲームのUIデザインに、CSSが使える
…etc
Slide 9
Slide 9 text
僕の場合
- とっつきやすくノベルゲーム が作れる
- ゲームロジック開発に、TypeScriptが使える
- npmパッケージ が、使える
- ゲームのUIデザインに、CSSが使える
…etc
→ フロントエンドスキル でゲーム開発 をできる
ライブラリ が...無い。
Slide 10
Slide 10 text
欲しいっ！！！
（指パッチンの音）
Slide 11
Slide 11 text
作りました
● TypeScript製ノベルゲームエンジン
○ ゲームUIをHTMLで作成
○ 独自マークアップ言語のWebTaleScriptで制御
○ ロジックはJavaScript(TypeScript)で開発
Slide 12
Slide 12 text
特徴1. UIはHTMLで作る
HTML
Canvas
ゲームUIをHTMLで作成するので自由に画面が作れる
Slide 13
Slide 13 text
特徴1. UIはHTMLで作る
ゲームUIをHTMLで作成するので自由に画面が作れる
Slide 14
Slide 14 text
特徴2. 見やすく書きやすいセマンティックな制御言語
HTML風の独自言語で作成するので、構造把握が容易
Slide 15
Slide 15 text
特徴3. ロジックは、JavaScript(TypeScript)で記述
豊富なnpmパッケージも使える
Slide 16
Slide 16 text
全体の流れ
● ビルド ● 実行
ビルド済み
ファイル
シーン
ファイル
(.scene)
WTSパーサー
(bin/wtc)
ビルド済み
ファイル
(.ts/.js)
画面用HTML
Web
Audio
canvas
画面
描画
シナリ
オ管理
DOM
Slide 17
Slide 17 text
全体の流れ（ビルド編）
シーンファイルと呼ばれるファイルにスクリプトを記述
シーン
ファイル
(.scene)
WTSパーサー
(bin/wtc)
ビルド済み
JSファイル
(.js)
Slide 18
Slide 18 text
全体の流れ（ビルド編）
パーサーが解釈して、JavaScriptにトランスパイルする
シーン
ファイル
(.scene)
WTSパーサー
(bin/wtc)
ビルド済み
ファイル
(.ts/.js)
Slide 19
Slide 19 text
全体の流れ（実行編）
1. 描画させたいHTMLにWebTaleKitのエントリーファイル
(=index.js)をScriptタグで指定
2. ブラウザが呼んだindex.jsがエンジンを初期化
3. エンジンが画面UI用HTMLとビルド済みファイルを読込
4. 必要に応じて、エンジンがDOM操作とJavaScriptを実行
画面用
HTML
(.html)
ビルド済み
ファイル
(.ts/js)
Slide 20
Slide 20 text
全体の流れ
● ビルド ● 実行
ビルド済み
ファイル
シーン
ファイル
(.scene)
WTSパーサー
(bin/wtc)
ビルド済み
ファイル
(.ts/.js)
画面用HTML
Web
Audio
canvas
画面
描画
シナリ
オ管理
DOM
Slide 21
Slide 21 text
動作デモ
Slide 22
Slide 22 text
応用活用案
● LLMチャットアプリのフロントエンドのローコード開発
○ IPキャラクターとの対話サービス
○ バーチャルな運営窓口
○ インタラクティブなeラーニング
● Web技術での動画作成（Remotionのような）
…etc
Slide 23
Slide 23 text
断じて、既存のエンジン構文の勉強を横着したわけじゃない。
これは知的探究心の表れだ - Endo Hizumi
Slide 24
Slide 24 text
開発経緯
Slide 25
Slide 25 text
（ラノベや漫画を読んだあと）ノベルゲーム作りたいな …
Slide 26
Slide 26 text
疑問点・不満点
メジャー所を調べると、 Webアプリの形式をとっている
● Webアプリなのに、全部、手続き。
○ 画面もスクリプトで...Webなのに？
● 直接HTML(CSS)とJavaScriptで作ればいいじゃん
● 今のHTMLの仕様で出来るはずなのにそんなエンジン無い
→可能かどうか作ってみるか...
Slide 27
Slide 27 text
アルファ版リリース！ 🎉
祝え！2024年7月、爆誕の瞬間 である
Slide 28
Slide 28 text
個人開発あるある
Slide 29
Slide 29 text
個人開発あるある : 自然消滅
- やらなくても誰も困らない
- これ誰が使うん？
- 不明点を人に相談できなくて、孤独
- 自分でも覚えていない仕様が出てくる
- 仕事で疲れてそれどころじゃない
Slide 30
Slide 30 text
個人開発あるある : 自然消滅
- やらなくても誰も困らない
- これ誰が使うん？
- 不明点を人に相談できん
- 自分でも覚えていない仕様が出てくる
- 仕事で疲れてそれどころじゃない
苦しみだけになって、開発が止まる
Slide 31
Slide 31 text
楽しくやるには？
- 完成までのハードルを下げましょう
- 期日は努力目標
- 開発時のお約束
Slide 32
Slide 32 text
完成までのハードルを下げましょう
● 自分が実現したいこと（＝事の本質）を定めよう
● コアじゃない所は、手を抜こう
○ 言語設計で工夫して、パーサーの実装工数を削る
○ 設計だけ書いて、実装をAIに投げる。
→ やらないことを決めよう
Slide 33
Slide 33 text
期日は努力目標
● 期日に遅れても、誰も困らない
○ 自分を追い込んでも意味がない
○ 月イチでリリース報告ツイート出来たらする
○ バグやアイデアはメモする
→ストレスとプレッシャーを減らす。要はバランス。
Slide 34
Slide 34 text
開発時のお約束
● 自分すら使わないものにしない
● このメソッドで何をしたいのか、納得する
● 最初に設計を文書化・実装後に実装例を用意する
● 場当たりなバグ修正を少なくする(調査を徹底する)
→仕様は小さく明確 に。そして可視化する。
Slide 35
Slide 35 text
みんなも個人開発始めよう！
Slide 36
Slide 36 text
みんなも個人開発始めよう！
欲しいは
正
義！！
「俺が欲しい！」 だけで伝わります！！
Slide 37
Slide 37 text
Thank you for listening!!
WebTaleKitの
紹介スライドを
本にしました。
SpeakerDeck
で、無料公開中
です。