概要
データサイエンス100本ノックにあるSQLの問題を解くためのWebアプリです。
複数のSQLの問題をひとまとめにした問題セットという単位で問題を解くことができます。 問題セットを選択すると、含まれるSQLの問題がランダムな順序で出題されます。
いくつかの問題セットは組み込まれており、すべての問題を含む問題セットやカテゴリごとの問題セットがあります。
SQLの問題を自ら選んで問題セットを作り、繰り返し解く事もできます。
使用した技術
- TypeScript
- React Router
- Tailwind CSS
- Base UI
- Monaco Editor
- PGlite
実装の詳細
SQLの実行
SQLはバックエンドで実行するのではなく、フロントエンドで実行させています。 このためにPGliteというPostgresをWASM化したライブラリを使用しています。 サーバーを用意する必要がないのでコストがかかりませんし、セキュリティを考慮しなくても良いので、学習用途にはとても向いていると思います。
WASMのRDBだと他にも選択肢はありますが、Postgresの文法をできる限り使用したかったのでPGliteを使用しています。
初期データの投入
データサイエンス100本ノックにあるSQLの問題は初期データが含まれていることが前提になっているため、そのデータを投入する必要があります。
RDBをフロントエンドで動かしているため、Webアプリにアクセスするたびにブラウザ上でデータを投入する必要があるのですが、初期データのCSVはサイズが大きいため、普通にINSERTしてしまうと数秒かかってしまいます。PostgresではCSVファイルをCOPY FROMで指定できるのですが、PGliteでは動きません。
そこで、仮想的な/dev/blobデバイスをCOPYで指定して、事前にCSVファイルからバイナリファイルを作ることで、初期化を1秒未満にまで改善しました。CSVからテーブルにINSERTしたあとに、COPY ${table.name} TO '/dev/blob' WITH (FORMAT binary);のように指定してバイナリを取得し、それをファイルに書きこみます。Webアプリの実行時にはバイナリファイルを読み込み、COPY ${table.name} FROM '/dev/blob' WITH (FORMAT binary);にバイナリを渡してテーブルを初期化しています。
問題セットの保存
作成した問題セットはいったんlocalStorageに保存しているので、キャッシュ削除などで消えてしまうのですが、問題セットを解くためのURLにクエリパラメータで情報をすべて載せているので、そのURLを保存しておくことはできます。このような仕組みになっているため、他のユーザーと問題セットを共有することができます。