JSiSE Research Report
vol.37,no.5(2023-1)

パズル型プログラミング問題を用いた学習者の思考過程に基づく学習支援システムの開発
渡邉雄之介 1, 山口琢 1，大場みち子 2
1 公立はこだて未来大学大学院 システム情報科学研究科
2 公立はこだて未来大学 システム情報科学部

Development of Learning Support System Powered byProgramming Puzzles Based on Learners' Thinking Process
Yunosuke Watanabe 1, Taku Yamaguchi1，Michiko Oba2
1 Graduate School of System Information Sciences, Future University Hakodate
2 Faculty of Systems Information Science, Future University Hakodate

従来の教育では，授業中における課題やテストの解答結果など成果物に基づき指導や学習支援をすることが主流であった．しかし，完成された成果物からはどのように考えているか、どこで迷いや躓きがあったのかなど把握することは困難である．教育分野において，学習者がどのように問題を考えて解答に至るのかという思考過程について，詳細な分析が必要であるとされている．学習者の思考過程を明らかにすることができれば，学習者の理解度や特定の学習項目における理解の有無をより詳細に把握でき，より効果的な学習支援ができると考えられる．そのため，学習者の思考過程に基づき学習支援を可能にすることを研究目的としている．本稿では，パズル型プログラミング問題を利用して，パズルを並べ替える操作から学習者の思考過程を把握するために実施した実験と実験結果をもとに開発した学習支援システムについて述べる．
キーワード: 思考過程，パズル，プログラミング，学習支援システム

1. はじめにのように考えているか、どこで迷いや躓きがあったの

従来の教育では，授業中における課題やテストの解答結果などの成果物に基づき指導や学習支援をすることが主流であった[1]．しかし，これでは学習者が成果物に至るまでの過程における試行錯誤や迷いなどの思考過程について把握が困難である．学習者が問題を解答する際には，様々な思考過程を経て、解答に至る．
プログラミングを例に挙げると，どのように考えてソースコードを完成させたのか、どこで迷いや躓きがあったのかなど人によって解答に至るまでの過程は様々ある．しかし，完成されたソースコードの分析ではどかなど把握することは困難である．そのため，教育分野において学習者がどのように問題を考えて解答に至るのかという思考過程について，詳細な分析が必要であるとされている[2]．学習者の思考過程を明らかにすることができれば，学習者の理解度や特定の学習項目における理解の有無をより詳細に把握でき，より効果的な学習支援ができると考えられる．
以上より，本研究では学習者の思考過程に基づき学習支援を可能にすることを目的に，学習者の思考過程を明らかにし，思考過程に基づき学習支援をすること－56－

が可能なシステムの開発を目指す．

中村らの先行研究がある[6]．この研究では，学習者にインタビューし，パズル問題における学習者の操作理

2. 関連研究

由を収集した．学習者の操作理由とパズルの操作過程

本章では，学習者の思考過程に関する関連研究につのデータから，プログラミング思考過程を分析されていて述べる．次に，関連研究の課題を解決した先行研いる．分析結果で明らかになった，並べ替え操作の理究について述べ，その先行研究の課題について述べる．

由やプログラミング思考過程の傾向をもとに，指導者に対して学習者の操作過程や思考過程の解釈，知識不足の可能性がある操作を可視化する教育支援システム

2.1 学習者の思考過程に関する研究
学習者の思考過程の分析を試みる研究が報告されてを開発した．指導者に対し，学習者の操作過程などを可視化する教育支援システムを開発することで，指導いる．
Maharjan ら[3]は，ソースコードをパズル化し，並や学習支援に繋げている．しかし，学習者に対し思考べ替える操作過程を記録することが可能な Parsons

過程に基づいた直接的な学習支援はされていない．

Puzzle[4]を利用し，プログラミング思考過程の傾向を分析している．分析では，パズル化されたソースコー

3. 課題と解決アプローチ

ドを並べ替え，プログラムを完成させる過程 (思考過先行研究(2.2 節)を踏まえ，課題は，学習者に対して程)のデータを時系列に可視化し，正解者と不正解者に思考過程に基づいた学習支援がされていないことであわけ，それぞれ編集距離を用いてクラスター分析をしる．この課題に対し，本研究では学習者に対し思考過ている．編集距離とは，正解に到達するために必要な程に基づく学習支援をすることを提案する．

操作の数のことである．結果として，正解者のクラス

文部科学省[7]によると，自らの学習活動を振り返りター3 つと不正解者のクラスター4 つの合計 7 つのプ

学びに課すことが重要とされている．そのため，学習ログラミング思考過程の傾向を示している．

者が問題に解答する過程である思考過程を自身で振り

山口ら[5]は，文章をパズル化し，文を並べ替えてジ返ることが可能にする．

グソー・パズルを行う読解・作文アプリケーション「ジ和栗[8]によると，他者の思考過程などについて強くグソー・テキスト」を開発した．この研究では，ジグ考察する過程を経て，意味や概念を創出する・物事をソー・テキストを用いて，学習者が文を並べ替える操

別な角度から見るための支援が必要であるとされてい作を記録する．記録したデータから，学習者が文を読る．そのため，他者の思考過程から自身の思考過程に解し作文する際の考え方を可視化できることを示してついて考察する機会を与える．

いる．

以上のことを実現するために，以下を解決アプロー

このように，パズル化したソースコードや文章の中チとして取り組む．に，行(以下，ピース)をスクランブル化し，正しい順序⚫にピースを並べ替える操作から，学習者の思考過程を学習者の思考過程や特徴を可視化し，学習者による振り返りを可能にする捉えることを試みている研究がある．

⚫

しかし，これらの研究では，学習者の思考過程の傾学習者同士の思考過程の差異を明らかにし，自身と他者の思考過程を比較することによる振向は捉えているが，具体的な指導や学習支援に繋がっり返りを可能にするているとは言えないという課題がある．

これらの思考過程に基づいた振り返りをすることで，プログラミングの基礎力が向上することを期待する．

2.2 先行研究2.1 節の課題を解決する研究として，プログラミン
グ型パズル問題を用いて教育支援システムを開発した－57－

4. 利用するパズル型問題のツールに，実験を実施した．

本研究は，プログラミング思考過程を対象に，先行研究 [6][9]で開発・利用されたパズル型プログラミン
グ問題を出題するツールであるジグソーコード 2 を利用し，パズルを並べ替える操作から思考過程の測定をする．ジグソー・コード 2 は，プログラム・コードが題材のジグソー・パズルとして実装されている Web アプリである．このツールは，図 1 に示すように，上部に操作説明と問題文がある．オレンジ枠の左エリアは選択肢群であり，プログラムを行ごとにパズルのピー

実験対象は，公立はこだて未来大学 2 年生対象科目「情報処理演習 I」を履修し，実験の同意が得られた学生 19 名である．
「情報処理演習 I」は，主に Java を題材とした課題を通して，実用的なソフトウェア開発プロセスにおける基本技能を身につけることを目的とした，プログラミング演習科目である[10]．
実験では，ジグソー・コード 2 を利用して作問したパズル型プログラミング問題 (Java) 12 問を出題した．
5.2 DTWスとしたものをシャッフルされて解答者に提示される．

学習者の思考過程の差異を明らかにするために， 各右エリアは解答エリアであり，左のエリアから解答者

問題における学習者の思考過程である時系列データを，がピースを選択し，右下のコンソールの出力結果に適

k-means 法の DTW を利用して分類する．

切になるよう，ドラッグ&ドロップで移動して並べ替
え右側のエリアのソースコードを完成させる．

時系列データ同士の距離・類似度を測る際に用いられジグソー・コード 2 は，解答者が操作するとき，以下の情報を操作ログとして記録する．
⚫

DTW(Dynamic Time Warping)/動的時間伸縮法は，る手法である．他にも，時系列データ同士の距離を測る 手 法 と し て ， ユ ー ク リ ッ ド 距 離 (Euclidean

操作の種類 （開始，ドラッグ，削除，追加，ドDistance)やマンハッタン距離(Manhattan distance)

ロップ，完成)がある．DTW は 2 つの時系列の各点の距離(誤差の絶⚫

時刻対値)を総当たりで求め，2 つの時系列が最短となるパ⚫

操作対象のピース番号 （piece id）

スを探索する．そのため，時系列データ同士の長さや⚫

操作対象の上に位置しているピースの番号

周期が違っても類似度を求めることができるという特⚫

操作対象の下に位置しているピースの番号

徴がある．

⚫

右側エリア内のピースの番号

本研究のデータは，学習者によって思考過程の長さ

本研究では，学習者がパズルを並べ替える操作過程が異なるため，時系列データ同士の長さが異なる．そを思考過程とする．のため，学習者の思考過程を分類する手法として，
DTW を採用する．クラスター数の決定は，最適クラスター数を求める際に用いられるシルエット分析により決定する．

6. 実験結果と考察
6.1 DTW を利用したクラスター分析
DTW を利用したクラスター分析の結果を，表 1 に
図1

ジグソー・コード 2 の画面例示す．縦軸の U1〜U19 は学習者を示している．横軸は問題番号，セルの中の数値はクラスター番号を示し

5. 実験ている．各学習者が正解した問題には青色，不正解の5.1 実験目的と対象問題には赤色で示している．

学習者の思考過程の差異を明らかにすることを目的－58－

表 1 クラスター分析の結果

後に s4 の[ char rating; ]という宣言文に触れている傾向が見られた．このことから，Cluster1 に属する被験者は，宣言文の配置で迷いや忘れが生じている可能性が考えられる．
以上のことから，DTW を利用したクラスター分析により，様々な学習者の思考過程の群を把握することができた．

DTW を利用したクラスター分析が，どのように分類されているか調査するため，クラスター分析の可視化結果をもとに各クラスターについて分析した．
プログミング問題[code 1-2]では，主に 3 つのクラスター（Cluster3, Cluster2, Cluster1）の傾向が得られた．図 2 は，プログミング問題[code1-2]の正解となる
並び順にソースコードの各行に振られているピース番号(piece id)である．この問題では，piece id「s3」から「s17」までのピースを並べ替える問題で，宣言文や if文などの構文が含まれている．プログミング問題[1-2成績判定 1]で得られた，3 つのクラスターについて，

図2

プログラミング問題[code 1-2]の piece id可視化結果をもとに，以下で説明する．
可視化では，図 3 ~ 図 5 のように，縦軸を piece id，横軸を操作回数[回目]として可視化した．凡例の U1,
U2, U3 などは，各学習者を示している．
図 3 は，Cluster3 の可視化結果である．Cluster3 では，主に piece id を s3,s4,s5... などと段階的に組み立てる傾向が見られた．このことから，Cluster3 に属する被験者は，ソースコードを上から順に段階的に整えていく思考であると考えられる．

図3

Cluster3

図4

Cluster2

図 4 は，Cluster2 の可視化結果である．Cluster2 では，s3[関数]の次に s17,s15 の[閉じ括弧( } )]に着目をし，s7,s9,s11 などの[ else if ]から組み立てる傾向が見られた．このことから，Cluster2 に属する被験者は，関数や条件文などの構造から組み立てから，中のソースコードを整えていく思考であると考えられる．
図 5 は，Cluster1 の可視化結果である．Cluster1 では，主に Cluster3 と同様の piece id を s3,s4,s5… などと段階的に組み立てる傾向が見られた．しかし，最－59－7.1 概要
本システムは，プログラミング学習者に対して，思考過程に基づいた振り返りを支援し，プログミング基礎力が向上することを目的とする．
Web アプリケーションとして開発した本システムの概要を図 6 に示す．本システムは，ジグソー・コー
ド 2 を利用し，パズル型プログラミング問題を学習者
図5に出題する．学習者が解答する操作過程をログとしてCluster1記録し，思考過程の可視化結果・迷いに関するコメン
6.2 正答率による思考過程の差異

ト・振り返りをする回答フォーム・問題の解説を提示

学習者の思考過程の差異を把握するために，6.1 節する．の各問題における各クラスターの正答率(%)をまとめたのが表 2 である．表 2 では，縦軸はクラスター番号，横軸は問題番号を示している．
表 2 各クラスターの正答率

図 6 システム概要図7.2 システム機能
表 2 の結果をもとに，正答率による思考過程の差異

本システムの画面の構成を以下に示す．

を分析した．結果として，正答率が高い思考過程では，関数の構造や if 文などの構文，計算式を意識した過程が見られた．正答率が低い過程では，どのように組み立てれば良いか全く理解できていない過程や一部の知識が不足しているため，不正解となっている過程が見られた．そのため，開発するシステムでは，解答のみ

サインアップ / ログイン・ログアウト画面⚫

問題選択画面

⚫

解答画面

⚫

解答後画面

学習者が解答した後，思考過程について振り返りをする解答後画面を図 7 に示す．

を提示するのではなく，正答率の高い他者の過程を提示することで，思考過程の改善によるプログラミング⚫

学習者の振り返りを支援するための機能を以下に示す．

基礎力の向上を目指す．
また，問題によって正答率が高い過程や低い過程が①

学習者の思考過程や特徴を可視化する機能②

正答率の違いによる思考過程の差異を提示す異なることが見られた．これは，出題した問題によっる機能て考えやすい解き方・注視すべきポイントがあること③が考えられる．そのため，今回の分析より得られた参る機能．

考になり得るポイントを他者の過程と共に提示する．

解答後画面の分析結果に，①の機能として，学習者の思考過程を可視化した結果の時系列グラフ，正解・7. 学習支援システム

不正解であったか，迷いが生じた箇所が表示される．

本章では，6 章の実験結果をもとに，開発した学習支援システム(以降，本システム)について述べる．

自身と他者の思考過程を比較し振り返りをす②の機能として，図 8 のように 6 章の実験結果より得られた，正答率が高いクラスターが順に表示される．

－60－

各クラスターの思考過程の特徴や注視すべきポイントなども共に表示される．③の機能として，「自身の過程の振り返りを行なってください」というリンクをクリックすると，自身と他者の思考過程を比較し振り返りをするための以下の項目が回答フォームに表示される．
⚫

迷いやつまずきに関する項目⚫

自身の思考過程がどのようであったかを振り返りをする項目⚫

他者の過程から自身の過程を振り返り，得られた知見について考察する項目

学習者は，①の機能より可視化された自身の過程と②の機能より提示された他者の思考過程を③の機能として作られた回答フォームで振り返り，自身と他者の過程を比較し考察する．
本システムでは，学習者自身の過程や正答率が高い
他者の過程より得られる考えやすい解き方，正答率が低い被験者がどのように間違えているのか，不正解が起こりやすいポイントや注視すべきポイントを共に提示する．以上の機能より，学習者が思考過程に基づいた振り返りをすることで，プログラミングの基礎力が図8

正答率順の他者の過程と特徴向上することを期待する．
7.3 評価実験学習者向けに開発した本システムの有効性を検証することを目的に，学習者への学習効果を検討する．対象は，本学の「情報処理演習 I(Java)」を受講した学生10 名以上とする．
実施する評価実験の手順を以下に示す．
[1] 被験者は，実験内容に関する説明文を読み，実験の進み方を把握する．
[2] 被験者は，ジグソー・コード 2 で作成された事
前テストの結果より，被験者を本システムを利用する場合とジグソー・コード 2 を利用する場合で分ける．
[3] 被験者は，別々のシステムを用いて同様の問題でトレーニングする．
[4] 被験者は，事前テストと異なるジグソー・コー
ド 2 で作成された事後テスト 10 問に解答する．
[5] 被験者は，システムに対するアンケートに回答する．

図 7 解答後画面例－61－評価実験では，定量的評価と定性的評価をする．
定量的評価では，事前テストと事後テストの点数や今後は，開発したシステムの有効性を検証するため，評価実験を実施する．

解答時間などから，別々のシステムを利用した被験者を比較する．定性的な評価では，システムの使い謝辞やすさや学習効果が期待できるかをアンケートより調査する．

本研究は JSPS 科研 20H01728 の助成を受けたものである．

8. おわりに
参 考 文 献
本研究は，学習者の思考過程に基づき学習支援を可能にすることを目的とした．目的を達成するための目(1) 株式会社浜銀総合研究所：“学習指導と学習評価に対する標を 2 つ挙げた．1 つ目は，学習者の思考過程を明ら識調

査報

告書(2018)”，https://www.mext.go.jp/b_menu/shingi/chukyo/chuky

かにすることである．2 つ目の目標は，思考過程に基o3/080/siryo/__icsFiles/afieldfile/2018/09/05/1406428_

づき学習支援を可能にするシステムを開発することである．

意9.pdf（2022 年 12 月 13 日確認)(2) Newell, A., Simon, H. A. et al.: “Human problemsolving”, Vol. 104, No. 9, Prentice-hall Englewood

本研究では，プログラミングをする際の思考過程をCliffs, NJ (1972)

対象に，パズル型プログラミング問題を出題する先行研究で開発されたツール「ジグソー・コード 2」を利

(3) Maharjan, S. and Kumar, A.: “Using Edit Distance
Trails to Analyze Path Solutions of Parsons Puzzles”,用した．ジグソー・コード 2 を利用して，パズルの操Proceedings of the 13th International Conference on

作過程を記録し，学習者の思考過程を分析した．

Educational Data Mining, EDM 2020, Fully virtual

分析では，DTW を利用して正答率による思考過程

conference,July 10-13, 2020 (Rafferty, A. N.,の差異を分析した．結果として，正答率が高い思考過Whitehill, J., Romero, C. and Cavalli-Sforza, V., eds.),

程では，関数の構造や if 文などの構文，計算式を意識International Educational Data Mining Society (2020)

した過程が見られた．正答率が低い過程では，どのよ(4) Parsons, D. and Haden, P.: “Parson’s Programming

うに組み立てれば良いか全く理解できていない過程やPuzzles”, A Fun and Effective Learning Tool for First
Programming

一部の知識が不足しているため，不正解となっている

Proceedingsofthe 8thAustralasian Conference on Computing Education -過程が見られた．また，問題によって正答率が高い過Volume 52, ACE ’06, Australian Computer Society,程や低い過程が異なることが見られた．これは，出題した問題によって考えやすい解き方・注視すべきポイCourses,Inc., pp. 157–163 (2006)(5) 山口琢，大場みち子，高橋慈子，小林龍生：“ジグソー・ントがあることが考えられる．

テキストによる文並べ替え操作の測定”，研究報告教育

実験結果をもとに，プログラミング学習者に対して，学習支援情報システム(CLE), No. 27, pp. 1–6（2017）

思考過程に基づいた振り返りを支援するシステムを開(6) 中村陽太：“プログラミングパズルに基づくプログラミング発した．開発したシステムでは， 学習者自身の過程を思考過程の分析と傾向に基づく教育支援システムの開発可視化する．また，正答率が高い他者の過程から得ら(2022) ” https://library.fun.ac.jp/?page_id=3448（2022れる考えやすい解き方や正答率が低い被験者がどのよ

年 12 月 13 日確認）

うに間違えているのか，不正解が起こりやすいポイン(7) 和栗百恵：“「振り返り」と学習ー大学教育における振り返り支援のためにー”，国立教育政策研究所紀要，pp. 85–

トや注視すべきポイントを共に提示する．以上の機能

100（2010）

により，学習者が思考過程に基づいた振り返りをする
ことで，プログラミングの基礎力が向上することを期(8) 文部科学省： “ 新しい学習指導要領等が目指す姿 (2015) ”
https://www.mext.go.jp/b_menu/shingi/chukyo/chukyo3/si

待する．

－62－

ryo/attach/1364316.htm（2022 年 12 月 13 日確認）
(9) 山口琢，伊藤恵，大場みち子：“プログラミング・パズルの測定と分析”，研究報告ドキュメントコミュニケーシ
ョ(DC)， Vol. 2018-DC-111, No. 2, pp. 1–6 （2018）(10) 公立はこだて未来大学：“2021年度講義要項（2020年度以降入学者対象）” https://www.fun.ac.jp/wpcontent/uploads/2021/07/2021_syllabus.pdf（2022年12月13日確認）－63－