Reactでメモ帳アプリを作る方法｜初心者向けにわかりやすく解説！

Reactで「メモ帳アプリ」を作ることで、入力フォームや一覧表示・状態管理などの基礎機能をまとめて習得できます。
「Reactを学んだけど、実際に何を作ればいいのか分からない」「フォーム処理や保存機能を練習したい」という方にぴったりの題材です。
本記事では、初心者の方でも数十分で作れるReactメモ帳アプリの作り方を丁寧に解説していきます。

React メモ帳アプリ作成ガイド

結論：メモ帳アプリはフォーム処理の学びに最適

Reactを学ぶ際、「フォームから入力を受け取って、一覧として表示する」という処理は必須です。
今回作るメモ帳アプリでは、useState、map、onChange、onClickなどの基本要素をしっかり使います。
この題材を通して、Reactの動きが実感できる構造を理解できます。

Reactの準備と開発環境の構築

Node.jsとnpmの準備

Reactを動かすには、Node.jsとnpmが必要です。以下からダウンロードしてください。

https://nodejs.org/ja/

コマンドで確認：

node -v
npm -v

Create React Appでプロジェクト作成

npx create-react-app react-memo-app
cd react-memo-app
npm start

これで開発環境の準備は完了です。

メモ帳アプリに必要な機能と構成

実装する機能一覧

メモの追加（入力→ボタンで追加）
メモの削除（削除ボタン付き）
入力フォームの状態管理（useState）

コンポーネント構成

App：状態と全体の表示を管理
MemoInput：入力欄と追加ボタン
MemoList：メモ一覧表示
MemoItem：1つのメモ表示と削除機能

小さな単位に分けることで、コードが見やすくなります。

Reactメモ帳アプリの実装手順

MemoInput.js

import { useState } from "react";
const MemoInput = ({ onAdd }) => {
  const [text, setText] = useState("");
  const handleSubmit = () => {
    if (!text.trim()) return;
    onAdd(text);
    setText("");
  };
  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="メモを入力"
      />
      <button onClick={handleSubmit}>追加</button>
    </div>
  );
};
export default MemoInput;

MemoItem.js

const MemoItem = ({ memo, onDelete }) => (
  <li>
    {memo.text}
    <button onClick={() => onDelete(memo.id)}>削除</button>
  </li>
);
export default MemoItem;

MemoList.js

import MemoItem from "./MemoItem";
const MemoList = ({ memos, onDelete }) => (
  <ul>
    {memos.map((memo) => (
      <MemoItem key={memo.id} memo={memo} onDelete={onDelete} />
    ))}
  </ul>
);
export default MemoList;

App.js

import { useState } from "react";
import MemoInput from "./MemoInput";
import MemoList from "./MemoList";
function App() {
  const [memos, setMemos] = useState([]);
  const addMemo = (text) => {
    const newMemo = {
      id: Date.now(),
      text,
    };
    setMemos([...memos, newMemo]);
  };
  const deleteMemo = (id) => {
    setMemos(memos.filter((memo) => memo.id !== id));
  };
  return (
    <div>
      <h1>メモ帳アプリ</h1>
      <MemoInput onAdd={addMemo} />
      <MemoList memos={memos} onDelete={deleteMemo} />
    </div>
  );
}
export default App;