メモ帳アプリの作成　27-29日目　2024/11/2-4（お金持ちまでの道のり）

本日はアプリ制作第二弾「メモ帳アプリ」を作ります。第三弾では「カウントダウンタイマー」、第四弾ではフォームアプリを作り、前回学んだSPAを実装します。

メモ帳アプリ

機能概要

Node.js command promptを使う理由

今回のメモ帳アプリも前回のTodoリストアプリのようにHTMLだけでコードを書くこともできるのですが、今回はReactの機能を使って効率的にアプリを構築するためにNode.js command promptを使用します。

実装手順①

ステップ1：Node.js command promptでReactプロジェクトを作る

Node.js command promptを開く：

• パソコンで「Node.js command prompt」を探してクリックして開きます。これはReactのプロジェクトを作るための特別な窓です。

デスクトップなど、アプリを作りたい場所に移動する：

• cd Desktopと入力してEnterを押すと、デスクトップ上にアプリのフォルダが作られます（別の場所にしたい場合は、フォルダに合わせて変更できます）。

Reactプロジェクトを作成するコマンドを入力：

• 次のコマンドを入力して、新しいReactアプリのプロジェクトを作ります。アプリの名前は好きに決めていいですが、ここでは「my-memo-app」としてみましょう。
  ※npx create-react-app 〇〇(プロジェクト名)で名前を決める

npx create-react-app my-memo-app

ステップ2：Reactプロジェクトの準備

プロジェクトのフォルダに入る：

• さっき作ったフォルダに移動するため、次のように入力してEnterを押します。

cd my-memo-app

アプリをスタート：

• Reactアプリをブラウザに表示するためのコマンドを入力します。

npm start

ステップ3：メモ帳アプリの中身を作る

VSCodeを開き、「App.js」ファイルを編集する：

フォルダーの選択をクリックすると下の画面が表示されます。

• 左側のエクスプローラーのsrcをクリックすると「App.js」というファイルがあるのでダブルクリックする。このファイルでメモ帳アプリの中身を作ります。
• まず、以下のように基本的なメモ帳アプリの構造を作成しましょう。

function App() {
  return (
    <div className="App">
      <h1>メモ帳アプリ</h1>
      <input type="text" placeholder="メモを入力してください" />
      <button>追加</button>
      <ul>
        {/* メモを表示するリストアイテムをここに追加 */}
      </ul>
    </div>
  );
}

export default App;

Visual Studio Codeの左上の三本線→ファイル→保存でコードが保存されるとReact Appの画面が自動的に以下の画像のようになり、現時点のアプリの状況を確認できます。以下が現時点でのアプリ画面です。入力後に追加ボタンを押しても何も起こりません。

実装手順②

ステップ1: 状態管理用のuseStateを追加

Reactでは、コンポーネントの状態を管理するためにuseStateというフックを使います。このアプリでは、「メモのリスト」と「入力されたメモの内容」を状態として管理する必要があります。

1. useStateをインポートします。
2. メモのリストを保存するための状態（notes）と、メモの入力内容を保存するための状態（input）を追加します。

import React, { useState } from 'react';

function App() {
  const [notes, setNotes] = useState([]); // メモのリストを保存するための状態
  const [input, setInput] = useState(''); // メモの入力を保存するための状態

  return (
    <div className="App">
      <h1>メモ帳アプリ</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="メモを入力してください"
      />
      <button onClick={addNote}>追加</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

ステップ２：addNote関数の追加

このコードには addNote 関数がまだ定義されていないので、ボタンをクリックしたときに実行する addNote 関数を追加する必要があります。このままのコードだと以下のようなエラーが出ます。

addNote は、ユーザーが入力したメモをメモリストに追加するための関数です。この関数を追加することで、ボタンをクリックしたときに入力内容がリストに追加されるようになります。

import React, { useState } from 'react';

function App() {
  const [notes, setNotes] = useState([]); // メモのリストを保存するための状態
  const [input, setInput] = useState(''); // メモの入力を保存するための状態

  // addNote 関数を定義
  const addNote = () => {  // addNoteという関数を定義
    if (input.trim()) { // もしinputが空白以外の内容を持っているなら
      setNotes([...notes, input]); // 現在のメモリストに新しいメモ（input）を追加する
      setInput(''); // 入力欄を空にする
    }
  };

  return (
    <div className="App">
      <h1>メモ帳アプリ</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="メモを入力してください"
      />
      <button onClick={addNote}>追加</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

以下のように addNote 関数を追加して、ボタンをクリックしたときにメモがリストに追加されるようにします。

これで以下の画像のようにメモをリスト化できます。

実装手順③

ステップ１：メモを削除する機能の追加

 import React, { useState } from 'react';

function App() {
  const [notes, setNotes] = useState([]); // メモのリストを保存するための状態
  const [input, setInput] = useState(''); // メモの入力を保存するための状態 

  // メモを追加する関数
  const addNote = () => {
    if (input.trim()) { // 空白だけでない場合にメモを追加
      setNotes([...notes, input]); // 新しいメモをリストに追加
      setInput(''); // 入力欄を空にする
    }
  };

  // メモを削除する関数
  const deleteNote = (index) => { 
  // index（削除したいメモの番号）を受け取る関数、deleteNoteを作成
  const newNotes = notes.filter((note, i) => i !== index);
  // filterを使って、indexと一致しないメモだけを新しいリストに残す
  setNotes(newNotes);
  // 新しいメモのリストを保存する
};

  return (
    <div className="App">
      <h1>メモ帳アプリ</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="メモを入力してください"
      />
      <button onClick={addNote}>追加</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>
            {note}
            <button onClick={() => deleteNote(index)}>削除</button> {/* 削除ボタンを追加 */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

deleteNote 関数:

＝の使い方について

1 == '1'    // true  (値は同じなので型変換が行われて比較される)
1 === '1'   // false (型が異なるため等しくない)
1 === 1     // true  (値も型も同じ)

このコードでメモを削除できるようになります。

ステップ２：編集ボタンの追加

import React, { useState } from 'react';

function App() {
  const [notes, setNotes] = useState([]); // メモのリストを保存するための状態
  const [input, setInput] = useState(''); // メモの入力を保存するための状態
  const [editingIndex, setEditingIndex] = useState(null); // 編集中のメモのインデックス
  const [editingInput, setEditingInput] = useState(''); // 編集用の入力欄の内容

  // メモを追加する関数
  const addNote = () => {
    if (input.trim()) { // 空白だけでない場合にメモを追加
      setNotes([...notes, input]);
      setInput('');
    }
  };

  // メモを削除する関数
  const deleteNote = (index) => {
    const newNotes = notes.filter((note, i) => i !== index);
    setNotes(newNotes);
  };

  // 編集ボタンがクリックされたときの関数
  const startEditing = (index) => {
    setEditingIndex(index); // 編集中のメモのインデックスを設定
    setEditingInput(notes[index]); // 編集用の入力欄に現在のメモの内容を設定
  };

  // 編集内容を保存する関数
  const saveEdit = () => {
    const newNotes = [...notes];
    newNotes[editingIndex] = editingInput; // 編集された内容でリストを更新
    setNotes(newNotes);
    setEditingIndex(null); // 編集モードを解除
    setEditingInput(''); // 編集用入力欄をクリア
  };

  return (
    <div className="App">
      <h1>メモ帳アプリ</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="メモを入力してください"
      />
      <button onClick={addNote}>追加</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>
            {editingIndex === index ? (
              <>
                <input
                  type="text"
                  value={editingInput}
                  onChange={(e) => setEditingInput(e.target.value)}
                />
                <button onClick={saveEdit}>保存</button>
              </>
            ) : (
              <>
                {note}
                <button onClick={() => startEditing(index)}>編集</button>
                <button onClick={() => deleteNote(index)}>削除</button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このコードで編集ができるようになります。編集ボタンをクリックすると二枚目の画像のようになり、編集した新しいメモを保存できます。

ステップ３：日時情報を追加する

import React, { useState } from 'react';

function App() {
  const [notes, setNotes] = useState([]); // メモのリストを保存するための状態
  const [input, setInput] = useState(''); // メモの入力を保存するための状態
  const [editingIndex, setEditingIndex] = useState(null); // 編集中のメモのインデックス
  const [editingInput, setEditingInput] = useState(''); // 編集用の入力欄の内容

  // メモを追加する関数
  const addNote = () => {
    if (input.trim()) {
      const newNote = {
        content: input,
        timestamp: new Date().toLocaleString()
      };
      setNotes([...notes, newNote]);
      setInput('');
    }
  };

  // メモを削除する関数
  const deleteNote = (index) => {
    const newNotes = notes.filter((note, i) => i !== index);
    setNotes(newNotes);
  };

  // 編集ボタンがクリックされたときの関数
  const startEditing = (index) => {
    setEditingIndex(index);
    setEditingInput(notes[index].content);
  };

  // 編集内容を保存する関数
  const saveEdit = () => {
    const newNotes = [...notes];
    newNotes[editingIndex].content = editingInput;
    setNotes(newNotes);
    setEditingIndex(null);
    setEditingInput('');
  };

  return (
    <div className="App">
      <h1>メモ帳アプリ</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="メモを入力してください"
      />
      <button onClick={addNote}>追加</button>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>
            {editingIndex === index ? (
              <>
                <input
                  type="text"
                  value={editingInput}
                  onChange={(e) => setEditingInput(e.target.value)}
                />
                <button onClick={saveEdit}>保存</button>
              </>
            ) : (
              <>
                <div>{note.content}</div>
                <small>{note.timestamp}</small>
                <button onClick={() => startEditing(index)}>編集</button>
                <button onClick={() => deleteNote(index)}>削除</button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

現在のコードでは、メモの内容を直接配列に追加していますが、メモの内容だけでなく日時も一緒に保存するために、オブジェクトとして保存します。

 // メモを追加する関数
  const addNote = () => {
    if (input.trim()) { // 空白だけでない場合にメモを追加
      setNotes([...notes, input]);
      setInput('');
    }
  };

⇓

  // メモを追加する関数
  const addNote = () => {
    if (input.trim()) {
      const newNote = {
        content: input,
        timestamp: new Date().toLocaleString()
      };
      setNotes([...notes, newNote]);
      setInput('');
    }
  };

notes.map の中で、note という変数がオブジェクトになったため、note.content と note.timestamp を使って内容と日時をそれぞれ表示します。

              <>
                {note}
                <button onClick={() => startEditing(index)}>編集</button>
                <button onClick={() => deleteNote(index)}>削除</button>
              </>

⇓

              <>
                <div>{note.content}</div>
                <small>{note.timestamp}</small>
                <button onClick={() => startEditing(index)}>編集</button>
                <button onClick={() => deleteNote(index)}>削除</button>
              </>

これでメモを追加した日時が表示されるようになります。

このコードをwordpressのカスタムHTMLに貼り付けるには以下の①を②に変える必要があります。

①

import React, { useState } from 'react';

②

<!-- ReactとReactDOMのスクリプトを読み込む -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<!-- Babelを使用してJSXを解釈させる -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="react-root"></div> <!-- Reactアプリのマウント先 -->

<script type="text/babel">
  const { useState } = React;

あとこのメモデータをローカルストレージに保存するには以下のコードを修正する必要があります。

追加されたコード

// useEffectの追加：ページが読み込まれたときにローカルストレージからメモを取得
useEffect(() => {
  const savedNotes = JSON.parse(localStorage.getItem('notes'));
  if (savedNotes) {
    setNotes(savedNotes);
  }
}, []);

// ローカルストレージに保存しつつ状態を更新する関数の追加
const saveNotesToLocalStorage = (newNotes) => {
  localStorage.setItem('notes', JSON.stringify(newNotes));
  setNotes(newNotes);
};

修正されたコード
addNote、deleteNote、saveEdit関数内でsetNotesを削除し、代わりにsaveNotesToLocalStorageを使用してローカルストレージに保存。

addNote関数（修正後）

const addNote = () => {
  if (input.trim()) {
    const newNote = {
      content: input,
      timestamp: new Date().toLocaleString()
    };
    const newNotes = [...notes, newNote];
    saveNotesToLocalStorage(newNotes); // ローカルストレージに保存し、状態も更新
    setInput('');
  }
};

deleteNote関数（修正後）

const deleteNote = (index) => {
  const newNotes = notes.filter((note, i) => i !== index);
  saveNotesToLocalStorage(newNotes); // ローカルストレージに保存
};

saveEdit関数（修正後）

const saveEdit = () => {
  const newNotes = [...notes];
  newNotes[editingIndex].content = editingInput;
  saveNotesToLocalStorage(newNotes); // ローカルストレージに保存
  setEditingIndex(null);
  setEditingInput('');
};

変更された部分

// 修正前
const { useState } = React;

// 修正後
const { useState, useEffect } = React;

以下が修正したコード全体です。

<!-- ReactとReactDOMのスクリプトを読み込む -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<!-- Babelを使用してJSXを解釈させる -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="react-root"></div> <!-- Reactアプリのマウント先 -->

<script type="text/babel">
  const { useState, useEffect } = React;

  function App() {
    const [notes, setNotes] = useState([]); // メモのリストを保存するための状態
    const [input, setInput] = useState(''); // メモの入力を保存するための状態
    const [editingIndex, setEditingIndex] = useState(null); // 編集中のメモのインデックス
    const [editingInput, setEditingInput] = useState(''); // 編集用の入力欄の内容

    // ページが読み込まれたときにローカルストレージからメモを取得
    useEffect(() => {
      const savedNotes = JSON.parse(localStorage.getItem('notes'));
      if (savedNotes) {
        setNotes(savedNotes);
      }
    }, []);

    // メモをローカルストレージに保存する関数
    const saveNotesToLocalStorage = (newNotes) => {
      localStorage.setItem('notes', JSON.stringify(newNotes));
      setNotes(newNotes);
    };

    // メモを追加する関数
    const addNote = () => {
      if (input.trim()) {
        const newNote = {
          content: input,
          timestamp: new Date().toLocaleString()
        };
        const newNotes = [...notes, newNote];
        saveNotesToLocalStorage(newNotes); // 新しく追加された部分：ローカルストレージに保存し、状態も更新
        setInput('');
      }
    };

    // メモを削除する関数
    const deleteNote = (index) => {
      const newNotes = notes.filter((note, i) => i !== index);
      saveNotesToLocalStorage(newNotes); // 新しく追加された部分：ローカルストレージに保存
    };

    // 編集ボタンがクリックされたときの関数
    const startEditing = (index) => {
      setEditingIndex(index);
      setEditingInput(notes[index].content);
    };

    // 編集内容を保存する関数
    const saveEdit = () => {
      const newNotes = [...notes];
      newNotes[editingIndex].content = editingInput;
      saveNotesToLocalStorage(newNotes); // 新しく追加された部分：ローカルストレージに保存
      setEditingIndex(null);
      setEditingInput('');
    };

    return (
      <div className="App">
        <h1>メモ帳アプリ</h1>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="メモを入力してください"
        />
        <button onClick={addNote}>追加</button>
        <ul>
          {notes.map((note, index) => (
            <li key={index}>
              {editingIndex === index ? (
                <>
                  <input
                    type="text"
                    value={editingInput}
                    onChange={(e) => setEditingInput(e.target.value)}
                  />
                  <button onClick={saveEdit}>保存</button>
                </>
              ) : (
                <>
                  <div>{note.content}</div>
                  <small>{note.timestamp}</small>
                  <button onClick={() => startEditing(index)}>編集</button>
                  <button onClick={() => deleteNote(index)}>削除</button>
                </>
              )}
            </li>
          ))}
        </ul>
      </div>
    );
  }

  ReactDOM.render(<App />, document.getElementById('react-root'));
</script>

本日の感想

ものすごく苦労して作った割に出来上がったアプリはものすごいシンプル。基礎を学ぶためには仕方がないことだけどつまらないアプリの作成はしんどいです。入力したメモをローカルストレージに保存して、画面を更新してもメモが消えないようにするコード変更も地味に難しい。これだけのことになんでこんな大幅な変更が必要なのかと思ってしまいます。

録画していたテレビ番組を見たら、写真データをAIに読み込ませて指示を出すと、その指示通りに写真に写った人物が動き出すというアプリが紹介されていました。これからどんどん今までになかったものがAIによって作られていくと考えると、メモ帳アプリくらいしか作れない自分のレベルに焦りを感じます。