公教育のプログラミング授業にtrackを導入した話　- 授業導入編（取締役 新田のブログより）

こんにちは！Wantedly運営担当の石原です。今日は、前回の「道のり編」に引き続き弊社取締役の新田のブログ記事(1月29日投稿記事)「授業導入編」をご紹介します。
10分くらいで読むことができるので是非ご覧ください！

↓↓↓↓↓(以下、転記 　元記事はこちら https://blog.maximum80.me/entry/2020/01/29/140349)

公教育のプログラミング授業にtrackを導入した話　- 授業導入編

前回の記事では、公教育プログラミング授業導入に向けた背景について簡単にまとめさせていただきましたが、 今回は具体的に授業の中でどのような取り組みを実施したかについてを説明していきたいと思います。

前回の記事はこちら。
https://blog.maximum80.me/entry/2020/01/21/095415

青山学院大学の授業の概要

取り組みを実施することになった松澤芳昭先生のご紹介

情報教育シンポジウムで、お会いした松澤先生は、これまでにも初学者向けのプログラミング教育の支援手法に関して、様々な取り組みをされていらっしゃる先生です。 非常に興味深い論文を多く執筆されておりますので、オンラインプログラミング学習領域にご興味のある方は、以下よりご覧ください。

https://nrid.nii.ac.jp/ja/nrid/1000040517017/

プログラミング問題の汎用的なオンライン化や課題の採点工数が課題

先生からお話をお伺いすると、現在担当をされているプログラミングの授業において、先生はすでに頭の中で「こんな演習問題をオンラインで出題したい」という構想はもたれていらっしゃったのですが、配信管理をするプラットフォーム選定を模索されていたので、trackの

オンラインプログラミング問題を、採点機能付きで誰でも簡単に作成できる

という、コンセプトに魅力を感じていただき、まずは教材をこのプラットフォームで作ってみましょうというところから話が発展しました。

また、現在授業担当をされているプログラミングの授業において、一部の教材は独自システムによりオンライン化ができているものの

• 汎用的に教材をオンライン化するのが難しい
• 300人規模の受講者の習熟度や進捗度をその場で把握するのが難しい
• 提出されたプログラムの採点に工数がかかってしまう

というような、課題をもたれていらっしゃいました。そこで、trackを用いることで

• 授業で利用する教材や演習をオンライン化
• 300名の受講者の配信、進捗管理
• 自動採点付きの演習でTAの工数を削減

を実現しようという話になりました。

trackでオリジナル問題を採点機能付きで実装できる仕組みについては、GitHubに公開しておりますので、もし試してみたい方はこちらからどうぞ。

https://github.com/givery-technology/marine

Dockerを用いてローカル環境で動作確認することができ、テンプレートを編集するだけで簡単にオンライン教材や演習を作成することができます。

導入した授業の概要

今回、オンライン化の試作を実施したのは青山学院大学の社会情報学部という文理混合の学部の1年生を対象とした、「コンピュータ実習」という授業でした。

受講対象者

• 人数: 70名×4クラス、合計300名程度
• 学年: 1年生
• 学部: 文理混合クラス
• プログラミング経験: ほとんど初学者

授業で教える内容

• JavaScriptを用いたプログラミングの基礎
• • 基本構文・データ操作、関数実装辺りまで
• HTMLの基礎、ブラウザでの入出力フォーム実装
• HTML/JavaScriptを用いたアプリケーション実装
• • 簡単なDOM操作

ということで、内容自体はそこまで難しいものではないですが、対象となる方が文系も含む初学者がほとんどですので、初学者にもわかりやすく、かつ自動採点機能つきの問題を作成することで、大規模な授業でも効率よく受講者の進捗や習熟度を把握することが今回のミッションでした。

実際に利用した問題・授業の様子

松澤先生から特別にご許可もいただきましたので、授業で利用をした教材や問題を一部ご紹介させていただきます。

作成・利用した教材と演習問題

授業で利用をした専用のプログラミング教材は、

• まず仕組みを理解するために解き進める体系化されている教材（ブック）
• 習熟できているかを確認するための演習（チャレンジ）

の2種類で構成されています。

まずは穴埋めで一つ一つ解き進める学習用ブック

（学習用ブックの画面）

まずは、HTMLのインプットフィールドとボタンを作成し、ボタンが押された際に、JavaScriptで書かれたプログラムを動かす、という一連の流れを穴埋め形式で実装をしながら解き進めていきます。

一通り学んだ後に習熟度確認するための演習問題

（演習問題の画面）

一通りブックが解き終わったら、

• BMI計算アプリを作ろう
• 勝率計算プログラムを作ろう

といったアプリの実装を演習として実施します。 今度は部分的な穴埋め形式ではなく、空のHTMLを与えて、これまでに習った内容を自分自身で記述し、プログラムを実行して動作を確認してみたり、問題で与えられている仕様を満たすプログラムが記述できているかをテストすることで、自分自身でプログラムを記述できるようになったかを確かめます。

授業の様子

こちらが実際の授業の風景です。

このように、演習問題を早く解き終わった学生が他の学生をフォローをするような場面も見られました。

管理画面での進捗管理

また、管理者（先生やTA）は授業中に専用の管理画面を閲覧することで、その場で「誰が今どの問題を解いているのか」を把握したり、 演習問題の点数や解答内容をその場で確認しながらサポートをするという体制をとることができました。

（学習ブックの進捗確認画面）

（演習問題の個人別の得点分布表）

NPSは -13 でやや低め

今回の授業を通じて、どこまで知人にもオススメしたいか、という Net Promoter Score を取得したのですが、こちらは -13（理想は20以上）とやや低い結果となりました。

また、定性的なフィードバックももらいましたので一部抜粋いたします。

良いフィードバック

学習に特化をしたUI/UXを提供し、自動採点を活用した演習問題を実施することにより、一人一人のペースに合わせた学習環境を提供し、わかりやすく、楽しい、というような意見をもらうことができました。

わかりやすい

• 最初からやってたらもう少し違ったかもしれない。わかりやすい。
• 初心者の人に対して考えると、部分的に関数を入力することで学ぶことができるのでわかりやすいと思う。ある程度経験している人に対して考えると、少し簡単すぎるような気がする。
• 初心者にもわかりやすいと思ったから
• 使いやすい、わかりやすい、レイアウトがいい
• とてもわかりやすかった。演習もテスト判定ができたのがよかった。
• プログラミングする画面と実行される画面が1画面にまとまっていて見やすかったです。
• 比較的わかりやすく、じっくり学んでいけるので身に付きやすいと思ったから。

楽しい

• クイズ形式で面白かった
• 割と楽しい

自分のペースで学べる

• 自分のペースで進めやすいので、人によってはすごく熱中できそう
• 先生が授業するときは自分にとってはペースが速く授業にもみんなについていけなかったけれど、今回のほうは自分のペースで一つ一つ理解しながらできるから、わからないまま授業が進ん行くことがないから

悪かったフィードバック

良いフィードバックもいただく反面、課題もたくさんみえてきました。穴埋めだと定着しづらい、演習だとつまづいた時に次に進めず、どこが間違っているかわからない、など、特にプログラミングに苦手意識を持っている人に対して、フォローをできるような仕掛けをより充実できると良いのではないかと感じました。

間違っている箇所が特定づらい（デバッグしづらい）

• エディターが使いにくい。どこを間違えているのかをはっきりとしることができない。
• どこが間違っているかわからなかった
• テストでどこが間違えているかがわからなくて勉強しづらかったです。

定着しづらい

• 細かいセクションごとに学習できてわかりやすいが、穴埋めパートが簡単すぎて逆に覚えにくいかもしれない。もう少し難しくすることで身に付きやすくなるのでは、と思った。
• 知識が定着しにくい
• 穴埋め式だから、学びたい意識があっても、一つ一つの関数や仕組みの意味がわからないから。一人で学ぼうとしても、すべての疑問が解消できるとは思えないから。

苦手な人はつまづいたら進めない

• 途中で躓いてから進まなくなった
• 得意不得意があり、苦手な人には説明が少なすぎる。できてる人に合わせすぎ
• 頑張ったつもりだったがテストがうまくいかなかったから

（おまけ）君の人生を変えてあげたい！

• そもそもプログラミングに興味が無いから。

そんなこと言わずに是非興味を持って欲しい！！

振り返り: 受講者の目線でプログラミングに習熟できるような出題方法や教材の改善が必要

授業導入に至った経緯となる課題としてあげていた

• 汎用的に教材をオンライン化するのが難しい
• 300人規模の受講者の習熟度や進捗度をその場で把握するのが難しい
• 提出されたプログラムの採点に工数がかかってしまう

という管理者・先生の観点だと、オンライン化による受講環境の提供や、進捗度合いの把握、採点工数の削減という観点では、本来の目的をある一定達成できたのではないかと思います。

一方で

「プログラミングに習熟する」

という受講者の立場や教育の真の目的に立ち返った際に、まだまだ初学者にとってまだまだハードルが高い観点が多かった印象があります。 管理環境だけではなくて教材の中身や解答方法、躓いた時のアシスト方法などをもっと考慮していくことでより適切な学習環境を提供していくことが求められるのではないかと思います。

具体的に今回の授業を通じて感じた初学者が躓きやすいポイントや、どのような学習環境の提供が必要かという考察は、また別のエントリーにてまとめていきたいと思います。

最後に

今回の授業導入に関しては、ある一定の手応えや期待効果を感じることはできたものの、学習効果を向上する上でのシステムとしてのUXの課題、管理者（先生やTAの方々）向けにも不足する機能もたくさん気づきを得ることができました。

僕としては、trackを導入支援することに限らず、こういった事例を外部に発信していくことで、プログラミング教育関係者や、企業内における技術研修担当者の方に、是非参考にしていただければと思い、記事を書かせていただきました。

今後ともプログラミング教育環境の改善に少しでも貢献していければと思っています。

謝辞

今回授業導入を推進していただき、外部への公開を快諾してくださいましたました松澤芳昭先生に厚く御礼を申し上げ、感謝の意を表します。

↑↑↑↑↑(転記はここまで)

実際に授業で「track」を活用いただき、運用チームとしても貴重なフィードバックをいただくことができました。今回、松澤芳昭先生に興味を持っていただき授業導入において推進いただけたこと、お礼申し上げます。

引き続き「track」に関するニュースや情報、HR Techの「人」にフォーカスしたフィードも発信させていただきます！

====
HR Tech部門では新しい仲間を探しています。 エンジニアのスキルを可視化することによって、そのデータをより教育や育成に活かすことによって、 日本中に強いエンジニアチームが生みだすことにチャレンジしています。 セールス、カスタマーサクセス、マーケティングなど幅広く募集していますので、是非遊びに来てください。