← 書籍一覧に戻る

🔧 Visual Studio Code セットアップガイド

TIC-80開発のための最強エディタを準備しよう!

📥 1. VSCodeのインストール

1 公式サイトにアクセス

Visual Studio Codeの公式サイトにアクセスします。

2 お使いのOSに合わせてダウンロード

🪟 Windows

「Download for Windows」ボタンをクリックして、インストーラーをダウンロードします。

ダウンロードした VSCodeUserSetup-x64-*.exe を実行してインストールします。

 macOS

「Download for macOS」ボタンをクリックして、.zipファイルをダウンロードします。

ダウンロードした VSCode-darwin-*.zip を解凍し、Visual Studio Code.appをApplicationsフォルダに移動します。

🐧 Linux

お使いのディストリビューションに合わせて、.deb(Debian/Ubuntu)または.rpm(Red Hat/Fedora)をダウンロードします。

# Debian/Ubuntu
sudo dpkg -i code_*.deb

# Red Hat/Fedora
sudo rpm -i code-*.rpm
3 初回起動と日本語化

VSCodeを起動したら、日本語化することをおすすめします。

  1. 左側のExtensions(拡張機能)アイコンをクリック
  2. 検索ボックスに「Japanese」と入力
  3. 「Japanese Language Pack for Visual Studio Code」をインストール
  4. VSCodeを再起動

🎮 2. TIC-80開発用の拡張機能

JavaScript and TypeScript Nightly

拡張機能IDː ms-vscode.vscode-typescript-next

JavaScriptの最新機能をサポートします。

💡 ヒント

拡張機能は Ctrl+Shift+X(Mac: Cmd+Shift+X)で検索できます。

⚡ 3. 便利な使い方

基本的なショートカット

操作 Windows/Linux macOS
ファイルを保存 Ctrl+S Cmd+S
元に戻す Ctrl+Z Cmd+Z
やり直し Ctrl+Y Cmd+Shift+Z
検索 Ctrl+F Cmd+F
置換 Ctrl+H Cmd+Option+F
行をコピー Alt+Shift+ Option+Shift+

TIC-80開発で便利な機能

🎨 カラーピッカー

色のコードにマウスを合わせると、カラーピッカーが表示されます。

📝 マルチカーソル

Alt(Mac: Option)を押しながらクリックで、複数の場所を同時に編集できます。

🔍 定義へジャンプ

関数名をCtrl(Mac: Cmd)を押しながらクリックで、定義場所へジャンプできます。

🚀 4. TIC-80と連携する

1 作業フォルダを開く

VSCodeで「フォルダーを開く」から、TIC-80のカートリッジを保存するフォルダを開きます。

2 ファイルの編集

TIC-80で作成した .js ファイルをVSCodeで開いて編集します。

// TIC-80 JavaScriptの例
function TIC() {
  cls(0) // 画面をクリア
  print("Hello TIC-80!", 84, 64) // テキスト表示
}
3 TIC-80で確認

VSCodeで保存(Ctrl+S)した後、TIC-80で load ファイル名 コマンドを実行して読み込みます。

⚠️ 重要:ファイルの保存場所について

.ticファイルの保存場所は環境により異なります:

  • Windows: %USERPROFILE%\AppData\Roaming\com.nesbox.tic\TIC-80
  • macOS: ~/Library/Application Support/com.nesbox.tic/TIC-80
  • Linux: ~/.local/share/com.nesbox.tic/TIC-80

注意:ファイルを保存した直後は見つからない場合があります。数秒待ってから再度確認してください。

※ ファイルの存在確認はMacでしかできていません。他のOSでは場所が異なる可能性があります。

💡 プロのコツ

VSCodeとTIC-80を並べて表示すると、編集と実行の切り替えがスムーズです!

Windows: Win+←/→ でウィンドウを左右に配置

Mac: 画面上部の緑ボタンを長押しして画面分割

🎯 まとめ

これでVSCodeの準備は完了です!

VSCodeの強力な編集機能を使って、より効率的にTIC-80のゲーム開発を楽しみましょう。