こんにちは！Reiです(˵ •̀ ᴗ – ˵) ✧
ReactやVueで開発を始めようと思ったとき、「どのコマンドでプロジェクトを作ればいいのか分からない」と悩みますよね 💦
いろいろな方法がある中で、npm create vite@latest を使うと、フレームワークを選びながらプロジェクトを作成することができます。
ただ、実際にコマンドを実行するといくつか選択肢が表示されて、どれを選べばいいのか迷う場面も出てくるかと思います
そこでこの記事では、npm create vite@latest を実行したときの流れを順番に確認しながら、プロジェクト作成の手順をまとめました。
流れに沿って見ていきましょう！
npm create vite で作成できるもの
npm create vite@latest を使うと、Viteをベースにしたフロントエンドのプロジェクトを作成できます。
Viteは、フロントエンド開発のためのビルドツールで、開発サーバーの起動やコードのビルドを高速に行えるのが特徴です。設定もシンプルで、最小限の構成から開発を始めることができます。
npm create vite でプロジェクトを作成すると、ReactやVueなどのフレームワークを選択しながら、開発に必要な構成があらかじめ用意された状態でプロジェクトが作成されます。
npm create vite@latest でのプロジェクト作成の流れ
npm create vite@latest を実行すると、いくつかの質問に答えながらプロジェクトを作成していきます。
全体の流れは次の通りです。
- プロジェクト名の入力
- フレームワークの選択
- バリアント（言語・ビルド）の選択
- インストールの確認
それぞれ順番に見ていきます。
① npm create vite@latest を実行する
まずは、次のコマンドを実行します。
npm create vite@latest
このコマンドを実行すると、Viteのプロジェクト作成が開始されます。
@latest とは 💡
その時点で公開されている最新版のViteを指定するための記述です。
特定のバージョンを指定しない場合、この指定によって常に最新のテンプレートが使用されます。
② プロジェクト名の入力
コマンドを実行すると、最初にプロジェクト名の入力が求められます。
Project name:
ここで入力した名前のフォルダが作成され、その中にプロジェクトが生成されます。
③ フレームワークの選択
次に表示されるのがフレームワークの選択です。
Select a framework:
主な選択肢は以下の通り。
| 選択肢 | 内容 |
|---|---|
| Vanilla | 素のJavaScript |
| Vue | Vue.js |
| React | React |
| Preact | Reactの軽量版 |
| Lit | Web Components系 |
| Svelte | Svelte |
| Solid | リアクティブUI |
| Angular | Angular |
| Others | その他テンプレート |
使用したいフレームワークをここで選択します。
④ バリアントの選択
フレームワークを選ぶと、次にバリアントの選択が表示されます。
Select a variant:
例：Reactの場合
| 選択肢 | 内容 |
|---|---|
| TypeScript | TypeScript |
| TypeScript + SWC | TS + 高速ビルド |
| JavaScript | JavaScript |
| JavaScript + SWC | JS + 高速 |
ここでは、使用する言語やビルド設定を選びます。
バリアントとは 💡
同じフレームワークの中での設定の違いを選ぶ項目のことです。
主に、TypeScriptを使うかどうかや、ビルドツールの違いなどを選択します。
⑤ インストールの確認
最後に、依存関係のインストールについて確認されます。
Install with npm and start now?
| 選択肢 | 内容 |
|---|---|
| Yes | インストールと起動を実行 |
| No | 手動で進める |
「Yes」を選択すると、そのままインストールと起動まで行われます。
「No」を選択すると、依存関係のインストールや開発サーバーの起動は行われず、作成されたプロジェクトのフォルダ内で手動でコマンドを実行する必要があります。
一発でプロジェクトを作成する方法
対話形式をスキップして、最初からテンプレートを指定してプロジェクトを作成することもできます。
既存のフォルダに作成する
このコマンドでは、今いるフォルダの中にプロジェクトが作成することができます。
npm create vite@latest . -- --template react-swc-ts
コマンドの意味
react-swc-ts
これは以下の構成をまとめて指定しています。
- React
- TypeScript
- SWC（高速ビルド）
「フレームワーク – 言語 – ビルドツール」の形式で指定することで、対話形式で選択していた内容を一度にまとめて指定できます。
npm create vite@latest . -- --template react-swc-ts
このコマンドの -- は、引数を分けるための区切りとして使われています。
- 最初の
--→ npm側の区切り --template→ Vite側のオプション
npm経由でViteに引数を渡すための書き方です。
新しいフォルダに作成する
このコマンドでは、新しくフォルダを作成し、その中にプロジェクトを作成します。
npm create vite@latest my-app -- --template react-swc-ts
この場合は、my-app というフォルダが新しく作成され、その中にプロジェクトが生成されます。
よくある疑問
今いるディレクトリ内にプロジェクトを作るには？
npm create vite@latest .
. を付けることで、今いるフォルダにプロジェクトを作成できます。
フォルダ名を指定するには？
npm create vite@latest my-app
指定した名前のフォルダが新しく作成されます。
また、フォルダ名だけでなく、パスを指定して作成することもできます。
npm create vite@latest ./projects/my-app
この場合は、projects フォルダの中に my-app が作成されます。
まとめ
npm create vite@latestは対話形式でプロジェクトを作成する- 「プロジェクト名 → フレームワーク → バリアント → インストール」の順で進む
--templateを使うと対話を省略できる
選択肢が出てきて迷ったときは、この記事を見返しながら進めてみてください！
何を選んでいるのかが分かるだけでも、作業の進めやすさが変わってくるはずです ᥫᩣ ̖́-
コメント