SS-Infra ← ポータルに戻る

marked.js

1. marked.jsの概要と目的

marked.js は、Markdown形式のテキストをHTMLへ変換（パース）するための、軽量なJavaScriptライブラリです。

WebブラウザやNode.js環境などで利用でき、Markdownエディタやドキュメントビューア、リアルタイムプレビュー機能を備えたWebツールなど、MarkdownをHTMLとして表示するさまざまな場面で活用されています。

この章では、marked.js がどのようなライブラリなのか、また、どのような場面で利用されているのかを確認します。

marked.jsとは？

marked.js は、Markdown形式で記述されたテキストを解析し、HTMLへ変換するJavaScriptライブラリです。

例えば、次のようなMarkdownを、

# 見出し

- リスト1
- リスト2

marked.js を使ってHTMLへ変換すると、見出しやリストなどのHTML要素として扱えるようになります。

このように、MarkdownをWebページ上で表示できるHTMLへ変換する処理を、自分で一から実装することなく利用できる点が marked.js の大きな特徴です。

marked.jsはどのような場面で使われるのか？

marked.js は、MarkdownをHTMLとして表示する必要があるWebアプリケーションやツールなどで利用できます。

例えば、Markdownエディタのプレビュー機能、ブログやドキュメントの表示、Markdown形式の入力を受け付けるWebツールなどが代表的な利用例です。

MarkdownをHTMLへ変換する処理をライブラリに任せることで、アプリケーション側ではMarkdownの解析処理を一から実装する必要がなくなります。

2. marked.jsの仕組み・規格・主な特徴

marked.js は、Markdownの記法を解析し、それぞれの構文に対応したHTMLへ変換します。

ここでは、MarkdownをHTMLへ変換する基本的な仕組みと、実際のコード例を確認します。

MarkdownをHTMLへ変換する仕組み

marked.js では、Markdown形式の文字列を marked.parse() に渡すことで、HTMLへ変換できます。

例えば、

# 見出し

- リスト1
- リスト2

というMarkdownを入力すると、見出しやリストに対応するHTMLとして出力できます。

この処理によって、MarkdownをそのままHTMLとして表示できる形へ変換できます。

GFMなどのMarkdown記法に対応する

marked.js は、標準的なMarkdownの記法だけでなく、GitHub Flavored Markdown（GFM）で利用される記法などにも対応しています。

例えば、Markdownでは見出しやリストだけでなく、コードブロックやテーブルなど、さまざまな記法が利用されます。

こうした記法を自分で解析してHTMLへ変換する処理を実装するのは手間がかかりますが、marked.js を利用することで、その処理をライブラリに任せることができます。

MarkdownをHTMLへ変換する

実際に marked.js を使ってMarkdownをHTMLへ変換する基本的なコードは次のとおりです。

【記述・構造の具体例】

※Markdown文字列を marked.parse() に渡してHTMLへ変換する基本的な記述例です。

import { marked } from 'marked';

const markdownString = '# 見出し\n\n- リスト1\n- リスト2';
const html = marked.parse(markdownString);

console.log(html);

このように、Markdown文字列を marked.parse() に渡すだけでHTMLへ変換できます。

Markdownの構文解析処理を自前で実装する必要がないため、Markdownを扱うWebアプリケーションを比較的シンプルに構築できます。

3. marked.jsが使われる理由・メリットと活用シーン

marked.js が利用される大きな理由は、Markdownの解析やHTMLへの変換処理を自分で実装する手間を減らせることです。

特に、Markdownを入力として受け取り、HTMLとしてリアルタイムに表示するようなWebツールでは、Markdownパーサーとして利用できます。

marked.jsを使うメリット

Markdownの構文を解析してHTMLへ変換する処理を自前で実装すると、見出し・リスト・リンク・コードブロックなど、さまざまな構文に対応する必要があります。

marked.js を利用すれば、こうしたMarkdownのパース処理をライブラリに任せることができます。

そのため、アプリケーション側ではMarkdownの解析処理そのものではなく、Markdownをどのように入力・表示するかという本来の機能の実装に集中しやすくなります。

リアルタイムプレビューで活用する

marked.js は、Markdownエディタなどのリアルタイムプレビュー機能にも利用できます。

例えば、ユーザーがMarkdownを入力するたびに marked.parse() でHTMLへ変換し、その結果をプレビュー領域へ表示することで、入力内容をHTMLとして確認できる仕組みを作れます。

当サイトの「Markdownテーブルジェネレーター」のように、Markdownの入力結果をリアルタイムに確認するWebツールでも、このようなMarkdownからHTMLへの変換処理が役立ちます。

Markdownを扱うWebツールで活用する

Markdownを利用するブログ、ドキュメントビューア、エディタ、各種Webツールなどでは、入力されたMarkdownをHTMLへ変換する処理が必要になる場合があります。

marked.js を利用することで、この変換処理をアプリケーションへ組み込みやすくなります。

そのため、Markdownを扱うWebアプリケーションを開発する際の選択肢の一つとして利用できます。

4. marked.jsの導入・運用時の注意点と課題

marked.js はMarkdownをHTMLへ変換するための便利なライブラリですが、MarkdownをHTMLへ変換できることと、そのHTMLが安全であることは別の問題です。

特に、ユーザーが入力したMarkdownをHTMLとしてそのままWebページへ表示する場合は、HTMLやスクリプトが意図せず実行されないように注意する必要があります。

ユーザー入力をそのままHTMLとして扱わない

例えば、ユーザーが入力したMarkdownを marked.parse() でHTMLへ変換し、その結果を innerHTML へそのまま代入する実装には注意が必要です。

const userInput = '<script>alert("XSS")</script>';

const html = marked.parse(userInput);

element.innerHTML = html;

このように、ユーザーが入力した内容をHTMLとしてそのままDOMへ挿入すると、入力内容によってはXSSなどのセキュリティリスクにつながる可能性があります。

そのため、ユーザー入力を扱う場合は、MarkdownをHTMLへ変換する処理だけでなく、生成されたHTMLを安全に扱うための対策も必要になります。

HTMLのサニタイズを検討する

ユーザーが自由に入力できるMarkdownをHTMLとして表示する場合は、HTMLをそのまま出力するのではなく、必要に応じてサニタイズ処理を行います。

例えば、DOMPurifyなどのサニタイズライブラリを利用して、危険なHTML要素や属性を除去してからDOMへ挿入する方法があります。

重要なのは、marked.js を使えば自動的に安全なHTMLになると考えないことです。

Markdownのパースと、生成されたHTMLの安全性確保は別の処理として考える必要があります。

【よくある失敗・注意点の例】

※ユーザー入力をMarkdownからHTMLへ変換し、その結果をそのままDOMへ挿入する例です。

// ユーザー入力をそのままHTMLとしてDOMへ挿入するのは危険です
const userInput = '<script>alert("XSS")</script>';

const html = marked.parse(userInput);

element.innerHTML = html;

安全にHTMLを表示するための対策

ユーザー入力をHTMLとして表示する場合は、MarkdownをHTMLへ変換した後の出力についても安全性を確認する必要があります。

例えば、サニタイズライブラリを併用して、不要なHTMLや危険な要素を除去してからDOMへ挿入する方法があります。

実際のシステムでは、扱うMarkdownの内容や信頼できる入力元の範囲などを考慮し、適切なセキュリティ対策を行うことが重要です。

5. まとめと関連ツールのご案内

marked.js は、Markdown形式のテキストをHTMLへ変換できる軽量なJavaScriptライブラリです。

今回のポイントを整理すると、次のとおりです。

marked.js はMarkdownを扱うWebアプリケーションを構築する際に便利なライブラリですが、Markdownの変換処理とセキュリティ対策は分けて考えることが重要です。

【お役立ちツールのご案内】

ここまで解説した marked.js の仕組みを踏まえ、Markdownを使った表の作成を効率化したい場合は、当サイトの Markdownテーブルジェネレーター もぜひご活用ください。

Markdown形式のテーブルを作成・確認する際の手作業を減らし、効率的にMarkdownを扱うことができます。