Markdown で JavaScript を使用する
Markdown は主にテキストをフォーマットするためのマークアップ言語ですが、JavaScript を使用して Markdown ドキュメントを強化し、インタラクティブ性と動的機能を追加できます。
制限を理解する
標準的な Markdown パーサーは JavaScript コードを実行しません。ただし、JavaScript を Markdown と統合するいくつかの方法があります：
- HTML Script タグ：HTML ブロックに JavaScript を直接含める
- Markdown プロセッサ：JavaScript 実行をサポートするプロセッサを使用
- 静的サイトジェネレータ：ビルド時の JavaScript 処理を活用
- クライアントサイドレンダリング：Markdown が HTML に変換された後に JavaScript を追加
基本的な JavaScript 統合
インラインスクリプトタグ
HTML script タグを使用して、Markdown に JavaScript を直接埋め込むことができます：
markdown
# インタラクティブなドキュメント
<script>
function greet() {
alert('Markdown からこんにちは！');
}
</script>
<button onclick="greet()">クリックしてください</button>外部スクリプト
外部 JavaScript ファイルを参照：
markdown
<script src="https://cdn.example.com/script.js"></script>
<div id="dynamic-content"></div>一般的な使用例
1. インタラクティブフォーム
markdown
# お問い合わせフォーム
<form id="contactForm">
<input type="text" id="name" placeholder="お名前">
<input type="email" id="email" placeholder="メールアドレス">
<button type="submit">送信</button>
</form>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
alert('ありがとうございます、' + name + 'さん！');
});
</script>2. 動的コンテンツの読み込み
markdown
# 最新の投稿
<div id="posts-container"></div>
<script>
fetch('/api/posts')
.then(response => response.json())
.then(posts => {
const container = document.getElementById('posts-container');
posts.forEach(post => {
container.innerHTML += `<h3>${post.title}</h3><p>${post.excerpt}</p>`;
});
});
</script>3. データ可視化
markdown
# 売上グラフ
<canvas id="salesChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月'],
datasets: [{
label: '売上',
data: [12, 19, 3, 5]
}]
}
});
</script>セキュリティに関する注意事項
XSS 保護
Markdown で JavaScript を使用する際は、常にユーザー入力をサニタイズしてください：
javascript
// 悪い例：直接 HTML 注入
element.innerHTML = userInput;
// 良い例：textContent またはサニタイズを使用
element.textContent = userInput;
// または
element.innerHTML = DOMPurify.sanitize(userInput);コンテンツセキュリティポリシー
CSP ヘッダーを実装してスクリプトの実行を制限：
html
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' https://trusted-cdn.com;">ベストプラクティス
- JavaScript を分離：可能な限り JavaScript を外部ファイルに保存
- プログレッシブエンハンスメント：JavaScript なしでもコンテンツが機能することを確認
- CDN を使用：人気のあるライブラリは CDN から読み込んでキャッシュを改善
- インラインスクリプトを最小化：インラインハンドラーの代わりにイベント委譲を使用
- 依存関係を文書化：必要な JavaScript ライブラリを明確に記載
結論
Markdown 自体は JavaScript を実行しませんが、これら2つの技術を効果的に組み合わせて、豊かでインタラクティブなドキュメントを作成できます。ユースケースに最適な方法を選択し、常にセキュリティとユーザーエクスペリエンスを優先してください。