Markdown Editor
Markdownで記述しながら、リアルタイムにプレビュー確認もできる高機能エディタ。
概要と目的
Markdownで入力すると、その場でレンダリングされた表示に切り替わる、WYSIWYGライクな操作感のエディタです。記法を覚えながら、直感的にドキュメント作成ができる環境を目指しました。
技術スタック
- React
- JavaScript (ES6+)
- CSS3
- Marked.js (Markdown parser)
工夫した点・苦労した点
ユーザーの入力に応じて、テキストエリアを動的にHTML要素に変換して表示する機能を実装しました。入力中のカーソル位置の保持や、日本語入力（IME）変換との整合性を取る部分に苦労しましたが、Reactの高度なステート管理を駆使することで、自然な編集体験を実現しました。
このプロジェクトから学んだこと
ユーザーの入力にリアルタイムで反応する、インタラクティブなUI開発の経験を深めました。特に、テキスト入力のパフォーマンスを損なわずに、複雑なDOM更新を行うための設計手法を学ぶことができました。