React Typescript Vite を始める：新しいプロジェクト、サンプル、フォルダ構造
React プロジェクトを開始する方法はたくさんある。 この記事では、最新のビルドツール Vite を使って新しい React Typescript プロジェクトを作成する方法を説明する。
1. 使用しているツールとそのバージョンを確認する
今回のプロジェクトでは、Node.js 環境、pnpm パッケージマネージャ、vite ビルドツールを使用します。 MacOSで作業しますが、Windowsでも動作するはずです。
2. viteで新規プロジェクトを作成する
vite はどのパッケージマネージャでも create コマンドをサポートしています。
そのため、以下のコマンドを実行することで、グローバルインストールなしで新しいプロジェクトを作成することができます。
- npmを使用している場合は、
npm create vite@latest。 - yarnを使用している場合は、
yarn create vite。 - pnpmを使用している場合は、
pnpm create vite。
コマンドを入力すると、プロジェクト名、使用するライブラリ、使用する言語について段階的にプロンプトが表示されます。 それぞれの質問に選択肢を入力すると、対応するテンプレートに基づいて新しいプロジェクトが作成されます。
最初にプロジェクト名を入力し
ライブラリのリストから react を選択します、
言語として Typescript + SWC を選択する(Babelを使用する必要がある場合は Typescript を選択する) これで新しいプロジェクトが作成される。
SWCはRustで書かれた最新のJS/TS開発ツールで、これまでReactの開発を担っていたBabelよりも20倍から70倍速くコンパイルできると言われている。 他にもWebAssemblyのサポートやJestのパフォーマンス向上など、いくつかの利点がある。
作成したプロジェクトをVScodeで開く。フォルダ構造は以下のようになります。
次に、[package_manager_name] installコマンドを入力して、package.jsonに書かれている依存パッケージをインストールする。インストールが完了すると、以下のような画面が表示されるはずだ。
結果を実行します：
バージョンアップ可能なパッケージがあれば、上記のように最新バージョンにアップグレードしてください。
- npmを使用している場合は、
npm updateを実行します。 - yarnを使用している場合は、
yarn upgradeを実行します。 - pnpmの場合は
pnpm upgradeを実行する。
実行結果：
最後に、[package_manager_name] run devコマンドでvite開発サーバを実行します。
結果を実行します：
このURLにブラウザでアクセスすると、サンプルページが表示されます。
これで基本的なプロジェクトができました！
3. テンプレートに含まれるディレクトリとファイルの説明
テンプレートからプロジェクトを作成すると、いくつかのディレクトリとファイルがすでに作成されていることに気づくでしょう。 このため、ゼロから作成する手間が省けます。 しかし、開発を続けるためには、それぞれが何をするのかを理解することが重要です。
3.1. パッケージ
-
node_modules/: このプロジェクトで使用するすべての依存パッケージがインストールされているディレクトリです。 -
package.json: プロジェクトの名前、バージョン、モジュールの種類、コマンド、使用する依存パッケージのリストなどの情報を含む基本設定ファイル。
3.2. ウェブアプリケーション関連
-
src/: Web アプリケーションを構成する.tsxファイルを含むすべてのソースコードを含むディレクトリである。 -
public/: 画像やフォントなど、Web アプリケーションで使用するすべての静的ファイルを格納するディレクトリである。 -
dist/:[package_manager_name] run buildコマンドでビルドを実行したときに作成されるディレクトリである。コンパイルやバンドルなどを行った後、実際にデプロイ可能なファイルはここに配置される。 -
index.html: Web アプリケーションのベースとなる.htmlファイル。ビルドしたReactアプリケーションは、このファイルを通してレンダリングされる。
3.3. 設定ファイル
-
.gitignore： Git が除外するプロジェクト内のディレクトリとファイルのリストです。ソースコードと特定の設定ファイルを除いて、ほとんどのファイルはバージョン管理する必要がありません。 -
package-lock.json、yarn.lock、pnpm-lock.yaml： 各パッケージマネージャーのロックファイル。これらのファイルは、インストールしたパッケージと依存するパッケージの正確なインストールバージョンを追跡し、プロジェクトの全員が同じ環境で開発できるようにします。 -
tsconfig.json： TSコンパイラの設定ファイルで、コンパイルするJSのバージョンやコンパイルするディレクトリなど、様々な設定を行います。主にブラウザで動作する.tsファイルを対象とする。 -
tsconfig-node.json: 主にNode.jsランタイムで動作する.tsファイルの設定ファイル。viteが動作するNode環境を設定するために作成される。 -
vite.config.ts: viteのビルドプロセスや開発サーバーなどに関する設定を行うファイル。
