【Docker】MySQL+Rails7+Next.jsの開発環境を準備する(git設定まで)
nanoha.creator@gmail.com
nanoha code
Viteを使って、React×TypeScriptの開発環境を構築してみたので、まとめておきます。
Viteについて、公式サイトで以下のように説明がされています。
Vite(フランス語で「素早い」という意味の単語で
https://ja.vitejs.dev/guide//vit/
ヴィートのように発音)は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。
高速な開発体験を強みとしており、近年注目が集まっているビルドツールのようです。
Viteの公式サイトの手順に従って、環境構築をしていきます。
Node.jsおよびnpmがインストール済みであることを前提としています。
試したPCのOSは、Windows11です。
公式サイトに従って、プロジェクトを作成したいディレクトリで下記のコマンドを実行します。
$ npm create vite@latest simple-memo -- --template react-ts
simple-memo
は、プロジェクト名です。
-- --template [テンプレート名]
でテンプレートを指定できます。
VanillaやVueにも対応していますので、詳細は公式サイトをご確認ください。
--template
の前の--
は、npmのバージョンが7系以上の場合に必要です。
npmのバージョンは、以下のコマンドで調べられます。
$ npm -v
プロジェクトが作成できたら、プロジェクトのディレクトリに移動して、必要なパッケージをインストールします。
$ cd simple-memo
$ npm install
開発サーバーを起動します。
$ npm run dev
コマンドを実行すると、以下のようなメッセージが出てくるので、URLをブラウザで開きます。
以下の場合であれば、http://localhost:5173/
をブラウザで開きます。
$ npm run dev
> simple-memo@0.0.0 dev
> vite
VITE v4.5.0 ready in 617 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
以下のような画面が出ていれば成功です。
制作のお見積もりやご依頼、その他ご相談等ございましたら
お気軽にお問い合わせください。