はじめに
本記事では、VSCodeを用いたReact・Typescript+Viteによるアプリケーション作成を行うための導入部分を、
非エンジニアでも理解できる、実行できるまでかみ砕いて説明しています。
「自分好みの時計アプリやメモ帳アプリを自作してみたい」「でもやり方を調べても色々あって分からない」
そんな人にオススメなのがVSCodeとReact・Typescript+Viteです。
↑こんな感じのデジタル時計が自作できます。
目次
環境構築の前に…
環境を構築する前に、大まかな解説を行います。
そもそもTypeScriptとは？
JavaScriptに「型（たとえば数字・文字などのデータの種類）」という決まりを追加したプログラミング言語です。
JavaScriptは自由に書ける反面、間違いに気づきにくいという弱点があります。
TypeScriptはその弱点を補い、書いた時点でエラーを教えてくれるため、大きなアプリを作る時に特に役立ちます。
ざっくり言うと、
「間違いを事前に防いでくれる、より安全なJavaScript」 です。
JavaScriptとの違いは？
例えるなら：
JavaScriptは 「自由に書けるメモ書き」
TypeScriptは 「決まりがあって読みやすい公式文書」
のような違いです。
Viteって？
ReactなどのWebアプリを素早く作るためのツール（開発環境）です。
主な特徴：
開発中の画面更新がとても速い
無駄な処理を省いて軽く動く
React＋TypeScriptのプロジェクトをあっという間に作れる
簡単に言うと、
「Webアプリ開発をとにかく快適・高速にしてくれる道具」 です。
環境を構築する
実際に作成するにあたり必要となる「VSCode(Visual Studio Code)」と「Node.js」をインストールしましょう。
インストールに関しては簡潔に記載します。すでにこれらがインストールされている場合はスキップでOKです。
VSCodeをインストール
1.このページから自分が使用している環境にあったものをダウンロードしてインストールしてください。
2.クリック
3.「同意する」をチェックし「次へ」
4.そのまま「次へ」を選択し「インストール」
5.インストール完了したら、「完了」をクリック
Node.jsをインストール
1.Node.jsはこちらからダウンロードしてインストールしましょう。
※画像はWindowsの場合
2.クリック
3.「Next」をクリック
4.「I accept the terms in the Lincense Agreement」にチェックを入れ、「Next」をクリック
5.「Next」をクリック
6.「Install」をクリック
※ユーザーアカウント制御のポップアップが出てきたら「はい」をクリック
7.インストールが完了したら「Finish」をクリック
8.Node.jsが正常にインストールされているか確認する
「スタート」から「cmd」と入力し、コマンドプロンプトを 「管理者として実行」
9.画像のように、
node --version
と入力しEnterで、バージョンが表示されていればOK
同様に
npm --version
と入力しEnterでバージョンが表示されていればOKです
なぜNode.jsのインストールが必要なのか？
そもそも 「Node.js 」とは、JavaScript をパソコンの中で動かすための環境です。
（本来 JavaScript はブラウザの中でしか動きません。）
イメージとしては、
「ブラウザの外でもJavaScriptを動かせるようにするエンジン」 といえます。
React / Vite / TypeScript を使う開発は
「ブラウザだけではできない作業」がたくさんあり、
その作業（変換・最適化・開発サーバーなど）を
パソコン上で実行する環境が Node.js
そのため、開発時だけ Node.js が必須となるわけです。
例えると、
Web開発 = 家を建てる作業
React & TypeScript = 建材
Vite = 工具セット
Node.js = 電源（工具を動かすために必要）
家ができた後、住む人は工具の電源を気にしません。
それと同じように、完成したWebサイトを見る人にはNode.jsは不要です。
VSCodeに拡張機能をインストール
拡張機能のインストールには下記の部分でワード検索を行い、必要なものをインストールしましょう。
※画像では既に日本語化拡張機能を入れているのでUIが日本語になっています。
-
〇Japanese Language Pack for Visual Studio Code
VSCodeのUIを日本語へと変える公式パック
最初に入れておくことで、今後の作業が楽になります -
〇Prettier - Code formatter
コードの自動整形を行うツール
コードの可読性が上がり、バグを減らしやすくなります -
〇ESLint
コードの書き間違いや危険な書き方を警告してくれるツール
書いた瞬間にエラーだと気付くことができるのでとても便利です -
〇ES7 React/Redux/GraphQL/React-Native snippets
Reactのコード入力を高速化する補助ツール
学習においても、本番環境であっても役立ちます
実際にプロジェクトを作成してみる
ここまで完了したら、後は実際にプロジェクトを作成してみましょう。
作成したプロジェクトを格納するため、中に何も入っていない空のフォルダを作成しておきましょう。
プロジェクト作成の手順
1.VSCode左上の「ファイル(F)」をクリックし、「新しいウィンドウ」を選択
2.エクスプローラー(赤枠の箇所)をクリックし「フォルダーを開く」をクリック、先程作成したフォルダを選択
※ここでは「sample」というフォルダを選択しています
3.「このフォルダー内のファイルの作成者を信頼しますか？」というポップアップがでたら
「はい、作成者を信頼します」を選択
4.画面下部にターミナルが表示されているか確認
表示されていない場合、Ctrlキーと＠キーを同時押しするとターミナルが開きます
(赤枠のエリア)
この時、作業ディレクトリが先程作成したフォルダになっているか確認しましょう。
先頭行の末尾が「～(作成したフォルダ名)＞」になっていればOKです。
5.ターミナルにコマンド
npm create vite@latest
を入力
上記コマンドをそのままコピーし貼り付けましょう。
このコマンドは何を意味しているかというと、簡単にいえば
「Webアプリの作成に必要な雛形を自動で作ってくれる」コマンドという認識でOKです。
6.「Ok to proceed? (y)」と表示されるので、キーボードの「y」を入力
7.プロジェクトの名前を入力
画像では日本語で入力している通り、日本語でも大丈夫です。が、
環境に問題が起こる可能性もあるので基本的には英数字を推奨します。
8.パッケージ名を入力
こちらはルールとして「英数字、小文字、スペースなし、特殊記号なし」と決まっています。プロジェクト名が英数字であればプロジェクト名をそのまま小文字にしたものが初期値で出るので、そのままでOKです。
9.矢印キーで操作を行い、「React」を選択しEnter
10.同様に「TypeScript + SWC」を選択
SWCとは？
JavaScriptやTypeScriptのコードを高速に処理するツールです。
Viteの裏側などでも使われています。
11.「Use rolldown-vite（Experimental)?:」と表示されるので、Noを選択
これが何なのかというと、「rolldown-vite」という開発中の機能を使用するかどうかという問いです。yesでも大きな問題があるわけではありませんが、安定した動作のためNoを推奨します。
12.Yesを選択し、インストールを開始
少し時間がかかります
13.この画面が表示されたらインストールは完了
作成したフォルダ内に色々なファイルが作成されています。
表示されたURLに接続してみましょう(http://localhost:5173/)
こんな画面が表示されていればReact開発環境のセットアップは成功です。
PCの設定によっては画面の色が違う場合もあります。
プロジェクトを起動・停止してみる
プロジェクトを停止させる場合はターミナル上でctrlキーとキーボードのcを同時押しします。
再度起動させる場合はディレクトリが対象プロジェクトの入ってあるフォルダであることを確認してからターミナル上で
npm run dev
と入力します。
まとめ
本記事では、React・TypeScript・Vite を使ってアプリを作るための“最初の準備”を分かりやすく紹介しました。ポイントは次の通りです。
- TypeScriptは「間違いに気づきやすい、安全なJavaScript」
- Viteは「アプリをすぐ作れて動作が速い便利ツール」
- VSCodeとNode.jsを入れるだけで、開発できる環境が整う
- コマンド１つでReact＋TypeScriptの雛形プロジェクトを自動作成できる
- 作成したプロジェクトはnpm run devですぐ動かせる
この手順を終えるだけで、自分だけのアプリ作りのスタートラインに立てます。
さいごに
今回は導入部分に照準を合わせて解説を行いました。
作成された src フォルダ内の App.tsx を書き換えて保存するだけで、ブラウザの画面にその変更が即座に反映されます。これが Vite の大きな特徴であり、開発中の確認作業をとてもスムーズにしてくれます。
また、React や TypeScript の書き方にまだ慣れていない場合は、コードの生成や修正を AI に任せてしまうのも十分アリです。まずは動くものをつくり、少しずつ仕組みを理解していく流れで問題ありません。
(自作と書いていましたが、実は記事冒頭のデジタル時計もほとんどAIがコーディングしています)
今回の環境構築を足がかりに、実際の画面づくりや機能追加にもぜひ挑戦してみてください。
こちらの React／TypeScript に関連する記事も、あわせて参考として紹介しておきます。
よろしければぜひご参照ください。