Zenn
👻

[環境構築]Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。

2023/12/02に公開
Node.js
React
TypeScript
VS Code
Ubuntu 22.04
tech

Abstract

Reactの開発環境の構築手順をなるだけ簡素に。
Next.jsがいいのかReactがいいのか迷ったけど、Next.jsやるにも、Reactの事を理解してたほうがいいらしいので、Reactを選んだ。

なんでNode.js？

簡素にって言いつつ、どうしても疑問が発生して。Reactの開発環境を作りたいのになんで、なんでNode.jsが出てくるのか？
答えは、Node.jsでJavaScriptを実行するから。とにかく、React開発するならNode.jsは必須ってことで理解した。

前提

手順

Reactプロジェクト生成

  1. プロジェクトフォルダ作成
  2. Reactプロジェクト雛形生成
  3. EsLintを設定 ... Eslintは、静的解析ツール。
  4. prettierを設定 ... コード整形ツール
  5. eslint-config-prettier を設定 ... Eslintとprettierは喧嘩するから仲立ちするツール
Reactプロジェクト生成
$ cd ~ && mkdir test-react && cd test-react               # プロジェクトフォルダ作成
$ npx create-react-app react-hello --template typescript  # Reactプロジェクト雛形生成
#### npx create-react-app ./ --template typescript        # ← カレントフォルダをプロジェクト名にする方法
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
～ 略 ～
Happy hacking!
npm notice 
npm notice New patch version of npm available! 10.2.3 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice 
# ↑Happy hacking!が表示されればOK.

$ npm init -y                                             # EsLintの準備
$ npx eslint --init                                       # EsLintを設定
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems      # problemsを選択
✔ What type of modules does your project use? · esm # esmを選択
✔ Which framework does your project use? · react    # reactを選択
✔ Does your project use TypeScript? · No / Yes      # Yesを選択
✔ Where does your code run? · browser               # browserを選択
✔ What format do you want your config file to be in? · JavaScript # JavaScriptを選択
～ 略 ～
found 0 vulnerabilities
Successfully created .eslintrc.js file in /home/jun/test-react
# ↑Successfully...が表示されればOK.

$ npm install --save-dev --save-exact prettier            # prettierを設定
$ npm install --save-dev eslint-config-prettier           # eslint-config-prettier を設定

eslint-config-prettier の設定ファイルを修正

.eslintrc.json
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
+       "prettier"
    ],

prettierの設定ファイル".prettierrc"を手で作成

.prettierrc生成
$ vi .prettierrc
.prettierrc
+{
+  semi : true,
+}

Chromeでデバッグするので、インストールする

.prettierrc生成
$ cd ~ && mkdir tmp-chrome && cd tmp-chrome
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ ls -l
-rw-rw-r-- 1 jun jun 103858352 11月 28 06:51 google-chrome-stable_current_amd64.deb
$ sudo chmod 775 google-chrome-stable_current_amd64.deb
$ sudo apt install -y ./google-chrome-stable_current_amd64.deb
～ 略 ～
N: ファイル '/home/jun/tmp-chrome/google-chrome-stable_current_amd64.deb' がユーザ '_apt' からアクセスできないため、ダウンロードは root でサンドボックスを通さずに行われます。 - pkgAcquire::Run (13: 許可がありません)
### ↑変なメッセージが出力されたけど、インストールは成功してた。
$ rm -rf ~/tmp-chrome  # 後片付け。インストールファイルは不要なので削除


Chrome起動も出来た!!

VSCodeのデバッグ設定

VSCodeでデバッグを行うために、構成ファイルを作成する。

構成ファイルの新規作成

~/test-reactのフォルダをVSCodeで開く。1

↓
実行 → 構成の追加

↓
Chromeを選択。

↓
launch.jsonが開く。

launch.jsonを修正

launch.json
{
-   // IntelliSense を使用して利用可能な属性を学べます。
-   // 既存の属性の説明をホバーして表示します。
-   // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
-           "url": "http://localhost:8080",
+           "url": "http://localhost:3000",
-           "webRoot": "${workspaceFolder}"
+           "webRoot": "${workspaceFolder}",
+           "sourceMaps": true,
+           "sourceMapPathOverrides": {
+               "webpack:///./*": "${webRoot}/src/*"
+           },
        }
    ]
}

prop-typesをインストール

TypeScriptでコーディングするとかなり早い段階で、パラメータチェックエラーに悩むと思われ。その時、インストールが必要になるので、もうこの段階でインストールしとく。

.prop-typesインストール
$ cd ~/test-react
$ npm install --save-dev prop-types

デバッグ実行

デバッグ準備1

作成したプロジェクトを開いて、ブレークポイントを張っておく。
App.tsx → 6行目付近にブレークポイント。

デバッグ準備2

デバッグ前に、Terminalから、"npm start"を実行。

↓
プロジェクト作成時、下記コマンド打ったから、"cd react-hello"で移動する。

  • npx create-react-app react-hello --template typescript
移動 -> npm start
$ cd ~/react-hello
$ npm start

Compiled successfully!がでたら、デバッグ開始できるようになる。
先にChromeが立ち上がる時があるので、その時はそのChromeは、いったん閉じる。

↓

↓
止まった!!

↓
無事動作している!!

終了

終了するときは、Ctrl+Cで終了して、表示し続けているChromeを閉じればいい。

Ctrl+Cを押下。→ Yでエンター で終了。
Chromeは開いたままなので、自分でCloseする。

Discussion