MarkdownをHTMLに即時変換！自作エディターの作り方【JavaScriptチュートリアル】

## はじめに

マークダウンは、シンプルな記法で文章を整形できる便利なツールです。  
今回は、マークダウン入力部分と HTML プレビュー部分を持つエディターを作成し、入力に合わせて即座に変換結果を表示するリアルタイムマークダウンエディターを作ってみます🚀。  
このチュートリアルを通して、HTML、CSS、JavaScript の基本を実践的に学びながら、実装例を具体的に把握できる内容となっています。

---

<p class="codepen" data-height="619" data-default-tab="result" data-slug-hash="xbxdyme" data-pen-title="Markdown Editor" data-editable="true" data-user="yamamotoyushi" style="height: 619px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/xbxdyme">
  Markdown Editor</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


## 必要な技術とライブラリ

- **HTML**  
  Webページの基本構造を作成します。
- **CSS**  
  エディターの見た目を整え、レスポンシブなデザインを実現します。
- **JavaScript**  
  ユーザー入力に応じて、マークダウンを HTML にリアルタイム変換するロジックを実装します。  
- **Showdown**  
  軽量なマークダウン変換ライブラリ。  
  CDN から簡単に読み込むことができます。

---

## 1. HTML 構造の作成

まずは、エディターの基本となる HTML の構造を作成します。  
以下のサンプルコードでは、**textarea** を使ってマークダウン入力エリアを、**div** 要素で変換後の HTML プレビューを表示しています。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="editor">
            <textarea id="markdown-input" placeholder="Type Markdown here..."></textarea>
        </div>
        <div class="preview" id="html-preview"></div>
        <div class="controls">
            <button id="download-btn">Download as HTML</button>
            <label for="dark-mode-toggle">
                <input type="checkbox" id="dark-mode-toggle"> Dark Mode
            </label>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
```

---

## 2. CSS で基本のスタイルを整える

次に、エディターのレイアウトやスタイルの基本を CSS で定義します。  
シンプルで見やすいデザインに加え、レスポンシブ対応（モバイルでも利用可能）にしています。

```css
/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.editor, .preview {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.editor textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
}

.preview {
  border-left: 1px solid #ccc;
}

.controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#download-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

#dark-mode-toggle {
  margin-left: 5px;
}

/* ダークモード用のスタイル */
.dark-mode {
  background-color: #333;
  color: #fff;
}

.dark-mode .editor textarea,
.dark-mode .preview {
  background-color: #444;
  color: #fff;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
  }
  .editor, .preview {
    height: 50vh;
  }
}
```

---

## 3. JavaScript で機能実装

JavaScript で、ユーザーがエディターに入力するたびにマークダウンを HTML に変換し、プレビュー欄に表示するロジックを実装します。  
また、HTML のダウンロード機能・ダークモード切替機能もご紹介します。

```javascript
// script.js
document.addEventListener('DOMContentLoaded', () => {
  const markdownInput = document.getElementById('markdown-input');
  const htmlPreview = document.getElementById('html-preview');
  const downloadBtn = document.getElementById('download-btn');
  const darkModeToggle = document.getElementById('dark-mode-toggle');

  // Showdown コンバータの初期化
  const converter = new showdown.Converter();

  // マークダウンを HTML に変換する関数
  function convertMarkdownToHtml(markdown) {
    return converter.makeHtml(markdown);
  }

  // プレビューを更新する処理
  function updatePreview() {
    const markdown = markdownInput.value;
    const html = convertMarkdownToHtml(markdown);
    htmlPreview.innerHTML = html;
  }

  // 入力エリアでの変更を監視
  markdownInput.addEventListener('input', updatePreview);

  // HTML として保存する処理
  downloadBtn.addEventListener('click', () => {
    const markdown = markdownInput.value;
    const html = convertMarkdownToHtml(markdown);
    const blob = new Blob([html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'output.html';
    a.click();
  });

  // ダークモードの切り替え処理
  darkModeToggle.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode');
  });

  // 初期表示時のプレビュー更新
  updatePreview();
});
```

---

## 4. Showdown ライブラリの導入

本エディターでは、Showdown ライブラリを利用してマークダウンを HTML に変換しています。  
CDN を利用するだけで簡単に導入でき、設定もシンプルです。  
最新のバージョンは [jsDelivr の CDN](https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js) から入手可能です。

---

## 5. 追加機能の実装 ✨

### ダウンロードボタン

ユーザーが作成した HTML をファイルとしてダウンロードできるようにする機能です。  
上記の JavaScript コード内でも実装している通り、Blob オブジェクトを利用して実現します。

### ダークモード

夜間や目に優しい表示を実現するために、簡単なチェックボックスで画面全体のテーマを切り替える機能を追加しています。  
CSS と JavaScript のクラス操作で柔軟にスタイルを変更できるようになっています😎。

---

## シンプルなフローチャートで理解する全体の流れ

```mermaid
flowchart TD
    A[ユーザーがマークダウン入力] --> B[JavaScript のイベントリスナーが検知]
    B --> C[Showdown ライブラリで変換]
    C --> D[HTML プレビューに反映]
    D --> E[追加機能: ダウンロード・ダークモード切替]
```

上記のフローチャートは、エディターがどのようにして入力を受け取り処理し、結果を反映しているかの流れを簡潔に示しています。

---

## まとめ

今回のチュートリアルでは、基本的な HTML、CSS、JavaScript の知識を用いて、リアルタイムでマークダウンを HTML に変換するエディターを実装する方法を解説しました。  
具体的なコード例とシンプルな図、さらには追加機能の実装も紹介し、プログラマーやエンジニア初心者にも実装イメージがしっかりと伝わる内容になっています。  
このプロジェクトを通じて、Web 制作におけるフロントエンド実装の基礎を身につけ、さらなる応用開発にチャレンジしてみてください😊

以上、マークダウンエディターの作り方の解説でした。ぜひ実装して、自分だけのエディターを作ってみましょう！

---

### 最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)

🌳 [らくらくサイト](https://rakuraku-site.prodouga.com/)