SQL練習アプリ：初回リリース

SQL練習Webアプリ

最低限実現したかった機能が実装できたのでリリースしてみました。

https://sql-playground.v-0.workers.dev

PC表示（推奨）

スマホ表示

機能一覧

一般的なSQL練習アプリにある機能に加えて、以下の機能が特徴的な機能かなと思います。

1. SQLの入力エディタ

   1. シンタックスハイライト

   2. 入力補完

2. 実行計画の表示（現時点では用途無し）

3. テーブル一覧（同じ画面で見れるUI）

4. ショートカットキー操作

5. Googleアカウントログイン

6. スマホ対応（レスポンシブ）

7. 問題数が豊富？（現時点で53問。追加予定）

キーボード操作だけで問題がサクサク進められるような操作性と視認性、動作の軽さに拘ってみました。SQL練習用のDBがWEBブラウザ内にあることと、CloudflareのWorkersやD1が早いので、動作がモタつく感じなくできたかなと思っています。

開発の道のり

テーマや仕様決め、設計に関しては前回の記事をご覧ください。
https://shiftb.vibely.site/blog/GnpNmxA-7Hkr

1. UIの調整

UIを自分で設計するのが初めてだったこともあり、細かい調整にかなり時間がかかりました。
できる限り一画面にいろんな機能を詰めこうもうとしたせいで、PC表示は良い感じになったのですが、スマホ表示のことはほとんど考慮しきれませんでした。
自分が知る限り、スマホで使用できるSQL練習Webアプリがほとんどないので、スマホ表示はもう少しなんとかしたい気持ちがあります。

2. 実装

前回の記事を書いたときに設計をほぼほぼ固めていたので、Codexにリリースまでのタスクリストを作成させて、実装を一気通貫で仕上げさせました。

事前に素のHTML, CSS(Tailwind), JSでサンプルイメージを作成させておいたのが良かったです。サンプルのHTMLと一致するようにchrome-devtools mcpサーバーで確認させながら実装を進めて貰えたので、途中でUIが崩れたり変更されたりすることなく、最初のイメージと一致する形で仕上げて貰えました。

3. テスト、脆弱性診断

そのあとはUTとE2Eテストを作成させました。（UT:63件, E2E:17件）

念の為OWASP ZAPという脆弱性をスキャンするOSSでセキュリティをチェックして、いくつか問題が見つかったので修正しました。
以下のようなスキャンをしました。

• Spider: 通常リンク中心の巡回

• AJAX Spider: JavaScript 実行後の画面も含めた巡回

• Active Scan: 攻撃リクエストを送って検査

4. dev環境へリリース

システム開発では、一般的に本番公開用の「prd（production）」サーバーに公開する前に、「dev（develop）」サーバーという非公開のサーバーにアプリをデプロイして動作を確認したり、認証系などの設定の確認をします。

この時点では、まだ動作や設定の確認が残っているため、何かしら不具合があった場合に誰かにアクセスされたり攻撃を受けないよう、dev環境へ開発者しかアクセスできないように設定する必要があります。
自分でこのような環境を１から構築したことがなかったので悩むこともありましたが、技術相談チャットで相談したら、即レスで回答がいただけたのでとても助かりました。
自分もできる限り、他に困っている方がいればサポートできたらと思います。

5. prd環境へリリース

dev環境で一通り問題ないことが確認できたのでprd環境へリリースして、公開されました。
自分で作成したサービスを公開したのが初めてだったこともあり、すごく達成感がありました。
これから他の人に使ってもらったり、自分で使ってみた上で、気づきがあれば改善していきたいです。

また、AIに問題を生成させるようなワークフローも構築したいと思っているんですが、どんな問題が欲しいのかもう少し考えてみてからやってみようと思っています。

これから

一旦リリースができたので、自分や誰かに使ってもらったフィードバックを受けて改善点を洗い出す期間になるかなと思っています。

まだ他にもつくってみたいもののアイデアがあるので、ある程度形になったらまた記事に書いてみようと思います。