自己紹介

Miyabiと言います。非IT系の仕事からITへ転職し、3年目になります。
Python, Java, Laravel PHP, Vue, TypeScriptの経験がまばらに浅くあります…笑
新規開発の経験がなかったので、自分で0→1の開発をリリースまで手がけてみたくて参加しました。

ShiftBのハッカソンを知ったきっかけ

bubeさんのYouTubeで、個人開発で収益化をしている話の動画を見て、それからSNSをフォローしていたので知ることになりました。

目標

SQL学習Webアプリをつくる

最近SQLの勉強をしている中で、既存のSQL学習サイトの使い勝手や問題の幅広さに物足りなさを感じていたので、自分が一番使いたいものをつくってみようと思いました。

【要件】

問題をさくさく解きたいので、テーブル定義が一目でわかるUIと、ショートカットキーによるキーボード操作で完結するような、テンポの良い操作感を実現する。
ログイン機能を実装して、問題演習の進捗が保存されるようにする。

【できればこれもやりたい】

CI/CDパイプラインを構築
- パイプライン上でAIに問題を自動で作成させて、問題の品質もAIに検証させたい
スマホ用のレスポンシブデザインの対応

進捗

Codexを使用して、設計をAIに相談しならがら、画面仕様を取り決めた。

【設計】

軽い動作性とセキュリティ性を両立させたいので、SQL練習用のDBをWebブラウザのサンドボックス環境に展開して、SQL操作するような構成にする。WASM（Webブラウザの実行環境の一つ）で動作するSQLiteエンジンとAPIがSQLite公式で提供されているそうなので、それを使ってみる。

バックエンドからは練習問題を取得したり、ログインユーザーの問題演習の進捗が記録/参照できるようにする。
基本的には、用意された問題データを処理せずそのままAPIレスポンスで返すだけなので、Cloudflare Workers KVを使って、キャッシュされた問題データがさくっと返せるのではないかと期待している。

アプリ
- フロントエンド
  - React, TypeScript
  - Vite
  - SQLite（WebブラウザのWASM上で動作するSQLiteエンジンを使う）
- バックエンド
  - Hono, TypeScript
  - SQLite（ユーザー情報、進捗記録）
  - Cloudflare Workers KV（問題データ）
インフラ

【画面のサンプルイメージ】

UIを決めるために、CodexにHTML/CSSのサンプルイメージを作成させた。
このHTML/CSSはあくまでもデザインやUIコンポーネントの配置を見ながら調整するためのイメージであって、フロントでそのまま使うわけではない。一応TailWindを使わせているので、ある程度のスタイルがフロントに流用できる予定。
このサンプルイメージを元に画面仕様書をCodexに作成させて、細かい挙動は自分で書き加えておいた。
FIgmaを使用しようかとも思ったが、画面数がかなり少ないのでそのままHTMLを作成させることにした。

【問題用のデータ準備】

SQLの練習問題もAIに生成させた。Codexにghコマンドを操作させて、参考にできそうなSQLの問題をGithub内から検索させ、それを元にオリジナルのDBスキーマとシード（テストデータ）をCodexにJSON形式で作成させた。JSON形式にすることで、バックエンドのAPIレスポンスとしてそのまま使える。

【残タスク】

作成した画面のサンプルイメージと画面仕様書、設計書を元に、タスクレベルに分割した実装計画をCodexに作成させて、レビューしながら計画を作成していく。
Codexにテスト仕様書を作成させる。
Codexに一気通貫で実装を仕上げさせて、chrome-devtoolsで動作確認させながら、一通り動くものを完成させてもらう。
脆弱性確認OSSをCLIでCodexに操作させて、セキュリティチェックをする。（何を使うか考え中）