SQLは書いてみないと分からない。ブラウザーで試せる入門教材をAIに作ってもらいました

Posted at 2026-09-20

はじめに

SQLって、実際に書いてみないと分からない事が多いかと思います（プログラミングもそうですが）説明を読んで「なるほど」と思っても、いざ自分で書こうとすると手が止まることがしばしば。

特にSQLは、書いた文と、そこからできあがる表を結び付けて考えるのが、最初は難しいと感じます。

そこで、説明を読みながらSQLを書けて、その場で結果と表の変化を確かめられる教材を、Web上で作れないかと試行錯誤してみました。

作ったものが「SQLのきほん」です。実装はAIに作ってもらいました。

一番やりたかったのは、「書く → 実行する → 結果を見る」を、同じ画面で繰り返せることです。

例えば、教材の商品データに対して、SQL文を実際にWeb上に書いて試すことができます。



実際にSQLを書いた様子

説明を読むだけでなく、「こう変えたら、どうなるだろう」と予想して実行できる。そこを大切にしました。

「初期値に戻す」ボタンもあるので、書き換えて分からなくなっても、元の例からやり直せます。

もう一つ見えるようにしたかったのが、SQLの処理の順番です。

先ほどのSQLはSELECTから書き始めますが、意味を理解するときは、次のように考えると整理しやすくなります。

教材では、処理の段階を選んで、途中の表を確認できます。



SQLの途中経過を辿る様子

「なぜこの商品だけが表示されたのか」を、完成した結果だけでなく、途中の変化から考えられるようにしました。

ここで示しているのは、結果の意味を理解するための論理的な処理順序です。実際のSQL Server内部での物理的な処理順序は、実行プランによって異なる場合があります。MicrosoftのSELECT文の説明でも、この違いが説明されています。

実装はAIに作ってもらいました。 私は、学習内容や見せ方を伝えて、動いたものを見ながら修正を重ねました。

技術構成は、HTML・CSS・JavaScriptを中心としたシンプルなものです。

技術	役割
HTML	章メニュー、説明、SQL入力欄などの画面の土台
CSS	表や図、キャラクター、画面レイアウトの見た目
JavaScript	章の切り替え、SQLの解析とデータ処理、結果や図の表示
localStorage	学習の進み具合やSQLの下書きをブラウザー内に保存
GitHub Pages／GitHub Actions	Webサイトの公開と、更新時の自動反映

SQLの実行部分には、JavaScriptで作った学習用のSQLインタープリターを使っています。入力されたSQLを読み取り、ブラウザー内に用意したサンプルデータを処理する仕組みです。

例えばWHERE 価格 >= 200なら、条件を読み取って、それに合う行を残します。最終結果だけでなく、各段階の表も記録することで、「どこで行が減ったか」「どこで集計されたか」を画面に表示しています。

実際のSQL Serverに接続しているわけではなく、教材で扱うSELECTを中心とした構文に対応するシミュレーターです。SQL Serverのすべての機能を再現するものではありません。

SQLの解析とデータ処理はブラウザー内のJavaScriptで行っています。

作ってみて、思った以上に直感的に説明できるものになったと感じました。

実行環境を用意せずWeb上で実際に自分のを動かしSQL文を書いて試せるモノがAIによってお手軽に実現できるというのはかなり衝撃でした。

また、文章で「条件に合う行を取り出します」と説明するだけでなく、自分で条件を変えて、表の行が減ったり結果の順番が変わったりする様子を見られる。SQLの文と結果が、その場でつながるのがよかったです。

そして、こうした教材のメリットは、作って終わりにせず、アップデートしていけることだと思います。

本にも、まとまった内容を順番に読めるよさがありますが、紙の本を改訂して届け直すには、時間や手間がかかります。
vivliostyleで紙媒体の技術書も作りましたが、コストがかかりすぎて個人で作り続けるのはかなり厳しい感じがしました。

Web教材なら、「この説明が少し分かりにくい」「ここに例を一つ増やしたい」と気付いたときに、修正して公開できます。さらに、既存のコードや章の構成をAIに読み取ってもらえば、今ある形式に合わせて内容を追加・修正していけます。

今後の応用として、社員教育用の教材であったり、動くマニュアルなどを作成し、自ら動かして試せるトレーニング教材等に応用できないかと考えています。