【初心者向け】Windows + VS CodeでReactメモアプリを作ろう！

React を始めたいけど、まず何から始めたらいいか分からない…
そんな方のために、今回は Windows環境 × VS Code で シンプルなメモアプリ を作ってみます！

---

🎯 ゴール

• Reactを使って簡単なSPA（シングルページアプリ）を体験
• 入力 → メモ追加 → リスト表示 の機能を実装
• ローカルブラウザ上で動作確認

---

✅ 事前準備

1. Node.js のインストール

ReactはNode.js環境が必要です。

• 公式サイト：https://nodejs.org/ja
• 「LTS版」をダウンロード＆インストール

インストール後、以下のコマンドでバージョン確認：

node -v
npm -v

---

2. VS Code のインストール

エディタとして Visual Studio Code を使います。

• ダウンロード：https://code.visualstudio.com/

---

🛠 Reactアプリを作成する

1. プロジェクトを作成

コマンドプロンプト（またはターミナル）で以下を実行：

npx create-react-app memo-app
cd memo-app
code .

create-react-app はReact公式のスターターキットです。

---

2. メモアプリを実装する

src/App.js を以下のように書き換えます：

import { useState } from "react";

function App() {
  const [memo, setMemo] = useState("");
  const [memos, setMemos] = useState([]);

  const addMemo = () => {
    if (memo.trim() === "") return;
    setMemos([...memos, memo]);
    setMemo("");
  };

  return (
    <div style={{ padding: "20px" }}>
      <h1>メモアプリ</h1>
      <input
        type="text"
        value={memo}
        onChange={(e) => setMemo(e.target.value)}
        placeholder="メモを入力"
      />
      <button onClick={addMemo}>追加</button>

      <ul>
        {memos.map((m, i) => (
          <li key={i}>{m}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

▶ 実行してみよう！

以下のコマンドでローカル開発サーバーを起動：

npm start

ブラウザが自動で開き、http://localhost:3000 にアクセス！
✨ 自分だけのメモアプリが表示されます！

---

🧾 まとめ

✅ Node.jsとReactの導入
✅ VS Codeでプロジェクト作成
✅ 入力・追加・表示の基本機能を体験