こんにちは。今回は、個人アプリに追加したWiki機能に「Markdown表示」を導入した経緯と、その実装、そして使ってみて感じたことについてお話ししたいと思います。

パスワード管理の記事は以下を参照してください。

【第1回】なぜ自分でパスワード管理アプリを作ったのか？〜40代エンジニアの試行錯誤〜

【第1回】の記事は以下を参照してください。

【第1回】なぜWiki機能を追加しようと思ったのか？〜40代エンジニアがCodeXに挑む理由〜

【第2回】の記事は以下を参照してください。

【第2回】Wikiテーブルの追加とダッシュボードの改修

【第3回】の記事は以下を参照してください。

【第3回】Wiki記事の登録・更新機能を実装する〜個人アプリに柔軟な知識管理を〜

【第4回】の記事は以下を参照してください。

【第4回】Wiki一覧と詳細画面を作る〜情報の整理と見返しやすさを意識して〜

Markdown表示を導入した理由

Wikiに情報を蓄積していく中で、文章に見出しやリスト、コードブロックなどの構造を加えたくなる場面が増えてきました。 HTMLを直書きするのは大変なので、「Markdownで書けたら楽だな」と感じたのがきっかけです。

そこで、Markdownを表示するために以下のプラグインを導入しました。

    
npm install react-markdown remark-gfm rehype-highlight
    
  

Tailwind CSSと組み合わせることで、見た目も整った表示ができるようになりました。

Codexで実装支援

OpenAI Codexにも手伝ってもらいながら、次のようなプロンプトを入力しました。

Codexはこの指示に応じて、次のようなコードを提示してくれました。

    
<ReactMarkdown
  className="prose whitespace-pre-wrap border p-4 rounded bg-white"
  remarkPlugins={[remarkGfm]}
  rehypePlugins={[rehypeHighlight]}
>
  {wiki.content}
</ReactMarkdown>
    
  

実際に適用してみると、記事の見出しやリストがきれいに表示され、技術メモの可読性が格段に向上しました。

使ってみて感じたこと

Markdown対応によって、記録の質が上がったのを実感しています。

また、react-markdownはHTMLのような複雑な知識を必要としないので、書きながら整理するという「考えるプロセス」が非常に快適になりました。

おわりに

Markdown表示は、ちょっとした見た目の改善にとどまらず、「知識を残す楽しさ」を一段階引き上げてくれました。 Codexを活用した今回のプロセスも、自分にとって貴重な学びでした。

これからも「ローカルで完結するシンプルな仕組み」を追求しながら、技術と向き合っていきたいと思います。