課題評価の効率化
WEBの世界には、面白い小話がたくさんあります。
雨宿りとWEBの小話、パーソナリティのkeethです。
今回も一つ、興味深いお話をご紹介します。
今回の話題は、この番組で何度も語ってますけど、
私、今プログラミングの講師を副業としてやってます。
TypeScriptとReactの講義をしてるんですけど、
先月で前期が終了して課題を出したんですね。
その課題の評価とコードレビューをしなきゃいけないんですけど、
いかんせん人数が多いので、何とか効率的にやりたいなということで、
今回はClaude Codeを使ってコードのレビューと評価をしたというお話をしたいと思います。
人数でいくと、確か90何人だった気がします。
もちろん全員が、ちゃんと課題を提出してきたというわけではないし、
もちろん未提出の方もいらっしゃれば、
何名かはそもそも僕の授業に一回も来たことない、
もしくは一回だけ来てすぐに来なくなったという方もいらっしゃるので、
90人全員の評価をしたわけではもちろんないですけど、
ミニマムでも60人は見たはずですね。むっちゃ大変でした。
なんですけど、Claude Codeを使ったおかげで、
結果的にはですね、何時間?それとも6時間くらいかかったんじゃないかな?
6時間?8時間くらいかかったと思いますが、
学生の理解度
終わったのはかなり良かったと思います。
どんなことをやったかっていう話をするんですけど、
これ多分誰かの学びになる気はしないんですけど、
自分はこんなことをやったっていう参考例としてログ残しておこうかなと思います。
まず先にやったのは、何十人も見るので、
その場でCodeを見てレビューをするんですけど、
事前知識なしにやるっていうのはやめようと思っていて、
あくまで受けてくださっている学生さんって、
本当にプログラミング初学者の方が圧倒多数なんですよ。
9割9分、多分初心者。
僕以外の講義でデータベースやったりとか、
Javaやったりとか、バックエンドやったり、
あとはインフラ周りとかの基礎知識座学をやったりとか、
いろんな講義を受けている学生もいらっしゃって、
でも選択肢なんで受けてない学生もいらっしゃいますけど、
僕はその中でTypeScriptとReactを担当させてもらってます。
ただ、本当に初学者だっていうところが大前提でやっていくので、
出した課題はド定番、ToDoアプリを作ってくださいっていうやつですね。
講義中にはいろんなWebアプリケーション3つぐらい作ったのかな。
まずはカウントダウンアプリといって、
あと今年何ヶ月何日何時間何分何秒みたいなものを
1秒ずつ計算して画面上に出していくっていうドシンプルなやつで、
これはもう素のJavaScriptをHTML、CSSだけで一回作ってみると。
一回JavaScriptそのものに慣れてもらって、
その次に作ったのが何だっけ、
ポケモンサーチアプリですね。
ポケサーチっていうのを作ったんですけど、
ポケモンAPI、ポケAPIっていうものがパブリックAPIとしてありますので、
これを利用してAPIを叩くとポケモンの情報が出てきて、
それを画面に出しましょうっていうシンプルなものです、これも。
これをTypeScriptとReactで作りました。
番号で検索するか名前で検索をすると、
ポケモンの写真、名前、ID、身長、体重、タイプ、技名みたいなものが取れる。
それを画面によしなにスタイリングをして出しましょうっていうアプリケーションで、
後で概要欄に実際に作ったサンプルのアプリ、リンクも載せておきますね。
結構そのAPIから返ってくる画像もたくさん書類があって、
各世代ごとに用意された画像も取得できたりするし、
アニメーションかかっているGIF画像もあったりするし、
色違いもちゃんとあったりするので、結構面白いこといろいろできるんですよね。
ただデフォルト、デフォルトというか英語しかないですね、
文字列のデータは全部英語なんで、そこだけ注意って感じです。
それを日本語に翻訳したければ日本語で辞書を作るしかないんですけど。
そういうちょっと実践的なのを作った後に最後TUDOアプリは最終課題で、
一緒に作ることはなしで皆さんでやってください。
それまでは全部ハンズオンで僕と一緒に書いてたんですけど、
その成果物を最終成果物として前期のね、
それを持って成績付けを付けますと、やりますよという話でした。
ただ一応僕がサンプルに作ったTUDOアプリのソースコードと、
それの作り方みたいな資料も共有をしてます。
なおかつAIを今回使ってTUDOアプリを作って提出することも良しとしてます。
あくまで皆さんがどういう学習をするかっていう話で、
そこで点数だけ欲しければ別にAIを使ってサクッと作ってもらって提出してもらっても良いですよと言ってます。
それがその先皆さんの人生にどう影響するかは皆さんで考えてねということなので。
僕は受けてくださっている学生さんの、もちろんある程度の学習の責任はもちろんありますけど、
学習とか勉強って最後は本人の意欲と、どれだけちゃんと時間かけたり、
頭使ったのかっていうところに尽きると思うんで、
個別にアドバイスをしたりとか、ある種発砲をかけるとか、
モチベーションアップするようなコミュニケーションを取ったりとかもしますけど、
全員に同じ熱量でやることはやっぱり不可能なので、
なるべくはお問い合わせだったり、質問であったり、
アクセスが来た学生さんに対してやってますね。
そのスタンスですので、今回の最終課題に関しても、
ちゃんと自分がこの場でリアクトとかタイプスクリプトを学びきりたいんだっていうのであれば、
AIを使わないで自分の手で書いていただくのが良いと思います。
それでできてなくてもいい、完成してなくても良いし、
途中だったとしてもそれを提出してもらえば、それはそれとして評価をします。
その代わりここまで学びましたっていうので、
コードレビューしてあげるっていうのをしようと思ってました。
アプリの要件
AIだったら、わかりやすくAIっぽいコードだったりするし、
画面パッと見た瞬間、UIとかデザインが
いかにもAIが書いたなみたいなデザインってわかりやすいのがあるので、
それはそれとして、原点するわけじゃないですけど、
この子はそういうタイプなんだっていうのを僕が理解するって感じですね。
結局提出してもらったのが多分60人ぐらいだった記憶で、
それを昨日が提出期限だったので、
昨日の最後の最後追い込みでやってました。
何をやったかっていうと、
評価するものを項目絞ってこれだけで見ようと。
現時点、前期の授業までで、
ここまでは理解できるでしょうとか、ここはできてほしいなみたいな思い。
あとは最終課題のToDoアプリケーションの必須要件ですよね。
タスクが追加できたり、削除ができたり、タスクの状態ですね。
完了未完了みたいなことがちゃんとできたり、
そのタスクに対しての優先度が付けられたり。
あとはですね、今回ローカルストレージを使って、
ToDoアプリのタスクそのものを永続化しましょうっていう感じです。
1人だけ確かファイアベース使ってて、お、すげえじゃんと思いましたね。
全然教えてないんですけど、自分で調べたりなんかして、
ファイアベースでちゃんと保存されていて、素晴らしかったなと思います。
ただ、コンフィグ公開されていたので、そこだけちょっと突っ込めました。
ちゃんとアクセス制御したりとか、上限決めてますかみたいなことを付けてコメントしてます。
コンフィグをGitHubにコミットされてたので、ちょっと怖いなと思いましたね。
それ使ってバンバンにアタックすると銃課金されてしまうので、
そこだけ気をつけてって言いましたけど、
それ以外は基本的にはローカルストレージを使っていこうと。
あと削除するときは確認ダイアログ出して、本当に削除していいの?みたいな。
一回クッションを置くのはすごく大事なこと。
ミスとして間違えてクリックしてしまって、そのまま削除されてしまったらことですのでね。
そういう確認ダイアログを出しましょうみたいな、本当に基礎的なところを必須要件として、
それができているかどうかはチェックマンズを付けますと。
プラスアルファで例えば過読性だったり、パフォーマンスであったりとか、
コードレビューの効率化
独自のデザイン、スタイリングされてますかとか、そんなものの項目をいくつか付けていて、
加点要素と必ず必須でこれはできてほしいものみたいなもので、
マクダンでテンプレートを作ったんですね。
それをマックのドキュメントルートの下に、
クロードコードを使っているので、
.clodeっていうディレクトリが入るんですけど、
その下にプロジェクトでいうか、このマック全体の中で使えるような
clode.mdと、もう一個ですね、code-review.mdみたいなのを作って置いておきました。
各提出されたコードを自分の手元、ローカルで開いて、
プロジェクトにターミナルから移動して、その場でまたクロードを起動して、
先ほど作ったcode-review.mdに従ってコードレビューしてくださいと。
ただ事前情報としてはあくまでTypeScriptとReactは初学者の方ですし、
そもそもプログラミング自体もあんまり慣れていないような学生さんが対象です。
みたいなそういう補足情報とセットで、
その補足情報とかのテキストももう完全にフォーマット化して、
ひたすらそれを叩いて投げて、返ってきたものと実際のコード。
動いているデモのURLを見ながら、
クロードコードが吐き出してきたレビュー.mdみたいなファイルを
ざっと微調整して投げるみたいなことをやってました。
これやらなかったら多分終わってなかったと思いますね。
徹夜しても終わらなかった気がします。60人ってやっぱりすごい大変なんだよね。
この辺、ちゃんとフォーマット化しておくと
かなり精度高くいいコードレビューしてくれたなと思いますね。
ちょうどオリシモですね。クロードソネット4.5が出てきて、
かなり精度良かったと思いますし、ほとんど僕手直しすることなかったですね。
何が嬉しいかというと、僕が普段使うような言葉遣いだったり、
苦闘点もカンマとドットっていうのをちゃんとクロード.mdの方、
そっち多分認識したのかなと思いますけど。
僕はドットとカンマ使うようにしているので、
そこもしっかり従ってくれたのがありがたかったなと思います。
最初、フォーマットをつけたけど、これをベースにレビューしてくれっていうと、
フォーマットの大カテゴリーはちゃんと従うんですけど、
そこから先、いきなり全然違うフォーマットで書き始めたりするので、
このフォーマットから外れるなみたいなこともちゃんと言わないとダメだったっていうのが、
その辺難しいところですよね。
ただ、これ人間も一緒だなと思って、
例えば後輩に渡す時も、そのテンプレートを渡すけど、
やはり人は思想とか思考があるので、書き換えたりすることもあり得るよねっていうのを、
改めてそういうのを使いながら感じました。
あとは、なるべくリスト形式で書いたり、チェックできるようなマークダウンの形式で書いたりとかをしたので、
そこが構想したのかなと後で思いましたね。
何せよ、総合的にはかなりそれで効率化ができて、レビューしやすくなったので、
今後もコードレビューはクロードコードないし、CLIのツールを使おうかなと思ってます。
初学者への対応
これもブログで書いて、本当にどんなテンプレートを作ったのか、
コードレビュー.mdで中身どうなのかというのを見せてみるのが一つかなと思いました。
大カテゴリーは基本機能チェックというのと、グッドポインツ。
グッドポインツもタイプスクリプトの型定義がしっかりできてますかとか、
リアクトの基本として、ユーズステートを使って適切に管理されているとか、
プロプスちゃんと置き渡しされていて、なおかつプロプスにもちゃんと型が定義されてますかと。
あと、any型使ってませんかとか、型定義はtypes.tsに集約なるべくしてますかとかね。
マジックナンバーとか使わないように適宜定数使ってくださいみたいなものとか。
こんな感じの、お決まりなことをちゃんとできてますかっていうのを学習するための。
それがコードに反映されてますかっていうのをクロードコードにやってもらってました。
その他、加点は独自の工夫化されてたら加点要素として入れてて、
あと、修正点ですね。アプリケーションとして、まずこれは実装されてなかったなとか、
このコードはあんまりよろしくなかったなとか、
リファクタリングするような記述もあったよみたいなものはそこで追加して書いてあげて、
最後、総合評価ということで達成度とかを書いてあげて、総評としてのコメントを書くみたいな感じですね。
こうやって書くと、ちゃんとフォーマットを作ってあげたら、やっぱりAIはそこを従ってくれるんで、
逆に言うとこれなしに今後コードレビューは俺はもうしないだろうなと思いましたね。
できないって言った方が正しいかもしれない。
ただここまでは人間がやるべきじゃないなっていう気もちょっとしましたね。
ある程度AIを信じても良いなっていうような制度だと思います。
はい、まあそんなところかな。
じゃあ今回は少し短いですけどね。
僕はこんな感じでコードレビューしたよっていうような紹介でした。
たぶんあとでブログ書くと思いますので、
どんなコードレビュー.mdっていうテンプレートにしたのかっていうのも参考までに共有したいと思います。
はい、では終わっていきたいと思います。
クロージングです。
この番組面白かったよという方は是非チャンネル登録もお願いします。
もし聞いていて気になることや話してほしいトピック、感想などございましたら、
概要欄のフォームやXでハッシュタグウェブ小話でつぶやいてください。
ウェブはアルファベット、小話は漢字でもひらがなでも大丈夫です。
またお聞きのプラットフォームでいいねだったりチャンネル登録もぜひぜひお願いします。
あなたからのコメントもお待ちしておりますのでお気軽に投げてください。
それではまた雨宿りしに来てください。
今回もお聞きくださりありがとうございました。
雨宿りとウェブの小話、お相手はKEITHでした。
バイバイ。
