Claude Codeで情報Ⅰの学習支援サイトを作るのが超超超超楽しい
生きることにこだわりを。魚住惇です。
ここ最近、Claude CodeがProプランでも使えるようになったことで、めちゃくちゃ使いまくっています。Linuxのコマンドラインから使えるこのAIは、カレントディレクトリにあるファイルを読み書きしてくれる超便利な奴なんです。
今回は、ちょっとClaude Codeくんの実力を試したくて、情報Ⅰの授業中に活用できる学習支援サイトをいくつか作ってみたので紹介します。魚住のちょっとしたこだわりに、お付き合いください。
2進数・10進数・16進数シミュレータ
コンピュータの基礎やデジタル化を学ぶ上で欠かせないのが、2進数の理解です。でもこれがねぇ、なかなか分かってくれないんですよ。特にこれまで10進数しか使ったことがない人にとって、新しい数の数え方はやったことがないわけですよ。
なので、このサイトを使って、2進数で数を数えるという体験をしてもらおうと考えて、Claude Codeくんに作らせました。
使い方は見ての通り、ビット数を指定すると、その時数えるときに扱う2進数の桁数を決めることができます。1ビットから16ビットまで指定できるようにしました。
ビット数を指定してからは、数値設定や＋１、－１を使って、数を数えていきます。その時に、2進数・10進数・16進数や、ビット表示を見ながらボタンを押していくことで、各数値が増減していく様子が確認できます。
ボタンを何度もチキチキ押していくのがかったるい人のために、シークバーも付けました。ここを調整しながらでも数値の様子を見続けることができます。
ちなみに授業では負の補数表現もやったので、符号付きとして表示するチェックボックスも付けました。これを押すと表現できる正の数が半分となり、もう反対は負の数を補数を使って表現するようになります。
また、負の補数表現が分かりづらい方のために、補数の値の参考となるように、元の数値も同時に表示することにしました。
シークバーでスライドしたり、増減させるのが面倒だって？そうでしょうそうでしょう。大丈夫。アニメーション機能もつけたので、速度も設定しつつ自動で増減できますよ。
24ビットフルカラーシミュレータ
画像のデジタル化の単元で、子どもたちは画素という言葉を習います。光の三原色や色の三原色もそこで扱うわけですが、どうもピンとこない様子。そりゃそうですよね。色の三原色は中学校の美術などでやるにしても、光の三原色はあまり馴染みがないかもしれません。
でも光の三原色と言えば、これがあるから液晶ディスプレイが成り立っているわけで。ディスプレイだってDPIが低いものであればRGBのLEDが肉眼でも確認できますし、防水スマホの画面に水滴を垂らしても赤緑青の色で光っている様子が確認できます。
あとはどの光をどの程度強くしたら、何色に見えるのか。これを子どもたちに興味をもって欲しくて、シミュレータを作りました。
使い方は至ってシンプルで、RGBのシークバーで光の強さを調整して、色味を確認するだけです。もしくは、決まっている値を入れたいなら、16進数のカラーコードを入力して適用することで目的の色に設定できます。
また、ビット深度を調整できるようにしました。デフォルトは8ビットで256段階の色が再現できますが、1色あたりのビット数を下げることで少ない階調も再現できます。それに連動して、一番下の色の階調表示にも区切りが出てくるようにしました。3ビットなら8色、に分かれて表示されます。僕の目だと、7ビット128色の段階でもう区切りが見えなくなりました。
そして、僕の息子でも感覚で使えるように、CMYKカラーも再現できるようにしました。まだ保育園児だと光の三原色知らないんですよね。あとこれ何気にすごいのが、CMYKカラーモードでRGBのカラーコードを入れて適用すると、CMYKに変換してくれるんですよ。というかRGBとCMYKで色をそのまま行き来できるので、RGBのこの色はCMYKでどう調色するのかとかが一発でわかります。
ただし、Kが入ってしまっているので、暗めの色だと3色を使うのではなくKが優先されます。ちょっとこの辺りはKを抜こうかどうか迷っているところです。
5歳の長男に使わせてみたんですが、「お父さん見てみて、シアン82％、マゼンタ18％、イエロー42％でこんな色になったよ」と調整後の色を見せてくるようになりました。まさか5歳児とこんな会話をするなんてね笑、絵具を混ぜているようで楽しそうです。
論理式学習サイト
最後に作ってみたのが、論理式を学習するためのサイトです。僕自身この分野はちょっとまだ弱くて、前任校では論理式に一切触れずに論理回路の授業をしていました。
工科高校の電気科では半導体やら電子やらの話からこの辺りをみっちり勉強していくので、僕自身がまるで無知のように思われてしまいそうです。
ここは僕自身もちゃんと理解して、自信をもって教えられるようにならなければ！と思って、このサイトを作ることにしました。Claude Codeと一緒にね。
使うタイミングは、論理回路を別のシミュレータでそこそこ組めるようになってからの話です。実は式で表現することができるんだよという話をしてから、このサイトに誘導します。で、ANDやOR、NOTなどを含めて、式を入力して、「論理式を解析」ボタンを押します。
すると、真理値表と論理回路図、最後にA・B・Cそれぞれの0と1を切り替えるボタンがあるので、そこで動作確認できるというわけです。
論理式を実際に書いてみて、「これってどう動くんだろうな」って思ったときに、手軽に動作確認がしたいなって思ったので作らせてみました。特に論理回路を表がさせるときに、最初は線がANDなどのオブジェクトの上に乗っていたりしたので、なんとか回避するようにしたりと、結構調整が必要なページでした。
データベース設計体験ツール
以前いた学校には商業科の科目があって、その中に情報処理という科目がありました。言ってしまえばそれが情報Ⅰの代替科目になるわけですが、情報Ⅰを履修して更に情報処理を履修できるようになっていました。系統としては似ているのでテキストを見せてもらったことがあったんですが、SQL文の問題が載っていました。
あー、SELECT文だ。懐かしい。大学時代にOracleサーバーで実習したなぁ。
すると担当の先生から、衝撃的な言葉を聞きました。SELECT文、問題を解くだけで、実行しないんですって。ちょっと、ちょっとまって。実行するコマンドだけ組み立てて、実行しないんですか？まじか。プログラミングのコードだけ書いて実行しないのと同じじゃん。
自分は教科書でお勉強というよりもひたすらコマンドを叩いて結果を見て学ぶタイプなので、どうもこうした進め方に馴染めませんでした。情報処理という科目において、問題を解くことが目的ならそれも教科の特性なのかとも思えなくもありませんが、もしも書いて解くことにこだわる理由が特になくて、SQLサーバーが用意できないという技術不足が本音だとしたら？
というわけで、作ってみました。データベースを作ったり、作ったデータベースでSELECT文を実行するための機能もつけときました。また、生徒がデータベースを学習するために、教材として「学習モード」、理解度を確認するための確認問題を解くための「テストモード」もつけちゃいました。
情報をまとめるとき、とにかく重宝するのが「表」です。でも、情報を表にまとめていくと、どうしても重複する内容が何度も出てきます。それならば、表を複数に分けて連動したら良いんじゃないか。これがデータベースという考え方です。
実際に動いている様子を見てみないと、これがまた実感しにくいんですよね。題材としてはテストの点数とか、図書館の貸し出しとか色々ありますけど、ECサイトの売り上げなんかもリアルかなと思ったので追加してみました。学校で活用されているデータベースだけだとリアルに欠けると思ったんですよ。
ちなみにデータベースをこのサイトで作ったら、その分をCREATE TABLEするコマンドも作られるので、実際にSQLサーバーで実行できると思います。最初はむしろその機能がゴールだったんですが、後からSELECT文も試せたら良いなと思ったので追加しました。
このツールを使えば、データベースがもっと身近になるんじゃないかと思います。もし身の回りの情報をExcelでまとめることに限界を感じて、「あ、情報Ⅰで習ったデータベースが便利かもしれないな」なんて思い出してくれたら、もうそれだけで先生嬉しくなっちゃうぞ。
今回このサイト集を作っていたら、生徒から「先生、すべてを1つのサイトとして統合しませんか？その方が見やすくて助かります。」という意見をもらいました。僕もまさかここまでのページ数になるとは思っていなかったので、確かにまとめた方が良さそうだなとも思えてきました。
ここまでの作業、ほぼすべての実コーディング作業はClaude Codeくんですが、細かい指示やダメ出しなどを何度も繰り返しました。いろんな機能があるように見えて、最初は張りぼてな部分が結構あったんですよ。それを追加でプロンプト書いて、何度もお願いして、間違いを指摘して今に至ります。こういう最終確認なんかは人間の仕事だなと今でも思っています。
それと、こういうサイトをAIが作りましたって言ってもね、僕がこういうサイトが合ったらよいなと発想して、思い描いた通りに作らせたわけですよ。つまり最初の発想の部分は自分でしないとなということ。そりゃその発想の時点で生成AIを使うこともありますけど、まだまだ事の発端にあたる部分は人間による「気づき」が必要なんじゃないかなと思うのです。
気づきとその内容の言語化。これが今のAI時代においても人間に求められる能力ではないでしょうか。いやはやそれにしても、便利な時代になったもんだ。僕はこれからもAIを、自分が勉強するために、そして子どもたちの学びの向上のために使いたい。AIを使って勉強するのって、本当に楽しい。それが子どもたちに伝わると良いなぁ。
今回のnewsletterは以上となります。
「いいね」を押していただけるとうれしいです。内容に関するご意見ご感想がありましたら、「#こだわりらいふ」をつけたツイートや、Substack内のコメントまでお願いします。