TypeScript + React 開発環境構築ガイド！ViteとCRAで初心者でも簡単に始める方法

TypeScript + React の開発環境構築（Vite/CRA対応）

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptを使ってReactの開発を始めたいのですが、準備が難しそうで不安です。初心者でも簡単に環境を作る方法はありますか？」

先生

「大丈夫ですよ！最近はVite（ヴィート）というとても便利なツールがあって、初心者の方でも数分で開発の準備を整えることができます。」

生徒

「Viteですね。以前よく聞いたCRA（Create React App）とは違うのでしょうか？」

先生

「良い視点です。現在はViteが主流ですが、どちらの使い方も知っておくと安心です。それでは、TypeScriptとReactの開発環境を構築する手順を丁寧に解説していきますね！」

1. TypeScriptとReactを組み合わせる理由とは？

プログラミングを始めたばかりの方が、なぜ「TypeScript」と「React」を一緒に使うのか疑問に思うのは当然のことです。まず、React（リアクト）とは、画面の見た目や動きを効率よく作るための道具箱のようなものです。一方でTypeScript（タイプスクリプト）は、JavaScriptという言語に「型」というルールを追加したものです。

「型」というのは、料理に例えると「材料の指定」に似ています。例えば、カレーを作るときに「野菜を入れる」という大雑把な指示ではなく、「人参とジャガイモを入れる」と明確に決めることで、間違えてリンゴを入れてしまうようなミスを防ぐことができます。プログラミングでも、数字を入れる場所に文字を入れてしまうといったミスを、TypeScriptが事前に「それは間違いですよ」と教えてくれるのです。

この二つを組み合わせることで、エラーの少ない、安全で高品質なWebサイトを作ることができるようになります。特に現代のフロントエンド開発（ユーザーの目に見える部分を作る仕事）では、この組み合わせが標準的なスキルとなっています。

2. 開発に必要なNode.jsをインストールしよう

環境構築を始める前に、あなたのパソコンに「Node.js（ノード・ジェーエス）」というソフトウェアを入れる必要があります。これは、TypeScriptやReactを動かすための土台となるエンジンです。パソコンを動かすためのガソリンのようなものだと考えてください。

Node.jsをインストールすると、一緒に「npm」というツールも使えるようになります。これは、世界中の便利なプログラムを自分のパソコンに取り込むための「お買い物カート」のような役割を果たします。これを使って、ReactやTypeScriptをダウンロードしていくことになります。

公式サイトから「LTS（推奨版）」と書かれている方をダウンロードして、画面の指示に従ってインストールを進めてください。インストールが完了したら、コマンドプロンプトやターミナルという黒い画面を開いて、下記のコマンドを入力して確認してみましょう。


node -v
npm -v

数字が表示されれば、準備は完了です。これであなたのパソコンはプログラムを書くための第一歩を踏み出しました。

3. 次世代ツールViteでプロジェクトを作成する

現在、最も推奨されている開発環境の構築方法はVite（ヴィート）を使う方法です。フランス語で「速い」という意味を持つこのツールは、その名の通り動作が非常に軽快で、開発中の待ち時間がほとんどありません。初心者が学習をスムーズに進めるためにも、Viteは最適な選択肢です。

プロジェクトを作りたいフォルダに移動して、以下のコマンドを入力します。今回は「my-app」という名前のフォルダを作りますが、名前は自由に変えられます。ただし、英語の小文字を使うのが一般的です。


npm create vite@latest my-app -- --template react-ts

このコマンドを実行すると、一瞬でたくさんのファイルが作成されます。次に、作成されたフォルダに入って、必要な部品をダウンロードします。


cd my-app
npm install
npm run dev

「Local: http://localhost:5173/」のようなURLが表示されたら、ブラウザでそのアドレスを開いてみてください。Reactのロゴが回転している画面が表示されれば、TypeScript環境の構築は成功です！

4. TypeScriptでのコンポーネント作成に挑戦

環境ができたら、実際にTypeScriptを使ってReactの部品（コンポーネント）を作ってみましょう。Reactでは、画面のパーツを一つひとつ独立させて作っていきます。これを「コンポーネント」と呼びます。例えば、ボタンや入力欄、ヘッダーなどがそれぞれコンポーネントになります。

TypeScriptを使う場合、ファイルの拡張子は「.tsx」になります。これは「TypeScript + Reactの構文」という意味です。簡単な挨拶を表示するコンポーネントを書いてみましょう。以下のコードは、名前を受け取って挨拶を表示する仕組みです。


type GreetingProps = {
    name: string;
};

const Greeting = ({ name }: GreetingProps) => {
    return (
        <div>
            <h1>こんにちは、{name}さん！</h1>
            <p>TypeScriptの世界へようこそ。</p>
        </div>
    );
};

export default Greeting;

ここで登場したtype GreetingPropsという部分が、TypeScriptならではの「型定義」です。nameというデータは必ず「文字（string）」ですよ、と指定しています。これにより、間違って数字を渡そうとするとエラーが出るようになり、バグを未然に防いでくれます。

5. Create React App（CRA）による構築方法

次に、以前から広く使われてきたCreate React App（通称：CRA）という方法についても解説します。現在はViteが主流ですが、古いプロジェクトの修正や、特定の学習教材ではCRAが使われていることがよくあります。知識として知っておくことは非常に大切です。

CRAでTypeScript環境を作るには、以下のコマンドを使います。


npx create-react-app my-old-app --template typescript

この方法は、設定がすべて自動で行われるため非常に楽ですが、プロジェクトの規模が大きくなると起動が遅くなるという欠点があります。また、最近は公式でもViteなどの新しいツールを推奨しています。もし自分で新しく学習を始めるなら、基本的にはViteを選べば間違いありません。しかし、現場ではCRAで作られたシステムも多いため、このコマンドを覚えておくと「あ、これ知ってる！」と自信に繋がります。

6. TypeScriptプロジェクトのフォルダ構成を理解する

環境構築が終わると、フォルダの中にたくさんのファイルが並んでいます。初めて見ると「何これ？」と圧倒されてしまうかもしれませんが、重要なのは数個だけです。初心者の方がまず覚えるべきファイルを紹介します。

srcフォルダ： ここがメインの作業場です。あなたが書くプログラムはすべてこの中に入れます。
main.tsx： プログラムが一番最初に読み込まれる玄関口です。
App.tsx： 最初に表示される画面の中身が書いてある場所です。
tsconfig.json： TypeScriptの細かいルールを決める設定ファイルです。

例えば、画面を書き換えたいときは、まずApp.tsxを開いてみましょう。そこに書かれている文字を書き換えて保存すると、ブラウザの画面がリアルタイムで更新されます。この「保存したらすぐに反映される」という仕組みを、プログラミング用語で「ホットリロード」と呼びます。これがあるおかげで、サクサクと楽しく開発を進めることができるのです。

7. useStateを使った簡単なカウンター機能の作成

Reactで最もよく使う機能の一つに「状態（ステート）」があります。これは、画面上で変化するデータを管理する仕組みです。例えば、ボタンを押したら数字が増えるカウンターを作ってみましょう。TypeScriptを使うと、この数字が「数値型」であることを保証できます。


import { useState } from 'react';

const Counter = () => {
    // 状態の型をnumber（数値）として定義します
    const [count, setCount] = useState<number>(0);

    return (
        <div>
            <p>現在の数値：{count}</p>
            <button onClick={() => setCount(count + 1)}>
                数値を増やす
            </button>
        </div>
    );
};

export default Counter;

上記のコードで、useState<number>(0)という書き方をしています。これにより、このcountという変数には数字しか入れられないというルールができます。もし誤って文字を入れようとすると、開発ツールがすぐに警告を出してくれます。これが、TypeScriptが「親切な先生」と言われる理由の一つです。

8. エラーが出たときの対処法とデバッグの基本

開発環境を構築しているときやコードを書いているとき、必ずと言っていいほど赤い文字の「エラーメッセージ」に遭遇します。初心者のうちは焦ってしまうかもしれませんが、実はエラーは「ここを直せば動くよ」というプログラムからのアドバイスです。怖がる必要はありません。

TypeScriptを使っていると、エディタ（VSCodeなど）上で間違った部分に「波線」が引かれます。そこにマウスを合わせると、何が悪いのか説明が出てきます。例えば、「Property 'name' does not exist」と出たら、「nameという項目が見つからないよ」という意味です。スペルミスがないか、定義を忘れていないかを確認しましょう。

また、ブラウザの「開発者ツール」も強力な味方です。ブラウザ上で右クリックをして「検証」を選び、「コンソール（Console）」タブを見てください。ここに表示されるエラーを読むことで、プログラムのどこで問題が起きているのかを突き止めることができます。エラーを一つひとつ解決していく過程こそが、プログラミングの上達において最も重要なステップです。

9. VSCodeでTypeScript開発を快適にする設定

最後に、プログラミングを書くための専用メモ帳である「VSCode（Visual Studio Code）」の設定についてお話しします。TypeScriptやReactの開発を驚くほど楽にする拡張機能があります。環境構築の一環として、以下のものを入れておくことを強くおすすめします。

まず必須なのが「ESLint」と「Prettier」です。これらは、コードの書き間違いを見つけてくれたり、ぐちゃぐちゃになったコードをボタン一つで綺麗に整列させてくれたりします。初心者のうちは、コードの書き方のルール（インデントやスペースの空け方など）に慣れていないため、自動で修正してくれるツールは非常に心強い存在です。

また、TypeScriptはVSCodeと同じマイクロソフト社が開発しているため、相性が抜群です。コードを少し書くだけで「次に書きたいのはこれですか？」と予測候補を出してくれる機能（入力補完）が非常に強力です。これらを使いこなすことで、タイプミスを減らし、より本質的な「どういう仕組みを作るか」という部分に集中できるようになります。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。