2024年10月、memo-markdown-calendar を StackBlitz でさくっと作った。日付と Markdown を紐づけたい、というシンプルな発想からのスタート。

package.json の name が integrated-memo-calendar-todo-app になっていて、要は メモ + カレンダー + TODO を1画面に統合 したかった試作。StackBlitz 上の bolt 系テンプレートで生成して、そのまま push しただけなのでコミットは Initial 1つだけ。

環境

  • React + Vite + Tailwind
  • @monaco-editor/react（Markdown 入力）
  • react-big-calendar（カレンダー）
  • react-markdown（プレビュー）
  • date-fns

構成

src/components/ にそのまま機能が並んでいる。

  • MarkdownEditor — Monaco で Markdown を書く
  • Memo — メモ表示
  • TodoList — TODO
  • TimelineComponent / MarkwhenTimeline — markwhen 風のタイムライン

カレンダーの日付に Markdown のメモをぶら下げて、横でタイムラインとして眺める、みたいなイメージ。Monaco をエディタに使うと、ブラウザ上でもそれなりに書ける UI になるのが良かった。

おわり

統合ツールとして本気で作り込んだわけではなくて、「日付 × Markdown」の手触りを確かめたかった試作。この「ドキュメントを時系列で扱う」感覚は、のちの bulldoc 的なドキュメント UI を考えるときの着想の一つになった気がする。StackBlitz は、この手の使い捨て UI 検証にはやっぱり速い。