データの流れと状態保存を学ぶ実践プラン
画面を左右に分割し、左側にテキスト入力用の textarea、右側にプレビュー表示用の div を配置します。
入力イベントを監視し、入力されるたびにMarkdownをHTMLにパースしてプレビュー領域に出力します。(初期は正規表現の自作、または marked.js を使用)
Web Storage API の localStorage を用い、入力内容を自動保存。リロード時にもデータが復元されるようにします。
「打った文字が変換されて見える」というデータのI/O(入出力)を先に確立し、その後に保存機能などのユーザビリティを後付けすることで、実用的なアプリ開発のセオリーを学びます。