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 プロジェクトに依存関係をインストールする。

機能：

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

手順：

1. ターミナルを開き、プロジェクトフォルダに移動する：

   cd notes-app
   

   このコマンドは project ディレクトリの下で実行する必要があります。

2. プロジェクトに依存関係をインストールする：

   npm install
   

   インストールが完了すると、node_modules フォルダが作成されます。存在しない場合は、インストールが成功していないことを意味します。

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

要件：

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

機能：

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

手順：

1. src フォルダ内に、Note.js という名前の新しいファイルを作成する。

2. 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 コンポーネントを作成する。
• 状態を初期化して、メモの配列を保持する。
• メモを追加、削除、編集する関数を実装する。

機能：

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

手順：

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

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

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

3. 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 関数を実装する。
• メモにはタイトルと本文があることを確認する。

機能：

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

手順：

1. addNote 関数を実装する：

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

2. 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 関数を実装する。

機能：

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

手順：

1. deleteNote 関数を実装する：

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

2. 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 関数を実装する。

機能：

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

手順：

1. editNote 関数を実装する：

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

2. 編集を処理するように 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）

要件：

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

機能：

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

手順：

1. 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 アプリを実行するには：

1. ターミナルまたはコマンドプロンプトを開きます。

2. プロジェクトのルートディレクトリ（package.jsonファイルがある場所）にいることを確認します。

3. 開発サーバーを起動します：

   npm start
   

   これで、ブラウザの 8080 ポートで基本的な React アプリが実行されているはずです。このベースを使って、私たちの Notes アプリを作成します。

4. ページの表示は以下の通りです：

まとめ

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