ViteでReactの開発環境を構築してみた

はじめに

Reactの環境構築でよく使われるcreate-react-app。
Reactの公式ドキュメントを拝見すると、フレームワークなしのReact環境はあまり推奨されていないようでした。

以下、公式ドキュメント 抜粋。

フレームワークなしで React を使用することは間違いなく可能です。それが、ページの一部に React を使用する方法です。 ただし、React を完全に使用して新しいアプリまたはサイトを構築する場合は、フレームワークを使用することをお勧めします。

それでいて、create-react-appの最新バージョンのリリース日は2022年4月。
バージョンアップがここ1年ほどされておらず、少し不安がある。

そうはいってもフレームワークに依存しない純正なReactの学習をしたい場合などにどうしてもReactの環境構築をしなければいけないときがあると思います。
そんなときに私がおすすめするのがViteでReactの開発環境を構築することです。

Vite環境構築

nodejsはインストール済みとします。今回のnodeバージョンは v20.10.0です。
voltaでバージョン管理する記事を書いたのでこちらも参考にしてください。

【Volta】node.jsバージョン管理ツールをVoltaに乗り換える【設定手順】

まずはこのコマンドでプロジェクトを作成します。

npm create vite

プロジェクト名を入力します。

? Project name: » vite-project

使用するフレームワークを選択します。今回はReactを選択します。

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

今回は「JavaScript + SWC」を選択します。
SWCはVercel社が開発しているBabelに代わる新しいコンパイラーです。
Babelより相当早いコンパイラーなので使ってみてください。

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

これでプロジェクトの作成は終わりです。
package.jsonが作成されていることを確認したらディレクトリを移動してパッケージのインストールを行ってください。

cd vite-project
npm i

問題なくプロジェクトの構築ができたか確認します。
開発サーバーを起動してみましょう。

npm run dev

起動出来たらプロジェクトの環境構築は完了です。
Happy hacking!