【React入門】15分で作れるメモ帳アプリ｜思考から学ぶTypeScript構文とUI実装の基本

React と TypeScript、名前は聞くけど最初の一歩が重い——そう感じていませんか。

プログラミングを学び始めたばかりの方にとって、「React」と「TypeScript」は少しとっつきにくい存在かもしれません。

「useStateって何？」「propsってどう渡すの？」そんな疑問を、この記事でまるっと解消しましょう！

本記事は、15分でサクッと動く「メモ帳アプリ」を作りながら、React/TS の基本を“手を動かして”理解する入門ガイドです。

「useStateって何？」「propsはどう渡すの？」といった疑問に、コード→動作→なぜそう書くのかの順で答えます。

この記事の最後にも紹介しますが、以下の記事ではさらに詳しくコードの解説を行っているのでみっちりコードの理解をしたい方はこちらを読んでみるのもアリです！
【完全初心者向け】Reactで作るToDoアプリ｜思考プロセスから学ぶ実践ガイド

完成するアプリのイメージ

テキストを入力して「保存」ボタンでリストに追加
追加されたメモが一覧表示される
削除ボタンでメモを削除できる

→ 最終的には「React + TypeScriptで動くシンプルなメモ帳アプリ」が完成します。

1. プロジェクトの準備

すでにViteでの開発環境が整っている方はこの章を飛ばしてOKです。

1-1. ViteでReact + TypeScriptプロジェクトを作成

npm create vite@latest memo-app --template react-ts
cd memo-app
npm install
npm run dev

プロジェクトが起動し、「Vite + React + TS」の画面が表示されれば成功です。

2. ディレクトリ構成

今回は以下のようなファイル構成になります。

src/
├── App.tsx          ← 親コンポーネント（状態管理・ロジック）
├── MemoList.tsx     ← 子コンポーネント（表示担当）
└── main.tsx

App.tsxとMemoList.tsxに役割を分ける理由

Reactでは「責務の分離」が重要です。
状態（state）やイベントロジックは親コンポーネントが担当し、
子コンポーネントは表示に専念させることでコードが読みやすくなります。

3. App.tsx（親コンポーネント）の実装

まずはApp.tsxに以下のコードを記述してください。

import React, { useState } from 'react';
import MemoList from './MemoList';

type Memo = {
  id: number;
  text: string;
};

function App() {
  const [memos, setMemos] = useState<Memo[]>([]);
  const [inputText, setInputText] = useState('');

  const handleAddMemo = () => {
    const trimmed = inputText.trim();
    if (trimmed === '') return;

    const newMemo: Memo = {
      id: Date.now(),
      text: trimmed
    };

    setMemos([...memos, newMemo]);
    setInputText('');
  };

  const handleDeleteMemo = (id: number) => {
    setMemos(memos.filter(memo => memo.id !== id));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>メモ帳アプリ</h1>
      <div>
        <input
          type="text"
          value={inputText}
          onChange={e => setInputText(e.target.value)}
          placeholder="メモを入力"
        />
        <button onClick={handleAddMemo}>保存</button>
      </div>

      <MemoList memos={memos} onDelete={handleDeleteMemo} />
    </div>
  );
}

export default App;

4. App.tsxの構文と考え方を徹底解説

4-1. 型定義：Memo型

type Memo = {
  id: number;
  text: string;
};

id: メモごとの一意な識別子
text: メモの本文

TypeScriptでは型を定義することで、後のバグを未然に防げるのが大きなメリットです。

4-2. useStateでstateを管理

const [memos, setMemos] = useState<Memo[]>([]);
const [inputText, setInputText] = useState('');

memos: すべてのメモを保持する配列
inputText: 入力欄の中身を管理する文字列

useStateはReactの状態管理フック。
入力内容やデータの変化を監視し、UIを更新してくれます。

4-3. メモ追加処理の関数

  const handleAddMemo = () => {
    const trimmed = inputText.trim();
    if (trimmed === '') return;

    const newMemo: Memo = {
      id: Date.now(),
      text: trimmed
    };

    setMemos([...memos, newMemo]);
    setInputText('');
  };

空白だけの入力を排除（trim()）
新しいメモを作成（オブジェクト）
既存のmemos配列に追加（スプレッド構文）
入力欄を空に戻す（setInputText('')）

4-4. メモ削除処理

const handleDeleteMemo = (id: number) => {
  setMemos(memos.filter(memo => memo.id !== id));
};

filter()メソッドを使って対象以外のメモだけを残す
Reactのstateは破壊的操作を避ける（新しい配列で更新）

5. MemoList.tsx（子コンポーネント）の実装

ファイル名：src/MemoList.tsx

import React from 'react';

type Memo = {
  id: number;
  text: string;
};

type Props = {
  memos: Memo[];
  onDelete: (id: number) => void;
};

function MemoList({ memos, onDelete }: Props) {
  return (
    <ul>
      {memos.map(memo => (
        <li key={memo.id}>
          {memo.text}
          <button onClick={() => onDelete(memo.id)}>削除</button>
        </li>
      ))}
    </ul>
  );
}

export default MemoList;

6. MemoList.tsxの解説

6-1. Propsの定義と受け取り

type Props = {
  memos: Memo[];
  onDelete: (id: number) => void;
};

memos: メモの一覧データ
onDelete: 削除処理を行う関数

受け取ったpropsは、分割代入で({ memos, onDelete })のように取り出すのが一般的です。

6-2. JSXでのリスト表示

<ul>
  {memos.map(memo => (
    <li key={memo.id}>
      {memo.text}
      <button onClick={() => onDelete(memo.id)}>削除</button>
    </li>
  ))}
</ul>