はじめに
テーブル定義が100を超える様なプロジェクトを経験されていますでしょうか。
図やエクセルからかすかな記憶を頼りに目的のテーブルやカラムドにたどり着いていますでしょうか。
新メンバー投入の際に、宇宙を感じるERや100シートあるエクセルを熟読させていますでしょうか。
長らく、ERやテーブル定義はそういうものだと思いこんで何の疑問も持っていなかったのですが、nuxt や vuetify があんまりにも簡単でわずかなコードを書けば、インタラクティブで便利なER図やテーブル定義を作れるのではないかと思い作成して公開しました。
erm-viewer
ER/テーブル定義用EclipseプラグインER Masterという神ツールで作成された erm ファイルを読み込み、そのER図やテーブル定義を インタラクティブER図/テーブル定義 として表示するツールです。
相当快適なインターフェイスを提供できたと思うのですが、 erm ファイルをお持ちではない方には無用の長物となります。
また、erm ファイルを雰囲気で読み取って表示用データを作りましたので、読み込みができないケースもあるかもしれません。
その場合にはソース修正してご利用頂ければと思います。
機能
かなり基本的な機能しか作ってないです。
逆に言うと 『かなり基本的な機能すらないのが当たり前と思い込んでいた』 というDXが推進されない理由あるあるについて考えさせられながらのツール制作でした。
-
ctrl + f で検索できるER図
ブラウザの検索機能で「図」を検索できます。
pngになった「図」は検索できませんが、html の div タグなどで描画したER図は、普通にブラウザのキーワード検索が利用できます。 -
table 全文検索/インクリメンタルサーチ
部分一致でフィルタされるのは似て非なるテーブルが多い時に猛威を発揮します。
保守フェーズ突入後など、記憶が薄れ始めた時期や別メンバーに交代時などに猛威を発揮します。
vuetify の DataTable 組み込みの検索ボックスを置くだけで実装できました。
- ページ遷移なしで任意のテーブルの詳細確認
複数のテーブルの詳細を見たい時にシート移動しなくてよいのは単純に快適です。
vuetify の DataTable の expand 機能で、任意の行に追加で情報を記載可能なので、それを利用してテーブルの一覧/開閉可能なテーブルの詳細を実装しました。
- テーブル一覧とER対応
テーブル一覧で任意のテーブルをクリックすると、ER図上のそのテーブルを表示。
Excelや画像ビューワーを交互に開くのが面倒くさかったのでレイヤーのあるUIを作ってみました。
低コストで簡単に作れて効果が高いなと思いました。
知らないうちに実装されていた Element.scrollIntoView() でプラグインなどなしで簡単に実装できました。
※もちろんIEは無視です。
- 関連一覧表示/移動
関連を持つカラムをクリックすると、関連一覧を表示。
クリックで関連カラムを持つテーブルをスクロール表示。
画像を頑張ってドラッグして目的のテーブルにたどり着いたり戻ったりを無限に繰り返すのが地味にコストだなと思い作りました。
こちらもElement.scrollIntoView()で簡単に実装できました。
おわりに
ER図やテーブルの理解のコストは、元々プロジェクトのコストとして計上されておらずエンジニアのセンスや努力や残業や残業によって暗黙的に賄われていることが多いと思います。
今回のツールでそのようなコストを削減する一助になれば幸いです。
DXでのコスト削減と世間ではバズワード的に語られていますが、仰々しいパッケージ製品を導入しなくても削減できるコストはたくさんあると思います。
エンジニアは、エンジニアリングによって人々の暮らしをよくする仕事をしていますが、自分たちの暮らしもよくすることをもっと考えてもいいと思います。その延長線上に見たことのない人々の暮らしや社会をよくすることはあると思います。
と、難しい話もしましたが、単純に nuxt や vuetify は簡単で楽しいので是非書いてみてください。
今回のツールも行数としてはかなり短いので学習の参考にもご利用頂けると思います。
(さいきょうのソース公開シリーズ)