北信越地区

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

ビジュアル型とテキスト型プログラムの相互変換を用いたプログラミング学習支援システム
Programmin Learning support systemusing mutual conversion between visual and text programs
野口 幹太*1，太田 光一*1，谷 文*1，長谷川 忍*1
Kanta NOGUCHI *1, Koichi OTA*1, Wen GU*1, Shinobu HASEGAWA*1*1 北陸先端科学技術大学院大学*1Japan Advanced Institute of Science and Technology
Email: s2110130@jaist.ac.jp
あらまし：プログラミング初学者の学習支援の一つであるビジュアル型プログラミング環境には，社会で必要とされるテキスト型プログラミングへの移行が容易でないという課題がある．本研究では，この課題を解決するためにビジュアル型とテキスト型のプログラム相互変換機能を実装したプログラミング学習支援システムを開発した．本稿では，ビジュアル型の視覚的見やすさ，エラーの起きにくさという特徴を活かしつつ，テキスト型への移行を考慮した支援システムの概要と初期の評価について述べる．
キーワード：ビジュアル型プログラミング，テキスト型プログラミング，相互変換，JavaScript

1.

を改めて学びなおさなければならないという問題を解決するために，ビジュアル型プログラムからテキスト型プログラムである C 言語に変換できる学習支援システムを Web ブラウザ上で構築した(3).しかし，ブラウザ上でプログラムを実行することができず，テキスト型からビジュアル型への変換には対応していない．
松澤らはビジュアル型プログラミングによる入門
学習を終えた学習者に対して C や Java などのテキスト記述型言語へのシームレスな移行が考慮されていないという問題を解決するためにビジュアル型言語 と テ キ ス ト 型 言 語 (Java) の 併 用 開 発 環 境「BlockEditor」を構築した(4)．BlockEditor はビジュ
アル型とテキスト型プログラムを相互変換する機能を有しており，両型での実行も可能となっている．
しかし，ビジュアル型とテキスト型のプログラミングを行うインターフェイスが別になっており，両型を比較しにくい設計になっている．また，テキスト型からビジュアル型プログラムへの変換において，文法エラーを含んでいるプログラムが変換できず，それを解消するためのテキスト型プログラミングのデバッグ処理の支援を行っていない．

はじめにプログラミング初学者の学習支援としてビジュア
ル型プログラミングが挙げられる(1).ビジュアル型プ
ログラミングは視覚的に分かりやすい，操作が簡単，エラーが起きにくい，決められたコードの断片の中から選ぶという特徴がある．
一方で，情報化が進む社会において求められるテキスト型プログラミングの例として Javascript，Python,Java,C#,PHP などが挙げられる．これらを学習することで，システム開発におけるフロントエンドからバックエンドの工程をこなすことができ，人材需要が高まることが期待される．しかしながら，テキスト型プログラミングを習得する際には，ゼロからの記述及びエラー処理を必要とし，時間や教材や環境構築に関する学習コストが高いという特徴がある．
Scratch は小学生向けのビジュアル型プログラミングとして成功しているが，テキスト型プログラミングへ繋げるにはギャップがあることが指摘されている(2)．このギャップの原因の一つとして，初学者にとってビジュアル型からテキスト型への変換のイメージが湧きにくいことが考えられる．
本研究では，ビジュアル型プログラミングを終えた学習者がテキスト型プログラミングに移行するのが難しいという課題に着目し，この課題を解決するために既存のビジュアル型からテキスト型プログラムへの変換に加えて，テキスト型プログラムからビジュアル型プログラムへの変換機能を実装する．それにより，ビジュアル型の視覚的見やすさ，エラーの起きにくさという特徴を活かしつつ，テキスト型プログラミングの学習の促進を目指す．

2.

3.

システムの設計

3.1 ビジュアル型環境
ビジュアル型プログラミング環境の構築には， 主に Google Blockly(5)を利用した．Google Blockly はブロックを組み合わせてプログラミングを行うビジュアル型プログラミングエディタで，テキスト型プログラムへの互換性がある．
ビジュアル型プログラムの実行に関しては，ビジュアル型プログラムを一度テキスト型プログラムに変換し，テキスト型プログラムを実行する形で実装した．ビジュアル型プログラムの保存/読込に関して

関連研究

末吉らはビジュアル型プログラミングでプログラミングを学んだ初学者もテキスト型プログラミング

29

北信越地区

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

は，ビジュアル型プログラムを xml 形式で保存/読込を行う形で実装した．ビジュアル型からテキスト型プログラムへの変換も Google Blockly(5)の機能を利用した．

ところ，1 回目と 3 回目の組み合わせ(p=0.034)のみ5%水準で有意差があることが判明した．このことにより，開発システムを利用してプログラミング学習を行った結果，テキスト型プログラムの習得の促進を行うことができたと考えられる．
一方で，相互変換利用した前後と利用しなかった前後での点数差のデータを用いたウィルコクソン符号順位検定では p=0.89 となり，相互変換の有無による学習効果の差は観測されなかった．

3.2 テキスト型環境
テキスト型プログラミング環境の構築には，エディタとして MonacoEditor を利用し，MonacoEditor と構 文 解 析 ラ イ ブ ラ リ esprima を 利 用 し た
SyntaxValidator を構文エラー対策として導入した．
また，Google Blockly(5)と互換性がある中でブラウザ上での実行が行いやすい言語である JavaScript をテキスト型プログラミング言語とした．

5.

3.3 テキスト型からビジュアル型への変換テキスト型からビジュアル型への変換には，プログラムの構成要素を木構造データで表したAST(AbstractSyntaxTree)を利用して行う．構文解析ラ
イブラリ esprima で JavaScript のソースコードをAST に変換し、AST 探索ライブラリ estraverse で ASTの探索を前順走査で行い，探索で得た情報を元にビジュアル型プログラムの生成した．
3.4 結果開発システムの全体図を図 1 に示す．

図 1 開発システムの全体図
図 1 のシステムは大きく分けて 4 つの部分からなっており，左上がビジュアル型環境，右上がテキス
ト型環境，真ん中がプログラム操作(保存，変換)部，左下が実行結果表示部となっている．

4.

おわりに

本研究では，ビジュアル型プログラミングを終えた学習者がテキスト型プログラミングに移行することが難しいという課題に着目し，この課題を解決するためにビジュアル型とテキスト型プログラムの相互変換機能を有するプログラミング学習支援システムの開発を目指した．この目的達成のためにビジュ
アル型とテキスト型プログラミングが比較しやすい環境を構築し，ビジュアル型とテキスト型プログラ
ムの相互変換を実装し，開発した学習支援システムの有用性を示す実験を行った．しかしながら，開発した学習支援システム自体はテキスト型プログラミング学習に有用性があると示すことができたが，相互変換機能は有用性あることを示せなかった．
本システムにはまだ改善すべきところがある．ビジュアル型とテキスト型をより比較しやすくするた
めに両型の文字やブロックの色を統一するべきであり，システムが対応できるプログラミング言語も増やす必要がある．また，テキスト型から変換できるものは決められたビジュアル型プログラムだけになってしまっているため，テキスト型プログラムもし
くはテキスト型プログラムの AST からビジュアル型プログラムを自動で生成する機能を実装する必要がある．
参考文献(1) Scratch Team Lifelong Kindergarten Group MIT Me-dia
Lab:“Scratch -Imagine.Program.Share”,
http://scratch.mit.edu/(2) 総務省:“プログラミング⼈材育成の在り⽅に関する調査研究報告書”,
https://www.soumu.go.jp/main_content/000424363.pdf(3) 末吉春一, 佐藤喬:“ビジュアルプログラミングを用いたテキストベースプログラミング学習支援システム”, 第 78 回全国大会講演論文集, 2016 巻, 1 号,p.897-898（2016）(4) 松澤芳明, 酒井三四郎:“ビジュアル型言語とテキス
ト記述型言語の併用によるプログラミング入門教育の試みと成果”, 研究報告コンピュータと教育（CE）, 2013-CE-119, 2 号, p1-11（2013）(5) Google:“Blockly | Google for Developers”,
https://developers.google.com/blockly?hl=ja

予備実験

情報系を専門としていない大学院生を対象にシステム利用したプログラミング学習の実験を行った．
実験では相互変換を利用した学習と利用しない学習の 2 回のプログラミング学習を行い，学習前後に行った計 3 回の習得度把握テストによって被験者の学習度を測った．プログラミング学習の項目を変数，算術演算，If 文，While 文，関数の 5 つとし，習得度把握テストは項目ごとに対応した計 5 問の選択問題とした．
3 回の習得度把握テストの結果の中央値はそれぞれ，2，3，4 であった．これらの結果に差がないという帰無仮説について，フリードマン検定を行ったところ，p=0.0009119 であり，帰無仮説が棄却された．
そこで，ボンフェロー二法による多重比較を行った

30