React でメモアプリを構築する

はじめに

このプロジェクトでは、Reactを使って簡単なメモアプリを作成します。このアプリでは、ユーザーがメモを追加、編集、削除できるようになります。開発をいくつかのステップに分け、各ステップが特定の要件を満たし、必須の機能を追加するようにします。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

Create React Appコマンドを使って新しいReactプロジェクトを作成する方法
ユーザーインターフェイスを作成するための機能的なReactコンポーネントを構築する方法
Reactの useStateフックを使って状態を管理する方法
アプリケーション内でメモを追加および管理する方法
メモの追加、編集、削除などの機能を実装する方法
Reactコンポーネントでのユーザーインタラクションとイベントを処理する方法
CSSを使ってReactアプリケーションをスタイリッシングする方法
基本的なCRUD（作成、読み取り、更新、削除）アプリケーションを開発する方法
Reactプロジェクトを構造化および整理する方法
メモアプリ用のシンプルで応答性のあるユーザーインターフェイスを構築する方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

新しいReactプロジェクトをセットアップする
Reactコンポーネントを作成および管理する
コンポーネントの状態を管理するために useStateのようなReactフックを使う
Reactアプリケーションでのユーザー入力とフォーム送信を処理する
親コンポーネントと子コンポーネントの間でpropsを使ってデータと関数を渡す
Reactで応答性とインタラクティブなユーザーインターフェイスを作成する
Reactアプリケーション内で基本的なデータ保存と操作を実装する
Reactプロジェクト内のコードファイルを構造化および整理する
ReactコンポーネントのスタイリングにCSSを使う
Reactアプリケーションのデバッグとトラブルシューティング
Reactアプリケーションの構築に関するベストプラクティスに従う

プロジェクトのセットアップ

要件：

新しいReactプロジェクトに依存関係をインストールする。

機能：

必要な依存関係と基本的なプロジェクト構造でプロジェクトを初期化する。

手順：

ターミナルを開き、プロジェクトフォルダに移動する：
```
cd notes-app
```
このコマンドは project ディレクトリの下で実行する必要があります。
プロジェクトに依存関係をインストールする：
```
npm install
```
インストールが完了すると、node_modules フォルダが作成されます。存在しない場合は、インストールが成功していないことを意味します。

メモコンポーネントを作成する

要件：

個々のメモを表す Note コンポーネントを作成する。
Note コンポーネントは、メモの内容を表示し、編集ボタンと削除ボタンを提供する必要がある。

機能：

メモのタイトルと本文を表示する。
メモの編集と削除用のボタンを提供する。

手順：

src フォルダ内に、Note.js という名前の新しいファイルを作成する。
Note コンポーネントを以下のように実装する：

import React from "react";

const Note = ({ note }) => {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.text}</p>
      <button>Edit</button>
      <button>Delete</button>
    </div>
  );
};

export default Note;

✨ 解答を確認して練習

Appコンポーネントと状態を作成する

要件：

メモとその状態を管理する App コンポーネントを作成する。
状態を初期化して、メモの配列を保持する。
メモを追加、削除、編集する関数を実装する。

機能：

メモの配列を維持する。
新しいメモを追加する。
メモを削除する。
メモを編集する。

手順：

src フォルダ内で、App.js ファイルを開く。

ファイルの先頭で useState フックをインポートする：

// App.js
import React, { useState } from "react";
import "./App.css";
import Note from "./Note";

App コンポーネント内で、初期状態とメモを追加、削除、編集する関数をセットアップする：

// App.js
function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: "", text: "" });

  const addNote = () => {
    // TODO: 追加機能を実装する
  };

  const deleteNote = (id) => {
    // TODO: 削除機能を実装する
  };

  const editNote = (id, newText) => {
    // TODO: 編集機能を実装する
  };

  return <div className="App">{/* Appのコンテンツはここに記述 */}</div>;
}

✨ 解答を確認して練習

新しいメモの追加機能を実装する

要件：

新しいメモを状態に追加するための addNote 関数を実装する。
メモにはタイトルと本文があることを確認する。

機能：

新しいメモを状態に追加する。
メモを追加した後、入力フィールドをクリアする。

手順：

addNote 関数を実装する：

// App.js
const addNote = () => {
  if (newNote.title && newNote.text) {
    const newId = Date.now().toString();
    setNotes([...notes, { ...newNote, id: newId }]);
    setNewNote({ title: "", text: "" });
  }
};

JSXで、onChange ハンドラを使用して入力値をキャプチャし、状態を更新する：

// App.js
return (
  <div className="App">
    <h1>メモアプリ</h1>
    <div className="note-form">
      <input
        type="text"
        placeholder="タイトル"
        value={newNote.title}
        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="本文"
        value={newNote.text}
        onChange={(e) => setNewNote({ ...newNote, text: e.target.value })}
      />
      <button onClick={addNote}>メモを追加</button>
    </div>
  </div>
);

✨ 解答を確認して練習

メモの削除機能を実装する

要件：

「削除」ボタンがクリックされたときに、状態からメモを削除する deleteNote 関数を実装する。

機能：

「削除」ボタンがクリックされたときに、状態からメモを削除する。

手順：

deleteNote 関数を実装する：

// App.js
const deleteNote = (id) => {
  const updatedNotes = notes.filter((note) => note.id !== id);
  setNotes(updatedNotes);
};

deleteNote 関数を Note コンポーネントにプロップとして渡して、メモの削除を可能にする。

// App.js
<div className="App">
  <div className="note-list">
    {notes.map((note) => (
      <Note key={note.id} note={note} onDelete={deleteNote} onEdit={editNote} />
    ))}
  </div>
</div>

✨ 解答を確認して練習

メモの編集機能を実装する

要件：

「編集」ボタンがクリックされたときに、メモの本文を更新する editNote 関数を実装する。

機能：

編集可能なテキストエリアにメモの本文を表示する。
「保存」ボタンがクリックされたときに、メモの本文を更新する。

手順：

editNote 関数を実装する：

// App.js
const editNote = (id, newText) => {
  const updatedNotes = notes.map((note) =>
    note.id === id ? { ...note, text: newText } : note
  );
  setNotes(updatedNotes);
};

編集を処理するように Note コンポーネントを更新する：

// Note.js
import React, { useState } from "react";
const Note = ({ note, onDelete, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(note.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(note.id, editedText);
    setIsEditing(false);
  };

  return (
    <div className="note">
      <div className="note-header">
        <h3>{note.title}</h3>
        <button onClick={() => onDelete(note.id)}>Delete</button>
      </div>
      {isEditing ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>Save</button>
        </>
      ) : (
        <p>{note.text}</p>
      )}
      {!isEditing && <button onClick={handleEdit}>Edit</button>}
    </div>
  );
};

✨ 解答を確認して練習

スタイリング (App.css)

要件：

視覚的に魅力的なインターフェイスにアプリに基本的なスタイリングを適用する。

機能：

ユーザー体験を向上させるためにアプリコンポーネントにスタイリングを施す。

手順：

App.css ファイルを作成し、アプリコンポーネントに基本的なスタイリングを適用する。アプリのスタイリングには提供されたCSSコードを使用する。

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

✨ 解答を確認して練習

アプリの実行

あなたのReact Notesアプリを実行するには：

ターミナルまたはコマンドプロンプトを開きます。
プロジェクトのルートディレクトリ（package.jsonファイルがある場所）にいることを確認します。
開発サーバーを起動します：
```
npm start
```
これで、ブラウザの8080ポートで基本的なReactアプリが実行されているはずです。このベースを使って、私たちのNotesアプリを作成します。
ページの表示は以下の通りです：

✨ 解答を確認して練習

まとめ

このプロジェクトでは、Reactを使って簡単なメモアプリを作成しました。開発を複数のステップに分けることで、プロジェクトをセットアップし、メモ用のコンポーネントを作成し、メモの追加、削除、編集機能を実装し、基本的なスタイリングを適用しました。これらの手順に従うことで、機能的なメモアプリを構築し、要件に合わせて機能を拡張することができます。