九州地区

教育システム情報学会 2018年度学生研究発表会

ICT を活用したプログラミング学習支援システムに関する研究
Developemet of learning support system for Programing
田中龍之介*1， 湯浅雅貴*2，佐田健悟*2，尋木信一*3
Ryunosuke TANAKA*1， Takaki YUASA*2， Kengo SADA*2， Shinichi TAZUNEKI*3*1
有明工業高等専門学校生産情報システム工学専攻*1
National Institute of Technology， Ariake College， Advanced Production and Information Systems
Engineering Course*2
有明工業高等専門学校電気工学科*2
National Institute of Technology， Ariake College， Department of Electrical Engineering*3
有明工業高等専門学校創造工学科*3
National Institute of Technology， Ariake College， Department of Creative Engineering
Email: e51222@ga.ariake-nct.ac.jp
あらまし：本稿では，ICT を活用したプログラミング学習支援システムに関する研究について述べる．特に，プログラミング自主学習の支援に注目し，学習支援システム開発を行っている．学習者がプログラミングを行う際の思考過程を三段階と定義し，複数のシステムでプログラミング学習支援を行うシステムを開発した．このシステムを用いることで，プログラミング自主学習環境の改善が期待できる．
キーワード：Chatbot，ICT 教育，学習支援システム，プログラミング

2.1 プログラミングの思考過程
我々は，「プログラミング時の思考過程は三段階に分けられる」(1) と考える．そのプロセスは，「問題」「構築」「開発」である．そのプロセスを図に表したのが，図 1 である．
プログラミング開発における思考過程の第一段階は「問題」である．この「問題」とは，実現したいプログラムに対して，そのプログラムがどのような構成要素で構成されているか認識を行う思考過程である．この思考過程において，必要とされる能力は「問題の細分化」である．
思考過程の第二段階は「構築」である．この「構築」とは，前段階である「問題」において細分化した問題をプログラミング的順序へと並び替える思考過程である．この思考過程において，必要とされる能力は「プログラミング的思考」である．
思考過程の第三段階は，「開発」である．この「開発」とは，前段階である「構築」で並び替えた順序の構成要素をプログラミング言語に変換する思考過程である．この思考過程において，必要とされる能力は「コーディング能力」である．
この 3 つの思考過程を通して，プログラミングは行われると考える．よって，各思考過程において必要な能力を育てることによりプログラミング能力は向上すると考える．
2.2 具体的な支援
先程の項でも述べたように，プログラミングには多くの能力が必要になる．よって，それを支援するためのシステムも多くの機能を持つ必要がある．だが，1 つのアプローチからでは，細部に渡るサポートを実現できない．よって，本研究では，定義した思考過程を図 2 のように分割して異図 1．プログラミングの思考過程

図 2.思考過程分割

1. はじめに
近年，プログラミング教育の必修化などによりプログラミング学習への関心が高まっている．プ
ログラミング学習者が増加する一方で，学習をサポートする側の体制はまだまだ不十分であると考える．また，自主学習の難しさや教育者の人材不足，学習環境の限定化などの問題点も挙げられる．実際，教育の現場では 1 人の教師に対して，40 人の学生を対象に授業を行っており，学生一人ひとりの進度に合わせて授業を行うことや個人の質問を受け付けることは不可能である．そのため，プログラミング学習には自主学習が必須であると考える．
本研究では，個人での学習をサポートする自主学習支援システムを開発・運用を目的とする．これによって，プログラミングの自主学習環境が改善され，プログラミング学習の助けになると考える．
2.

プログラミング学習支援

227

九州地区

教育システム情報学会 2018年度学生研究発表会

なるアプローチのシステムを複数作成することにより，総合的にプログラミングの自主学習をサポートするシステムを構築することを提案する．
本研究で開発したシステムは，思考過程前半部分をサポートする「Rainbow Blocks」と，思考過程後半部分をサポートする「Sample Code ReplyBot」である(図 2 参照)．

3.

開発

図 4．Bot 使用イメージ図
3.2 Sample Code Reply Bot
今回作成した「Sample Code Reply Bot」は「LINEBOT」(2)を用いた Bot である(図 4 参照)．このシステ
ムの用途は，送られたメッセージが質問の場合は，サンプルコードを自動返信し，必要であれば対話式でサンプルよりコードを作成する．これが対話式サンプル生成モードである．送られたメッセージが質問ではなく，会話の場合は頻出しているエラーや初心者が陥りやすいミスを対話形式で送信する．その他にもエラーコードの収集やサンプルコードの登録，データ収集機能などがある．今回は，先行研究として「HEROKU」(3)を利用した「LINE BOT」(2)の運用と 2 つの機能を実装している．
１つ目の機能は，サンプルコードを対話式で作成する機能である．質問者のメッセージに対して Botに接続している Database 内の Sampledata よりメッセージ内に一致するデータが存在すれば，サンプルデータを送信する．その際，必要なデータを質問形式で収集し，必要なデータが集まれば完成したコードとして送信する．
２つ目の機能は，メッセージ送信者と Bot のメッセージを Log として蓄積する機能である．会話をデータとして収集することができる．

3.1 Rainbow Blocks
今回作成した「Rainbow Blocks」は，思考過程前半部分を支援する Editor である．この Editor の特徴
は，入力部分がブロックで構成されており，日本語とコードを入力する枠がそれぞれある点である．
日本語をコードとは別に書き込むことにより「問題」で認識している構成要素の確認が容易である．
また，ブロック構造にすることにより思考過程「問題」で認識した構成要素を別々のものとして考えることができ，ブロックを並び替えることで「プログラミング的思考」を視覚的にサポートすることができる．
使用例を図 3 に示す．初期状態で出ているボタンには 4 つのボタンがついており，それぞれ異なった機能を持っている．
「＋」は初期ブロックの右側にブロックを生成し，「p」はコーディングボックスを出力，「s」は今の状態をセーブ，「o」で出力を行うことができる．
「＋」で生成したブロックは子ブロックで，子ブロックは初期ブロックと異なり「✕」「p」
矢印ブロックと上下に「＋」ボタンがある．
「✕」ボタンは消去，矢印ボタンは小ブロックの生成，「p」ボタンはコーディングボックス出力，「＋」ボタンは兄弟ブロックの生成を行うことができる．また，ボックスの枠をダブルクリックすることでブロックを選択し，矢印キーを上下押すことでブロックの順番を移動することができる．
ブロックは，日本語を書くことのできる見出し部
分とコーディングボックス，2 つの入力欄があり日本語で構成要素を書き込むことができる．
また，教師側が作成したデータを学生に渡すことで例題としての活用や授業プリントとして活用することができる．

4.

おわりに

本研究では，プログラミングの思考過程を分割し，それぞれ別のアプローチでトータル的にプログラミングの自主学習支援のサポートシステムの開発を行った．
「Rainbow Blocks」では，プログラムを構成する構成要素をブロックとみなし，「問題の細分化」と「プログラミング的思考」を育てるシステムを構成した．また，「Sample Code Reply Bot」では思考過程「開発」における「コーディング能力」をサポートするシステムの開発を行った．
「Sample Code ReplyBot」は未完成だが，コーディング時のリファレンスとしては，従来の web 検索よりも速い速度での応答を示している．
今後会話機能などの追加などにより，ユーザに寄り添った支援ができると考える．
参考文献(1) 田中龍之介，”ICT を活用したプログラミング学習支援に関する研究”，2018，卒業論文(2) “Line Developer”，https://developers.line.biz/ja/(3) “Heroku”，https://jp.heroku.com/

図 3．Rainbow Blocks 使用例

228