Zenn
💬

[環境構築]WindowsにVSCode+React+TypeScriptの開発環境を構築してみた。

2023/12/30に公開
React
TypeScript
VS Code
tech

Abstract

WindowsでのReactの開発環境の構築手順をなるだけ簡素に。
Ubuntu上の開発環境で、開発してたけど、動きが遅い!! まあ、Virtual Box経由で起動してたんで遅くもなるよね。
なので、windowsでの開発にシフトする。

なんでNode.js？

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

手順

node.jsインストール

node.jsの公式からLTSのWindows Installer (.msi)をダウンロード -> インストールする。

コマンドプロンプト
C:\Users\xxx>node -v
v20.10.0

vscodeインストール

Visual Studio Code公式からWindowsのUser Installerのx64をダウンロード -> インストールする。

vscodeを日本語化しとく

参考 : vscode日本語化

Reactプロジェクト生成

  1. プロジェクトフォルダ作成
  2. Reactプロジェクト雛形生成
  3. EsLintを設定 ... Eslintは、静的解析ツール。
  4. prettierを設定 ... コード整形ツール
  5. eslint-config-prettier を設定 ... Eslintとprettierは喧嘩するから仲立ちするツール

って、これらを実行するんやけど(ココ参照)、正直毎回こんなんやっとれん。
なので、githubの雛形プロジェクトから始める。

コマンドプロンプト
$ d:                         # dドライブ移動
$ cd d:xxx\xxx               # 適当に自分の開発フォルダに移動
$ git clone https://github.com/aaaa1597/React-Ts-Template.git # githubから雛形取得
$ ren React-Ts-Template aaaa # プロジェクト名に変更
$ cd aaaa
$ npm install
$ npm start

で、開発開始～。簡単～!!
あとはVSCodeで開発するなり適当に。

雛形プロジェクトの中身

中身は↓だから。

  1. プロジェクト生成(npx create-react-app ./ --template typescript)
  2. EsLintインストール
  3. prettierインストール
  4. eslint-config-prettierインストール
  5. eslint-config-prettier の設定ファイルを修正
  6. prettierの設定ファイル".prettierrc"を手で作成
  7. VSCodeもlaunch.jsonを生成
  8. prop-typesインストール
  9. ソースコード削除しまくってキレイに。

Ubuntuの時とほとんど変わらん。
windowsの開発でいいじゃん。

Discussion