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

生徒

「ReactとTypeScriptを一緒に使いたいんですが、どうやって始めたらいいですか？」

先生

「それなら、Viteを使ってReactとTypeScriptの環境をすぐに作れますよ！」

生徒

「Viteってなんですか？難しそうで不安です……」

先生

「大丈夫です。Viteは初心者にもやさしくて、とても高速なツールです。丁寧に説明しますね！」

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

Reactは、ボタンや入力フォームなどのユーザーインターフェース（画面の見た目）を作るためのJavaScriptライブラリです。一方でTypeScriptは、JavaScriptに「型（かた）」という決まりを追加して、ミスを事前に見つけやすくしてくれる言語です。この2つを組み合わせることで、「見た目を作る力」と「間違いをチェックする力」を同時に手に入れられます。

たとえば、本来は名前を扱う変数には文字列（文字の並び）だけが入ってほしいのに、うっかり数字を入れてしまうことがあります。素のJavaScriptでは実行してみるまで気づけないことが多いですが、TypeScriptならその場で「ここは文字列じゃないとダメだよ」と教えてくれます。これにより、画面が増えたり、ボタンの数が多くなったりしても、見落としによるバグを減らしやすくなります。

イメージしやすいように、プログラミング未経験の人向けに、とても簡単なTypeScriptのサンプルコードを見てみましょう。ここでは「名前を受け取ってあいさつするだけ」の処理です。


function greet(name: string) {
  console.log(`こんにちは、${name}さん`);
}

greet("太郎");     // これはOK（文字列）
/* greet(123); */ // これはエラー（数字なのでTypeScriptが注意してくれる）

上の例では、name: stringという部分で「nameには文字列を入れてね」と約束しています。そのため、greet("太郎")のように文字列を渡すのは問題ありませんが、コメントにしてあるgreet(123)のように数字を渡そうとすると、TypeScriptが「ここは数字じゃなくて文字列が必要です」と教えてくれます。これを型チェックと呼びます。

ReactとTypeScriptを一緒に使うと、この「型チェック」がコンポーネントにも適用されます。たとえば「タイトルを受け取って表示するコンポーネント」や「現在のカウントを受け取るボタン」などで、「ここには数値」「ここには文字列」といった型のルールを決めておけます。ルールから外れた値を渡そうとすると、その場でエラーとして教えてくれるので、画面が複雑になっても原因を追いやすく、安心してReactアプリを作り続けることができます。

2. Viteとは？初心者にもおすすめの理由

Vite（ヴィート）は、ReactやTypeScriptでアプリを作るときに使う「開発用の土台」です。Reactそのものではなく、Reactが動くための開発環境をまとめて用意してくれるツールだと思ってください。面倒な設定を最初から全部自分で書かなくても、Viteがある程度よしなに準備してくれるので、「難しい設定よりも、まずは画面づくりから始めたい」という人にぴったりです。

昔は「webpack」というツールがよく使われていましたが、設定ファイルが長くなりがちで、初心者にはとっつきにくいものでした。また、変更するたびに再読み込みに時間がかかることもありました。Viteはこの「重さ」や「遅さ」を減らすために生まれたツールで、必要なファイルだけを素早く読み込む仕組みになっているため、保存してから画面が反映されるまでの時間がとても短いのが特徴です。

開発中のイメージとしては、Viteの開発サーバーを起動しておけば、あとはファイルを保存するだけでブラウザ側が自動的に更新されます。プログラミング未経験の人でも、「保存 → 画面がすぐ変わる」という短いサイクルで試行錯誤できるので、失敗を恐れずにReactやTypeScriptのコードを書いていけます。


npm run dev
# ローカルサーバーが起動
# ブラウザで画面を開いたまま、ファイルを保存すると
# すぐに最新の状態にリロードされる

このように、Viteは「素早い動作」「シンプルな仕組み」「初心者でも扱いやすい」という特徴をあわせ持ったツールです。つまずきやすい環境構築の負担を減らし、ReactとTypeScriptの学習に集中しやすくしてくれるので、これからフロントエンド開発を始めたい人にも安心しておすすめできます。

3. ViteでReact＋TypeScriptプロジェクトを作成しよう

では、実際にReactとTypeScriptの開発環境を作ってみましょう。以下の手順で進めます。

Node.jsをインストールする（インストール済ならスキップ）
Viteでプロジェクトを作成する
依存パッケージをインストールする
tsconfig.jsonの内容を確認する

Node.jsをインストールしよう

Node.js公式サイトから、LTS（推奨版）を選んでインストールしてください。これはJavaScriptを動かすための土台になります。

Viteでプロジェクトを作ろう

次のコマンドをターミナル（黒い画面）で入力してください：


npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

（ブラウザが自動的に開いて「Vite + React + TypeScript」の画面が表示されます）

4. tsconfig.jsonの内容を確認しよう

tsconfig.jsonは、TypeScriptの設定ファイルです。細かいルールを決めて、コードを安全に保つために使います。Viteで作成したプロジェクトには、すでにこのファイルが含まれています。

主な設定項目を一部抜粋して見てみましょう。


{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "Node"
  }
}

target：どのバージョンのJavaScriptに変換するか（ESNext＝最新）
jsx：React用の書き方（JSX）をどう扱うか
strict：厳しいチェックをするかどうか（trueにすると安全）

これらは最初のうちはそのままでOKですが、必要に応じて少しずつ調整していけます。

5. Vite＋TypeScript環境でReactを書いてみよう

では、実際にApp.tsxというファイルを編集して、簡単なReactアプリを作ってみましょう。


import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        カウントを増やす
      </button>
    </div>
  );
}

export default App;

（「カウント: 0」と表示され、ボタンを押すたびに数値が増えます）

6. React開発に便利な拡張機能とエディタ

プログラムを書くときは、無料で使える「VS Code（Visual Studio Code）」というソフトが便利です。

インストール後、「ESLint」「Prettier」「React Developer Tools」などの拡張機能を入れると、コードのチェックや自動整形ができて効率がアップします。

7. よくある質問：ViteとCreate React Appの違いは？

Reactの公式ツールにcreate-react-app（CRA）というものがありますが、最近ではViteを使う人が増えています。

項目	Vite	Create React App
初期設定	高速・軽量	少し重い
動作速度	開発中のリロードが速い	遅くなりがち
人気	急速に拡大中	今も多く使われている

初心者でも取り組みやすく、学習コストが低いのがViteです。迷ったらViteでOKです。

まとめ

ReactとTypeScriptを組み合わせて開発する環境は、慣れてしまえばとても扱いやすく、学習が進むほど開発の効率やコードの安全性が向上します。今回の記事では、Reactを使った画面構築の基礎に加えて、TypeScriptによる型定義の重要性、そしてViteを使うことで素早く開発環境を整える流れを確認しました。とくに初心者がつまずきやすい環境構築の部分は、手順を整理して理解することで難しくなく取り組めることが実感できたはずです。Node.jsを土台とし、Viteでプロジェクトを作成し、tsconfig.jsonを確認して動作を確かめるという一連の流れは、学習を進めるうえで繰り返し使う基本の工程となります。TypeScriptで型を指定できることで、コンポーネントに渡されるPropsの型が保証され、誤った使い方を事前に防げるのはReactとの相性が非常に良い点です。型定義によって関数の返り値や引数に期待される構造が明確になり、ひとつひとつの処理がより理解しやすくなります。また、Viteは開発中の動作が非常に軽快であり、ページを更新したときの反映も速いため、学習段階でもストレスなく作業を進められることが大きな魅力です。プロジェクトを作成した後、App.tsxを編集するだけで初めての画面が完成し、そこから必要なコンポーネントを増やしたりフォルダ構成を整理したりすることで、自分だけの開発環境が整っていきます。環境構築は単なる準備ではなく、プロジェクト全体の方向性を左右する重要な工程です。今回の内容を振り返りながら、設定ファイルの意味や使っているライブラリの役割を理解していくことで学びが一層深まります。次に触れておきたいのが、ReactとTypeScriptを組み合わせるときのコンポーネントの型定義です。Propsに型を付けることで安全に値を受け渡したり、useStateに型を指定することで予期せぬ値を防げたりと、実践的な場面で効果が見えてくる部分です。以下では実際の開発でもよく使う型付きコンポーネントの例を紹介し、ReactとTypeScriptを組み合わせた際の典型的な書き方を確認していきます。

サンプルプログラム：型定義されたPropsとStateを使ったコンポーネント


import { useState } from "react";

type MessageBoxProps = {
  title: string;
  count: number;
};

function MessageBox({ title, count }: MessageBoxProps) {
  return (
    <div class="card p-3">
      <h3>{title}</h3>
      <p>現在の数値: {count}</p>
    </div>
  );
}

export default function App() {
  const [value, setValue] = useState<number>(0);

  return (
    <div class="container mt-4">
      <MessageBox title="型付きカウント" count={value} />
      <button class="btn btn-primary mt-2" onClick={() => setValue(value + 1)}>
        増やす
      </button>
      <button class="btn btn-secondary mt-2" onClick={() => setValue(0)}>
        リセットする
      </button>
    </div>
  );
}

この例では、MessageBoxコンポーネントにtitleとcountというPropsを渡し、それぞれに明確な型を指定しています。親側ではStateとしてvalueを管理し、useStateにnumberと明示することで、誤って文字列や別の値を代入してしまうミスを防げます。型を指定することで、コンポーネント間のデータの流れが明確になり、予期しない動作を防止しながら安心して開発を進められます。型定義は慣れないうちは書く手間があるように感じられるかもしれませんが、コード量が増えてくるほど効果が大きくなり、長く続くプロジェクトでも読みやすさと安全性を保てるのが大きな利点です。さらに、今回触れたtsconfig.jsonはTypeScript全体に影響する設定ファイルであり、Reactを動かすだけではなく、厳密な型チェックやコード解析ルールなどを制御する役割も持っています。「strict」をtrueにすることで厳しめのチェックが働き、エラーを早い段階で発見できます。最初は少し不便に感じるかもしれませんが、より安全なコードを書くための大切な設定です。設定を理解して少しずつ調整することで、自分に合った開発環境ができあがります。 TypeScriptを採用するメリットの中でも特に大きいのは、チーム開発での強さです。関数の引数や戻り値、Propsの型定義などが明確になることで、意図を共有しやすくなり、役割分担もスムーズに進められます。コメントを残さなくてもコード自体が情報を示すようになり、後からコードを読んだときにも理解しやすくなります。ひとりで学習を進めている段階でも、自分の過去のコードを読み返したときに、何を意図した処理なのか思い出しやすくなるという利点があります。 Viteは高速に動作し、環境構築も簡単なため、ReactとTypeScriptの入り口としてとても相性が良い選択です。プロジェクトが大きくなり、SSRやルーティング、データフェッチなどが必要になってきたときには、Next.jsやReact Router、SWRやTanStack Queryなどのツールを組み合わせてステップアップしていくことができます。基礎を固めることが次の学習につながるため、今回の内容をベースに小さなアプリを作りながら理解を深めていきましょう。

先生と生徒の振り返り会話

生徒

「ReactとTypeScriptの組み合わせが思っていたよりも扱いやすいと感じました。型をつけることで、どんな値が渡ってくるのか分かりやすくなったと思います。」

先生

「その気づきはとても大切ですね。型があるとエラーを早く発見できたり、コンポーネント同士の関係も整理しやすくなります。特に複雑な画面になるほど効果が表れますよ。」

生徒

「Viteの環境構築も想像より簡単でした。今度は実際に自分のアプリを作ってみて、型定義や設定ファイルも確認しながら理解したいです。」

先生

「実践しながら学ぶ方法はとても良いです。設定ファイルを少しずつ調整しながら、より自分に合った開発環境を作っていきましょう。小さなプロジェクトでも積み重ねることで確実に成長できますよ。」