AIに使われない人になるために

生きることにこだわりを。魚住惇です。
今回もちょっとしたこだわりに、お付き合いください。

AIトラブル沼から抜け出す

先週の配信では、Claude Codeを使って情報Ⅰの学習サイトのページを作りまくっているという話を書きました。最後の方でも書いたと思いますが、ここまでページ数が多くなってきたら、1つのサイトに統合した方が良いなと考えました。

で、そのまとめサイトもAIくんに任せたら良いじゃんって思ってたんですよ。何せ元々AIが作ったんですから。でもこれが沼の始まりで、Claude Codeのリミットに何度も到達してしまいました。僕はもうリミットに達してしまって「続きは午後3時からね」とか言われるのがすごく嫌で、もう一思いにMAXプランを契約したところで妻の顔を思い出し、踏みとどまりました。

具体的に何をやっていたかというと、統合するためのサイトをゼロから作り、そこに各ページを再構築する作業を考えていました。できれば自分でもページが追加できて、でも面倒な移行作業はAIに任せることができたら、それはそれで今後も使いやすいものになるんだと信じて。

ところが実際に移行作業をさせてみると、元のサイトに実装されていた機能が消えていたり、文言が変わっていたりしたんですよ。しかも、エラーだらけでサイト上で動いていたプログラムが全然動いてくれない。一筋縄ではいきませんでした。まぁね、こちとらエラーと対決するのは慣れてますんでね。エラーログを見て、もうそのままClaude Codeくんに貼り付けたら次の瞬間に解決ですわ。そう信じていた頃が僕にもありました。

ここで沼にはまったわけです。Claude Codeくんがコードを修正してくれたはずなのに、ブラウザの開発者ツールでは同じエラーコードがずっと出てるの。それを毎回貼り付けては修正しろと命令し、終わったタイミングでGitHubのリポジトリにコミットしてプッシュして。それでも解決できなくて。ここでトークンを使いまくったので、リミットに達してしまったのです。

2進数のアニメーションなどはすごく簡単に移行できたんですけどね。論理式から論理回路を自動で設計してくれるページはもう、ずっと何をやっても論理回路が崩れてしまって、もう心が折れそうでした。個別に作ったページではちゃんと動いてたくせに、なんでサイトを統合しようとすると崩れるの。本当に意味わかんない。

Claude Codeの動作内容を見ていたら、そのうちに「根本から作り直します」とか言い出して、最初から作り直すというのをずっと繰り返すようになっていました。これがまた大量にトークンを消費する原因にもなっていて、それで同じエラーにたどり着くんだから、こりゃもうだめだなってなったわけです。

やっぱり自分(人間)の目で確かめないと

おいおいClaude Codeよ。何をそんなに無駄なことに時間使っとるの。そう思った僕は、これまで作ってくれた個別のページの中身を見てみることにしました。

Claude Codeに機能性があるサイトを作らせると、HTML単体か、もしくはディレクトリが作られて、ディレクトリの中にはindex.htmlとJavaScriptとCSSが入っていました。HTML単体のファイルの中にはそれこそScriptタグとStyleタグが入っていたので、3つのファイルが1つにまとまっている感じでした。おっかしいなぁ。もうページとして出来上がっているのなら、ただのリンク集でも良いだろうに。なんで新しいサイトに合わせて最初から作り直しているんだろう。

ここで僕自身も、「あ、ひょっとして移行先のサイトそのものが、移行が難しい設計になってるんじゃ？」と気づいたわけです。で、Web版Claudeと一緒に、Claude Codeがこれまで作り続けてくれたページをまとめるにあたって、どんなツールが有効なのかを考えてもらいました。

僕がこれまで経験したWebページ制作時に使ったことのあるツールは、WordPressとHugoがほとんどです。一昔前だとConcrete5を触ったことがある程度です。HTML+CSSも理解があります。できたらページを作るにあたって便利なツールを使って、実際にタグを書かずに作りたいなと考えていました。

Hugoはここ数年で割と使い慣れていて、Markdownで書いた内容をHTMLに変換してくれるので重宝しています。ただこれまで書いてきたのはブログ記事だったりするので、JavaScriptやそのページ個別のCSSが含まれるHTMLファイルをどうやって移行するのかっていうのがネックでした。

そこでClaudeが出してくれた候補が、Astroという静的サイトジェネレータでした。Qiitaなどの記事を追ってみると大体2023年くらいから徐々に使われ始めているWebフレームワークで、HTMLを.astroという独自の拡張子のファイルに変換して扱う仕組みが使われています。

---
// pages/index.astro
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Welcome to Astro.">
  <main>
    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
    <Card
      href="https://docs.astro.build/"
      title="Documentation"
      body="Learn how Astro works and explore the official API docs."
    />
  </main>
</Layout>

こんな感じにフロントマターから始まり、Layoutという独自のタグで囲まれたパーツが.astroファイルに入っています。この個別のページとは別に、インデックスに使うファイルやメニューに使うファイルなどが別々のastroファイルに保存されていて、ビルドしたら1つのサイトとして閲覧できる仕組みです。

このLayoutタグの中身が、これまで使ってきたHTMLやCSSはもちろん、SCRIPTタグとなるわけです。つまり個別に作ってきたページをまとめるための最適解ということ。

もちろんCSSやJavaScriptは別ファイルを参照しても動きます。参照する際もいつものHTMLタグで指定するだけ。拡張子が独自のファイルを作るものの、中身はタグが入っているテキストです。

「また新しい独自の拡張子が出てくるのか」という感覚さえ受け入れることができれば、HTMLをパーツごとに分割して保存しておけて、しかもMarkdownなどではなく素のHTMLという割と理にかなった仕組みのメリットに気づけると思います。

パーツがAstroファイルごとに保存してあると、サイトのメニューやページなどが全て個別のファイルとして、HTMLとして保存されているので、編集時にかなり見やすいんですよ。divだらけじゃなくなるのでとってもシンプルです。

VSCodeにもAstroファイル用のエクステンションが配布されていますし、GitHub Actionのテンプレートも登録されているので、GitHub Pagesでそのまま公開できます。むしろこれが今回の本命ですけどね。

こうして、Claude CodeにはローカルにCloneしたGitHubのリモートリポジトリを編集してもらってコミットまでやってもらうようになりました。そのあとはAstroをサーバーモードで起動してブラウザで確認して、良ければそのままgit pushする感じです。

Claude Codeもこっちの方が作業しやすいようで、最初に統合サイトを作れってお願いした時には既存のページの編集までしてくれちゃって「勝手に内容を変更すんなや」状態になってました。でも僕自身がまずHTML内のStyleタグやScriptタグをそれぞれJSファイルやCSSファイルに分割して保存して、それらを繋いでCSSも調整してねとお願いすれば、元々のページをほぼそのままAstroに移行してくれました。

そう、僕がこの移行作業をやるとね、結構トラブったんですよ。CSSが適用されんとか。JSが読み込まれないとか。Astroが使っているCSSと競合しているとかで。あとちょっとで完成だというのに。このタイミングで残りの部分をClaude Codeにお願いすると、こちらの意図を組んでくれてエラーを解決してくれました。

よく生成AIのことを知識豊富な部下に例えて、どうやってお願いしたら仕事をしてくれるんだろうかという話になると思います。今回もまさにそれでした。無知で無能な上司じゃダメなんですね。それなりの知識があり、実戦経験がある上司じゃないと的確な指示が出せませんし、生成AIとある程度の専門用語で話すこともできません。

そして生成AIとのやり取りの中で、自分自身も学んでいくこと。これはAIに限らず常に求められてるんだなって思った次第です。特に情報科なんて、スマホアプリの最新事情とかは僕なんかより子どもたちの方が知っていることがありますし、ゲームの話題だともうついていけません。

僕にとって先生とか生徒とかいう関係は、割と流動的だなと思っています。子どもだって何かの先生になりえるので、自分は先生なんだ偉いんだぞとか常に思っている人はあまり尊敬できません。

Claude Codeを使うようになってから2週間ほど経ちます。以前よりもWeb版Claudeを使うようになりました。もうわからないことだらけで、Claude Codeを使いながらWeb版で聞きまくりです。もうローカルLLM用の良さげなグラボが欲しいくらいです。ぜひローカルで動いて欲しい。

生成AIの使い道は、自分の中ではやっぱり自分が実現したいことへのショートカットです。ちょっとのデバッグで2時間も3時間も悩むのを、なるべく削減したい。ただ、必要な試行錯誤はなるべくした方が良いなとも思っています。ここのバランスが難しいところです。

情報Ⅰの教材サイト「じょうほうらいふ」も割と機能が増えてきました。この前作ったのは、進数計算の解説アニメーションです。

進数変換学習サイト

これを作ったからには、16進数にも対応させたいし、練習問題を作るんだったらフォーマットを決めて他の単元にも応用したい。でもそれってLMSなんじゃ？みたいなことを、あーでもないこーでもないと考えています。夏休みの自由工作案件です。

という文章まで書いていたんですが、投稿前に16進数の解説ページが出来上がってしまいました。

16進数学習サイト

なんかもう自分が作っているサイトであるはずなのに、それを説明する文章が追いついていない感じ。このスピード感素晴らしいですね。

勤務校は今週からが期末考査です。今日が3日目。前任校では1週間まるっと期末考査だったのに対して、今の学校は4日間しかありません。つまり明日が交差最終日。金曜日には授業です。実習の科目などが多いのでそもそも考査を実施する科目が他の学校よりも少なめです。

正直な話、情報Ⅰの科目で教える内容って、内容そのものはそんなに変化しないんですよ。教科書も改訂こそされているものの、コンピュータ科学の根本は現在のコンピュータを基準に作られているのであまり変化がありません。

それでも、僕自身の知識がまだまだ浅いからか、毎日のように発見があるし、新しいツールもどんどん出てきます。教える内容が変わらないんだったら、それらを学ばなくても良いじゃんかと言われたら、まぁそうです。

技術が進歩して、AIが登場して、多くの方はコンピュータはもう自分の理解を超える存在になってしまっているって感じるんでしょうね。でも自分の場合は4ビットの世界やアセンブリ言語は扱ってこなかったので、それこそそっちの方がピンときません。

そういう意味では、コンピュータが登場して、ネット社会になることで、今の時代だからこそコンピュータについての勉強が逆にしやすくなったんじゃないかと思うんですよ。ネット上には資料もたくさんある。情報が溢れているので見つけさえすれば良質のあ情報にも出会うことができる。

そこにAIが出てきてくれたことで、より学びやすくなったなと思うのです。分からないことは聞けば良いし、テキストで分からないなら今回みたいな解説サイトを作って貰えば良い。その内容が正しいかどうかはそれこそ既に出版された本などを調べたら良いと思います。そのきっかけさえ、AIは作ってくれる。

AIを使うと子どもたちが自分自身で考える機会を失い、より思考能力が低下するんじゃないかって、すごく教育業界では心配されているんですよね。そうじゃないんだよなぁと思う一方で、どこか自分も同じことを危惧しています。ここまでくると、学力が二極化しそうです。

そうじゃないんだよ。自分の勉強のために使うんだよ。その実例を、サイト作りを通して子どもたちにも見せられたら良いなと思いつつ、新たな趣味に没頭しています。

今回のnewsletterは以上となります。
「いいね」を押していただけるとうれしいです。内容に関するご意見ご感想がありましたら、「#こだわりらいふ」をつけたツイートや、Substack内のコメントまでお願いします。