Typescript✖️Reactのプロジェクトを作成する

はじめに

TypeScriptを学習しよう！と思い立ったものの、プロジェクトを１から作成するのは面倒・・・
そこで、開発環境を整えてくれる便利なツールを使って、効率的に学習を進める方法を備忘録としてまとめます。

作成 → 実行

以下のコマンドをローカル上の任意のディレクトリで実行することで、簡単にプロジェクトの作成から実行まで行えます。

Terminal

# TypeScriptを使用したプロジェクト(tsx-app)を作成
npx create-react-app tsx-app --template typescript

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm run start

コマンドの説明としてはこちらが分かりやすかったです。

（参考記事）

メリット

create-react-appコマンドを利用することで、WebpackやBabelなどの面倒な設定を自動で行ってくれるため、簡単にReactプロジェクトを始めらます。

注意点

しかし、なんと、このcreate-react-appは非推奨らしい。
現在はViteが主流。
とのことで、これからはviteを使用したプロジェクトを作成した方が良いとのこと。

githubディレクトリで実行。

Terminal

# 以下を入力してEnter
npm create vite@latest tsx-vite-app

# 成功すると、viteの最新バージョンが表示される。
Need to install the following packages:
create-vite@6.0.1
# yを入力してEnter
Ok to proceed? (y) y

> npx
> create-vite tsx-vite-app

# Reactを選択してEnter
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

✔ Select a framework: › React
# TypeScriptを選択してEnter
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

# 下記内容が表示されていれば作成完了！
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/{ユーザ名}/github/tsx-vite-app...

Done. Now run:

  cd tsx-vite-app
  npm install
  npm run dev

（参考記事）

最後に

１からTypeScriptとReactを使用したプロジェクトを作成しようとすると、package.jsonやtsconfig.jsonなどの設定ファイルを編集する必要があります。
しかし、学習目的であれば create-react-app や Viteを使うことで環境設定の手間を省くことができ、効率的に学習を進められると思います！

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからお願いします👇