Tutorial MMO World

Roblox Studio × TypeScript (roblox-ts) による MMO ゲーム開発プロジェクト

📋 目次

• 技術スタック
• クイックスタート
• プロジェクト構成
• 開発コマンド
• チーム開発
• トラブルシューティング

---

🛠 技術スタック

ツール	用途
roblox-ts	TypeScript → Luau 変換
Rojo	ファイルシステム ↔ Roblox Studio 同期
pnpm	パッケージ管理（ワークスペース）
ESLint	TypeScript コード品質
Prettier	コードフォーマット
StyLua	Luau フォーマット
Selene	Luau 静的解析
Husky	Git フック
GitHub Actions	CI/CD

---

🚀 クイックスタート

推奨: Dev Container（最も簡単）

Dev Container を使用すると、全員が同じ開発環境で作業できます。

前提条件

• Docker Desktop
• VS Code + Dev Containers 拡張機能

セットアップ

# 1. クローン
git clone https://github.com/your-org/tutorial-mmo-world.git
cd tutorial-mmo-world

# 2. VS Code で開く
code .

# 3. 「Reopen in Container」を選択（自動セットアップが実行される）

# 4. 開発サーバー起動
pnpm dev:game

💡 Roblox Studio はホストマシンで起動し、Rojo プラグインでポート 34872 に接続します。

---

手動セットアップ

クリックして展開

必須ソフトウェア

• Node.js v20 LTS
• pnpm v9
• Aftman
• Roblox Studio

Windows

# Node.js をインストール後
npm install -g pnpm

# Aftman をインストール後
aftman install

macOS

brew install node
npm install -g pnpm
brew install aftman
aftman install

プロジェクトセットアップ

git clone https://github.com/your-org/tutorial-mmo-world.git
cd tutorial-mmo-world
pnpm install
pnpm build

VS Code 拡張機能

code --install-extension evaera.vscode-rojo
code --install-extension fireboltofdeath.vscode-roblox-ts
code --install-extension JohnnyMorganz.luau-lsp
code --install-extension JohnnyMorganz.stylua
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode

---

📁 プロジェクト構成

tutorial-mmo-world/
├── apps/
│   └── game/                    # メインゲーム
│       ├── src/
│       │   ├── client/          # クライアントスクリプト
│       │   ├── server/          # サーバースクリプト
│       │   ├── shared/          # 共有コード
│       ├── include/             # Luau ランタイム
│       └── default.project.json # Rojo 設定
├── packages/
│   └── shared/                  # 共有ライブラリ
├── .github/
│   └── workflows/ci.yml         # GitHub Actions
├── aftman.toml                  # Roblox ツール定義
├── eslint.config.mjs            # ESLint 設定
├── stylua.toml                  # StyLua 設定
└── tsconfig.json                # TypeScript 設定

Rojo マッピング

ソース	Roblox Studio
out/client/	StarterPlayer.StarterPlayerScripts.Client
out/server/	ServerScriptService.Server
out/shared/	ReplicatedStorage.Shared

---

💻 開発コマンド

# 開発サーバー起動（TypeScript 監視 + Rojo サーバー）
pnpm dev:game

# ビルド
pnpm build

# Lint
pnpm lint          # チェック
pnpm lint:fix      # 自動修正

# フォーマット
pnpm format        # 自動修正
pnpm format:check  # チェック

# Luau フォーマット
pnpm format:lua
pnpm format:lua:check

---

👥 チーム開発

ブランチ戦略

main     ← 本番環境（保護）
  ↑
develop  ← 開発統合
  ↑
feature/xxx, fix/xxx

コミットメッセージ

Angular 規約に従います：

feat: プレイヤーインベントリ機能を追加
fix: リスポーン時のバグを修正
refactor: ネットワーク層を整理
docs: README を更新

詳細なガイドライン

👉 CONTRIBUTING.md を参照してください。

Roblox Studio でゲームを再生するとテストが実行されます。

---

🔄 CI/CD

GitHub Actions で以下を自動実行：

ジョブ	内容
build	TypeScript ビルド、ESLint、Prettier
lua-lint	StyLua、Selene
rojo-build	Rojo ビルド検証

PR がすべてのチェックを通過しないとマージできません。

---

❓ トラブルシューティング

Rojo が接続できない

# サーバーが起動しているか確認
pnpm dev:game

# ポートの確認
lsof -i :34872        # macOS/Linux
netstat -ano | findstr :34872  # Windows

ビルドエラー

# 依存関係を再インストール
rm -rf node_modules
pnpm install

# ビルドキャッシュをクリア
rm -rf apps/game/out
pnpm build

Git フックが動かない

pnpm prepare

---

📚 参考リンク

• roblox-ts ドキュメント
• Rojo ドキュメント
• Roblox Luau スタイルガイド

---

📝 ライセンス

Private - All Rights Reserved