← BACK
COMING SOON

Realtime Markdown Editor

データの流れと状態保存を学ぶ実践プラン

■ Step 1: 2ペインUIの構築

画面を左右に分割し、左側にテキスト入力用の textarea、右側にプレビュー表示用の div を配置します。

■ Step 2: リアルタイム変換機能

入力イベントを監視し、入力されるたびにMarkdownをHTMLにパースしてプレビュー領域に出力します。(初期は正規表現の自作、または marked.js を使用)

■ Step 3: LocalStorage 保存

Web Storage API の localStorage を用い、入力内容を自動保存。リロード時にもデータが復元されるようにします。

プランの理由:

「打った文字が変換されて見える」というデータのI/O(入出力)を先に確立し、その後に保存機能などのユーザビリティを後付けすることで、実用的なアプリ開発のセオリーを学びます。