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

はじめに

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

作成 → 実行

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

Terminal

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

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

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

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

（参考記事）

メリット

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

注意点

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

Terminal

npm create vite@latest tsx-vite-app

# プロジェクト名を入力し、テンプレートで "react-ts" を選択

cd tsx-vite-app
npm install
npm run dev

（参考記事）

最後に

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

JISOUのメンバー募集中

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

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