Webツールの開発を始めるため、Vite、React、TypeScriptを使用した開発環境をVisual Studio Codeで構築します。
ReactやTypeScriptの経験がなくても、最初からすべてを理解する必要はありません。まずは開発環境を起動し、ブラウザに初期画面を表示するところから始めます。
今回使用する技術
今回使用する主な技術は次のとおりです。
- Visual Studio Code：コードを編集する
- Node.js：JavaScript開発に必要な実行環境
- npm：必要なパッケージを管理する
- Vite：Webアプリの開発環境を作成する
- React：画面をコンポーネントとして構築する
- TypeScript：データ型を定義してコードの誤りを減らす
それぞれを個別に学んでから作り始めるのではなく、実際に小さなWebツールを作りながら役割を理解していきます。
Node.jsがインストールされているか確認する
Visual Studio Codeを起動し、上部メニューから「ターミナル」→「新しいターミナル」を選択します。
ターミナルで次のコマンドを実行します。
node -v
npm -v
両方ともバージョン番号が表示されれば、Node.jsとnpmは使用可能です。
表示例は次のとおりです。
v24.14.0
11.9.0
バージョン番号は環境によって異なります。
nodeが認識されない場合は、Node.js公式サイトからLTS版をインストールします。
- Node.js公式サイト：https://nodejs.org/en/download
- Vite公式ガイド：https://vite.dev/guide/
現在のViteでは、Node.js 20.19以上または22.12以上が必要です。新しくインストールする場合は、基本的にNode.jsのLTS版を選択します。
プロジェクトを保存する場所へ移動する
今回は、次のフォルダ内にプロジェクトを作成するものとします。
C:\Users\ユーザー名\projects
Visual Studio Codeのターミナルで、次のように移動します。
cd C:\Users\ユーザー名\projects
ユーザー名の部分は、自分のWindowsユーザー名へ変更します。
React＋TypeScriptプロジェクトを作成する
次のコマンドを実行します。
npm create vite@latest ekplabz-tools -- --template react-ts
このコマンドでは、次の内容を指定しています。
npm create vite@latest：最新のViteを使用してプロジェクトを作成ekplabz-tools：作成するフォルダ名--template react-ts：React＋TypeScriptのテンプレートを使用
実行すると、次のフォルダが自動的に作成されます。
C:\Users\ユーザー名\projects\ekplabz-tools
空のフォルダを事前に手作業で作る必要はありません。Viteが必要なファイルとフォルダをまとめて生成します。
作成されたプロジェクトへ移動する
次のコマンドを実行します。
cd ekplabz-tools
続いて、プロジェクトに必要なパッケージをインストールします。
npm install
npm installを実行すると、package.jsonに記録された依存パッケージがインストールされます。
インストール後には、主に次のような構造が作られます。
ekplabz-tools
├─ node_modules
├─ public
├─ src
├─ index.html
├─ package.json
├─ tsconfig.json
└─ vite.config.ts
主な役割は次のとおりです。
src：ReactやTypeScriptのコードを置くpublic：画像やJSONなどの静的ファイルを置くpackage.json：使用するパッケージやコマンドを管理するtsconfig.json：TypeScriptの設定vite.config.ts：Viteの設定node_modules：インストールされたパッケージ
node_modulesは自動生成されるため、通常は中身を直接編集しません。
開発サーバーを起動する
次のコマンドを実行します。
npm run dev
正常に起動すると、ターミナルに次のようなURLが表示されます。
http://localhost:5173/
Windowsでは、Ctrlキーを押しながらURLをクリックするとブラウザで開けます。
ViteとReactの初期画面が表示されれば、開発環境の構築は完了です。
localhostとは何か
localhostは、自分のパソコン自身を表します。
http://localhost:5173/
は、インターネット上へ公開されたWebサイトではありません。現在使用しているパソコンの中で、一時的に動作している開発用Webサイトです。
コードを編集して保存すると、Viteが変更を検出し、ブラウザの表示へ素早く反映します。
開発サーバーを停止する
開発サーバーを停止するときは、ターミナル上で次のキーを押します。
Ctrl + C
確認を求められた場合は、Yを入力してEnterキーを押します。
再び起動するときは、プロジェクトフォルダで次を実行します。
npm run dev
Visual Studio Codeでプロジェクトを開く
プロジェクトフォルダに移動した状態で、次を実行できます。
code .
.は「現在のフォルダ」を意味します。
または、Visual Studio Codeの「ファイル」→「フォルダーを開く」から、次のフォルダを選択します。
C:\Users\ユーザー名\projects\ekplabz-tools
最初の完成条件
この段階では、ReactやTypeScriptのコードを理解することよりも、次の状態を作ることを優先します。
- Node.jsとnpmのバージョンを確認できる
- Viteでプロジェクトを作成できる
- 必要なパッケージをインストールできる
- 開発サーバーを起動できる
- Reactの初期画面をブラウザで表示できる
- 開発サーバーを停止・再起動できる
ここまで動けば、Webツールを開発する土台ができています。
次の段階
開発環境が動作した後は、次の順序で作業を進めます。
Reactの初期画面を表示
↓
不要なサンプルを削除
↓
tools.jsonを作成
↓
TypeScriptでツール情報の型を定義
↓
Reactでツールカードを作成
↓
tools.jsonからカードを自動生成
最初の実装目標は、ツールの名称や説明をReactやHTMLへ直接書かず、tools.jsonに登録されたデータからツールカードを自動生成するトップページです。
この構造を作ることで、新しい計算ツールを追加するときに画面を一から作り直す必要がなくなります。データを追加することで、トップページへ新しいツールを表示できる基盤へ発展させます。
