Markdown Table Generatorを作りました
GUIのテーブルに文字を入力するとMarkdown記法の表が得られるツールを作りました。行/列の追加・削除・移動などができます。単純な仕組みですが、MarkdownからGUIの表にインポートする機能もあります。
素朴にInputが並んでいるだけなので長い文字を入力したときにすこし見にくかったり、focusの移動がもっとスムーズになると表のUIとしての完成度が高まりそうなどありますが、このくらいで一区切りです。

Markdown Table Generatorのラフスケッチ
JavaScriptを駆使してツールのようなものをいちど作ってみたいなとずっと思っていたのですが、このMarkdownの表をつくるという題材は、事始めとしてちょうど良い難易度でした。せっかくなので知らない技術を積極的に触っていくことにしました。
- Vue.js
- 公式ドキュメントを見たらやりたいことがほぼ全部解決したので、初学者にも優しかったです。こんどはReactでなにか作ってみたいなと思いました
- Firebase Hosting
- シュッとデプロイできて便利でした。趣味で作るものは静的なものばかりなので今後も活用していきたいです
- CSS Variables
- 使い勝手を試してみよう(趣味なのでIEのことは忘れよう)ということで使ってみました。ダイレクトに値を変えられるのが便利でした
- prefers-color-scheme
- ダークモード対応です。CSS Variablesと組み合わせると特別な追加コストがほぼゼロで実現できるのが良いですね
よろしければ使ってみてください。
Markdown Table Generatorこの記事を書いた人
村田 智 @murata_s
アートディレクター/デザイナー
詳しくみる→