【Vite + React + TypeScript】3分で使えるようになるVite／React／TS入門（2026年版・ビギナー向け）

create-react-appとVite + React & TypeScript

2022年ごろまで、React開発では「create-react-app」を使うのが一般的でした。

「create-react-app」とは、React開発を始めるまでに必要なセットアップをすべて済ませてあるツールです。

「create-react-app」を使うことで、React開発をすぐに始められたのです。

しかし「create-react-app」も登場から長い時間が経っており、それに代わる新しいツールが求められていました。

そこに登場したのが「Vite + React」で、2026年の開発シーンではこれを使うのが一般的です。

本記事では、ビギナー向けに、この「Vite + React」をTypeScriptで使う場合のインストール方法と使い方の初歩を紹介します。

本記事ではTypeScriptを使いますが、JavaScriptを使う場合はこちらの記事を参考にしてください。

なお、本記事の最後では、2026年のフロントエンド学習ロードマップにも触れているので、ぜひ最後まで読んでください。

「Vite + React」について

最初に「Vite + React」を簡単に紹介します。

従来まで使われていた「create-react-app」との最大の違いは、JavaScriptファイルをまとめる仕組みです。

Reactでは大量のJavaScriptファイルが使われています。

そのため、ブラウザでJavaScriptを実行する前に、それらを一度まとめてあげる必要があるのです。

この大量のファイルを束ねるプロセスは「バンドル」、そこで使われるツールは「バンドラー」と呼ばれます。

「create-react-app」では、Webpackというバンドラーが使われていました。

バンドラーにはWebpack以外にも複数ありますが、近年、日本を含め世界的にポピュラーなものがViteになります。

このViteをWebpackの代わりに使ったもの、それが「Vite + React」です。

Viteは処理能力が高いため、Webpackを使っている「create-react-app」と比べ、ファイルの変更をブラウザに反映させるまでの時間や、build実行時の待ち時間が大幅に短くなっています。

【 よりスピーディに、ストレスなく開発を進められる 】

これが「Vite + React」が支持を集める理由のひとつです。

それでは次に、「Vite + React」のインストール方法とbuildについて紹介をしていきます。

使う言語はTypeScriptです。

「Vite + React & TypeScript」のインストール方法

ターミナル上で、「Vite + React & TypeScript」をインストールしたいフォルダに移動します。

ここでは「ダウンロード」フォルダにいるものとします。

そして次のコマンドをターミナルに打ち、「Enter」キーで実行してください。

npm create vite@latest

ここで次のような表示が出ることがありますが、特に問題ではないので、「Enter」キーを押して次に進んでください。

Need to install the following packages:
    create-vite@9.0.4
Ok to proceed? (y) 

これ以降、質問がいくつか出てくるので回答していきましょう。

最初はこのアプリの名前で、これがフォルダの名前に使われます。

◆  Project name:
│  vite-project
└

名前は好きなものが使えます。

ここでは「first-react-app」と書きましょう。

◆  Project name:
│  first-react-app
└

「Enter」キーを押すと次の質問が出ます。

◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

Reactを使った開発をしたいので、キーボードの矢印キーで「React」を選び、「Enter」キーで決定します。

次は、開発言語／フレームワークとして何を使うかを決める質問です。

◆  Select a variant:
│  ● TypeScript
│  ○ TypeScript + React Compiler
│  ○ JavaScript
│  ○ JavaScript + React Compiler
│  ○ RSC
│  ○ React Router v7 ↗ https://reactrouter.com
│  ○ TanStack Router ↗ https://tanstack.com/router
│  ○ RedwoodSDK ↗ https://rwsdk.com
│  ○ Vike ↗ https://vike.dev
└

ここでは「TypeScript」とだけ書かれているものを選び、「Enter」キーを押しましょう。

次はnpmパッケージを一緒にインストールするかを問う質問です。「No」を選び、「Enter」キーを押しましょう。

◆  Install with npm and start now?
│  ○ Yes / ● No
└

次のような表示が出たら、セットアップは完了です。

ダウンロードフォルダを見ると、「first-react-app」フォルダが出来ています。

これをVS Codeで開きましょう（VS Codeにフォルダを直接ドラッグ&ドロップすれば開けます）。

中身は次のようになっています。

「Vite + React」のJavaScript版との主な違いは次の点です。

⚫︎ Reactファイルの拡張子が.jsxではなく.tsxになっている

⚫︎ TypeScriptの設定ファイルtsconfig.app.json、tsconfig.json、tsconfig.node.jsonが追加されている

さて、先ほどの質問「Install with npm and start now?」では「No」を選びました。

なので、最初に「Vite + React & TypeScript」で必要なパッケージをインストールする必要があります。

VS Code上部メニューバーの「Terminal」から「New Terminal」を選び、VS Code下部にターミナルを出してください。

そこに、パッケージをインストールする下記コマンドを打ち、「Enter」で実行しましょう。

npm install

node_modulesが作成されます。これはパッケージ関係のフォルダです。

これで起動コマンドであるnpm run devを実行すると、「Vite + React」のTypeScript版が起動します。

しかし、その前にフォルダ内を整理しましょう。

なお、Reactとよく一緒に名前が挙がるNext.js。

このNext.jsも本記事と同じように3分で使えます。

その方法や、「Vite + React」との使い分けなどについて知りたい方は無料ガイドをご利用ください▼

⚫︎ monotein.com/present

「Vite + React & TypeScript」のクリーンアップ

まっさらな状態で始めたいので、不要なものを削除していきます。

srcフォルダを開き、その中のassetsフォルダ、index.cssを削除してください。

さらにpublicフォルダ内に入っているファイルは、favicon.svg以外はすべて削除しましょう。

次のようになります。

次はApp.cssを開いてください。

コードがすでに書かれているので、すべて消しましょう。

次のようになります。

次はApp.tsxを開き、ここでも同様に、書かれているコードをすべて消しましょう。

そして次のコードを書いてください。

// App.tsx

import './App.css';

function App() {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    );
}

export default App;

クリーンアップの最後がmain.tsxです。

main.tsxを開き、次のコードを消しましょう。

// main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'        // 削除
import App from './App.tsx'
  
createRoot(document.getElementById('root')!).render(
  <StrictMode>  
    <App />
  </StrictMode>,  
)

VS Code上部メニューバーの「File」→「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存しましょう。

これでクリーンアップが完了して、「Vite + React & TypeScript」開発を始める地ならしができました。

（*なおReactファイルでは必ず使われているexport、importは多くのビギナーがミスをするところです。使い分けはこちらの記事をご覧ください。）

次は「Vite + React & TypeScript」を起動させましょう。

ターミナルにnpm run devを打ち、「Enter」で実行すると、次のように表示されます。

次は、指定されているhttp://localhost:5173を開いてみましょう。

次のように表示されます。

VS Codeに戻り、App.tsx内の<h1>タグの文字列を、「さようなら」に変えて保存してみましょう。

ブラウザを見ると、表示も変わっています。

つまりApp.tsxのreturn横のカッコ( )内は、HTMLと同じ要領で編集できることがわかります。

これが「Vite + React & TypeScript」の使い方の初歩の初歩です。

TypeScriptのメリットを体験

TypeScriptならではのメリットを実際に体験しておきましょう。

srcフォルダの中にMessage.tsxというファイルを作ってください。

そこには次のコードを書きます。

// Message.tsx

type MessageProps = {
    text: string;
};

function Message({ text }: MessageProps) {
    return (
        <div>
            <p>{text}</p>
        </div>
    );
}

export default Message;

type MessagePropsの部分がTypeScriptならではの記述です。

「このコンポーネントが受け取るtextは、string（文字列）でなければならない」ということを表しています。

次にApp.tsxを開き、このMessageコンポーネントを読み込みましょう。

// App.tsx

import './App.css';
import Message from './Message';      // 追加

function App() {
    return (
        <div>
            <h1>さようなら</h1>
            <Message text="TypeScriptで開発中"/>      // 追加
        </div>
    );
}

export default App;

保存をしてブラウザを確認しましょう。

この時点では問題なく動きます。

さて現在、textには文字列を渡しています。

なので今度は、文字列ではなく数値を渡してみましょう。

次のように変更してください。

// App.tsx

import './App.css';
import Message from './Message'; 

function App() {
    return (
        <div>
            <h1>さようなら</h1>
            <Message text={12345}/>         // 変更
        </div>
    );
}

export default App;

すると、VS Codeがこの行に赤い波線を表示します。

「textはstring型のはずなのにnumber型が渡されている」というエラーです。

コードを書いている時にVS Codeがエラーを教えてくれるのです。

これが、JavaScriptには無いTypeScriptの大きなメリットのひとつです。

確認できたら、textは元の文字列に戻しておきましょう。

<Message text="TypeScriptで開発中"/>

もうひとつTypeScriptを使うメリットを確認してみましょう。

次のコードを消してください。

// App.tsx

import './App.css';
import Message from './Message'; 

function App() {
    return (
        <div>
            <h1>さようなら</h1>
            <Message text="TypeScriptで開発中"/>       // 削除
        </div>
    );
}

export default App;

現在、Messageはimportで読み込まれていますが、使われてはいません。

この状態でも、手元のパソコンで開発している時はアプリは普通に動きます。

しかし、次項で説明する「build」を実行しようとすると、次のようにエラーが出てbuildが失敗します。

JavaScriptでは未使用のimportがあってもbuildは通ります。

TypeScriptでは、このような不要なコードもbuildの段階で検出されるのです。

確認できたら、削除した <Message text="TypeScriptで開発中"/>を元に戻して次のbuildに進みましょう。

「Vite + React & TypeScript」のbuild方法

開発が完了し、オンラインで公開するときには「build」という作業を行います。

まず、ターミナル上で「control」を押しながら「C」を押して、「Vite + React & TypeScript」を停止させてください。

そして下記buildコマンドを打って、「Enter」キーで実行しましょう。

npm run build

distという新しいフォルダが生成されます。

このdistフォルダをNetlifyなどにアップロードすれば、アプリをオンラインで公開可能です。

よくある質問（FAQ）

Q1. create-react-appはもう使えないのですか？

使えなくはありませんが、2023年春からメンテナンスが止まっています。

2026年現在、新しいプロジェクトで使うことを推奨されていないので、これからReact開発を始めるならVite + React一択です。

なおVite + Reactで作るアプリは、SPA（シングルページ・アプリケーション）と呼ばれるものです。

これはNext.jsアプリとは異なるものなので、違いを理解しておきましょう。

こちらの記事で詳しく解説しています。

Q2. npmとは何ですか？

npmは、Reactなどのライブラリやツールを管理するための仕組みです。

npm installやnpm run devなどのコマンドを使い、開発に必要なものを手元のパソコンに入れたり、アプリを起動したりできます。

Q3. TypeScriptやJavaScriptをまだ学んでいなくても、Vite + Reactは使えますか？

使えます。

HTMLとCSSの知識があればReactの入門は可能です。

TypeScriptやJavaScriptの知識は、Reactに慣れたあとで少しずつ身につけていきましょう。

Q4. フロントエンドの学習はどのように進めていけばいいですか？

フロントエンド開発者として就職をしたり、フリーランス案件を獲得するには、本記事で紹介したVite + Reactだけでは不十分です。

より深いTypeScriptの知識や、Next.jsといったツールのスキルも必須になります。

これまでの私の指導経験をもとに、もっとも効果的に学習を進めていくステップをまとめたロードマップを無料でお配りしています。

下記ページよりご利用ください▼

⚫︎ monotein.com/present