cursorでreact/typescriptにおけるデバック実行環境構築のメモ

目的

現在reactの学習をしているのですが、
cursorでreact/typescriptのデバック環境の構築にかなり手間取ってしまったため
自分用の証跡になります。

方法

①ts-nodeでCLI実行

本項とは直接関係ないですが、
とりあえずコマンドベースでサクッと動作確認したい時のために

②Reactのデバック実行(Google Chrome)

create-react-appでReactのテンプレートを作成し、
cursor上でブレークポイントを使用してデバック実行ができるようにします。

どちらも試してはいないですがvscodeでも可能だと思います。

前提条件

本手順の前提としてcursor(vscode)、node.js、Google Chromeはインストールしておいてください。

実施準備

reactAppプロジェクトを作成し、作業ツリーに移動します。

npx create-react-app プロジェクト名 --template typescript
cd プロジェクト名
code .

①ts-nodeでCLI実行

CLIでtypescriptの実行結果を確認する環境を構築します。
不要の場合は本項を読み飛ばして下さい。

・ts-nodeのインストール

まずはts-nodeをインストールします。

npm install ts-node
ls -F ./node_modules/.bin/ts-node

・ts-nodeの実行

今回の検証用に以下のサンプルファイルを用意します。

src/ts/sample.ts

const str: string = 'Hello World';
console.log(str);

早速ts-codeで実行確認します。

./node_modules/.bin/ts-node src/ts/sample.ts
'sample.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

何やらエラーが発生しています。
シングルファイルでの変換で正しく扱えない可能性のあるコードはダメとのことです。
具体的にいうとimport/exportをしていない（どこにも依存していない）単体で動いているファイルを指します。

今回はtypescriptの実行結果を確認したいだけなので、
tsconfig.jsonの"isolatedModules"の項目をfalseに設定します。

再度ts-nodeを実行します。

./node_modules/.bin/ts-node src/ts/sample.ts
Hello World

※注意
実際のプロダクト開発では単一のファイルで構成されるということは無く、
import/exportがないモジュールは基本的にあり得ないと思われます。
そのため実行結果の確認をしたら"isolatedModules"の項目をtrueに戻すことを強く推奨します。

②Reactのデバック実行(Google Chrome)

アプリケーション実行時にcursor上でブレークポイントを貼ってデバック実行できるようにします。

「tasks.json」「launch.json」の作成

cursor/vscodeの設定は以下のかたの記事が非常にわかりやすいのでそちらをご参考願います。

https://zenn.dev/rhene/articles/setup-vscode-to-react-debug

・デバッグをしてみる

設定が終わったらデバッグしてみます。

src/ts/sample.ts

export default function sample() {
    const str: string = 'Hello World';
    console.log(str);
}

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// add start
import sample from './ts/sample';
sample();
// add end

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

デバッグした結果が以下になります。

ブレークポイントのところで止まっています。うまくいきました。
同じくreact初心者の方の一助となれば幸いです。