こんにちは！ 2年目、フロントエンジニアのH.Rです。 今回は、Vite × React × TypeScriptの開発環境構築ガイドを解説していきたいと思います！！
前提条件
Node.jsがインストールされていることを確認してください。
ターミナルで以下のコマンドを実行し、バージョンが表示されなければ公式サイトからインストールしてください。
node -v
Node.jsインストール手順
環境
- Windows 11
- Node.js v22.16.0
- npm 10.9.2
インストール
1. Windowsを選択し、赤枠をクリックしてインストーラーをダウンロード
2. インストーラーを起動
3.「Next」をクリック
4.「I accept the terms in the License Agreement」にチェックを入れ、「Next」をクリック
5. インストールフォルダーを確認して「Next」をクリック
6. npmが含まれていることを確認し、「Next」をクリック
7.「Next」をクリック
※「Automatically install the necessary tools」にチェックを入れると、ネイティブモジュール（C/C++で書かれたnpmパッケージ）をビルドするためのツールがインストールされる
8.「Install」をクリック
9. インストールが完了したら「Finish」をクリック
Node.jsのインストール確認
- 検索バーに「cmd」と入力して「コマンド プロンプト」を開く
- バージョンの確認
以下のコマンドを入力してEnterキーを押す
node -v
- バージョンが表示されたら、正しくインストールされています！
プロジェクトの作成
プロジェクトの作成
以下のコマンドを実行します。
npm create vite@latest
コマンド実行後、以下の項目を入力または選択してください。
Project name:任意のプロジェクト名を入力Package name:任意のパッケージ名を入力Select a framework:Reactを選択Select a variant:TypeScript + SWCを選択
TypeScript と TypeScript + SWC の違い
TypeScript
標準的な構成です。トランスパイルに
esbuildを使用し、Babelも利用できるため拡張性が高いです。TypeScript + SWC
Rust製の高速トランスパイラ
SWCを使用しています。処理が高速で開発効率が向上しますが、Babelプラグインは基本的に使用できません。
プロジェクトの起動
作成したプロジェクトのフォルダに移動します。以下の cd の後には、先ほど指定したプロジェクト名を入力してください。
cd vite-typeScript-React
依存パッケージをインストール
npm install
開発サーバーを起動
npm run dev
起動後に表示される http://localhost:xxxx/ を CTRL + クリック することで、ブラウザが自動的に開きます。
画像のように表示されたら成功です！！
サーバーの停止方法
ターミナルで q を入力し、エンターキーを押すとサーバーを停止できます。
以上でVite × React × TypeScriptの開発環境構築は完了です。
あとがき
技術ブログを初めて書いてみました。 何を書こうか迷ったけど、最初なので環境構築についてまとめてみました。 これからはフロントエンドの専門的な内容も書いていきたいと思っています！！
KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
