Reactの開発において、VSCodeを使いやすくするプラグインと環境構築の方法について説明します。
プラグイン
- ESLint
- コードの品質とコーディングスタイルをチェックできます。
- Prettier
- コードフォーマッターで、自動的に整形してくれます。
- Auto Import
- インポート文の自動生成と整理をサポートします。
- Bracket Pair Colorizer
- 対応するカッコを色分けして、見やすくなります。
- Path Intellisense
- ファイルパスの補完を行ってくれます。
- npm Intellisense
import文でインストール済みのnpmモジュールの入力補完を提供します。
環境構築
Node.jsのインストール
React開発に必要な最初のステップは、Node.jsをインストールすることです。
Node.JS公式サイト https://nodejs.org/ja からダウンロードしてください。
Create React Appの使用
Reactアプリケーションの作成には、「Create React App」を使用して、アプリケーションのベースを構築することができます。
コマンドプロンプトまたはターミナルで以下のコマンドを実行して、Create React Appをグローバルにインストールしてください。
npm install -g create-react-app
次に、以下のコマンドを実行して、新しいReactプロジェクトを作成します（my-app 部分は任意の名前に変更できます）。
create-react-app my-app
開発サーバーの起動
プロジェクトフォルダに移動し、以下のコマンドを実行して開発サーバーを起動します。
cd my-app
npm start
ブラウザで http://localhost:3000 を開くと、Reactアプリケーションが表示されます。
これで、VSCodeでReactの開発ができる環境が整いました。
Vite の使用
Viteを使用してReactアプリケーションを作成する方法を説明します。
Viteプロジェクトの作成
次に、Viteを使って新しいReactプロジェクトを作成します。ターミナルで以下のコマンドを実行してください（my-vite-app 部分は任意の名前に変更できます）。
npm init vite my-vite-app --template react
このコマンドで my-vite-app という名前のディレクトリが作成され、Viteの設定が含まれたReactプロジェクトが生成されます。
依存関係のインストール
プロジェクトフォルダに移動し、依存関係をインストールします。
cd my-vite-app
npm install
開発サーバーの起動
以下のコマンドを実行して開発サーバーを起動します。
npm run dev
ブラウザで http://localhost:3000 を開くと、Reactアプリケーションが表示されます。