Markdown Table Generator

f:id:murata_s:20190602121151p:plain

GUIのテーブルに文字を入力するとMarkdown記法の表が得られるツールを作りました。行/列の追加・削除・移動などができます。単純な仕組みですが、MarkdownからGUIの表にインポートする機能もあります。

素朴にInputが並んでいるだけなので長い文字を入力したときにすこし見にくかったり、focusの移動がもっとスムーズになると表のUIとしての完成度が高まりそうなどありますが、このくらいで一区切りです。

JavaScriptを駆使してツールのようなものをいちど作ってみたいなとずっと思っていたのですが、このMarkdownの表をつくるという題材は、事始めとしてちょうど良い難易度でした。せっかくなので知らない技術を積極的に触っていくことにしました。

  • Vue.js
    • 公式ドキュメントを見たらやりたいことがほぼ全部解決したので、初学者にも優しかったです。今度はReactでなにか作ってみたいなと思いました
  • Firebase Hosting
    • シュッとデプロイできて便利でした。趣味で作るものは静的なものばかりなので今後も活用していきたいです
  • CSS Variables
    • 使い勝手を試してみよう(趣味なのでIEのことは忘れよう)ということで使ってみました。ダイレクトに値を変えられるのが便利でした
  • prefers-color-scheme
    • ダークモード対応です。CSS Variablesと組み合わせると特別な追加コストがほぼゼロで実現できるのが良いですね

よろしければ使ってみてください。

Markdown Table Generator