Markdownメモ帳

左に Markdown を書くと、右に整形結果がそのまま出るメモ帳です。入力するたびにブラウザへ自動保存されるので、保存ボタンはありません。複数のメモを切り替えて使えます。記法を確認したり下書きを整えたりするために、アカウント登録のいらない書き場所が欲しくて作りました。

こんなときに使う

• ブログや記事の下書きを Markdown で書いて、見出しやリストの崩れをその場で確かめたい
• 読んだ記事の要点を、箇条書きと引用でざっと整理しておきたい
• Markdown の記法をうろ覚えのまま書いて、正しく効いているか確認したい
• 会議の途中で走り書きして、後から見出しを付けて構造を整えたい

使い方

1. 開くと、記法の例が入ったサンプルメモが表示されます。中身を消して自分の文章を書き始めても構いません。
2. 左のエリアに Markdown を入力すると、右のプレビューが即座に更新されます。保存操作は不要です。
3. 別のメモを作りたいときは右上の「＋ 新規」を押します。空のメモが一覧の先頭に追加され、入力欄にフォーカスが移ります。
4. 左（スマホでは上）の一覧からタイトルをタップすると、そのメモに切り替わります。一覧は更新が新しい順に並びます。
5. 不要になったメモはゴミ箱アイコンで削除します。スマホでは「編集」「プレビュー」のタブで表示を切り替えます。

仕様と機能

対応している記法は次のとおりです。

種類	書き方
見出し	# から ###### までの6段階
強調	**太字**、*斜体*、斜体、取り消し線
コード	`インラインコード`、``` で囲むコードブロック
リンク・画像	文字、
リスト	-・*・+ の箇条書き、1. の番号付き
その他	> の引用、--- などの水平線

メモの一覧に出るタイトルは、本文から自動で作ります。空行を除いた最初の行を取り出し、行頭の # を落として先頭40文字までを表示します。本文が空のときは「無題のメモ」になります。タイトルを別途入力する欄はありません。

画面右下には、開いているメモの文字数・単語数・行数が常に出ます。単語数は空白以外の連続を1語として数えています。

保存先はブラウザの localStorage で、メモ本体と「最後に開いていたメモ」を別のキーに分けて記録しています。次に開いたときは前回のメモがそのまま復元されます。外部のサーバーに本文を送る処理は入っていません。

作るときに決めたこと

Markdown の変換部分は、既存のライブラリを使わず自分で書きました。理由は変換の順番を自分で握りたかったからです。この実装では、まず入力全体を HTML エスケープしてから解析に入ります。つまり本文に生の HTML タグを書いても、それはただの文字として表示されます。プレビューは HTML をそのまま流し込む作りなので、ここを逆順にすると自分のメモが自分のページを壊せてしまいます。リンクの URL も、http・https・mailto・相対パス以外は弾いて、リンクをやめてただの文字列として出すようにしました。ライブラリを入れれば早いのですが、この部分の挙動だけは他人任せにしたくありませんでした。

タイトル欄を作らなかったのも意識した判断です。メモに名前を付けさせると、書き始める前にひとつ考える作業が挟まります。走り書きの道具としてはそれが一番の摩擦になるので、1行目を勝手にタイトルとして扱う方式にしました。見出し記号を落としているのは、一覧に「# はじめに」ではなく「はじめに」と並んだほうが読みやすいからです。

一方で妥協した点もあります。ネストしたリストは、プレビュー上ではフラットな一段のリストとして表示されます。表組みにも対応していません。この2つはパーサーの状態管理を一気に複雑にする割に、走り書きのメモで使う頻度が高くないと判断して見送りました。サンプルメモの中でネストを書いているのは、あくまで入力例としてです。

削除の確認ダイアログも入れていません。代わりに、最後の1件を消すと空のメモが自動で1件用意され、一覧が空になって操作不能になることを防いでいます。

注意点

• メモはブラウザの localStorage にのみ保存されます。別の端末やブラウザには引き継がれません。閲覧履歴やサイトデータの削除、プライベートウィンドウの終了で消えます。
• 削除の取り消しはできません。長く残したい文章は、別の場所にも控えを取ってください。
• 対応記法は上の表の範囲です。表組み、ネストしたリストの階層表示、脚注、タスクリストなどは変換されません。