投稿日:2022/09/15 最終更新日:2023/03/13
Viteとは何？Viteやcreate-react-appで使うコマンドを全て紹介
creat-react-appとは？
create-react-appとはReactの開発元であるMeta（旧Facebook） が提供している CLI ツールのことです。
事前に用意されているテンプレートを元にアプリケーション開発に必要な雛形を生成してくれるすぐれものです。
おそらく React による開発を行っている人であれば使ったことのある人のほうが多いと思います。
それ以外にも複数のオプションがあり、指定することで PWA や TypeScript など使い道にあった開発環境を作成してくれます。
Viteとは？
React のビルドツールにおいて、かなり高速で動作する CLIツールのことです。
役割は create-react-app と同じです。
Evan Youというエンジニアによって開発されたようで、この人は Node.js の開発者でもあるそうです。
React に必要なフォルダー構成を迅速に構築し、かつ開発中にレスポンスも高速なためストレスなく開発に注力できます。
create-react-appで使うコマンド
npx create-react-app
npx create-react-app typescript一発でReactの開発環境を作成してくれます。
わざわざ webpack や package.json をコツコツ書いて準備する必要がありません。
ちなみに末尾に typescript と付けると tsx環境で作成してくれます。
npm start開発モードでアプリを実行することができます。
ローカルサーバーが http://localhost:3000 で立ち上がるため、開くとブラウザで表示されます。
変更もリアルタイムで更新されるためかなり便利です。
npm testJestなどのテストツールをインストールして設定することでテストを走らせることができます。
詳しくはこちら
npm run buildソースファイルをもとにコンパイルしたビルドファイルを作成してくれます。
このときに作成されたファイルは公開サーバーに設置するために使用します。
css や js の minify化も自動でやってくれるため非常に良きです。
npm run ejectcreate-react-app で作成した環境にて使われているツールやスクリプトを編集することができます。
つまりは create-react-app では手元の環境に作成されなかったファイルが表示されるようになります。
例えば、webpack や Jest などのファイルが閲覧/編集できるようになるため自分好みの環境に変えることができます。
ただ、webpack や Jest をしっかりと理解していない意味ないので知らない人は覚えてからのほうが良いかと。
Viteで使うコマンド
npm create vite
npm installvite で React の開発環境を作成する際に使用します。
@latest は最新バージョンで作成してという意味です。
用は npx create-react-app のVite版です。
作成後は npm install で必要なパッケージをインストールするところまではセットです。
npm run devViteの作成した環境をもとに開発モードでアプリを実行することができます。
コマンドを打った後にしばらくするとコンソール上にローカルサーバーの URL が 表示されるため、クリックするとブラウザで表示されます。
こちらも変更がリアルタイムで更新されるためかなり便利です。
npm run buildこちらは create-react-app と同じですね。
ソースファイルをもとにコンパイルしたビルドファイルを作成してくれます。
このときに作成されたファイルは公開サーバーに設置するために使用します。
ちなみにcss や js の minify化もやってくれます。
npm run previewこれはビルドしたファイルをローカルでテスト表示することができます。
npm run dev で表示されるローカルサーバーはあくまで開発環境のソースをもとにしていますが、
この場合はビルド後のファイルなので実際にデプロイする前に表示確認をしっかりとすることができます。
まとめ
今回は create-react-app と Vite でよく使用するコマンドをまとめてみました。
特に Vite は注目度の高い CLIツールで私も使用よく使用するツールです。
ばっちりな開発環境を作成してくれますので、これをもとにぜひ快適なコーディングを楽しみましょう。
