RobloxとVSCode / Cursor を連携する方法。ノンプログラマでもゲーム開発！

ステップ1: Cursor(またはVSCode)にRojo拡張機能をインストール

1. Cursorを開きます。
2. 左側にある拡張機能アイコンをクリックします。 (4つの四角形のうちの1つが分離しているようなアイコンです) 拡張機能マーケットプレイスが開きます。
3. 検索バーに「Rojo」と入力して検索します。
4. 「evaera」が作成者であるRojo拡張機能を探し、クリックします。
5. 「インストール (Install)」ボタンをクリックします。RojoがCursorにインストールされます。

ステップ2: プロジェクトフォルダーの作成とRojoの初期化

1. Cursor(またはVSCode)でフォルダーを開きます。
   • 「ファイル (File)」メニューから「フォルダーを開く (Open Folder)」を選択します。
   • プロジェクトを保存するための新しいフォルダーを作成します。
2. Cursorのコマンドパレットを開きます。
   • 画面左上の「表示 (View)」をクリックし、「コマンドパレット (Command Palette)」を選択します。
   • ショートカットキーCtrl + Shift + P (Windows) またはCmd + Shift + P (Mac) を使用することもできます。
3. コマンドパレットで「Rojo open menu」と入力し、選択します。
4. 開いたメニューで「Install Rojo Now」をクリックします。
   Rojoと、Rojoが他のツールをインストールするために使用するaftmanというツールが、この特定のフォルダーにダウンロードされます。aftman.tomlファイルもプロジェクト内に作成されます。「successfully installed rojo with aftman」というポップアップが表示されるはずです。
5. 再度コマンドパレットから「Rojo open menu」を選択します。
6. ドロップダウンメニューが表示されたら、「今すぐ作成 (create one now)」をクリックします。 デフォルトのRojoプロジェクトが設定され、SRCというフォルダーを含む複数のファイルが作成されます。
   
   
   

ステップ3: Roblox StudioにRojoプラグインをインストール

1. CursprのRojoメニュー (コマンドパレットまたはRojoアイコンからアクセス) から、「Install Roblox Studio plugin」をクリックします。 「Roblox Studio plug-in has been installed」という通知が表示されます。
2. Roblox Studioを開きます。 もしRojoプラグインをインストールする際にRoblox Studioが既に開いていた場合は、プラグインを認識させるためにStudioを再起動してください。
3. Roblox Studioで新しいテンプレート「Baseplate」を選択します。
4. 「プラグイン (Plugins)」タブに移動します。
5. Rojoロゴが表示されていることを確認します。 もしRojoプラグインが表示されない場合は、Studioを再起動してみてください。

ステップ4: Cursor(またはVSCode)とRoblox Studioを同期する

1. CursorでRojoサーバーを起動します。
   • コマンドパレットから「Rojo open menu」を選択し、「default.project.json」を選択します。
   • または、Cursorの右下にあるRojoアイコンをクリックし、そこから開始することもできます。 
   • 「Rojo server listening」というメッセージと、Rojoがリッスンしているアドレスが表示されるはずです。
   
2. Roblox Studioを開き、Rojoプラグインをクリックします。
3. Rojoプラグインウィンドウで「Connect」をクリックします。 VSCodeとRoblox Studioを同期することを確認するオプションが表示されます。赤い線は削除されるもの、緑の線は追加されるものを示しています。
4. 「Accept」をクリックします。 「connected to the session」というメッセージが表示されます。これで、CursorとRoblox Studioが同期されました。

ステップ5: プロジェクト構造とスクリプトの作成

Rojoプロジェクトの核となるのは、default.project.jsonファイルです。このファイルは、Roblox StudioのExplorerのような構造をミラーリングし、Cursor内のフォルダーをRoblox Studioのサービスにリンクする方法を定義します。

default.project.jsonの構造

• name: プロジェクトの名前（Rojoプラグインで表示される文字列）。
• tree: プロジェクトのメイン構造を定義します。これはRoblox Studioのデータモデル（Explorer）に相当します。
  • 例として、ReplicatedStorage、ServerScriptService、StarterPlayerなどが含まれます。
  • 各サービス内には、Cursorプロジェクト内のフォルダーへのpathプロパティが設定されています (例: Source/sharedがRoblox StudioのReplicatedStorage内のsharedフォルダーに同期されます)。
  • init.luaという名前のファイルは、親ディレクトリの動作を変更するため、注意が必要です。通常はhello.server.luaのように、より具体的な名前に変更することが推奨されます。

スクリプトの命名規則

• モジュールスクリプト (Module scripts): ファイル名を.luaまたは.luauで終わらせます (例: hello.lua, hello2.luau)。
• サーバースクリプト (Server scripts): ファイル名を.server.luaまたは.server.luauで終わらせます (例: hello.server.lua, hello2.server.luau)。
• ローカルスクリプト (Local scripts): ファイル名を.client.luaまたは.client.luauで終わらせます (例: hello.client.lua, hello2.client.luau)。

プロジェクト構造のカスタマイズ

• 例えば、ReplicatedStorage内のsharedフォルダーを削除し、helloモジュールスクリプトを直接ReplicatedStorageに配置したい場合は、default.project.json内のsharedオブジェクトを削除し、pathを直接src/sharedに設定します。
• 新しいサービス（例: ServerStorage）を追加したい場合は、treeオブジェクト内に新しいエントリを追加し、そのpathを指定します。

ステップ6: Roblox LSPのインストールと設定

Roblox LSP (Language Server Protocol) は、Roblox Studioからのプロジェクト情報をCursorにリレーし、自動補完やスクリプト提案をするツールです。RojoとRoblox LSPは異なるツールですが、一緒に使用することで開発体験が向上します。

1. Cursor(またはVSCode)にRoblox LSP拡張機能をインストール:
   • VSCodeの拡張機能タブに移動します。
   • 「Roblox LSP」と検索します。
   • 「Nighttrains」が作成者である拡張機能を探し、インストールします。
   • インストール後、ネットワーク権限の許可を求められることがあります。許可して設定を適用します。
   • Cursorを再起動する必要がある場合があります。 VSCodeを閉じるとRojoとの接続が切れるので、再起動後にRojoプロジェクトを再度開始し、Roblox Studioと接続し直します。
2. Roblox StudioにRoblox LSPプラグインをインストール:
   • Roblox Studioのツールボックスで「LSP plugin」と検索します。
   • 「Night trains」が作成者であるプラグインを探し、インストールします。
   • プラグインをインストールしたら、Roblox Studioを再起動する必要がある場合があります。
   • プラグインタブでRoblox LSPを見つけ、「Connect」ボタンをクリックします。
   • Cursorに「Roblox LSP connected to Roblox Studio plugin」という通知が表示されれば成功です。

ステップ7: Rojoによるインスタンスの削除を防ぐ

Rojoは、Cursorのプロジェクトファイルに定義されていないRoblox Studio内のインスタンスを、同期時に削除してしまいます。これを防ぐには、default.project.json内で”$ignoreUnknownInstances”: trueを設定します。

1. project.json内の、Roblox Studioで削除されたくないインスタンスが含まれるフォルダーに、$ignoreUnknownInstances”: trueを設定します。

   
   
   "ReplicatedStorage": {
     "$ignoreUnknownInstances": true,
     "Shared": {
       "$path": "src/shared"
     }
   }
   
   

2. この設定により、Rojoはそのフォルダー内でRojoが知らないインスタンスを無視し、上書きしないように指示されます。 Rojoサーバーを再起動し、Roblox Studioと再接続することで、変更が適用されます。