[React.js] - パート1: Vite、Yarn、TypeScript + SWCを使用して最適なパフォーマンスのReactJSプロジェクトを作成
Ace Lennox
KickstartするReactJSプロジェクト：Vite、Yarn、TypeScript + SWCで超高速ビルドと型安全なコードを実現。このセットアップにより、スムーズな開発体験、より速いコンパイル、優れた保守性が保証され、小規模から大規模なアプリケーションに最適です！
ステップ 1: Node.jsとYarnをインストール
Node.jsをインストール
Node.jsバージョン14.18以上がインストールされていることを確認してください。Node.js公式サイトからダウンロードできます。Yarnをインストール
次のコマンドを実行してYarnをグローバルにインストールします:
npm install --global yarn インストール確認
Yarnが正しくインストールされたかどうかを確認するためにバージョンをチェックします：
yarn --versionステップ 2: Viteを使用して新しいReactJSプロジェクトを作成
ターミナルを開き、次のコマンドを実行します：
yarn create viteプロジェクト名の入力を求められたら、任意の名前（例：
my-react-app）を入力し、Enterキーを押します。次に、フレームワークの選択を求められたら、矢印キーを使って「React」を選択し、Enterキーを押します。
バリアントを選択するよう求められたら、「TypeScript + SWC」を選択します。この選択は以下の理由から推奨されます：
TypeScript + SWCを選ぶ理由
TypeScriptはプロジェクトに静的型付けを追加し、開発中のエラー検出を容易にし、特に大規模プロジェクトの保守性を向上させます。
SWC（Speedy Web Compiler）は非常に高速なJavaScriptおよびTypeScriptコンパイラで、デフォルトのTypeScriptコンパイラに比べてビルド時間を大幅に短縮します。
TypeScriptとSWCを組み合わせることで、型安全性と高速ビルドの両方を享受でき、効率的な開発体験が可能になります。
ステップ 3: プロジェクトフォルダに移動
プロジェクトが作成されたら、次のコマンドでプロジェクトディレクトリに移動します：
cd my-react-appステップ 4: 依存関係をインストール
次のコマンドを実行して必要な依存関係をすべてインストールします：
yarnステップ 5: 開発サーバーを起動
依存関係をインストールした後、次のコマンドでVite開発サーバーを起動します：
yarn dev 以下のような出力が表示されます：
VITE vX.X.X ready in X ms
➜ Local: http://localhost:5173/
➜ Network: use --host to exposeブラウザでhttp://localhost:5173/にアクセスして、Reactアプリケーションが実行されていることを確認してください。
ステップ 6: コードエディタでプロジェクトを開く
Visual Studio Codeやお好みのエディタでプロジェクトフォルダを開き、srcディレクトリ内のファイルを編集できます：
src/main.tsx：Reactアプリケーションのエントリポイントです。src/App.tsx：アプリケーションのメインコンポーネントです。ここからアプリケーションの構築を開始できます。
ステップ 7: 本番ビルド
アプリケーションのデプロイ準備ができたら、次のコマンドを実行して本番ビルドを行います：
yarn build distフォルダ内に最適化されたビルドが作成されます。
ステップ 8: 本番ビルドをプレビュー
ローカルで本番ビルドをプレビューするには、次のコマンドを実行します：
yarn previewこれにより、ビルド済みファイルを提供するローカルサーバーが起動します。
なぜViteとTypeScript + SWC、Yarnを使用するのか？
高速な開発
Viteは効率的なモジュールハンドリングシステムにより、超高速な開発サーバーとして知られています。TypeScript + SWCによる高パフォーマンス
TypeScriptは静的型チェックを追加することでコード品質を向上させ、プロジェクトの保守を容易にします。
SWCはデフォルトのTypeScriptコンパイラよりも大規模プロジェクトで特に高速にコンパイルできます。
Yarnによる依存関係管理
Yarnは依存関係の処理が速く、特にモノレポや複雑な依存関係を持つプロジェクトでは信頼性が高いです。
結論
このガイドに従い、TypeScript + SWCを選択することで、高速ビルドと高いコード信頼性を備えたモダンなReactJSプロジェクトをセットアップできます。このセットアップは、小規模から大規模なアプリケーションに最適で、スムーズな開発ワークフローと将来の保守の容易さを保証します。
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。