Reactのプロジェクトを作成する
はじめに
React、TypeScriptのプロジェクトを作るときの作業メモを備忘録として残します。
作業環境
- OS： MacOS Sonoma 14.5
- ターミナル: zsh（VSCode）
作業手順
1. Voltaのインストール
Voltaはnpmやnodeなど、Javascriptに関連するツールのバージョンを管理するためのツールです。
今回はNode.jsのバージョンを管理するためにインストールします。
Voltaについて詳しく知りたい方は公式サイトを見てみてください。
以下のコマンドでhomebrew経由のインストールを行います。
brew install volta
homebrewがインストールしていない方はこちらを参照
homebrew経由でインストールした場合は以下のコマンドで初期設定をしておく。
volta setup
2. Node.jsのインストール
インストールしたvoltaを使用して、以下のコマンドでnodeをインストールします。
volta install node
voltaのコマンドについては公式ドキュメントを参照
3. Corepackのインストール
pnpmが速いらしいので使ってみたいな〜と思って調べていたら見つけた記事。
Corepackを使うとスマートにバージョン管理ができるらしい。
・・・Corepackって何？
利用者がグローバルに corepack をインストールしていて、かつプロジェクト側で package.json にパッケージマネージャと利用バージョンを指定しておけば、指定したパッケージマネージャを自動的に使わせたり、他のパッケージマネージャを使えなくしたりできる。
corepack 0.20 以降は corepack use コマンドで package.json への追加ができます。しかもこのコマンドを使うと SHA-256 ハッシュを含むバージョンが指定されます。
つまりcorepackを使えばプロジェクトの環境構築をするときにbrew install pnpmとかをわざわざやる必要がなくなるらしい！あとnpmとnodeのバージョンを切り離せるから頻繁にバージョンアップする人とかは使ったほうがいいかも。
ということで以下のコマンドでcorepackをインストールする。
volta install corepack
インストールしたcorepackを有効化する。
corepack enable
nodeに標準で追加されたから別途インストールとか必要ないのかと思ってたけど、voltaとかを経由してnodeをインストールした場合はパス設定とかをしないとvoltaから認識できないから結局インストールが必要らしい。
（パス追加だけてcorepack使える設定もある気がするけど調べてない）
4. pnpmを使ってViteのプロジェクトを作成する
corepackでpnpmを有効化する。
corepack enable pnpm
試しにバージョン確認をしたらpnpmのダウンロードが始まった。
pnpm -v
! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-9.2.0.tgz
? Do you want to continue? [Y/n] y
9.2.0
Viteの環境構築をやったことがないので公式ドキュメントと記事を読む。
以下のコマンドでカレントディレクトリにプロジェクトのファイルを展開しつつ生成できそう。
pnpm create vite . -- --template react-swc-ts
生成時の選択肢は「React」と「TypeScript + SWC」を選択。
コンパイラには Babel ではなく SWC を使用したいため、react-swc-ts テンプレートを使用します。
環境構築の記事でこう書いてあるけどSWCって何・・・？コンパイラらしいけど・・・？
SWC は、コンパイルとバンドルの両方に使用できます。コンパイルには、最新のJavaScript機能を使用してJavaScript / TypeScriptファイルを取得し、すべての主要なブラウザーでサポートされている有効なコードを出力します。
らしいです、Babelよりも新しくて速いコンパイラなのでとても良さそう。
なんか前にNext.jsの内部にRustが採用されたからフロントエンドやるならRust書けたほうがいいみたいな話を聞いたけどSWCのことだったのかな？
とりあえずプロジェクトはできたので、以下のコマンドでライブラリとかをインストールする。
pnpm i
インストールが終わったら起動！
pnpm dev
http://localhost:5173 にアクセスして、以下が表示されれば完了！
カッコイイ！
Discussion