前回の記事では、非エンジニアがWebアプリ開発を始めるための準備として、VS Codeの導入方法を紹介しました。 まだVS Codeの準備が終わっていない方は、先に 非エンジニア向け｜Claude CodeとCodexを使うためのVS Code導入方法【日本語化・おすすめ拡張機能】 から進めるとスムーズです。
今回はその続きとして、実際にWebアプリを作り始めるために必要な React と Next.js の導入方法を整理します。
「Reactって何？」「Next.jsって何？」という段階でも大丈夫です。 この記事では、まずは難しい理屈を深追いするよりも、 VS Code上で開発環境を整えて、ブラウザで動く画面を表示すること を目標にします。
ReactとNext.jsとは？非エンジニア向けに違いを簡単に解説
Reactは、画面UIを作るためのライブラリです。 一方でNext.jsは、Reactを使ってWebアプリを作りやすくするためのフレームワークです。 React公式でも、Reactアプリを作る方法としてNext.js（App Router）が案内されています。
参考： React公式｜Creating a React App
Next.js公式トップ
非エンジニアが最初の一歩を踏み出すなら、 React単体の細かい設定から入るより、 Next.jsでひな形を自動生成して始める方がわかりやすい です。
ReactとNext.jsの導入前に準備するもの【VS Code以外に必要なもの】
- VS Codeがインストールされていること
- インターネット接続
- VS Codeのターミナルを開けること
なお、Node.jsをインストールすると、通常はnpmも一緒に使えるようになります。 VS Code公式のNode.jsチュートリアルでも、Node.js環境を使った開発手順が案内されています。
参考： VS Code公式｜Node.js tutorial
Node.jsのインストール方法【React・Next.jsを使う前に必要】
まずはNode.jsをインストールします。 Next.jsのプロジェクト作成や起動には、Node.jsベースの環境が必要です。
Node.js公式サイト：
https://nodejs.org/
インストーラーを使って通常どおりインストールできたら、VS Codeを開きます。 その後、上部メニューから ターミナル → 新しいターミナル を選び、以下のコマンドを入力してください。
node --version
npm --versionどちらもバージョン番号が表示されればOKです。 たとえば v22.x.x のような表示が出れば、Node.jsは正常に認識されています。
もし node や npm が認識されない場合は、次を確認してみてください。
- Node.jsのインストールが最後まで完了しているか
- VS Codeを再起動したか
- 新しいターミナルを開き直したか
Next.jsの始め方｜VS Codeでプロジェクトを作成する方法
次に、Next.jsのプロジェクトを作成します。 Next.js公式では、create-next-app を使う方法が最も簡単な始め方として案内されています。
参考：
Next.js公式｜Getting Started: Installation
Next.js公式｜create-next-app
まずは、作業したいフォルダをVS Codeで開いてください。 その状態でターミナルを開き、以下を実行します。
npx create-next-app@latest my-first-next-appこのコマンドを実行すると、Next.jsのひな形を自動で作ってくれます。
途中でいくつか質問が表示される場合があります。 最初のうちは、以下のような考え方で十分です。
- TypeScript：最初はNoでもOK
- ESLint：YesでOK
- Tailwind CSS：好みでOK
- App Router：YesでOK
- import alias：そのままでOK
細かい意味は、今の段階では全部理解しなくて大丈夫です。 まずはプロジェクトが作れることが大事です。
Next.jsアプリを起動する方法｜localhostで初期画面を表示する
プロジェクトが作成できたら、次はそのフォルダの中に移動します。
cd my-first-next-appこの cd は、指定したフォルダに移動するためのコマンドです。 このあとNext.jsを起動するときは、必ずこのプロジェクトフォルダの中にいる必要があります。
次に、以下のコマンドを実行します。
npm run devこれで開発用サーバーが起動します。 Next.js公式でも、作成後に開発サーバーを起動し、 ブラウザで http://localhost:3000 を開く流れが案内されています。
参考：
Next.js公式｜Getting Started: Installation
ターミナルにエラーが出ていなければ、ブラウザで以下を開いてみてください。
初期画面が表示されれば成功です。 ここまで来れば、もう自分のPCの中でWebアプリ開発を始められる状態になっています。
React・Next.js初心者向け｜最初の画面を書き換える方法
せっかくなので、表示される画面を少しだけ変えてみましょう。
プロジェクト作成時の設定にもよりますが、初期画面のファイルは app/page.tsx になっていることが多いです。 このファイルをVS Codeで開いて、見出しや本文のテキストを少し書き換えてみてください。
保存すると、ブラウザ側の表示も更新されるはずです。
この体験がかなり重要です。 コードを書いて保存すると、ブラウザの表示が変わる―― まずはこの感覚をつかめれば十分です。
ReactとNext.jsの勉強で最初に覚えなくてよいこと
最初から全部理解しようとすると、かなり疲れます。 この段階では、次のような内容はまだ深追いしなくて大丈夫です。
- TypeScriptの細かい文法
- フォルダ構成の意味を全部覚えること
- デプロイの仕組み
- API連携のやり方
- サーバーコンポーネントの詳細
今はまず、起動できる・編集できる・表示できるの3つができれば十分です。
React・Next.js導入時によくあるエラーと対処法
nodeコマンドが認識されない
Node.jsのインストール後に、VS Codeを再起動していない可能性があります。 いったんVS Codeを閉じて、もう一度開いてみてください。
npm run dev が動かない
プロジェクトフォルダに移動していない可能性があります。 先に cd my-first-next-app を実行しているか確認してください。
localhost:3000 が開かない
ターミナルにエラーが出ていないか確認してください。 また、別のアプリが同じポートを使っている場合もあります。 その場合は、ターミナルの表示内容を落ち着いて確認するのがおすすめです。
まとめ｜非エンジニアがVS CodeでReact・Next.jsを始める手順
今回は、前回のVS Code導入記事の続きとして、 非エンジニア向けにReactとNext.jsを使い始める準備を整理しました。
- まずはNode.jsをインストールする
npx create-next-app@latestでプロジェクトを作るnpm run devで開発サーバーを起動するhttp://localhost:3000で表示を確認する
ReactやNext.jsの仕組みを最初から完璧に理解しなくても大丈夫です。 まずは自分のPCで動かしてみることが、最初の一歩としてとても重要です。
次回は、実際に 画面の文字を書き換える方法 や ボタンを置いて動きをつける方法 まで進めると、 「Webアプリを作っている感覚」がかなりつかみやすくなると思います。
コメント