マークダウンをHTMLに変換する無料ツールを公開
SE・情シス担当歴20年のコウノです。
ブログやWebサイトに記事を掲載する際に、原稿を用意してからCMSに流し込むことがあると思います。この作業、意外と時間がかかりませんか？
私は、ブログの記事をWebサイトに掲載する作業を効率化するために、原稿をマークダウンで書いているのですが、HTMLに変換するのに時間がかかるため、Markdownの原稿をワンクリックでHTMLタグに変換するツールを作りました。
本記事では、JavaScriptでMarkdownをHTMLに変換するプログラムの作り方を解説します。プログラミングを始めて20年の私の経験をもとに、開発テクニックを解説しますのでぜひ参考にしてください。
なお、JavaScriptの勉強法や業務改善に活用する方法を知りたいという人はお気軽に下記リンクからメッセージください。
＼自社にノウハウが貯まる業務代行／「パソコン業務・情シス代行」を詳しく読む
作ったキッカケ
私はこれまで、ブログ記事やコンテンツの原稿をWordやGoogleドキュメントで書くことが多くありました。Wordは誰にとっても見やすく、太字や見出しのスタイルを簡単に設定できますが、Webサイトに掲載するとなると、HTMLに変換する必要があり、タグに置き換える作業を毎回手作業で行うことになります。
これは想像以上に手間のかかる作業です。文章を書く時間より、整形にかかる時間のほうが長いことさえあり、「この効率の悪さを何とかできないか」と常に感じていました。
そこで目をつけたのが、Markdown（マークダウン）です。Markdownなら # 見出し や - 箇条書き といったシンプルな記法で構造を表現できます。メモ帳のようなテキストエディタさえあれば書けるので、Wordのような重たいソフトは不要です。文章を書くこと自体はスムーズになり、「これなら効率的に下書きができる」と感じました。
しかし、問題は依然として残っていました。私はWordPressを使っていないため、「見たまま編集モード」でそのまま投稿することができません。記事を公開するためには、最終的に必ずHTMLを用意して貼り付ける必要があります。Markdownで書いたとはいえ、変換作業を外部サービスや他ソフトに頼るのは不便でした。
「Markdownで書いたものを、そのまま簡単にHTML化できればいいのに」という思いから、自分自身の作業効率を上げるためにツールを作ることにしました。
使用言語と採用理由
今回のツールはJavaScriptを中心に構築しました。ブラウザ上で動くJavaScriptを選んだ理由は大きく三つあります。
- インストール不要で使える
専用ソフトをダウンロードする必要がなく、Webブラウザさえあれば誰でも利用できます。 - リアルタイム処理が可能
入力したMarkdownをその場で解析してHTMLに変換できるため、ユーザーは即時に結果を確認できます。 - ライブラリの活用で開発効率が高い
- marked.js を利用し、Markdownをパース（＝解析し、文法を理解して構造化すること）
- DOMPurify を利用し、変換したHTMLをサニタイズ（＝不要なタグや危険なコードを取り除いて無害化すること）
これにより、安全かつ安定した動作を実現できました。
工夫したポイント
ツールを設計するにあたり、いくつかの点に特にこだわりました。
1. リアルタイムプレビュー
左側にMarkdownを入力すると、右側にHTMLプレビューが即座に表示されます。これにより「変換後の仕上がり」を確認しながら執筆を進められます。
2. ワンクリックコピー
変換後のHTMLは「完成HTMLをコピー」ボタンで一発コピー可能です。WordPressを使っていない私にとって、この機能は特に重要でした。CMSに直接HTMLを貼り付けて公開できるので、従来のように「別ソフトで変換して整形する」といった無駄なステップを省けます。
3. 文字数カウント
執筆において文字数は大切な目安です。ツールでは「Markdown記法を含む文字数」ではなく、変換後の純粋なテキスト部分の文字数をカウントしています。これにより「実際に公開される文字数」を正しく把握できます。
4. 安全性の確保
Web上でHTMLを扱う以上、セキュリティは避けて通れません。そこで、DOMPurifyによるサニタイズ処理を組み込み、潜在的に危険なスクリプトや不要な属性を排除しています。安心してコピー＆ペーストできるのも、このツールの強みです。
使ってみるとどう変わったか
実際にこのツールを使うようになってから、執筆から公開までの流れが大幅に短縮されました。
以前は「Wordで書いて → タグを手動で付与 → HTML化 → サイトに反映」という長い工程を踏んでいました。今は「Markdownで書いて → ツールでHTML化 → コピーして貼り付ける」だけです。
特に「公開用のHTMLを一瞬で生成できる」というのは、WordやGoogle Docsをベースにしていた頃にはなかった快適さです。
まとめ
本記事ではMarkdownで書いたドキュメントををHTML形式に変換するコンバータの作り方を解説しました。JavaScriptを活用して業務を効率化する方法はたくさんあります。他にも記事を書いておりますので参考にしてみてください。
