React プロジェクトを新規作成する

まっさらな Windows 環境で、React プロジェクトを新規作成するメモ。

NVM for Windows のインストール

Node.js のインストーラーを公式サイトから直接取得してもいいけど、管理しやすくするために NVM for Windows 経由でインストールすることにする。

github.com

上記サイトから NVM for Windows 最新バージョンのインストーラーを取得し、実行する。

なお、上記サイトを見ると、今後は NVM for Windows に代わる "Runtime" というツールを開発していくそう。

Node.js のインストール

管理者権限でコマンドプロンプトまたは PowerShell を開く。

以下のコマンドで、利用できるバージョンを確認。

>nvm list available

最新バージョンをインストールするなら

>nvm install latest

LTS の最新をインストールするなら

>nvm install lts

また、特定のバージョン番号を指定してインストールすることもできる。

完了すると

Installation complete. If you want to use this version, type

nvm use 20.8.0

のように表示されるので、言われた通りに

>nvm use 20.8.0

を実行して、そのバージョンを有効化する。バージョンを確認するには、

>node --version
v20.8.0

React プロジェクトの新規作成

フレームワークの選定

React プロジェクトをお手軽に新規作成するツールとしては、Create React App というツールが代表的なものと聞いていた。

が、nekoya さんという方が書かれた下記の記事によると、Create React App はもはや活発には開発されておらず、React 公式のドキュメンテーションでも推奨されなくなったのだとか。

zenn.dev

その公式ドキュメンテーションが下記のページ。

react.dev

現時点では、以下のフレームワークを使う例が挙げられている。

• Next.js: 静的サイトにも動的アプリにも使えるフルスタックフレームワーク
• Remix: ルーティングのネストに対応したフルスタックフレームワーク
• Gatsby: CMS をバックエンドとして動作するアプリ向けのフレームワーク
• Expo: React Native でネイティブ UI を持つアプリを開発するためのフレームワーク

折りたたまれている Can I use React without a framework? のところを開くと、遅かれ早かれフレームワークは必要になるから、新規プロジェクトではいずれかのフレームワークを選択すべしとある。「これだけ言われても納得できない」あるいは「既存のページの一部として React を組み込む」場合のみ、Vite や Parcel を使う選択肢もある、という。

ここでは、上記のドキュメンテーションでも最初の選択肢として挙げられている Next.js を使うことにする。

Next.js プロジェクトの新規作成

コマンドプロンプトまたは PowerShell (管理者権限は不要) で、プロジェクトを作りたい場所に移動する。各プロジェクトのディレクトリは作ってくれるので、手動で事前に作成しておく必要はない。

>npx create-next-app@latest

を実行。初回はインストールの確認が出る。

Need to install the following packages:
create-next-app@13.5.4
Ok to proceed? (y)

続いて、以下の質問が 1 つずつ表示される。「»」の後には、入力例や選択肢が表示される。

• ? What is your project named? » my-app
• ? Would you like to use TypeScript? » No / Yes
• ? Would you like to use ESLint? » No / Yes
• ? Would you like to use Tailwind CSS? » No / Yes
• ? Would you like to use src/ directory? » No / Yes
• ? Would you like to use App Router? (recommended) » No / Yes
• ? Would you like to customize the default import alias (@/*)? » No / Yes

以下のように表示されて、プロジェクトが作成される。

Creating a new Next.js app in <親ディレクトリ>\<プロジェクト名>.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 328 packages, and audited 329 packages in 2m

115 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created hello-nextjs at C:\sardine\projects\hello-nextjs

npm notice
npm notice New minor version of npm available! 10.1.0 -> 10.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.0
npm notice Run npm install -g npm@10.2.0 to update!
npm notice

生成されたファイルはこんな感じ。

• .eslintrc.json
• .gitignore
• README.md
• app/favicon.ico
• app/globals.css
• app/layout.tsx
• app/page.tsx
• next.config.js
• package-lock.json
• package.json
• postcss.config.js
• public/next.svg
• public/vercel.svg
• tailwind.config.ts
• tsconfig.json

開発サーバーを起動する

>npm run dev

を実行すると開発サーバーがポート 3000 で起動する。

> hello-nextjs@0.1.0 dev
> next dev

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

  ▲ Next.js 13.5.4
  - Local:        http://localhost:3000

 ✓ Ready in 10.5s

表示されている URL をブラウザに入力するか、Windows Terminal なら Ctrl+クリックでブラウザを開く。

するとコンパイルが始まり、

 ○ Compiling /page ...
 ✓ Compiled /page in 18.8s (493 modules)
 ✓ Compiled in 1611ms (234 modules)
 ○ Compiling /favicon.ico/route ...
 ✓ Compiled /favicon.ico/route in 4s (500 modules)

のように出力されて、ブラウザ上にはサンプルのページが表示される。

生成されたページ