<aside> 🌿 自分で一から構築したい場合は以下を参考に進めよう！ ReactやNext.jsにTypeScriptを導入したい場合は、各ドキュメントやまとめ記事を参考にやってみよう！（実際にやったら手順書作成してね）

</aside>

【React × TypeScriptの環境構築の場合】

以下を参照のこと

環境構築【create-react-app / React × TypeScript】＆Sass設定＆GitHub登録

0. Node環境の構築

<aside> 🌿 インストール済みなら飛ばしてOK！

</aside>

1. ターミナルを開き、node -v コマンドを実行する

   バージョンが出てきたらインストール済みなのでTypeScript環境の構築 に進んでOK

   出てこなければ2. に進む

• 2. 以降の手順【Nodeのインストール】

1. TypeScript環境の構築

1. ターミナルを開き、cdで該当フォルダまで移動する

   <aside> 🌿 私の場合 案件 → clientFolder 個人開発 → IdeaProjects か ReactAppFiles

   </aside>

2. mkdir フォルダ名 コマンドで新規フォルダを作成するか、あらかじめ新規フォルダを作成しておく

   作成したらまた cd で作成したフォルダに移動する

3. npm init コマンドでnpmの初期化をおこなう

   このとき、色々と設定について聞かれるが、一旦全てYes（Enter）でOK

   設定が完了すると、フォルダ内にpackage.jsonが出来ているはず

4. VSCodeで該当フォルダ＆ターミナルを開く

5. 以下コマンドを実行し、各パッケージをインストールする

   完了したらpackage.jsonを開き、パッケージ名が全て記述されているか確認しておこう

   npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
   

   • インストールパッケージ一覧

   <aside> 🌿 全て開発環境でのみ使用するので、--save-dev にしているよ！ 本番でも使うパッケージの場合は--save

   </aside>

2. Webpackの設定

1. ルート直下に「webpack.config.js」ファイルを作成する

   <aside> ⚠️ ファイル名は必ずこの名前にすること！

   </aside>

   

   ▼コピペ用

   webpack.config.js
   

Webpackの各種設定

<aside> 🌿 webpackの設定内容まとめは以下に記載

• 設定内容まとめ </aside>

1. ファイル内にファイル設定の宣言を記述する

   module.exports = {};