DB設計・SQLクライアント・マイグレーション・コード自動生成（予定）ツール「N-DEV」の開発と公開
N-DEV
以下（Vercel）で公開中です。現在無料！！
N-DEV
基本的なSQLは同じと思いますが、MySQLを対象にしてます。
現在、
遠隔ホストからのDB構造の読み込み、DBの設計からsqlファイルの出力などが可能です。
機能の詳細は下の「機能」をご覧ください。
また、バグや機能追加のアイディア等は是非コメントでお知らせください。
記事等も是非に
はじめに
閲覧ありがとうございます。株式会社NEXSの「たぬき教祖」です。
経緯
弊社では元々主にNuxt2×PHP（+MySQL）の構成でWEBアプリ開発を行っており、自社ツールを作成して以下のような開発を行っておりました。
- Google スプレッドシートでDB設計
- CSV出力
- PHP製自社ツールでCSVからDB作成
- PHP製自社ツールでDBからAPI・UI・コード半自動生成
この構成は月500円程度のサーバでも十分動かすことが可能で、月額費用を大きく抑えることができました。
ただ、以下のような欠点や変更により、新たな自社ツールを作成することとなりました。
- スマートロック等を扱うようになり、メンテナンスで停止しない、自動でデプロイ可能なサーバを利用する必要が出た
- サーバメンテナンスのお知らせ等も人の手が必要で削減したかった
- そうするとバックエンドはPHPよりNodeの方が適正だという結論になった
- Vue2が近くEOLを迎え、同時にNuxt2も移行の時期が来た
- そもそもスプレッドシートはDB設計に向いているとは言えない
- DBのカラムのコメントに生成用のデータを格納していたのでDBが汚染されていた
- いくつもあるアプリケーションの管理作業を共通のツールを開発することで効率化したい
- DBのマイグレーション機能も欲しい
- 適切なSQLクライアントがない
- いっそツールの提供を事業の一つにしよう
以上のような課題から諸々検討し、取り合えずサーバとしてVercelを使用する、とするとDBを外に出す必要があるので偶然借りていたGCPのDBを使用する事になりました。
ここで問題になったのは、いわゆるSQLクライアントツールで適切なものが見つからないということです。これまでは「phpMyAdmin」を使用しており、色々な意見はあるかと思いますが重宝しておりました。ところが、外部にDBを持つとなると「phpMyAdmin」が気になるくらいに遅い、それでもGCPのDBはまだましで、当初「PlanetScale」を使用することを検討していましたが、あまりに遅く断念したほどです。
そこで以下のようなSQLクライアントツールを試しました。
因みにお勧めは「HeidiSQL」です。Windows版しか知らないしほとんどどれも同じですが。
で、どれも気に入らず、端的にいうと「機能が多すぎる」、癖にあんまり便利ではない。
まあそもそもがDB設計はしっかり終わったうえで使うツールなのかもしれませんが。
技術要素
本ツールの開発構成はざっくり以下の形です。
- 言語：TS & JS
- フレームワーク：Nuxt3（Vue3）
- デザインフレームワーク：Vuetify3
- バックエンド：Node
- ユーザ回り：Firebase Authentication
- 対象DB及び使用DB：MySQL、MariaDB
- IDE：WEB Storm 系
実態
本サービスで操作するDB設計は実態としてはただのJSONです。JSONを読み込み、クライアントで操作しているだけのため、非常に高速に操作できます（ただし常時エラーチェック等を行うと環境によるかもしれない）。発想としては仮想DOM的な？（そんな大層なものではない）
機能
DB設計・SQLクライアント・マイグレーション・コード自動生成
という大仰なことを書きましたが、取り合えず現状できるのはDB設計してSQLファイル出力するくらいです。大まかな機能を以下にあげます。
ホスト登録・読み込み
ホストの情報を登録し、ホストからDBの構造をDB設計として読み込むことが可能です。
パスワードは保存もできますし、都度入力もできます。パスワードは一応「AES256」で暗号化して保存されますが、保存は自己責任でお願いします。
DB設計
テーブル、カラムの追加・編集ができます。
設定すべき項目や、設定が推奨される項目は赤枠などで表示されます。
*MySQLの仕様にのっとっているわけではありませんので、万全ではありません。
エラー表示
エラーのチェック及び表示及びリアルタイムチェックが可能です。
必ず守る必要はないけれど推奨される事項は警告（オレンジ△）、修正すべき項目はエラー（赤〇）で表示されます。
例えば、カラム名がない項目は出力時にスキップされるので、エラーではなく警告としています。一方で「型」は必須項目として、選択されていない場合はエラーとなります。
操作ログ
DB設計の編集履歴が出力されます。出力されたログは、DB設計の保存時に同時に保存され、保存されなかった編集のログは破棄されます。
また、同様の編集のログについては記録されません。例えばカラム名を「column」、「column1」、「column2」の順で変更した場合、「column2」に変更したログのみ記録されます。
キー操作
設計の入力を高速化するために、ショートカットを用意しています。
詳細は以下の「こだわりポイント」の「キー操作」を参照してください。
SQL出力
設計したDB情報をSQLファイルとして出力できます。
出力の際には以下の項目を選択して、SQLファイルをカスタマイズできます。
- DB作成分を含める
- DB削除文を含める
- テーブル削除文を含める
簡単な操作方法
以下の順序で利用します。
- ログイン、ユーザ登録（メール登録かGoogleログインが利用できます）。
- アプリ一覧からアプリを作成します。作成したら選択します。
- 機能一覧から「DB設計」を選択します。
- 読み込みたいDBがある場合は、ホストを登録し、ホストからDB構造を取得します。
- 0から設計する場合は、既存のサンプルテーブルを削除します。
- テーブルを追加します。
- カラムを追加します。
- 保存します。
- 完成したらSQLを出力します。
- 必要に応じて、「管理者」より管理者を増やすことができます。（ただし操作はリアルタイムで共有されません、時間差で保存した場合、最新版のみが保持されます）
こだわりポイント
見た目
phpMyAdminを目指し、一目でカラムのほぼ全構成が見えるようにしました。本当は1行にまとめたかったのですが、項目が多いため2行になりました。
構成
あまりお勧めはされていませんが、Nuxt3×TSでクラスを使用した構成で組んでます。
これは、クラスを使用するのがコードの自動生成がシンプルでわかりやすくなると考えたからです（予行練習）。
その中での知見を記事にしておりますので気になりましたらご覧ください。
キー操作
設計の入力を高速化するために、ショートカットを用意しています。
Ctrl + S
保存です。一般的ですね。
ただ、仕様上入力中のデータは反映されません。タブキーなどでフォーカスが外れた時点で変更が確定しますので、保存前最後の編集後はタブで移動するか別の箇所をクリックするなどフォーカスが外れるようにしてください。
Ctrl + Shift + S
スクロール。
現在フォーカスしているカラム中のコントロールが鉛直方向で中央に来るようにスクロールします。ガシガシ設計してると上や下に行き過ぎて見切れることがありますので意外と使います。
キーに意味はないですが、被らないで押しやすいものを選びました。
Ctl + ↑→↓←
タブ移動です。これはかなり実装が大変で1日以上かかりました。
Tabキーをシミュレートできれば楽だったんですが、ブラウザの仕様で元々機能を持ったキーのシミュレートはできないようです。
この辺の苦労した実装はいつか記事にしたいと思います。
「Ctl+↑」一つ上のカラムの同じ要素に移動します。
「Ctl+→」右の要素に移動します。「Tab」と同じ（を目指している）です。
「Ctl+↓」一つ下のカラムの同じ要素に移動します。
「Ctl+←」左の要素に移動します。「Shift + Tab」と同じ（を目指している）です。
今後の機能（予定）
-
SQLファイル読み込み
-
ログ削除・管理
-
カラムメニューをまとめる（ユニーク、インデックス、の追加）
-
GitHubログイン
-
権限によるボタンdisable
-
テンプレ登録
-
DB連動（マイグレーション）、
-
各操作SQL発行
-
機能要望掲示板
-
利用規約
-
料金と利用期間、作成数
-
アプリコピー機能
-
TODOリスト機能
-
チャット機能
-
リンク集機能
-
複数人同時操作（同期）
-
DB設計バージョニング
-
DB自動生成
-
コード自動生成
-
UI自動生成
-
API自動生成
-
アプリ管理
Discussion