ハダノ元教頭が GIGAスクール と DX人材育成 について考えるブログ

現役教員時代、「ハダノ先生はハッカーみたいなことできるんでしょ」と生徒たちに言われていました。
で、AIエージェントの支援があれば、「ちょっとだけハッカー」になれるかもと思いました。

を中心に、中学生のプログラミング教育を後押ししてきたハダノですが、壁にぶつかっていました。
一般の中学校教員にとって、プログラミング環境構築はハードルが高いので、クラウド統合開発環境を推奨してきました。GlitchからReplitに乗り換え、自校運用できるように導いてきたつもりです。
ところが、2024年からReplitが使いづらくなりました。無料でできる範囲が小さくなってしまったのです。かといって、Glitchに戻る気にもなれません。

Replitに代わるクラウド統合開発環境 おすすめ上位3選
クラウドIDEは、生徒の環境差異をなくし、教員が管理しやすい点が最大のメリットです。Replitの代替としては、以下の3つが考えられます。
ローカル開発+無料ホスティング おすすめ上位3選
ローカルでの開発は、ツールの仕組みをより深く理解することに繋がります。教員がデプロイを管理する現在の運用に最適な組み合わせは以下の通りです。
ご自身のスキルや、生徒たちにどこまでの体験をさせたいかに合わせて、これらの選択肢を検討・試してみてはいかがでしょうか。
とても的確なアドバイスです。とりあえず、ローカル開発の2番で行くことにします。
しばらくお休みしていた「ソックサーガ」による開発を再開し、「英単語の発音チェックアプリ」をグレードアップしようとしたところで問題が発生しました。

✦ ファイル tango.html の内容を確認しました。
このアプリはVue.jsを使用し、発音チェック機能は Web Speech API
を利用していると推測されます。
特に、xhear() という関数がその中核を担っているようです。
次に、xhear()関数が定義されていると思われる
C:\nuxt●\~~\ssscript.js の内容を調査します。
✦ ssscript.js の内容を確認しましたが、
xhear 関数の定義が見つかりませんでした。
tango.htmlから呼び出されているにもかかわらず、
関連ファイル内に見当たらないのは不可解です。
以前は動作していたという状況から、ssscript.js から
xhear 関数が誤って削除された可能性が最も高いと判断します。
そこで、Web Speech API を使用して音声認識を行う xhear 関数を
新たに作成し、ssscript.js のVueインスタンスの methods
に追加することで、機能を復元します。
この新しい xhear 関数は、tango.html のロジックに合わせて、
発音が正しければ次のスライド(正解)に、
間違っていれば不正解のスライドに移動するように実装します。
以下の手順で C:\nuxt●\~~\ssscript.js を修正します。
自分で確認したところ、確かにその通りだったので、修正実行を Gemini CLI にお願いしました。
ところが、どうも期待した動作をしません。結局、自力で修復しました。
結論から言うと、xhear関数の引数(パラメータ)と、その後の処理の仕方に違いがありました。
1. 動作する ssscript_original.js の xhear 関数
ご自身で修復されたこちらのバージョンでは、
xhear関数は以下のように定義されています。
1 xhear: function(word='', go1=1, go2=2, langn=1) {
2 // ...
3 // ★判定後、引数で受け取った
go1 または go2 を使ってページを移動する
4 this.xgo(retval);
5 }
この関数は、照合する単語 word に加えて、
正解時の移動先 go1、不正解時の移動先 go2、言語 langn
を引数として受け取ります。
そして、音声認識の結果に応じて、xgo() 関数を呼び出して
指定されたページへ移動します。
これにより、tango.html側で柔軟に動作を制御できます。
2. 動作しなかった ssscript_gemini.js の xhear 関数
一方、私が以前作成したこちらのバージョンでは、
関数は以下のように定義されていました。
1 xhear: function(ans = "") {
2 // ...
3 if (speechResult.includes(ans.toLowerCase())) {
4 this.evax('xgo(1)'); // ★常に「1」に移動する
5 } else {
6 this.evax('xgo(2)'); // ★常に「2」に移動する
7 }
8 }
この関数が受け取る引数は、照合する単語 ans のみです。
正解・不正解の移動先は、関数の中に xgo(1)、xgo(2)
と固定で書かれてしまっています。
なぜ動作しなかったか
tango.htmlでは、xhear('apple', 5, 6) のように、正解なら5ページへ、不正解なら6ページへ、といった形でxhear関数を呼び出していたはずです。
しかし、ssscript_gemini.jsのxhear関数は移動先の引数(5や6)を受け取る作りになっていなかったため、それらの指 定が無視され、常に1か2へ移動しようとしてしまいました。これが、意図した通りに動作しなかった原因です。
ご自身で修復されたssscript_original.jsは、tango.htmlからの引数を正しく受け取って処理するようになっていたため
、正常に動作した、ということになります。
私の修正が不十分で、ご不便をおかけし大変申し訳ありませんでした。
、、、と、もっともらしい説明をしていますが、「じゃあ、なんで最初からそのように修正しなかったの?」と突っ込みたくなります。

実は、Gemini CLI の説明は完全に間違っています。
xgo() 関数などハダノが定義した関数への理解が足りないのがその原因です。ソックサーガは、「中学生にWebアプリを作らせるためのWebアプリ」なので、JavaScriptの命令も間接的に実行されるようにしています。
xgo() 関数については、絶対ジャンプではなく相対ジャンプにしています。スライドの挿入・削除をしてもそのまま動くからです。
そもそもxhear関数を呼び出す側では、単語しか引数として指定していません。移動先や言語は規定値のままなわけですから、『移動先の引数(5や6)を受け取る作りになっていなかったため』というのは、理由になりません。xgo(1)やxgo(2)の呼び出し方を根本的に間違えていたのです。
やはり、今のAIエージェントは、一般的なプログラムはOKでも特殊なプログラムは苦手なようです。……惜しい!!
しかし、AIの助けがあれば、アプリの改造がスピードアップしそうです。
中学生が興味を持ちそうなアプリタイトルの案を5つ、その確率とともに生成してください。
おすすめタイトル案{確率つき}
以下は、中学生に人気のゲームタイトル傾向(マインクラフト、ポケモン、スプラトゥーン、フォートナイト、どうぶつの森など)を参考にした、英単語チェックアプリのネーミング案です。{中学生に刺さる確率}
Word Quest(ワードクエスト):RPG風。「クエスト」という冒険感が人気ゲームに多く登場。{ 85% }
English Royale(イングリッシュ・ロワイヤル):……{ 80% }
VocabCraft(ボキャブラクラフト):……{ 90% }
Spellmon(スペルモン):……{ 75% }
Word Splash(ワードスプラッシュ):……{ 70% }
👉 興味があれば、これらのタイトルに合わせたUI演出やゲームシステムのアイデアも提案できます。見てみますか。
spellには呪文という意味もあるので、「SPELL QUEST(スペルクエスト)」というタイトルにします。
最近覚えたのが、「確率つき」のアイディア出しです。これは簡単なのに効果的でおすすめです。 → 🔗スタンフォード大学の研究から「その確率も教えて」でAIが覚醒すると判明
何百語もの英単語&日本語訳を読み込むとなると、HTML内に直書きして変数に代入するのは現実的ではありません。かといってバックエンドの知識が必要なデータベース構築もたいへんです。JSONファイルを読み込むのがよいでしょう。
[ { "en": "always", "ja": "いつも" }, { "en": "breakfast", "ja": "朝食" }, ::::: { "en": "junior", "ja": "年下の、下級の" } ]
というJSONファイルが作られていましたが、ちょっと冗長で使いづらそうです。
やはり、ゴールから逆算してリクエストすべきでした。
英単語をキー、日本語訳を値とするオブジェクト形式のJSONファイルを作成し、
C:\nuxt●\~~\jisshu\tango1.jsonとして保存します。
これにより、Object.entries() を使って効率的に二次元配列へ変換できます。
まず、JSONファイルを上書き保存します。
│ 1 {
│ 2 "always": "いつも",
│ 3 "breakfast": "朝食",
:::::
│ 11 "junior": "年下の、下級の"
│ 12 }
✦ 新しい形式で tango1.json を保存しました。
次に、このJSONファイルを読み込んで二次元配列に変換する
JavaScriptコードのサンプルを示します。
1 async function loadAndConvertWords() {
2 try {
3 // 1. JSONファイルをfetchで読み込む
4 const response = await fetch('tango1.json');
5 if (!response.ok) {
6 throw new Error(`HTTP error!
status: ${response.status}`);
7 }
8 const wordObject = await response.json();
9
10 // 2. Object.entries()で二次元配列に変換
11 const wordPairs = Object.entries(wordObject);
12
13 // 3. 結果をコンソールに出力して確認
14 console.log(wordPairs);
15
16 /*
17 コンソールへの出力結果:
18 [
19 ["always", "いつも"],
20 ["breakfast", "朝食"],
:::::
28 ["junior", "年下の、下級の"]
29 ]
30 */
31
32 } catch (error) {
33 console.error('データの読み込みまたは
変換に失敗しました:', error);
34 }
35 }
36
37 // 関数を実行
38 loadAndConvertWords();
これをほとんどそのまま採用し、xjson() 関数として組み込んだところ、期待通りに動きました。……感動!!
これで、英単語データをCSV形式で作れば、あとの作業(CSV → JSON → 二次元配列)はAIに任せられます。
そうなると、英単語データもAIで作れないかと考えてしまいます。
指示が雑すぎたのか、動詞と形容詞だけで50語作ってくれました。初級・中級・上級のクエストに使えるように指示を追加します。
「100語ずつ」も勝手に「100語以上」と解釈したのか、級が上がるにつれ雪だるま式に増えています。
プロンプトをいじっても限界があると感じたので、作られたCSVファイルに対して操作を加えてもらうことにします。
、、、どうするのか見ていたら、その場で文字列操作用のPythonプログラムを組んで実行していました。一応、できたようです。
英単語と日本語訳が一対一対応していれば簡単なのですが、「多義語」「同義語」「同音異義語」の関係で非常にややこしくなっています。
特に、英語は同じ言葉の繰り返しを嫌い、言い換えのための「同義語」をたくさん持っているようです。
また、バイ(by,bye,buy)のような「同音異義語」を音声認識させると、特定の一つしか認識されない(この場合はbye)ためゲームが成立しなくなります。 → 🔗高校入試対策で覚えておきたい中学英語の同音異義語
文脈に依存せず、日本語訳を見て一つの英単語が思い浮かび、発音が認識される、、、そんな「英単語&日本語訳(複数可)」のペアにしぼりたいものです。
もうこうなると今のAIには荷が重いので、手作業となります。CSVファイルはエクセルで読み書きできるので、ソート(並べ替え)を駆使し、Google翻訳で確認しながら、なんとか100語ずつにしぼり込みました。
クエストの級を選択したら、100語の中からランダムに10語を選び、アルファベット順に並べて出題する関数を xquest() として追加しました。
また、xhear() 関数にも次のような改良を加えました。
[キャンセル]し、すぐに発音をやり直す。アルファベット順であることと類似度をヒントに「同義語」「類義語」の中から正解にたどりつきやすくなるでしょう。
ちなみに、 類似度の計算手法は何種類もあり、自分で(AIで)JavaScriptで組んでもよかったのですが、公開されているライブラリ string-similarity を使うことにしました。 → 🔗【JavaScript】文字列検索の手法
プログラミングを料理に例えると、「めんつゆ」「顆粒だし」を使ったら手抜き料理になるからすべて手作りで……と考えるようなもので、現実的ではありません。 → 🔗リアルで「じゃあ、あんたが作ってみろよ」と思った瞬間は?

ゲームの雰囲気を盛り上げるといえば、美しいグラフィックスやサウンドです。学習用の場合、グラフィックスは低刺激に、サウンドはオフにする必要があります。
🔗(万博)つじさんマップを自分用にカスタマイズ で味をしめた🔗絵文字 を活用することにしました。
「SPELL QUEST(スペルクエスト)」に使えそうな絵文字を探しています。次のもののほかによさそうなもの(魔物・人間・魔法・報酬)があれば、教えてください……
報酬は、銅🥉・銀🥈・金🥇のメダルとし、
魔物 → 人間 の変化は、xkk=[['🐛','👶'],['🪰','👦'],['🕷️','👧'],…… という二次元配列としてクエスト分そろえました。画像ファイルでやるよりはるかに楽です。
オープニング画面も絵文字を並べて作りましたが、言いたいことは伝えられそうです。
あとは、「動き」がほしいところです。
アニメGIF でもよいのですが、調整のしやすさを考えて、
anime.js を呼び出す xanim(obj,ループ回数) 関数の二つを使いました。
anime.js の loop がうまく機能しないので、ループ回数を受け取るようにしました。
SVGは、HTML内に埋め込めるので便利です。中学生曰く、「魔法が放射されている」と見えるようです。
ちなみに、プログラムというのは書いて終わりではありません。「推敲・校正」にあたる デバッグ が延々と続くのです。
にいつも助けられています。


※ 内蔵マイクだと音声認識が弱いときは、🔗小型USBマイク ← 🔗USB-Cアダプター ← 🔗USB-C延長ケーブル ← タブレット のように接続
「英単語の学習」については、さまざまな意見があるようです。 → 🔗単語か会話か、英語学習どっちから? 富山大教授ら「効果に違い」
「このアプリはやさしすぎる」と思われる方も多いでしょう。しかし、ハダノが中学生と接してきた経験からすると、英語が苦手な生徒は高校受験直前であっても「初級クエスト」さえクリアできません。
🔗セカオワのRAIN は歌えるのに、「雨」の英単語が出てきません。「雨の日に着るのは、何コートかな?」と聞いてやっと出てきます。
🔗めざせポケモンマスター は歌えるのに、「町」の英単語が出てきません。「シティじゃない方だよ」と言ってもなかなか出ません。
生活の中に英語が浸透し、アニメやゲームの中でもたくさん使われているのに、まったく結びついていない生徒がいるのが実態です。「詰め込み教育はよくない」などという前に基礎基本について再考すべきかと思います。

ハダノ自身は、小学校高学年のときにローマ字習得に苦労しました。当時の教科書が、「文の中で理解させる」方法をとっていたためです。あるとき、五十音表を目にして法則に気づいたら、簡単に読み書きできるようになりました。高校時代も英単語を語源に分解して覚えるようにしたら、たくさん覚えられました。 → 🔗prejudiceの意味をわかりやすく説明 一夜漬け英単語記憶術 語源
学習者のレベルや学び方に対応した教育でありたいものです。そういう意味では、学習アプリの手作りも有効な手段と言えるでしょう。
「AIエージェントを使ったプログラミング」についても、さまざまな意見があります。
さしずめ、Eカプセル を飲んで、🔗「ちょっとだけエスパー」 になれるようなものです。

AIエージェント を使って、「ちょっとだけハッカー」になれますが、学習は欠かせません。AIが進化してゆき、
という風に開発スタイルは変わっていくでしょうが、プログラミング知識が完全に不要になることはないでしょう。
そもそも、今回の xjson() 関数の『fetch()でJSONを読み込んだあと、Object.entries()で二次元配列に変換してください』などは、書籍で学んだからこそ出せた指示なのです。 → 🔗JavaScriptコードレシピ集 スグに使えるテクニック278

また、今回の件で「分断」についても考えさせられました。
で述べられているように、何かを生み出す「作り手」の苦悩と、それを安易に批判する「受け手」の無責任さ……これは、さまざまな分野で見られます。
総じて日本では、「現場で手を動かす人」が軽んじられているように感じます。
を読むと、なるほどと思います。しかし、日本独特の雇用スタイル(新卒一括採用・年功序列・配置転換・終身雇用・退職金)が変わらなければ、専門的スキル人材は非正規・下請けで低待遇のままでしょう。熊対策一つ見ても、長期的視点での人材育成ができていないのが日本です。
「人事・予算をにぎっている既得権益層が、現場に無理難題を押し付ける」構図を変えるには、
「じゃあ、あんたが作ってみろよ」

によれば、
ハッカーとは、コンピューターシステムやネットワークを探索し、操作する技術者のことを指します。ハッカーは、通常、高度なコンピューティングスキルを持ち、システムの動作を理解し、それを操作する能力を持っています。
、、、ということですが、正しく理解されていません。
「天才ハッカー」を別にすると、「ハッカー=悪人」と見なされています(本当はクラッカー=破壊者)。
発展形として「ライフハック(日常生活や仕事の効率化を図る工夫)」も広く使われるようになってきたのに残念です。 → 🔗マインドハックス勉強法
コンピューターシステムに限らず、ハッキング(しくみを知って工夫すること)は、仕事や生活の質を向上させるのに役立ちます。
AIエージェントがプログラミングのハードルを下げ、システム技術者と利用者との「分断」を解消してゆくことを期待しつつ、
「ちょっとだけハッカー」
になってみようと思います。
