マークダウンエディタ (TypeScript + React + Storybook)

React 18とTypeScript、Atomic Designパターンで構築されたリアルタイムマークダウンエディタです。

デモプレイ

https://yunbow.github.io/react-app-markdown-editor/demo/

主要機能

エディタ機能

• リアルタイムマークダウンプレビュー
• シンタックスハイライト対応
• ツールバーによる書式設定支援
• ローカルストレージでの自動保存・復元

エクスポート機能

• Markdownファイル (.md) として保存
• HTMLファイル (.html) として保存
• スタイル付きHTML出力

操作方法

• ツールバーボタン: 書式設定を簡単挿入
• 太字: 選択テキストを 太字 に変換
• 斜体: 選択テキストを 斜体 に変換
• 見出し: ## 見出し を挿入
• リンク: リンクテキスト を挿入
• 画像: を挿入
• コード: インライン コード またはコードブロックを挿入
• 保存: .md と .html の両形式でダウンロード
• クリア: エディタ内容を全消去

技術スタック

• React 18 - UIライブラリ
• TypeScript - プログラミング言語
• Storybook 7 - コンポーネント開発・ドキュメント
• CSS Modules - スタイリング
• Vite - ビルドツール
• marked.js - マークダウンパーサー
• highlight.js - シンタックスハイライト

プロジェクト構造

src/
├── components/
│   ├── atoms/          # 基本コンポーネント
│   │   ├── Button/     # ツールバーボタン
│   │   ├── TextArea/   # マークダウン入力エリア
│   │   └── Text/       # テキスト表示
│   ├── molecules/      # 機能単位コンポーネント
│   │   ├── Toolbar/    # ツールバー
│   │   ├── EditorPanel/# エディタパネル
│   │   └── PreviewPanel/ # プレビューパネル
│   └── organisms/      # 画面領域コンポーネント
│       └── MarkdownEditor/ # アプリケーション全体
├── hooks/              # カスタムフック
│   └── useMarkdownEditor.ts # エディタロジック
├── stories/            # Storybook用ストーリー
├── types/              # TypeScript型定義
├── utils/              # ユーティリティ関数
├── App.tsx             # メインアプリ
└── main.tsx            # エントリーポイント

Atomic Design構成

Atoms（基本コンポーネント）

• Button - ツールバーボタン
• TextArea - マークダウン入力エリア
• Text - テキスト表示コンポーネント

Molecules（機能単位）

• Toolbar - 書式設定ボタン群
• EditorPanel - エディタエリア（ヘッダー+テキストエリア）
• PreviewPanel - プレビューエリア（ヘッダー+プレビュー）

Organisms（画面領域）

• MarkdownEditor - アプリケーション全体

スクリプト

# セットアップ
npm install

# 開発サーバー起動
npm run dev

# ビルド
npm run build

# プレビュー
npm run preview

# Storybook起動
npm run storybook

# Storybook ビルド
npm run build-storybook

ライセンス

MIT License