Markdown Previewer
リアルタイムでMarkdownのプレビューができるWebアプリケーション。
プロジェクトのメイン画像
概要と目的
このプロジェクトの目的は、Markdown記法で文章を書くユーザーのために、リアルタイムで表示を確認できる環境を提供することです。学習やドキュメント作成の効率を上げることを目指しました。
技術スタック
- React
- JavaScript (ES6+)
- CSS3
- Marked.js (Markdown parser)
工夫した点・苦労した点
課題: ユーザーの入力に即座に反応し、プレビューを高速に更新する必要がありました。
解決策: Reactのステート管理を利用し、テキストエリアの入力イベント(`onChange`)をトリガーにして、入力値が変更されるたびにコンポーネントが再レンダリングされるように設計しました。また、Markdownの解析には軽量な`Marked.js`ライブラリを選定し、パフォーマンスの低下を防ぎました。
このプロジェクトから学んだこと
この開発を通じて、Reactの基本的な使い方（コンポーネント、ステート、プロップス）と、外部ライブラリを組み込む方法について深く理解することができました。また、ユーザーの入力を受け取って即座にUIに反映させる、インタラクティブなアプリケーション開発の基礎を固めることができました。