昨日コミットできず 12 日で連続コミットが途絶えた。気づいたのは深夜。非常にショックを受けたが仕方ないのでまた始めようと思うことができた。 年を取るとだんだん執着がなくなっていくようだ。感情の起伏も穏やかになってきているのを感じる。 前は嫌なことが頭の中でずっとループして苦しかったが、今はそれほどループしなくなった。今でもかなりの頻度でループしているがループ中に起こる感情の起伏が穏やかになった。

今日の開発

今日はブラウザ確認ダイアログを独自モーダルに改修した。

• 改修前

const handleDelete = async () => {
  const confirmDelete = confirm('本当にこの絵本を削除してもよろしいですか？');
  if (!confirmDelete) return;

  // 削除処理
};

• 改修後

// モーダルの開閉ステート
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

// 削除ボタンを押したときにモーダルを開く
const handleDelete = () => {
  setIsModalOpen(true);
};

// キャンセルボタンを押したときにモーダルを閉じる
const handleCloseModal = () => {
  setIsModalOpen(false);
};

const handleConfirmDelete = async () => {
  // 削除処理
};

  return (
    <div>
      {
        isModalOpen && (
          <div className={styles.modalOverlay}>
            <div className={styles.modal}>
              <p>本当にこの絵本を削除してもよろしいですか？</p>
              <div className={styles.modalButtons}>
                <button className={styles.button} onClick={handleConfirmDelete}>
                  削除する
                </button>
                <button className={styles.button} onClick={handleCloseModal}>
                  キャンセル
                </button>
              </div>
            </div>
          </div>
        );
      }
      <div>
        {/* メインコンテンツ */}
      </div>
    </div>
  );

useState を使ってモーダルの表示・非表示を管理する一般的な React の実装。CSS に慣れていないので詳しいコメントを書いた。

/* モーダルのオーバーレイ */
.modalOverlay {
  /* 以下、画面全体を半透明の黒色にする */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 以下、モーダルウィンドウを水平・垂直方向に中央寄せ */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 以下、他のコンポーネントより優先して表示する */
  z-index: 998;
}

/* モーダルウィンドウ */
.modal {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
}

.modalButtons {
  display: flex;
  justify-content: space-around;
  margin-top: 1.5rem;
}