• 検索結果がありません。

PLIVET: 多言語対応プログラム実行状態の可視化ツール

N/A
N/A
Protected

Academic year: 2021

シェア "PLIVET: 多言語対応プログラム実行状態の可視化ツール"

Copied!
9
0
0

読み込み中.... (全文を見る)

全文

(1)Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. PLIVET: 多言語対応プログラム実行状態の可視化ツール 礎 良輔1,a). 坂本 一憲1,b). 鷲崎 弘宜1,c). 深澤 良彰1,d). 概要:初学者が最初に学ぶ言語は C 言語など昔ながらのものに加え,技術の普及に伴い Java や Python な ど多様化している.また,アルゴリズムとデータ構造の授業のように,プログラムの実行時の状態の理解が 重要な学習において,これまで多くの教育者や研究者が初学者の理解を助ける手法やツールを提案してき た.一方で,プログラミング言語の学習が本質ではない学習で,学んだことがある言語が使われているかど うかで負担の差が生まれるといった問題が生じている.そこで我々はこれらの問題を解決するために多言 語に対応したオフライン環境でもブラウザ上で動作する初学者向けの実行状態可視化ツール Programming Language Interpreter for Visualization of Execution Trace (PLIVET)を開発した.ケーススタディと して,言語の違いによってプログラミング問題を解く時間にどの程度の差が生じるのかを測定する実験を 行った.実験の結果,未学習の言語を用いた場合,学習済みの言語を用いた場合と比べて 1.46 倍の時間が 必要とされた.また PLIVET を用いることによって生徒の学習の負担が解決される可能性が示された.. 1. はじめに 初学者がプログラミングを学習する場面において,これ. は Java が 48.2%,C++が 28.8%,Python が 12.9%,C 言 語は 7.3%である.さらに 2018 年に L. Abazi-Bexheti らが 実施した Youtube に投稿されているプログラミング言語. まで多くの研究者や教育者たちが理解を助ける手法,ツー. の入門学習動画の総再生回数の調査 [10] によると,Java,. ルを提案してきた.初学者が最初に学習する言語の一つに. C++,Python 関連の動画が上位を占めており,Java 関. は,昔ながらのものとして C 言語が挙げられる.C 言語. 連の動画は約 9600 万回,C++関係の動画は 5200 万回,. にはポインタによる参照や,動的メモリ確保に伴うメモ. Python 関係の動画は 5400 万回の総再生回数を記録してお. リ管理など,初学者にとっては難しいとされる概念があ. り,Python は近年さらに普及していることがわかる.. る [1], [2], [3].これらの学習を助ける手法・ツールは,多. しかし,多様化した学習現場においては新たな問題が生. くの研究者たちが取り組んできた [4], [5], [6], [7].特にプ. じる.例えば,プログラミングを必要とするものの使用す. ログラムの可視化はプログラミングやアルゴリズムの学習. るプログラミング言語自体の学習が本質ではない授業(例:. に効果的な手法であり,これまで数多くのツールが開発・. アルゴリズムやデータ構造)を実施する際,生徒間で学習. 提案されてきた.Juha Sorva らが 2013 年に実施したプロ. 済みの言語が共通しているとは限らない.学習済みの言語. グラムの可視化研究に関する調査 [8] では過去 30 年間に研. が異なる生徒が混在する状況では,授業で用いられている. 究,発表された数十のツールが詳細に紹介されており参照. 言語を学習済みの学生と比べて,未学習の学生はその言語. されたい.. 自体の文法や機能の学習が必要になる.また教育者も授業. 一方で,近年は初学者が最初に学ぶ言語は C 言語のよう な昔ながらのものに加え,C++,Java や Python など多. を設計する際には学習済みの言語が異なる学生たちが受講 することを想定して対応しなければならない.. 様化しつつある.これは機械学習など様々な新しい技術の. 本研究では,言語の多様化に起因する学習者および教育. 普及に伴ったものである.2011 年に S. Davies らが 371 の. 者の負担を解消するための手法,およびそれを実装した. 教育機関に対して行った国際的な調査 [9] によると,CS1. ツールを提案する.. レベルの授業で教えられているプログラミング言語の割合. 本研究では,次の以下の 2 つの研究課題(RQ)について 調査することを目的としている.. 1. a) b) c) d). 早稲田大学 Waseda University [email protected] [email protected] [email protected] [email protected]. ⓒ 2019 Information Processing Society of Japan. RQ1:アルゴリズムの学習時において,学習者は用いるプロ グラミング言語によって学習効率などに違いが生じるか.. RQ2:学習効率などに違いが生じ,それが学習者への負担 という形で現れる場合,提案手法を用いることで解消でき. 1.

(2) Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. A X CLASS FILES, VOL. 14, NO. 8, AUGUST 2015 JOURNAL AT EEX CLASS FILES, VOL. 14, NO. 8, AUGUST 2015 JOURNALOF OFLLT. 10. 表 1 Java と Python の基本文法比較*1. Listing 3. Source code of T3 1 #include<stdio.h> 図 2 Python によるクイックソートの実装. int H(int n,char a,char b,char c) {#include<stdio.h> るか. int if(n>=2){ H(int n,char a,char b,char c) 42 { 53 H(n-1,a,c,b); また,本研究ではプログラミング初学者が最初に学ぶ言 64 }if(n>=2){ 語として近年特に普及している Python を比較の H(n-1,a,c,b); 75 // Reached here forJava the と first time } 86 // in the 8th step. 対象とする. // Reached here for the first time 97 if(n>=2){ // in the 8th step. 108 H(n-1,b,a,c); // 11th step 2. 言語の違い 119 }if(n>=2){ 10 H(n-1,b,a,c); // 11th step 12 return n; まず, Java と Python の基本的な文法の比較を表 1 に 13 } 11 } 14 12 return n; 間の特に特徴的な違いとして次の 示す. Java と Python 15 int main() 13 } 21614 つが挙げられる。 Java はブロックを{}で表す一方で, { 17 H(4,’A’,’B’,’C’); 15 int はインデントの深さでブロックを表す。静的型付 main() Python 18 return 0; 16 { けの は変数の宣言時に型の指定が必要な一方で,動 19 } JavaH(4,’A’,’B’,’C’); 17 18 return 的型付けの Python 1 が示 Listing 4. Source code 0; ofは型の指定がない。その他,表 T4 19 } 2. 31. #. average average. 型の指定なし なし なし. なし. // ** 21 f(23 27 29 def 引数25 ): ... 19 21 23 25 27 lambda 引数: .... if 条件 1: ... elif 条件 2: ... else: ... 値 1 if 条件 else 値 2 なし. T2 while (条件 ) .... while 条件: .... 70 60 初期化付きループ 60 50 範囲に基づくループ. for(初期化; 条件;. T2. do ... while(条件); ステップ毎の処理) .... for(型 v: 値の集合) .... 29. 改行. ループ 70 1 回以上のループ. なし. average. なし. average. for v in 値の集合: .... 50 例外送出 40 例外処理 30 40. throw. raise. try ... catch (例外) .... try: ... except 例外: .... インスタンス生成 20 30 コンストラクタ 10 20 インスタンスの破棄. new Cls(). ファイナライザ 0 10 自身の参照 1 3 5 7 0 インターフェース. finalize(). オブジェクト指向. 1 継承. 3. 5. Cls(). Cls(). init. なし. delete del. this 9 11 13 15 17 19 21self23 25 27 29 31 interface / implements なし Step 7class9Cls11 13 15 17 19 21 23 25 27 29 31 class Cls(親 Cls): extends 親 Cls Step. Figure 14. Duration of each step パッケージ in T2 宣言. package パッケージ名;. Figure 14. Duration of each step in T2 インポート. import パッケージ名.*. ファイル名に基づく. from パッケージ名 import *. 文字列 型 40 リテラル. String. 複数行 35 40 変数展開 30. なし. T3. ”...”, ’...’. T3. なし. 25. 否定 15 積、和 20 10. 15. average ’ ’ ’...’ ’ ’, ”””...”””. ”... %f” % v. 35. 25 型 30 リテラル 20. str. ”...”. average. 論理演算. boolean. bool. true, false. True, False, None. !. not. &&, ——. and, or. コレクション. 型毎の配列 5. 型 [], List. なし. 10 型混在の配列 0 複数要素 51 3 5 集合. なし. list. なし 7 9 11 13 15 17 19 21 23 25 27tuple 29 31 33 35 37 39 set. Set すように細かい点でも多く異なる. Step Table 5 shows the average number of times that the 0 Listing 4. Source code of T4 Map 連想配列 3 execution button was clicked in each task. 1 3 5 7 9 11 13 15 17 19 21 23 また図 controller 1 と図 2 はそれぞれクイックソートを Java* と その他 Figures show time that the participants Step Table*4 で実装したものである. 513–16 shows thethe average number of times stayed that the Python nullstep in T3 Figure無効 15. Duration of each at the n-th step of the program for each task. The horizontal execution controller button was clicked in each task. enum 名前 *2 vshows は変数名, fn-th は関数名, Clstime はクラス名 axis the stepthe of the program. The vertical stayed axis 列挙型 Figures 13–16 show that the participants { 要素 1; 要素 2;...; } *3 https://www.geeksforgeeks.org/java-program-for-quicksort/ 15. Duration of each step in T3 at the n-th step of the program for each task. The horizontal Figure equals 値の比較 *4 https://www.geeksforgeeks.org/python-program-foraxisquicksort/ shows the n-th step of the program. The vertical axis ==, != インスタンスの比較. ⓒ 2019 Information Processing Society of Japan. インデント. switch. Duration [s] Duration [s]. def partition(arr,low,high): 21 i =partition(arr,low,high): ( low-1 ) def 32 pivot arr[high] i = ( =low-1 ) 43 for j in range(low , high): pivot = arr[high] 5 if jarr[j] <= pivot: 4 for in range(low , high): 6 = i+1 <= pivot: 5 ifi arr[j] 7 arr[i],arr[j] = arr[j],arr[i] 6 i = i+1 8 arr[i+1],arr[high] = arr[high],arr[i+1] 7 arr[i],arr[j] = arr[j],arr[i] 9 return ( i+1 ) 8 arr[i+1],arr[high] = arr[high],arr[i+1] 10 9 return ( i+1 ) 11 def quickSort(arr,low,high): 10 12 if low < high: 11 def quickSort(arr,low,high): 13 pi = partition(arr,low,high) 12 ifquickSort(arr, low < high: low, pi-1) 14 13 pi = partition(arr,low,high) 15 quickSort(arr, pi+1, high) 14 quickSort(arr, low, pi-1) Listing 3. Source code of T3 15 quickSort(arr, pi+1, high) 1. 条件?値 1 : 値 2. Python. 複数条件分岐. Duration [s] Duration [s]. 図 1 Java によるクイックソートの実装 Listing 2. Source code of T2. Duration [s] Duration [s]. int int partition(int partition(int arr[],int arr[],intlow,int low,inthigh){ high){ int Java int ii == (low-1); (low-1); int 構文 T1 int pivot pivot == arr[high]; arr[high]; T1 45 for ブロック { ... } 45 for (int (int j=low; j=low; j<high; j<high;j++) j++){ { if (arr[j] <= pivot) { 40 // コメント化 if (arr[j] <= pivot) { 40 i++; i++; 35 型 int temp = arr[i]; 35 int temp = arr[i]; 変数宣言 型の指定必須 30 arr[i] = arr[j]; 30 arr[i] == temp; arr[j]; 可能な場合のみ 暗黙的型変換 arr[j] 25 final 定数 25 } arr[j] = temp; 20 } } 演算子 20 } 15 int temp = arr[i+1]; インクリメント ++v 15 int temp == arr[high]; arr[i+1]; arr[i+1] 10 なし (暗黙) 切り捨て除算 arr[i+1] == arr[high]; 10 arr[high] temp; なし べき乗 5 14 arr[high] = temp; 15 return i+1; 5 関数 15 return i+1; 0 16 } 3 5 7 型 9 f(引数 11 ){ 13 ...15} 17 19 16 } 定義 01 17 void quickSort(int arr[],int low,int high){ 1 3 5 7 9 11 13 15 17 17 void quickSort(int 18 if (low < high) { arr[],int low,int high){ (引数) =>{ ...Step ラムダ式 } Step 18 ifint (low { 19 pi <= high) partition(arr, low, high); 命令処理 19 int pi = partition(arr, 20 quickSort(arr, low, pi-1);low, high); 文末 ; 20 quickSort(arr, pi+1, low, high); pi-1); 21 quickSort(arr, Figure 13. Duration of each in ... T1 if (step 条件 1) 21 22 } quickSort(arr, pi+1, high); Figure 13. Duration of else each step2)in...T1 if(条件 23 } } 22 条件分岐 else ... 23 }2. Source code of T2 Listing 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14. dictionary 25 27 29 31 33 35 37 39 None Enum(名前, 要素 1, 要素 2...;). ==, != is, is not. 2. 10.

(3) Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. これらを比較すると Python の方が記述量が少なくて済 んでいることがわかる.これは変数宣言時に型の記述が必 要ないこと,複数の変数をまとめて代入できるため変数の 入れ替え操作が一行で記述できること,ブロックがインデ ントで表現されるため中括弧{}が必要ないこと,など文. unicoen.ts. ユーザの 入力 (1)ソースコード編集 (2)実行ボタン押下 ソースコード. GUI. 法や機能の違いによるものである.. AST (ANTLR). Mapper (3)解析・実行. 3. ツールの提案と実装. UniTree. 前節で示したように,同じ振る舞いをするプログラムで も言語が異なるとその記述も大きく異なる.ゆえに,未学. Lexer & Parser  (ANTLR). (5)可視化. 習の言語で実装することが求められる場合は,言語の学習. 実行状態 オブジェクト. (4)デバッグ 情報生成. Engine. も必要であると考えられる. 図 3. また,アルゴリズムの学習では,実装したプログラムの. PLIVET のアーキテクチャ概要. 実行時の状態やふるまいの理解が重要となる.そういった 学習では 1 節で紹介したような実行状態の可視化を行う手 法やツールは効果的であり,実際の教育現場に導入されて. のみで完結する.. いるツールも多い.しかし,そのような既存の可視化ツー ルの多くには,問題点も存在している.本研究では主に次 の 3 つの問題があると考える. ( 1 ) 限られた OS やコンパイラ向けにしか提供されてい ない.. 3.1 GUI 図 4 に PLIVET をブラウザで表示したスクリーンショッ トを示す.PLIVET は次の主要な 5 つの GUI コンポーネ ントによって構成される.. ( 2 ) 導入するための環境の構築が難しい.. ( 1 ) エディタ. ( 3 ) ツール自体が複雑で使い方の学習が必要となる.. ( 2 ) 実行制御ボタン. これらの問題をほとんど克服した最近の研究に Python Tu-. ( 3 ) 標準入出力ウィンドウ. tor[11] がある.Python Tutor は Web ページ上のエディタ. ( 4 ) ファイル入出力フォーム. に記述された Python プログラムの可視化実行を行う Web. ( 5 ) 可視化表示キャンバス. サービスである.また Java Tutor や C Tutor に派生し,多. GUI のレイアウトはブラウザウィンドウのサイズ変更に応. 言語に対応している.しかし Python Tutor にも自由なイ. じて変化する.. ンターネット環境がなければ利用できない,ファイル入出. 3.1.1 エディタ. 力はサポートしていないといった問題点がある.. ユーザはエディタ上でソースコードを自由に編集するこ. これらの問題を解決するために,我々は Programming. とができる.また,各言語毎に基本的なシンタックスハイ. Language Interpreter for Visualization of Execution Trace. ライトや,予約語のサジェスト表示,ブレークポイントの. (PLIVET)という多言語に対応した初学者向けプログラム. 設置,次のステップで実行されるコードのハイライトなど. 実行状態可視化ツールを開発した.現在は C 言語,Java,. の機能も提供する.. Python の一部の言語機能に対応している.PLIVET は. 3.1.2 実行制御ボタン. オープンソースソフトウェア(OSS)として開発しており, https://github.com/RYOSKATE/PLIVET. からソースコード,ツール本体,デモページなどにアクセ スできる.. 実行制御ボタンは次の 6 つ機能を持ったボタンで構成さ れる.()の中は停止中の動作となる.. ( 1 ) ステップ実行実行中なら,現在のエディタ上のソース コードを用いてステップ実行を再実行する. PLIVET は GUI や各言語のインタプリタ,および可視. ( 2 ) ステップ実行を停止する. 化機能を含んだ JavaScript ファイルと HTML ファイルで. ( 3 ) 最初のステップまで戻す. 構成される.また,PLIVET に含まれる全ての機能はロー. ( 4 ) 1 ステップ戻す. カルのブラウザ上で実行されるため,Web サーバは必要. ( 5 ) 1 ステップ進める(ステップ実行を開始する). としない.そのためオフライン環境でも全ての機能が動作. ( 6 ) 最後のステップまで進める(ステップ実行を開始し,. する. 図 3 に PLIVET のアーキテクチャを示す.ソースコー ドの編集,プログラムの可視化実行の制御や可視化結果の 表示は全てブラウザウィンドウ内のエディタやボタン操作 ⓒ 2019 Information Processing Society of Japan. 最後のステップまで実行する). 3.1.3 標準入出力ウィンドウ 入出力ウィンドウは標準出力(例:printf )や標準入力 (例:scanf )に用いる.. 3.

(4) Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. 図 4 PLIVET のスクリーンショット. 3.1.4 ファイル入出力フォーム ユーザはファイル入出力フォームからファイルを選択す. また,ユーザは以下の 3 ステップでプログラムの可視化 実行を行うことができる.. ることで,そのファイルをファイル入出力を行うプログラ. ( 1 ) ブラウザで HTML ファイルを開く. ム(例:fgets ,fputc )で扱うことができる.. ( 2 ) ソースコードをエディタに記入する. 3.1.5 可視化表示キャンバス. ( 3 ) 可視化実行ボタンを押す. 可視化表示キャンバスは,実行途中のプログラムの状態 を表や図形を用いて可視化する.PLIVET の可視化表示は. ソースコードを編集した場合も,再実行ボタンを押すだけ で済む.これは Usability の問題を解決する.. 次のような特徴を持つ.. • 各変数の型,名前,値を表示する • 変数はスタック単位でグループ化し,表形式で表示 する. • ポインタなどの参照は,参照元,参照先と合わせて色 つきの矢印を用いて表示する. • 配列など複数の要素を持つ場合は表を折りたたみ非表 示にすることが可能. • 関数の再帰呼び出し時には呼び出しの深さも併せての 表示する 以上のように,PLIVET はソースコードの編集から実 行,可視化表示まで全てがブラウザウィンドウ 1 画面内で 完結する. その他にも,プログラミング言語の切り替え,サンプル プログラムや説明文の言語の切り替え,表示倍率の切り替 えなどの機能と対応するコンポーネントが存在する.. ⓒ 2019 Information Processing Society of Japan. 3.2 言語処理 PLIVET は GCC や javac,CPython のような一般的な コンパイラやインタプリタは使用していない.これらの使 用を避けているのは Installability の問題を解決するためで ある.. PLIVET では unicoen.ts という本研究グループが開発 した基盤システムを用いている.各言語のソースコードの 解釈と実行,および可視化に必要なデバッグ情報の生成に. unicone.ts を利用している. 本研究では,unicoen.ts に. ( 1 ) C 言語,Java,Python のソースコードを UniTree に 変換する機能(Mapper). ( 2 ) UniTree を C 言語,Java,Python の仕様で実行する 機能(Engine) を実装した上で PLIVET に組み込んだ.. 4.

(5) Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. (1)の Mapper による UniTree への変換はさらに二段. 表 2. 問題の解答に必要とした時間. 階の処理によって構成される.一つ目は,ソースコードの Time. 字句・構文解析を行い各言語依存の AST に変換する機能,. Java. Python. 6 分 31 秒. 9 分 31 秒. 二つ目は,各言語依存の AST を言語非依存の AST,すな わち UniTree に変換する機能である.字句・構文解析機能. *5 の提 ミング問題は次の AIZU ONLINE JUDGE(AOJ). の作成には ANTLR という字句・構文解析器の生成器を用. 供する問題を用いた.. いている.ANTLR は字句・構文定義ファイルから字句・. https://onlinejudge.u-aizu.ac.jp/challenges/search/volumes/1129. 構文解析器(Lexer・Parser)を生成する.ANTLR が提供. 問題概要文のみ,以下に引用する.. している各言語の定義ファイルを用いることでソースコー. カードの山を混ぜて切る方法はいろいろとある.. ドから AST への変換を可能としている.しかし,ANTLR. 日本のカード遊びである「花札」における花札混. の生成する言語依存の AST は複雑であり,それを直接解. ぜ切りは,札を切る方法の一つ である. 以下に,. 釈し扱うことは困難である.そのため,Mapper はそれを. 花札混ぜ切りの方法を示す.. より抽象的で言語に非依存な AST である UniTree へ変換. n 枚のカードの山がある.図 1 に示すように,山. する.. の一番上から p 枚 目の札から連続した c 枚の札. (2)の Engine は UniTree をそれぞれの言語の仕様に沿. を抜き取り,それをそのまま山の上に置く. この. うようにステップ実行する機能を持つ.また各ステップに. 操作(カット操作という)を繰り返し行う.. おいてデバッグ用の実行状態の情報も同時に生成する機能. 花札混ぜ切りをシミュレートし,最終的に山の一. を持つ.. 番上にくる札を答える プログラムを書きなさい.. Mapper と Engine を合わせて用いることで,各言語の. なお,出題と同時に問題の解答方針も自然言語で伝達,. 簡易的なインタプリタとみなすことができる.PLIVET は. 理解の確認を行った.これは,今回は言語の違いによる影. これらの機能を用いることでユーザが入力したコードをス. 響を調査することが目的であり課題の理解は目的としない. テップ実行,および可視化表示する.. ため,初めに実施する Java での実装時に問題を理解する. これらの一連の機能は全て TypeScript プログラムとし. 時間などが含まれることを防ぐためである.. て実装されている.それによって,ビルド後は多くの Web ブラウザで実行可能な JavaScript として出力される.そ. 4.2 結果と議論. のため,PLIVET は複雑な導入手順や設定を必要とせず,. HTML ファイルを開くだけで即座に利用可能となる.Web. 表 2 にそれぞれの言語で回答に必要とした時間を示す. 参加者が回答したソースコードを図 5 と図 6 に示す.. 上で公開して使用する場合も,静的なファイルを配置する だけで済む.これは Instalability の問題を解決する.. 4. ケーススタディ 本研究は以下の 2 つの研究課題(RQ)について調査す ることを目的としている.. 表 2 より,回答所要時間は未学習の Python は既習の. Java と比較して約 1.46 倍の所要時間となった. 回答中の観察,および事後調査により参加者は主に以下 の点に関してプログラムの修正や言語機能の調査を行って いた.そのため,Python での実装の所要時間が増す結果 となったと考えられる.. RQ1:アルゴリズムの学習時において,学習者は用いるプロ. 検索を必要としたもの:. グラミング言語によって学習効率などに違いが生じるか.. • 標準入力を受け取る方法. RQ2:学習効率などに違いが生じ,それが学習者への負担と. • 配列の定義方法. いう形で現れる場合,提案手法(PLIVET)を用いること. • range を用いた配列の初期化方法. で解消できるか.. • while ループの記述方法 • for ループの記述方法. 4.1 設定 まず,RQ1 の回答を得るために行ったケーススタディに. エラーメッセージによる指摘で修正したもの:. • デクリメント演算子(–)が存在しないこと. ついて紹介する.今回のケーススタディの参加者は,Java. • セミコロンが不要であること. は学習したことがあり,Python は学習したことがない早. 以上の結果より,用いる言語が異なると学習効率の違い. 稲田大学の学生 1 名である.参加者は簡単なプログラミン. には時間や学習の負担という形で明らかな差が生じる可能. グ問題の回答を,初めに Java,その後 Python を用いて実. 性が示された.以上が “RQ1:アルゴリズムの学習時におい. 装した.実装中に必要な言語機能などを調べる目的で,イ. て,学習者は用いるプログラミング言語によって学習効率. ンターネットを用いた資料の検索は可能とした.プログラ. ⓒ 2019 Information Processing Society of Japan. *5. 会津大学の運営するプログラミング問題に対して提出されたプロ グラムの正しさとその効率の自動判定を行う WEB サービス. 5.

(6) C group, ol group, eC group no tool re as folmemory r have to ore timerecursive ad to the. ry useful As shown kings of 4 he status. VC is useramming that PVC memory. metric test, mes of the ple test.. Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告. IPSJ SIG Technical Report. 5.2.2 1. Experimental Results. import java.util.*;. 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34. public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); while (true) { int n = sc.nextInt(); int r = sc.nextInt(); if (n == 0) { break; } int[] a = new int[n]; int[] b = new int[n]; for (int i = 0; i < n; i++) { a[i] = n - i; } for (int i = 0; i < r; i++) { int p = sc.nextInt(); int c = sc.nextInt(); p--; for (int j = 0; j < c; j++) { b[j] = a[p + j]; } for (int j = 0; j < p; j++) { b[c + j] = a[j]; } for (int j = 0; j < p + c; j++) { a[j] = b[j]; } } System.out.println(a[0]); } } }. Listing 1. Source code of T1 図 5 Java の回答ソースコード JOURNAL OF LATEX CLASS FILES, VOL. 14, NO. 8, AUGUST 2015 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18. while True: n, r = map(int, input().split()) if n == 0: break a = [0] * n b = [0] * n for i in range(n): a[i] = b[i] = n - i for i in range(r): p, c = map(int, input().split()) p = p - 1 for j in range(c): b[j] = a[p + j] for j in range(p): b[c + j] = a[j] for j in range(p + c): a[j] = b[j] print(a[0]). Listing 2. Source code of T2. 図 6 Python の回答ソースコード. 来的に被験者実験で評価を行う.. 5. 関連研究 最後に当該分野での関連研究を紹介し,本研究の位置づ けを示す. これまでに多くの研究者が初学者のプログラミング学習 において理解を助ける効果的な視化手法やツールを提案 してきた.Sorva らはプログラムの実行時の振る舞いを可 視化する初学者向けのシステムやツールを調査,報告した. [8]. Sorva らはソフトウェアの可視化はプログラムの可視 化とアルゴリズムの可視化の 2 つに大別できるとした.さ らに,プログラムの可視化は静的構造の可視化と動的な 実行状態の可視化に分けられる.この分類によるならば,. PLIVET は動的な実行状態の可視化に分類される. またプログラムの不具合を見つけそれを取り除くための ツール,いわゆるデバッガーもプログラムの理解を助け る可視化ツールとして一部は授業などで用いられている.. Cross らは CS1 の Java プログラミングのクラスでデバッ ガーを初学者の学習を助けるツールとしてを用いる方法を 研究した [12].その結果として,彼らは jGRASP と呼ばれ るツールを開発した jGRASP[13], [14], [15].jGRASP は. Java,C,C++,Objective-C,Python などの言語に対応 し,変数の値といった素朴なものから,制御構造,データ 構造を表す図の生成など高度な可視化を可能とする統合開 発環境である.現状 PLIVET はシンプルな UI を持つ一方 で,多数のクラスやファイルによって構成されるプログラ ムには対応していない.学習に用いるプログラムの規模が. T1 大きい場合は 45 jGRASP のような高機能な可視化ツールが 有用となるであろう. 40. aver. その他にも Java に対応した可視化ツールは数多くある. 35. Jeliot[16] も Java 30 プログラムの可視化ツールの一つである. Duration [s]. le 4 also ates them rence exbetween. ally, we recorded the UI interactions of the participants such as the orders of mouse click, the number of clicks, and time of each step.. Jeliot は Eliot[17] 25 というアルゴリズムのアニメーションを 生成するシステムを Java の開発環境と合わせたものであ 20 り,プログラム実行時の振る舞いをアニメーションを用い 15 てわかりやすく可視化する.一方で, PLIVET のように多 10 言語には対応していない. 5. PLIVET は導入容易性という点を重視し,サーバ不要の 0 1 3 5 7 9 11 13 15 17 19 21 23 25 27 ウェブブラウザ上で動作するシステムとして開発された. Step. Guo によって提案された Python Tutor は類似のアプロー チとしてサーバは必要とするものの,ウェブアプリとして実. 装された実行状態可視化システムである Figure 13. Duration of each step in[11], T1 [18].生成し #include<stdio.h> た可視化結果を任意のウェブページに埋め込めるといった 2 int main() などに違いが生じるか. ” に対する回答である. 3 { 特徴を持ち,多くの大学やデジタル教材に用いられている. “RQ2:学習効率などに違いが生じ,それが学習者への負 4 int i,j,n=3; 現在は,Java Tutor,C Tutor,C++ Tutor,JavaScript 担という形で現れる場合,提案手法( PLIVET)を用いる 5 int*ps[3]; Tutor,Ruby Tutor のようにそれぞれの言語に対応した同 6 for(i=0;” については,図 i<n; ++i){ 7 および図 8 が示 ことで解消できるか. T2 7 // 14th step (Executed the 2nd time 70 様のシステムも提供されている.一方で, PLIVET と比べ すように PLIVET を用いることで両言語とも実行が可能 ) 自前のサーバへの導入が難しい,ファイル入出力などには である.ゆえに,RQ1 に伴う負担を軽減できると考えられ 60 8 ps[i]=malloc(sizeof(int)*n); 対応していないと行った制約も存在する. る.ただし,より詳細な調査のために RQ2 については将 9 for(j=0; j<n; ++j){ 50 10 ps[i][j]=i*i + j*j; 11 } 40 6 ⓒ 2019 Information Processing Society of Japan 12 } 30 13 // 30th step 14 for(i=0; i<n; ++i){ 1. Duration [s]. ccurately compares he group 1.8 times he group he group sponded answers,. 20. aver.

(7) Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. 図 7 PLIVET の可視化の様子(Java). 図 8 PLIVET の可視化の様子(Python). ⓒ 2019 Information Processing Society of Japan. 7.

(8) Vol.2019-CE-149 No.5 2019/3/2. 情報処理学会研究報告 IPSJ SIG Technical Report. また,本研究では Java と Python を扱ったが,可視化 ツールはポインタやメモリの動的確保といった難しい概. [5]. 念を持つ C 言語向けのものが特に多い.前述の Eliot も. C 言語で書かれたアルゴリズムの可視化に対応している. 可視化表現を重視しているものには Egan らが提案した. SeeC[19],小池らが提案した SuZMe[5] などがある.しか. [6]. し,いずれも C 言語の実行には gcc などのコンパイラを用 いるため,PLIVET と比較して導入や実行環境に制約が存 在する.. 6. おわりに [7]. 本研究では,多様化するプログラミング言語学習におい て初学者の理解を助けるツール PLIVET を開発した.本 研究は,アルゴリズムの学習時において,学習者は用いる プログラミング言語によって学習効率などに違いが生じる. [8]. か(RQ1) ,および学習効率などに違いが生じ,それが学習 者への負担という形で現れる場合,提案手法(PLIVET) を用いることで解消できるか(RQ2)の調査を目的とした.. RQ1 については,簡単なプログラムの実装に学習済みの. [9]. 言語と未学習の言語を用いた場合に関するケーススタディ を示した.その結果から,文法レベルの細かな違いについ ても多くの差があり,標準ライブラリなどを必要とする規 模になればさらに多くの言語の学習負担が生じる可能性が. [10]. 示された.RQ2 については,多言語に対応した提案手法を 用いることで,解消されると考えられる.今後の課題とし て,RQ1 については実際の授業などでより大きな規模での 調査実験の実施が挙げられる.また RQ2 に関しても,ア. [11]. ルゴリズムの授業などに本ツールを導入することで負担の 解消に貢献するか、より詳細に調査していきたい. 参考文献 [1]. [2]. [3]. [4]. Craig, M. and Petersen, A.: Student Difficulties with Pointer Concepts in C, Proceedings of the Australasian Computer Science Week Multiconference, ACSW ’16, New York, NY, USA, ACM, pp. 8:1–8:10 (online), DOI: 10.1145/2843043.2843348 (2016). Milne, I. and Rowe, G.: Difficulties in Learning and Teaching Programming&Mdash;Views of Students and Tutors, Education and Information Technologies, Vol. 7, No. 1, pp. 55–66 (online), DOI: 10.1023/A:1015362608943 (2002). Lahtinen, E., Ala-Mutka, K. and J¨arvinen, H.-M.: A Study of the Difficulties of Novice Programmers, Proceedings of the 10th Annual SIGCSE Conference on Innovation and Technology in Computer Science Education, ITiCSE ’05, New York, NY, USA, ACM, pp. 14–18 (online), DOI: 10.1145/1067445.1067453 (2005). Egan, M. H. and McDonald, C.: Program Visualization and Explanation for Novice C Programmers, Proceedings of the Sixteenth Australasian Computing Education Conference - Volume 148, ACE ’14, Darlinghurst, Australia, Australia, Australian Computer Society, Inc., pp. 51–57 (online), available from ⟨http://dl.acm.org/citation.cfm?id=2667490.2667496⟩. ⓒ 2019 Information Processing Society of Japan. [12]. [13]. [14]. [15]. [16]. (2014). 伸弥小池,健太郎郷:SuZMe : 空間的なアドレス表現 を用いたプログラム理解支援ツール,電子情報通信学 会 論 文 誌. D, 情 報・シ ス テ ム = The IEICE transactions on information and systems (Japanese edition), Vol. 95, No. 3, pp. 518–526( オ ン ラ イ ン ),入 手 先 ⟨https://ci.nii.ac.jp/naid/110009418760/⟩ (2012). Jim´enez-Peris, R., Pareja-Flores, C., Pati˜ no Mart´ınez, M. and Vel´azquez-Iturbide, J. A.: The Locker Metaphor to Teach Dynamic Memory, Proceedings of the Twenty-eighth SIGCSE Technical Symposium on Computer Science Education, SIGCSE ’97, New York, NY, USA, ACM, pp. 169–173 (online), DOI: 10.1145/268084.268144 (1997). Null, L. and Rao, K.: CAMERA: Introducing Memory Concepts via Visualization, Proceedings of the 36th SIGCSE Technical Symposium on Computer Science Education, SIGCSE ’05, New York, NY, USA, ACM, pp. 96–100 (online), DOI: 10.1145/1047344.1047389 (2005). Sorva, J., Karavirta, V. and Malmi, L.: A Review of Generic Program Visualization Systems for Introductory Programming Education, Trans. Comput. Educ., Vol. 13, No. 4, pp. 15:1–15:64 (online), DOI: 10.1145/2490822 (2013). Davies, S., Polack-Wahl, J. A. and Anewalt, K.: A Snapshot of Current Practices in Teaching the Introductory Programming Sequence, Proceedings of the 42Nd ACM Technical Symposium on Computer Science Education, SIGCSE ’11, New York, NY, USA, ACM, pp. 625–630 (online), DOI: 10.1145/1953163.1953339 (2011). Abazi-Bexheti, L., Kadriu, A. and Apostolova, M.: Self learning trends in the field of introductory programming, 2018 41st International Convention on Information and Communication Technology, Electronics and Microelectronics (MIPRO), IEEE, pp. 0715–0719 (online), DOI: 10.23919/MIPRO.2018.8400133 (2018). Guo, P. J.: Online Python Tutor: Embeddable Web-based Program Visualization for Cs Education, Proceeding of the 44th ACM Technical Symposium on Computer Science Education, SIGCSE ’13, New York, NY, USA, ACM, pp. 579–584 (online), DOI: 10.1145/2445196.2445368 (2013). Cross, J. H. I. I., Hendrix, T. D. and Barowski, L. A.: Using the debugger as an integral part of teaching CS1, 32nd Annual Frontiers in Education, Vol. 2, pp. F1G– 1–F1G–6 vol.2 (online), DOI: 10.1109/FIE.2002.1158137 (2002). Cross, II, J. H., Hendrix, T. D., Jain, J. and Barowski, L. A.: Dynamic Object Viewers for Data Structures, Proceedings of the 38th SIGCSE Technical Symposium on Computer Science Education, SIGCSE ’07, New York, NY, USA, ACM, pp. 4–8 (online), DOI: 10.1145/1227310.1227316 (2007). Cross, J. H., Hendrix, T. D. and Barowski, L. A.: Integrating Multiple Approaches for Interacting with Dynamic Data Structure Visualizations, Electronic Notes in Theoretical Computer Science, Vol. 224, pp. 141–149 (online), DOI: https://doi.org/10.1016/j.entcs.2008.12.058 (2009). Cross, II, J. H., Hendrix, T. D., Umphress, D. A., Barowski, L. A., Jain, J. and Montgomery, L. N.: Robust Generation of Dynamic Data Structure Visualizations with Multiple Interaction Approaches, Trans. Comput. Educ., Vol. 9, No. 2, pp. 13:1–13:32 (online), DOI: 10.1145/1538234.1538240 (2009). Moreno, A., Myller, N., Sutinen, E. and Ben-Ari,. 8.

(9) 情報処理学会研究報告 IPSJ SIG Technical Report. [17]. [18]. [19]. Vol.2019-CE-149 No.5 2019/3/2. M.: Visualizing programs with Jeliot 3, Proceedings of the working conference on Advanced visual interfaces, ACM, pp. 373–376 (2004). Lahtinen, S.-P., Sutinen, E. and Tarhio, J.: Automated animation of algorithms with Eliot, Journal of Visual Languages & Computing, Vol. 9, No. 3, pp. 337–349 (1998). Guo, P. J., White, J. and Zanelatto, R.: Codechella: Multi-user program visualizations for real-time tutoring and collaborative learning, Proceedings of the IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC), VL/HCC ’15, pp. 79–87 (online), DOI: 10.1109/VLHCC.2015.7357201 (2015). Egan, M. H. and McDonald, C.: Program visualization and explanation for novice C programmers, Proceedings of the Sixteenth Australasian Computing Education Conference-Volume 148, ACS (2014).. ⓒ 2019 Information Processing Society of Japan. 9.

(10)

図 4 PLIVET のスクリーンショット 3.1.4 ファイル入出力フォーム ユーザはファイル入出力フォームからファイルを選択す ることで,そのファイルをファイル入出力を行うプログラ ム(例 :fgets , fputc )で扱うことができる. 3.1.5 可視化表示キャンバス 可視化表示キャンバスは,実行途中のプログラムの状態 を表や図形を用いて可視化する. PLIVET の可視化表示は 次のような特徴を持つ. • 各変数の型,名前,値を表示する • 変数はスタック単位でグループ化し,表形式で表示 する
図 7 PLIVET の可視化の様子( Java )

参照

関連したドキュメント

LLVM から Haskell への変換は、各 LLVM 命令をそれと 同等な処理を行う Haskell のプログラムに変換することに より、実現される。

We find the criteria for the solvability of the operator equation AX − XB = C, where A, B , and C are unbounded operators, and use the result to show existence and regularity

Society for Indus- trial and Applied Mathematics (SIAM), Philadelphia, PA, 2000. Pullback and pushout constructions in C ∗ -algebra the- ory. CBMS Regional Conference Series in

de la CAL, Using stochastic processes for studying Bernstein-type operators, Proceedings of the Second International Conference in Functional Analysis and Approximation The-

The proof uses a set up of Seiberg Witten theory that replaces generic metrics by the construction of a localised Euler class of an infinite dimensional bundle with a Fredholm

Marino, “New results related to a conjecture of Manickam and Singhi,” European Journal of Combinatorics, vol. Chiaselotti, “A method to count the positive 3-subsets in a set of

Bluetooth® Low Energy プロトコルスタック GUI ツールは、Microsoft Visual Studio 2012 でビルドされた C++アプリケーションです。GUI

We investigate the global dynamics of solutions of four distinct competitive rational systems of difference equations in the plane1. We show that the basins of attractions of