ブラウザゲーム試作メモ

はじめに
前提
やったことメモ
- launch.json の作成
- tasks.json の作成
トラブルシュート

はじめに

claude君はArtifactで実行可能なプロトタイプを表示してくれますが、実際に自分の環境で開発するにはどうすればいいのかという点について不勉強だったので、勉強しつつメモ書き。

typescriptおよびreactを使っているっぽいです。

前提

Node.jsはインストール済
ソースも出来上がっている（ビルド確認、実行できることは確認済）

■やりたいこと
VSCode上で作成したソースをデバッグ実行できるようにする

やったことメモ

launch.json の作成

プロジェクトのルートフォルダに.vscodeフォルダを作って、launch.jsonファイルを作成。
これがデバッグ時の起動設定（どのブラウザ、アドレスを開くか等）になる。

下記はEdgeで起動する場合の記述例
urlやwebRoot等を環境に合わせて調整する必要あり。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Microsoft Edge",
            "type": "msedge",
            "request": "launch",
            "url": "http://localhost:3000/games/ten_puzzle",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            },
            "preLaunchTask": "start-next",
            "postDebugTask": "kill-next"
        }
    ]
}

type: ブラウザタイプ（msedge, firefox, chromeなど）
url: アクセスするURL（basePathを含む）
webRoot: ソースコードのルートディレクトリ
preLaunchTask/postDebugTask: デバッグ開始前/終了時のタスク

特にnext.config.jsにベースパスの記述などがあるので、これと合わせてやる必要がある。

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  basePath: '/games/ten_puzzle',  // この行を追加
  assetPrefix: '/games/ten_puzzle/',  // この行を追加
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
}

module.exports = nextConfig

tasks.json の作成

ブラウザゲームを実行するにはローカルサーバの起動が必要になる。
これはデバッグ実行時に、起動して、終了時にローカルサーバを終了するtaskを仕込む例。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "start-next",
            "type": "npm",
            "script": "dev",
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "^$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "- Local:.+",
                    "endsPattern": "- Local:.+"
                }
            },
            "presentation": {
                "reveal": "always",
                "panel": "new"
            }
        },
        {
            "label": "kill-next",
            "type": "shell",
            "command": "echo ${input:terminate}",
            "problemMatcher": []
        }
    ],
    "inputs": [
        {
            "id": "terminate",
            "type": "command",
            "command": "workbench.action.tasks.terminate",
            "args": "terminateAll"
        }
    ]
}

start-next: npm run devを実行するタスク
problemMatcher: サーバー起動の完了を検知
kill-next: デバッグ終了時にサーバーを終了

問題なければ上記設定後、デバッグ実行すると、ブラウザが開き該当のページが表示される。

トラブルシュート

powershell（VSCodeのターミナル）からローカルサーバを起動できない場合

コマンドプロンプトでは npm -vが実行できても powershellで実行できない場合がある。

下記のようなエラーが出る。

npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことが
できません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してくだ
さい。
発生場所 行:1 文字:1
+ npm -v
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

なお、VSCode上では下記のエラーだった。

npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

この場合、下記のコマンドを実行するとnpmコマンドが実行できるようになる.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

localhostの接続が拒否される場合

たぶんローカルサーバが起動していない。

launch.jsonとtasks.jsonが正しく記述されていれば、勝手に起動するはずだが、起動しない場合には下記コマンドで起動することもできる

npm run dev

404が表示される場合

next.config.jsのベースパスの指定と、launch.jsonの起動urlが多分一致していない。

いい感じに合わせる。