React + PhaserでLINEミニアプリ向けWebゲームを軽量化した話

長洲港町PCマーケットの無料ブラウザゲーム「猫のPC工房」を、React + TypeScript + Phaser 3 + Viteで開発しました。本記事では、LINEミニアプリとして動かすために行った構成分離と初期表示の軽量化をまとめます。

アプリの構成

• React: 依頼、パーツ選択、安全診断、モーダル、共有導線
• Phaser 3: 猫店長とPC組み立てのCanvas演出
• TypeScript: 24パーツと注文条件、適合判定、スコア計算
• Vite: 本番ビルドと開発・審査・本番の環境別配布
• LIFF SDK: LINE内共有、ホーム画面ショートカット

UIをすべてCanvasに閉じ込めず、情報量の多い選択画面はReact、ゲームらしい演出だけをPhaserに分けました。これによりスマホのレスポンシブ対応とアクセシビリティを通常のDOMで扱えます。

Phaserを最初から読み込まない

初期版はトップ表示と同時にPhaserを評価していたため、LighthouseのTotal Blocking Timeが1,270msまで増えていました。

そこで「工房を開く」を押した後にだけゲームエンジンを読み込む構成へ変更しました。

async function openWorkshop() {
  setLoading(true);
  const { startWorkshopGame } = await import("./game/WorkshopGame");
  await startWorkshopGame();
  setLoading(false);
}

実装ではタップ完了を妨げないよう、状態変更を短時間遅延させています。軽量化後はLighthouseでPerformance 75、TBT 70msまで改善しました。Accessibility 96、Best Practices 100も確認しています。

LIFF IDをビルドから分離する

開発・審査・本番でLIFF IDが異なるため、実行時設定を優先して読み込みます。

function configuredLiffId() {
  return (
    window.NAGASU_PC_WORKSHOP_LIFF_ID ||
    import.meta.env.VITE_LIFF_ID ||
    ""
  ).trim();
}

配布後も line-config.js の差し替えだけで環境を切り替えられ、アプリ本体の再ビルドを避けられます。LIFF未設定時は外部通信せず、通常のWebゲームとして動作します。

安全判定は5系統

ゲームでは単純な性能値だけでなく、次をリアルタイムに判定します。

1. 消費電力に対する電源容量
2. CPUに対する冷却性能
3. GPU・冷却装置に対するケースサイズ
4. CPUとマザーボードの対応クラス
5. USB端子数と映像出力数

条件不足は満足度へ反映し、どこを直すべきかをアイコンとゲージで表示します。「猫店長におまかせ」は在庫のある6,561構成を比較し、満足度と仕入れ額から候補を選びます。

LINE以外でも共有できるフォールバック

LINE内ではShare Target Picker、通常ブラウザではWeb Share API、非対応環境ではクリップボードへ切り替えます。

if (liff?.isInClient() && liff.isApiAvailable("shareTargetPicker")) {
  await liff.shareTargetPicker([{ type: "text", text }]);
} else if (navigator.share) {
  await navigator.share({ title, text, url });
} else {
  await navigator.clipboard.writeText(`${text}\n${url}`);
}

LINE専用にしすぎず、通常のブラウザでも遊べる設計にしておくと、審査前のテストと検索流入の両方に対応できます。

公開URL

実際のゲームはこちらです。

猫のPC工房｜無料PC組み立てゲーム

今後はオンラインランキングと複数セーブスロットを追加する予定です。