E4-3

モデリング学習用モデルコンパイラを用いた
IchigoJamBASIC コード生成ツールの開発
Development of IchigoJamBASIC Code Generator
by using an Educational Model Compiler
*1

*2*2

*2

但馬 将貴 , 香山 瑞恵 , 小形 真平 , 橋本 昌巳
*1
*2
*2
*2
Masaki TAJIMA , Mizue KAYAMA , Shinpei OGATA , Masami HASHIMOTO*2*1
信州大学大学院理工学系研究科 信州大学工学部*1
Graduate School of Science & Technology, Shinshu University*2
Faculty of Engineering, Shinshu University
E-mail: 15tm515k@shinshu-u.ac.jp
あらまし：本研究の目的は，モデリング学習を支援する環境の拡張である．本研究では，Web ブラウザ
上で動作するモデル駆動開発ツール：S-clooca を対象に，UML モデル図からソースコードを自動生成できる初学者向けのプログラム設計支援ツールを開発している．ここでは，教育用マイコンである IchigoJamを対象に，学習者が描くフローチャート図から BASIC コードを生成するツールを開発した．本稿では，その成果と設計概念について述べる．
キーワード：IchigoJam，BASIC，モデル駆動開発，フローチャート，モデリング学習

1.

はじめにモデリングは，現代社会を生きる全ての者に必要なリテラシであるといわれる(1,2)．対象の静的な側面を表現するクラス図や ER 図，動的な側面を表現す
る状態遷移図やフローチャートなどのビジュアルモデルを用いて対象をモデル化する能力は，情報専門教育の主要 5 分野（CS・IS・SE・CE・IT）はもとより，一般情報教育（GE）および高等学校での情報科の学習内容とも関連する(3,4)．我々は，2010 年より，小・中・高校生と大学生を対象としたモデリング教育のための教材および教育環境，教育カリキュラムを開発してきた(5)．
本研究は，モデリング教育を支援する環境の拡張を目的とする．ここでは，Web ブラウザ上で動作する MDD ツール：S-clooca を用いて，学習者が記述するモデルの要素を規定するメタモデルと，記述されたモデルからコードへの生成規則をまとめたテンプレートの設計を行い，教育用に展開している．
本稿では，教育用マイコン：IchigoJam(6)を用いたプログラミングを，フローチャートでモデリングするためのコード生成ツールについて記述する．

2.

S-clooca を用いたモデリング学習

S-clooca は，Web ブラウザ上で動作するクラウド型 MDD ツール：clooca(7)を本研究で拡張したものである．S-clooca は，任意のモデルから任意のコードを生成するモデルコンパイラである．モデルコンパ
イラは，扱うモデルの定義であるメタモデルと，モデルから対象デバイス用コードを生成する規則を定めたテンプレートから成る．メタモデルとテンプレートの対をツールと称す．開発者がツールの設計を行い，教育者が学習に利用するツールを選択し，学習者がツールを利用してモデリング学習を行う．本

研究ではこれまで，ロボット動作を状態遷移図とクラス図を用いてモデリングを行う学習を提案してきた(8)．今回，S-clooca の機能を活かし，フローチャートでのモデリング学習環境を構築した．

3.

IchigoJam と IchigoJamBASIC

IchigoJam は，プログラミング教育用マイコンボードである．これは，児童にプログラミングをするきっかけを与えることを目的に商品化された，初学者教育に適した安価なマイコンである．OS を持たず，電源を入れるだけですぐにプログラム開発ができる．
2016 年現在，全国で IchigoJam を用いた子ども向けプログラミング教室のイベントが開催されている (6)．
プログラミング言語には，専用の BASIC 言語を用い，本稿ではこれを IchigoJamBASIC と称する．
一般に BASIC は，1 行ごとに命令が解釈される．
各命令は，演算や制御など多様である．モデリング学習の観点では，1 行ごとにモデルの要素が対応するモデル図を用いることが有効であると考える．理由として，逐次的な処理の流れが視覚的に理解でき，コードを書く前の段階的な教育に適するからである．
この目的に適したモデル図の一つに，フローチャー
トが挙げられる．フローチャートは，様々な形で表されるステップごとに命令を記し，ステップ同士をつなぐ矢印に沿って実行される命令の流れを表現す
る．フローチャートの 1 ステップと，BASIC の命令
文 1 行は一対一に対応でき，基礎知識を持たない初学者向けのプログラミング教育にも有効である．

4.

BASIC コード生成ツールの設計概念

4.1 メタモデル
メタモデルでは，モデル要素の名称，関連，形，属性を定義する．フローチャートを表現するメタモ― 311 ―

教育システム情報学会 JSiSE2016
第41回全国大会 2016/8/29-8/31

デルを次のように定義した．
モデル要素の名称は，開始，入出力，変数操作，終了，逐次遷移，条件分岐，分岐遷移の 7 種類とす
る．逐次遷移と分岐遷移の 2 種類を遷移と種別し，遷移を除く 5 種類をステップと種別する．
モデル要素間の関連は，各ステップ同士を遷移によりつなぐこととする．分岐遷移は，条件分岐の偽判定の遷移に利用する．
モデル要素の形は，JIS で規格化されたフローチャートの形を参考にした(9)．実際に S-clooca で記述したモデル図の例を図 1 に示す．ステップの形は，開始と終了を角丸矩形，入出力を平行四辺形，変数操作を長方形，条件分岐をひし形とする．遷移の形は，逐次遷移を実線矢印，分岐遷移を破線矢印とする．
モデル要素の属性は，ステップに追加する記述項目である．入出力は，「画面表示」，「キー入力」の 2つの属性を持つ．画面表示には，表示させる文字列を記述する．キー入力には，入力された 1 字のキーを代入する変数を記述する．変数操作は，「操作対象変数」と「操作」を属性に持つ．操作対象変数には，扱う変数名を記述する．操作には，操作対象変数に対する代入や演算式を記述する．条件分岐は，「条件文」を属性に持つ．条件文には，真偽判定や比較演算を記述する．なお，開始と終了，および 2 つの遷移は属性を持たない．
4.2 テンプレート
テンプレートでは，モデル図からコードを生成する規則を定義する．フローチャートから IchigoJam
BASIC コードを生成する例を図 2 に示す．
ここでは，階乗の値を求めるモデルを記述している．3 章で示したように，生成結果はモデル図の 1 ステップとコード 1 行が対応している．このコードを生成したテンプレートの設計概念を示す．
まず，逐次遷移によるステップの流れに基づいて，各ステップの処理に対し，順に行番号を割り当てる（行番号：10～50）．次に，分岐処理（行番号：40）の分岐遷移で参照されるステップの処理に行番号を割り当てる（行番号：60）．次に，終了を示す命令
END を記述する（行番号：70）．最後に，分岐遷移

図 1 IchigoJamBASIC 生成ツールのモデル図の例（図上部：モデル選択バー，図下部：モデル図）

10 N = INKEY()
20 M=1 : F=130 F=F*M
40 IF M=N THEN GOTO 50
ELSE GOTO 60
50 PRINT F : GOTO 70
60 M=M+1 : GOTO 3070 END

自動生成

図 2 フローチャートと IchigoJamBASIC 生成例
やステップを遡る逐次遷移と GOTO 命令の行番号が対応するよう，行番号を再度割り当てる処理を行う．

5.

おわりに

本稿では，モデリング学習用モデルコンパイラ：
S-clooca を用いて，フローチャートから IchigoJamBASIC コードを生成するツールについて述べた．このツールでは，IchigoJamBASIC の代表的な命令を取り上げた．さらに，より複雑な命令として，繰り返し処理などにも対応させれば，表現力が高まる．また，状態遷移図でのモデル記述とフローチャートでのモデル記述を組み合わせて利用することで，抽象度の異なる処理も記述可能になる．今後はこれらのツール開発の検討を進め，教育実践への適用を行い，モデリング学習環境の拡充を図っていく．
謝辞

本研究は科研費 16H03074 の助成を受けた．
参考文献

Commission:“EmergingSkillsand(1) European
Competences- A transatlantic study”, http://www.
eduser.eu/emma-archive/uploads/Documents/documents/1
3%20Emerging_Skills_Competences_Transatlantic.pdf(2016/6/6 確認)(2) Assessment and teaching of 21st century skills: “ACT21
home page”, http://atc21s.org/ (2016/6/6 確認)(3) AMC: “Curricula Recommendations”,http://www.acm.org/education/curricula-recommendations/ (2016/6/6 確認).
(4) 文部科学省: “高等学校学習指導要領解説 情報編”,開隆館, 東京, 2010.
(5) 香山瑞恵他, “初学者向けの状態遷移図による振舞に関する概念モデリング教育へのモデル駆動開発方法論に基づく学習環境導入の効果”, ESS2014, 108-113,2014.
(6) 株式会社 jig.jp: “BASIC でプログラミング こどもパ
ソコン IchigoJam”, http://ichigojam.net/ (2016/6/6 確認)(7) TechnicalRockstars:clooca,
http://www.clooca.com/(2016/6/6 確認).
(8) 但馬将貴他, “モデル駆動開発方法論に基づくロボット動作設計向け UML モデリング教育用モデルコンパイラの開発”, 信学技報, ET2015-54, pp.61-66, 2015.
(9) 日本工業標準調査会: “情報処理用流れ図・プログラム
網図・システム資源図記号(JIS-X0121)”.

― 312 ―