Markdown形式で書いたドキュメントを手軽にブラウザから見られるようにするために、MarkdownファイルをHTMLファイルに変換して配信するWebサーバであるMD Serverをリリースしました。
GitHub - satoryu/md-server
何ができるのか
npm install -g @satoryu/md-server
インストールするとmdsコマンドが使えるようになります。
cd /path/to/markdown/files/directory
mds
## OR
mds /path/to/markdown/files/directory
このようにコマンドを実行すると、http://localhost:3000でWebサーバが起動されます。
指定したディレクトリ、およびサブディレクトリに置いてあるMarkdownファイルを、http://localhost:3000/foo.md とアクセスするとHTMLにレンダリングされたものを見ることができます。
他にも、
- コードブロックのシンタックスハイライト
- Mermaid形式のコードブロックをSVGとしてレンダリング
- ファイル変更を検知して再レンダリングするホットリロード
といった機能があります。
なぜ作ったのか
最近はClaude Codeで開発することがほとんどになりました。 その際に、まずは指示のためのMarkdownのドキュメントを揃えるところから始め、Claude Codeに出させる成果物にもMarkdownのドキュメントがあり、多くのMarkdownを見ることになりました。 VS Codeで見ればいいというのもあるのですが、Claude CodeをCLIから使い、Neovimからコードを見ることが増えてきました1。 また、自然言語だけのMarkdownであればテキストで見ても良いのですが、Mermaid形式の図をよく利用するのでそれを描画してほしいというのもあります。 といったことが重なり、作ることになりました。
車輪の再発明であることはわかっているのですが、それは気にしないことにしました。 というのは、このあとの「どう作ったか」で書いているように1つ試してみたいことがあったためです。
どう作ったか
今更ですがVibe Codingをやってみたかったこともあり、このパッケージは以下のように進めてみました。
- 自分から簡単な要件をClaudeに伝えて、
- Claudeが要件定義と設計、タスクリストのドキュメントを生成し、
- それを自分がレビューして承認したらClaudeが実装を開始
- コードは基本的に見ず、
- 動作確認をしながらClaudeにフィードバックする。
また、なるべくモバイルアプリを使ってみるということも挑戦してみました。 昨年はあまりGitHubにコミットを残せず、個人の開発があまりできなかった年でした。 ということで、この問題を解決できないかと思い、この挑戦をしてみました。 実際にやってみると、寝る前に指示を出して、朝方に動作確認してフィードバックする、といった流れが作れてコミット数は増やすことができました2。
まとめ
一旦、個人の利用として開始できそうなので、npmパッケージとしても公開しました。 明日から実際に自分の業務の中で使ってみて、手直ししていく部分を探っていこうかと思います。 もし使ってみて気になったことやリクエストがありましたら、Issueを出していただけると大変よろこびます。
