以下の内容はhttps://tyngw.hatenablog.com/entry/2025/12/03/markdown-table-editor-extensionより取得しました。


Markdownでテーブルを扱いやすくするための拡張機能を作った

この記事は「ソフトウェアテスト・QAの小ネタ Advent Calendar 2025」3日目の記事です。 https://qiita.com/advent-calendar/2025/software-testing-koneta

はじめに

AI Coding Agentによって、人類はマークアップ言語であるMarkdownをよく扱うようになりました。
私たちテストエンジニアも、Markdownを使ってテスト計画書やテストケースなどのさまざまなテストウェアを作成することが増えてきました。

そんな中、Markdownでテーブルを編集するのが面倒だと感じたことはありませんか?
ちなみに、Markdownのテーブルは、以下のような形式です。

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

シンプルなテーブルなら直接編集できますが、列の多いテーブルや、長い文字列が設定されているセルがあったりすると、途端に編集の難易度が爆上がりします。

拡張機能の開発

世の中には、Markdownのテーブルを編集するためのVSCode拡張機能がいくつか存在しますが、私のニーズに合うツールがなかなか見つかりませんでした。

それなら作っちゃえ!ということで、作りました。

すでに、Visual Studio Codeの拡張機能として公開しているので、お使いいただくことができます。
Interactive Markdown Table Editor
Visual Studio Marketplace ※VSCodeの方
Open VSX Registry ※Cusrorの方

ここで機能紹介をしても仕方ないのですが、基本的な編集はもちろん、以下の機能を実装しています。

  • 行・列の追加
  • ドラッグ&ドロップでの並び替え
  • カット/コピー&ペースト
  • CSVインポート/エクスポート
  • テーマの変更

開発裏話

機能の紹介ばかりをしてもソフトウェアテストの小ネタっぽくないので、テストの話をします。

この拡張機能は、AI Coding Agentを使ってVibe codingで開発しました。
ほとんどの人が同じことを言っていると思いますが、初手動くものを作る目的においては、とてつもないスピードで開発できます。一方で、公開できるレベルのものにするまでには、結構手直しが必要でした。
特に、新たな機能を追加すると、既に動いていた機能が動かなくなることが多々ありました。この拡張機能を開発する上では、VSCodeとWebViewのインタフェース部分にリグレッションがよく発生していました。具体的には、WebViewで編集したのにVSCode側に反映されないバグが頻発していました。
インタフェースの型をしっかり定義したり、ユニットテストを追加することで、一定これらのバグを抑止できた一方、実際に拡張機能を動かしてみないと見つけられないバグも存在し、適切なテストレベルで適切なテストを行うことの重要性を感じたのでした。
また、ありふれた話ではあるのですが、AIによって生成されたコードを納得してリリースするためには、ガードレールとしてのテストの重要性を再認識した次第でした。

AIによって生成されたコードが含まれたプロダクトが増えていく中で、そのプロダクトをテストする立場の私たちテストエンジニアも、実際にAIで開発してみるとテストについて新たな気づきが得られるかもね、というお話でした。




以上の内容はhttps://tyngw.hatenablog.com/entry/2025/12/03/markdown-table-editor-extensionより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14