オンライン授業での初学者用プログラミング学習環境の検討
布施 泉 1), 増本 広和 1) , 山本 裕一 1), 平林 義治 1)
1) 北海道大学 情報基盤センター
ifuse@iic.hokudai.ac.jp

Investigation of Programming Learning Environment for Beginners
in Online ClassIzumi Fuse 1), Hirokazu Masumoto 1), Yuichi Yamamoto 1), Yoshiharu Hirabayashi 1)
1) Information Initiative Center, Hokkaido University
概要
プログラミング初学者は様々なミスをしながら学習を進める．本稿では，学習者の学習状況に応じた適切な支援をできるよう，オンライン授業における初学者のためのプログラミング環境について検討する．著者らがこれまでに構築してきた初学者に対する授業用プ
ログラミング学習環境での学習者状況の可視化情報に加え，ウェブ会議システムを用いた個別の進捗確認，ならびに初学者からの質問対応を踏まえた追加資料の提示を組み合わせた授業実践について報告する．

1はじめに習者に問うている．「興味があったから」「必修授業でのプログラミングが楽しかったから」という2020 年度における大学の教育は，COVID-19 の比較的単純な回答の他，「プログラミングに興味が影響でオンライン授業を中心に実施せざる得ないあったが自分では何をしたらいいのかよくわから状況にある．本報告は，このような状況下においなかった」「プログラミングに興味があるが，自学て，大学の一般教育としてのプログラミング教育

では躓きそうなのでアドバイスをもらいながら学における初学者支援に焦点を当て，望ましい学習びたいと思った」「プログラミングを学ぶのは，独環境について検討するものである．

学では難しく感じられ，この機会を逃すと学ぶこ

本報告で検討の前提とする授業は，選択科目のとができそうになかったから」など，初学者にお一般教育で行う２つのプログラミングの授業であいて，自学での不安を理由とした内容，授業でのる．プログラミング言語は，Ruby と Python をそ支援に期待する内容が例年散見される．

れぞれ取り上げ，受講者は各 100 名程度である．

2019 年度までは，Ruby の授業のみを開講して殆どの学習者は，それ以前に行われた必修授業でおり，対面で 30 名前後の比較的少人数にグループ

3 コマ程度はプログラミングを学んでいるものの分けをして授業を実施していた．この場合，授業その習熟度は様々である．本稿では，それ以外のの中での具体的なやり取りで，学習者の状況を確プログラミング経験が殆どなく，学習開始時点で，認し，支援することが可能であった．しかし，2020

基本事項の習得が不十分で，独力でコードを作成

年度は，COVID-19 のためオンラインでの実施とすることが困難な学習者を初学者とみなすこととなったことから，対面での授業運営は行うことがする．本授業では，初学者と経験者が混在しておできない．授業でのプログラミング教育として，り，学習開始時点で習熟度レベルには幅がある．

特に初学者の不明点や不安をどのように支援して選択科目であり，総じて学習者の興味関心は高い．

いくのかが効果的であるかが喫緊の課題となった2020 年度時点の教育カリキュラムは，初学者を前ため，2020 年 10 月現在，試行的な実践を行い，提として組むこととしているため，習熟度に幅がその効果の検証を進めている．本稿ではその内容ある学習者に対する到達レベルの設定と課題難易を報告するものである．

度には工夫が必要である．
著者らは授業の最初に履修の理由について学2

初学者用プログラミング環境
著者らは，授業での利用を前提とした初学者用のプログラミング学習支援環境を開発し，当該環境を用いた教育実践を行っている[1][2]．この環境を本稿でのオンライン授業にて用いることとする．
当該環境の特徴は，教師が自身の授業資料を学習者の状態に合わせて提示でき，学習者は，授業資

図1

授業で用いるプログラミング環境料の閲覧，プログラムの編集，実行までを一画面で行うことができる点にある．また，Moodle プラ

ダブルクリックすることで，ファイル毎に図 1 のグインとして開発しており，教師は学習者のウェようなプログラミング環境が立ち上がる．本環境

ブブラウザ上での実行等の履歴を管理できる．学では，1 画面で学習者がプログラム作成に必要な習者は自宅でも大学でも同じ学習環境でプログラ操作ができるように工夫して構築している．画面

ミングの学習を行うことができる．

右上は，学習者の取り込んだライブラリ内のファ著者らが開発したプログラミング学習環境を
図 1 に例示する．プログラミング言語は，Ruby，Python，JavaScript に対応している．

イル（教師の補助資料等）を表示する領域である．
2.1 学習者状況の可視化
オンライン授業では特に学習者の進捗状況を

本学習環境上では学習者毎にフォルダ領域が適切に把握する機能が必要となる．教師は本プロ割り当てられ，その中で自由にプログラムを作る

グラミング環境の管理画面から，可視化をしたいことができる．作成した各プログラムファイルを開始・終了時刻，及び，時間幅を指定し，「表示期

図 2 指定時間における学習者状況を可視化した画面例

間を設定」ボタンを押下することで学習者の状況実行を上部の「実行」リンクから直接できる．まが表示される．図 2 は，60 秒毎の可視化例（実際た，実行リンクの右側にある”<” ” >”のリンクから，の画面を一部抜粋したもの）である．横軸が時間同一ファイルでの当該コードの実行時の変化を確の流れであり，縦軸が各学習者に対応する．つま認することができる．学習者が，当該コードをどり，1 分毎の各学習者の状況が示されている．学のように修正しようとしたのか，実際にどのよう習者の状況は，色で区別しており，各色の意味はなエラーを出しているのかを確認することで，当以下の通りである．

該学習者の理解できていない箇所を把握することを想定している．

緑：実行および実行完了（エラーなし）

図 2 で，気になる状況がある学生が表出した場

赤：実行エラー合，個別の学習者のプログラムの実行状況を，時薄青：編集開始

系列を追い確認することができる．図 4 にその画

橙：質問

面例を示す．図 4 は，管理画面の「実行ログ」タ

黄：質問に回答ブを表示させたものである．指定された期間にお濃青：ファイル保存

ける最新の実行プログラムの一覧が確認できる．

紫：ギャラリー閲覧

縦軸は学習者に対応する．図 4 の画面右には，プ

桃：ライブラリ閲覧

ログラムコードの操作が 3 種類用意されている．
操作欄左のメモ帳のアイコンを押下すると，緑が続いている場合には，プログラムの実行を行プログラムコードが閲覧できる．中央のアイコンっている状態であり，各人は基本的に問題なく授は，押下することで，当該プログラムコードの業を実施していることが推察される．

実行を行い，実行結果を表示する．右のアイコン

図 2 では 2020 年度におけるある授業コマの記は，押下することで当該学習者のフォルダ内録を可視化させたものである．本来，基本的な流を確認することができる．図 4 における左列のユれとして，学習者がライブラリを閲覧し，プログーザ名にあるリンクをクリックすると，当該ユラムを編集し，プログラムを実行するというものを想定するものの，エラーを連続して何度も発生させていたり，色が殆どつかずスカスカな状況でーザにおける表示期間内での実行履歴を確認することができる（図 5 参照）．

ある学習者もいる状況が見て取れる．学習者には授業コマでは，プログラミング環境を使って授業を実施するように伝えても，授業コマでは特段の作業をせず，授業コマ以外で実施しようとする学生がいることが想像され，指導が求められよう．
連続エラーをしている学生支援については，本プログラミング環境では，エラーが発生した赤マスをクリックすることで，当該学習者のエラーコードを確認できるようにしている．図 3 に，赤マスをクリックした際に立ち上がる実際のエラーコード例を示す．本画面から教師はエラーコードの

図 3 赤マスクリックからのコード表示例

図 4 学習者の最新実行コード一覧

図 5 ある学習者の実行コード履歴の表示

2.2 学習者との本プログラミング・システムを通した質問応答

質問フォームは，質問内容，質問を答える対象（「教師に」「みんなに」を選択），座席（記載は任初学者がプログラミングを行う際には，想定し意）の 3 項目から構成される．座席は，対面を想ない結果が出たり，エラーが消えなかったりする定した機能であり，オンライン時には用いない．

場合がある．前節では，学習者の可視化により全質問を求める対象「みんなに」は学習者間の相互体状況を確認するシステム機能について紹介した．

解決を意図して設定したものであるが，2019 年度

しかし，本来は学習者の能動的な質問に対し支援は「教師に」のみが選択されている状況である．

を行いたいと考える．学習者がエラーを起こして質問を送信すると，質問タブにその内容が表示いるとしても，本人がその内容を自身で考えて解される．また，教師は Moodle トップのメッセージ決したいと考えている場合があり，一律の支援がで，質問が届いたことを確認できる．図 7 は 2019望ましいとは限らないからである．一方で，理解年度の授業における実際の質問タブでの質問リスが不十分な学習者はどこがわからないかを適切にトの表示例である．質問とともにプログラムが紐伝えることが難しい場合もある．

づけられており，実際に質問のあるコードを実行

このような状況に対応するため，本プログラミして確認し，結果を踏まえて，アイコンング環境は，学習者の能動的な「質問」を当該コらの応答コメントが可能である．2019 年度の最終ードに紐づけて行う機能を有する．質問ボタンと授業では，質問機能を用いた遠隔地からの支援のそれに対する回答を行う機能であり，ポイントは試行も行ってきたが，順調に機能していることを以下の 3 点である．

確認している．図 8 は図 7 の一覧の質問にある・ 各プログラムファイルと質問フォームを紐づける（図 6 参照）．

をクリックし回答コメントを出した際の質問応答の画面例である．

・ 質問者自身が，教師のみか，他の学習者を含めてかを選択して質問できる（図 6 参照）．
・ 他の学習者宛ての質問であれは，他の学習者が確認し，コメントすることも可能である（図7，図 8 参照）．
図 6 は質問画面例である．図 1 に示したプログ
ラム実行画面上部に，「質問」ボタンがあり，当該ボタンを押下した場合に，図 6 の表示が出る．各プログラムで押下した質問フォームであり，質問とプログラムが紐づけられて管理されている．

図6

質問フォーム画面例

か図7

質問リスト例

図8

質問への回答例

業で提示する（1 人 5 分として割付）．

3 学習者の状態把握と学習支援「はじめに」で述べた一般教育における選択科・ 授業時には，同じウェブ会議システムに，進捗確認のための学生と質問に来た学生が目であるプログラミング授業をオンラインで実施混在する．
その回の割り付け担当の TA が，するにあたり，前章のプログラミング学習環境を来室者の目的（進捗確認か質問か）を確認用いることとした．

し，適宜，担当者の小部屋に割り付ける．

一般に，オンライン授業では，同時配信授業もしくはオンデマンド授業を想定することとなるが，・ 進捗確認では，可能な限り音声でのやり取授業における学習者の習熟度の幅を踏まえ，同時りとし，この進捗確認の意図と実際の進度配信授業を用いることは避けた．また，近年は反がシステムで予め把握できていることを学

転授業をプログラミング教育に活用する事例が増習者に理解させるようにする．本授業におえているが，対面することができない中で，初学けるオンライン授業の内容理解が不十分と者が 1 週間という短い時間で，期待すべき到達目想定される場合は，学習者の理解を確認す標まで達することができるかが見極められない可る．

能性が高いと考え，反転学習の実施は控え基本的

・ 具体的な質問が見受けられ，小部屋での担には資料を確認しながらのオンデマンド型で行う

当者では時間が足りない場合には，親会議こととした．但し，オンデマンド型と言うだけで室で割り付けをしている TA 等に質問対応

あると，学習者は授業時間でも授業時間外の時間を依頼する．

でも取り組まず，授業後半に固めて学習内容を進

約 100 名の受講者がある授業であり，担当者 2-3めようと考える可能性がある．このような事態を名であることから，1 人 5 分の進捗確認を行う避けるために，当該授業時間内に行った内容について記録する「作業記録」を設け，各コマの授業後半でのみ提出できることを課した．
「作業記録」の提出率が悪い場合には，出席不足として単位を認めないようにする．
また，授業時間は，TA を含め，ウェブ会議システムを用いた質問対応を行うこととした．しか場合には，1 コマ 11～12 名が限界であり，3 週から 4 週をかけて一回りさせることとする．
2020 年度後期の授業で実践しているものであり，10 月 16 日現在，進捗確認を 1 週行った段階であるが，単純な質問対応に比較して，学習者からの質問等を引き出すことができるととし，単に質問対応を行っているというだけである

もに，学習者への指導を行うことができることと，学習者が質問に来たがらないことが想定されを確認している．

るため，学習者と必ず話すことを前提とした担当

今後，授業が進行していくにつれ，前章のプ者による「進捗確認」を，ウェブ会議システムをログラミング環境による個別履歴と具体的にど用いて行うこととした．のように組み合わせ，理解が不十分な点を確認

3.1 進捗確認（ウェブ会議システム）

し効率的に指導するかが重要になっていくと考担当者毎にスケジュールを決め，学習者と 5えられるため，効果的方法をさらに検討してい分程度の個別面談を行う．
「面談」と称すると学く予定である．

習者が委縮する可能性があることから，授業に3.2 質問応答（授業時・授業時以外）
学生へは質問方法として，以下を提示している．

対する「進捗確認」と称している．ウェブ会議システムは，BigBlueButton を用いている．この・ウェブ会議システムを用いる（授業時）

ウェブ会議システムは，当該授業の質問対応に・メールで行う（授業時は対応が遅れる旨記載）も用いている．進捗確認と質問対応に使うシス・

プログラミング環境の質問機能を用いる（授業時を特に推奨）

テムと同じものとすることで，システムに慣れること，また担当者と音声のやり取りを行うことを通じ，その後の質問対応へのアクセスへの敷居を下げる意図もある．進捗確認の主な流れは以下の通りである．
・ 進捗確認スケジュールを開始 1 週間前の授・Moodle 設置のフォーラム
その他，作業記録内にも質問を記載できるようにはなっているが，基本的には上記における質問に対しては，何らかの回答を行っている（作業記録上の質問は回答するとは限らない）．現状では，幅は任意に変更可能である．実際には，授業時の授業時のウェブ会議システムと，質問メールを主

状況確認には 1 分という細かな刻みで確認するととして利用しているようであるが，それぞれ 1 週ともに，1 週間の状況把握としては，6 時間，12間に 4-5 件程度であり，全体としての質問はあま時間，1 日刻みといった大きな刻み幅で全体確認

り多くはないように思われる．なお，作業記録にすることも行っている．1 週間何も実行履歴がな

は何らかの感想や質問を書くように求めているたい学習者，授業途中で履歴が消えている学習者等

め，作業記録に質問を書く学習者も一定程度いる．

が時折見受けられる．それらの学生には，その理これらの学習者が，進捗確認を経ることで，直接由を進捗確認で確認して指導する等，きめ細かい能動的な質問を発信できるようにすることが望ま指導が可能になったと考える．

れる．
3.3 追加資料の作成と提供
前節で，質問はあまり多くはないと記載したが，進捗確認で音声でのやり取りをしながら，プログラミング履歴を確認しての指導を行うことで，対面に準じた質の個別指導が可能であると考える．

その質問内容は重複することは比較的多い．学習オンライン授業ではなり替わりや他人の課題のコ者（特に初学者）にとって理解が難しい項目があピペなどの不正行為が問題になる場合もあるが，ることを示している．学習者が何を理解しにくい本稿で実践しているようなウェブ会議システムをかを理解することは非常に重要である．そのよう用いた進捗確認を繰り返しながら，プログラミンな項目に対しては，学習者全体へのフィードバッ

グ環境上の実行ログを突き合わせ確認することで，クが必要と考えており，コラムとしての追加資料そのような危険性を低減化できる可能性があるとの作成を推進している．

考える．実行ログと進捗確認により，学生のスキこれまで利用してきた授業テキストはあくまで対面授業を前提としたものとなっている．2020

ルの状況と取り組み時間の把握を引きつづき行っていきたい．

年度の授業は，オンデマンド型を主体としている

初学者に焦点を当てた場合，可視化ログにおけことから，担当者がその場で音声を使って説明をる連続エラーに着目し，早めに対応・支援する必することはしていない．このようなオンラインで要があると考える．連続エラーを起こす学生には，の学習では，学習者の習熟度に応じた追加資料をまずは支援が必要であるかを確認した上で，適切提示していくことが望ましいと考えており，特にな足場架けを行うことが必要である．この足場架

初学者向けには，実践しながらより詳しい内容をけとして，3 章 3.3 にて追加資料の作成・提示等を確認できるコラムを作成していくこととし，例え学習者の質問に応じて進めていることを示した．

ば，論理式等に関する追加資料を用意している．

現状で，学習者の質問はメールや質問対応のウ

4 考察とまとめェブ会議システムが中心である．プログラミング
環境からの「質問」の投稿は，その詳細方法を示

2020 年度の授業は進行中であるため，すべてのしていないこともあり，2020 年 10 月 16 日現在で通した評価は行えてはいないが，これまで述べたは使われてはいない．一方で，2019 年度の授業で実践を通した考察とまとめを行う．

は，後半の応用課題にて，個別にテーマを決めプ

オンライン授業としてのプログラミング授業

ログラミングする際には，コードが付与された状では，特に学習者の状況把握が不可欠である．オ

況で質問を確認することにより，効果的な回答がンデマンド型の授業となると，授業時に拘束され安直に可能となった．このような過年度の状況をなくてよいと安直に考える学習者が多く，その認踏まえ，授業後半に取り組む予定の，より難易度識を改善させる必要がある．プログラミングは一の高い課題における効果的な質問方法として学習

朝一夕では身につくものではないため，あとでま者に周知をしていきたいと考えている．特に授業とめて行おうとした場合には，既に手遅れになっ時には，プログラミング環境からの質問を行うこていることも想定される．その意味で，学習者がとで，問題となるコードを担当者が共有でき，そプログラミングに取り組んだ履歴を可視化し，各の状態で，ウェブ会議システムにて質問する流れ

週でどの程度，取り組んでいるかを早めに把握でで指導していくことを予定している．

きることは大きい．図 2 は授業時を想定し，1 分

さらには 2020 年度のオンライン授業の工夫を刻みでの学習者毎の状況を示したが，刻みの時間踏まえ，効果的なプログラミング授業について，理解を深めていきたいと考える．

参考文献[1] 布施泉，中原敬広，岡部成玄，”プログラムの相互利用と相互評価が可能な初学者用プログ
ラミング授業支援環境の構築”，教育システム
情報学会誌 Vol35，No.2，pp.221-pp.226，2018．
[2] 布施泉，中原敬広，岡部成玄，”授業での利用を前提とした初学者用プログラミング学習環
境の開発”，大学 ICT 推進協議会年次大会，
FE22，2016．