この記事は、未経験から3日で完成させた資産運用シミュレーションゲームの 「技術・実装編」 です。
【目次：資産運用ゲーム 開発ブログ】
-
▶ 現在地：【技術・実装編】こだわりのWeb Audio APIとHaptics
はじめに
こんにちは！今回は、ブログ記事「中学生からわかる資産運用 〜お弁当メタファーで学ぶ投資と自衛〜」の内容をブラウザで体感できる 資産運用シミュレーションゲーム を開発しました。
「投資って怖い」「どうやって配分すればいいの？」といった疑問を、お弁当の具材（アセットクラス）を選ぶような感覚で学べるゲームになっています。
本記事では、このゲームの開発過程で採用した技術スタックや、こだわりの実装ポイント（特にWeb Audio APIを利用した動的サウンド生成など）について紹介します。
🎮 ゲームの概要
プレイヤーは1ターン（1年）ごとに手持ちのコイン（資産）を5つの投資先（預金、国内債券、外国債券、国内株式、外国株式）に配分し、20ターン（20年）後の最終資産額と称号（エンディング）を目指します。
単なるシミュレーションではなく、 「〇〇ショック（大暴落）」 や 「インフレ」 、突然の 「ライフイベント（出費）」 が容赦なく襲いかかってくる、かなりリアリティのある（？）バランスになっています。
🛠️ 採用した技術スタック
ゲームらしいリッチな表現とパフォーマンスを両立させるため、以下の技術スタックを採用しました。
| 技術 | 採用理由・役割 |
|---|---|
| React 19 + TypeScript | 複雑な状態管理（ターン経過、資産計算、称号判定など）を効率的にさばきつつ、型安全に開発を進めるため。 |
| Vite | 爆速なビルドとHMR（Hot Module Replacement）による快適な開発体験のため。 |
| Vanilla CSS | Tailwind CSS等のフレームワークをあえて使わず、ゲーム特有の自由なレイアウトやマイクロアニメーションを細部まで作り込むため。 |
| Web Audio API | 外部音声ファイル（mp3等）のロード時間をなくし、プレイヤーの操作（コンボ数）に応じた動的なサウンドフィードバックを実現するため。 |
| Vibration API | Android端末において、暴落時などに画面の揺れと連動した触覚（振動）フィードバックを与え、臨場感を高めるため。 |
こだわりポイント①：Web Audio APIによる「外部ファイル非依存」の動的サウンド生成
今回のゲームで最もこだわったのが、 効果音（SE）のプログラム的生成 です。
mp3などの外部音声ファイルに依存せず、ブラウザのAudioContextを用いて直接波形を生成しています。
これにより、ファイルのロード時間をゼロにでき、かつ 「連続で投資すると音階が上がる」 といった動的なインタラクションを簡単に実装できました。
以下は、コインを追加した際の「チャリン」という音を生成するカスタムフックの一部です。
// useSound.ts より抜粋
function playCoinAddSound(combo: number) {
const ctx = getAudioContext();
// ※ getAudioContext() は new (window.AudioContext || window.webkitAudioContext)() を返す自作のヘルパー関数です
const notes = [523.25, 659.25, 783.99]; // レトロアルペジオ: C5 -> E5 -> G5
const pitchShift = 1 + (combo * 0.02); // 連続クリックで少しずつピッチ上昇
notes.forEach((freq, i) => {
const osc = ctx.createOscillator();
const gain = ctx.createGain();
const t = ctx.currentTime + i * 0.05;
osc.type = 'triangle'; // トライアングル波でレトロなゲーム音を表現
osc.frequency.value = freq * pitchShift; // コンボ数に応じてピッチを上げる
// 音の立ち上がりと減衰を設定（エンベロープ）
gain.gain.setValueAtTime(0, t);
gain.gain.linearRampToValueAtTime(0.1, t + 0.01);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.15);
osc.connect(gain);
gain.connect(ctx.destination);
osc.start(t);
osc.stop(t + 0.15);
});
}
このように、ユーザーの操作回数（combo）に応じて周波数を動的に計算（pitchShift）することで、連続でコインを投資した時に「音程がどんどん上がっていく」という、プレイヤーを気持ちよくさせるフィードバックを実現しています。
こだわりポイント②：Vibration APIを用いた触覚フィードバック（Haptics）
スマートフォン（特にAndroid Chrome）（※iOS SafariはOSの仕様上非対応です）でのプレイ体験を向上させるため、navigator.vibrate()を利用したHapticsフィードバックを取り入れました。
市場が暴落した際（〇〇ショック）には、画面が激しく揺れるCSSアニメーションと同時に、端末自体を振動させることで、プレイヤーに「やばい！」という強烈な印象を与えています。
視覚＋聴覚＋触覚の3つのアプローチで、投資のリスクを体感できるように工夫しました。
こだわりポイント③：個性豊かなAIライバルたちとの競争
ゲームを飽きさせない工夫として、異なる投資戦略を持った 全5体 のAIライバルを実装しました。
| キャラクター | 戦略 | 特徴 |
|---|---|---|
| 🦁 ライオンのレオン | ギャンブラー | 毎ターン外国株式に全額ベット。好景気で爆発するが、暴落で一気に沈む。 |
| 🐘 ゾウのエレファ | 堅実派 | 預金と債券のみで手堅く運用。暴落には強いが、インフレで徐々に削られる。 |
| 🐕 シバイヌのシバ | パニック売り | 普段はバランス型だが、暴落の翌ターンにパニックを起こし預金に全額避難。 |
| 🦉 フクロウのオウル | 賢者 | 預金30%を確保しつつ残りを分散投資。最も安定。 |
| 🐒 サルのモンキ | 順張り | 前ターンの成績が良かったアセットに多く投資するデータ追従型。 |
リアルタイムで自分とライバルの資産推移を比較できるため、「今はライオンに負けてるけど、一回暴落が来れば逆転できる…！」といった、他者との比較による面白さを生み出しています。
おわりに
ReactとWeb Audio APIを組み合わせることで、思っていた以上に「ゲームらしい」リッチな体験をブラウザ上で実現することができました。
特に音の動的生成は、パラメータを少し変えるだけで全く違う印象の音になるので、調整作業自体がとても楽しかったです。
もしよろしければ、ぜひ一度遊んでみてください！そして、ご自身の「お弁当（ポートフォリオ）」を作って、どんな称号が得られるか試してみてくださいね。
【免責事項】
本記事およびゲームのシミュレーションは、実践的な金融経済知識の普及啓発と学習を目的として作成したものであり、特定の金融商品の売買の勧誘を目的としたものではありません。実際の資産運用や投資に当たっては、必ずご自身の責任において最終的に判断してください。