プログラミング導入教育におけるビジュアルプログラミング環境を用いた教材の検討
占部 弘治

Email: k.urabe@niihama-nct.ac.jp*1: 新居浜工業高等専門学校電子制御工学科◎ Key Words

1

ビジュアルプログラミング環境

はじめに2020 年より小学校、2021 年より中学校でプログラ

ミング教育が必修化されたとはいえ、実践的なプログ
ラム作成能力を育成する必要のある工業高等専門学校
ではプログラミングを基礎から改めて教えることは重要と考えられる。そこで新居浜高専電子制御工学科では 1 年生に対して C++を学ぶ講義科目と講義で学んだ知識で実際にプログラムを作成する演習科目を実施

インタラクティブ教材

プログラミング導入教育

文を理解の補助を目的にする。
教材を用いることにした講義では C++ の文法を元にプログラムの構成や作成方法の説明を行い、サンプルプログラムの解説を行っている。しかし、実際にC++ のプログラムを入力し、実行することはこの講義科目とは別の時限で実施されている演習科目で行っている。講義科目と演習科目を分離することでプログラミングに関わる時間が増加し、演習問題の数を増やしてる (1) 。しかしながら、講義科目において実際にプすことができた。このとこは 2023 PC Conference でログラムの作成と実行の確認をする機会がなく、理解報告をしいてる (1) 。この演習科目では C++ のプログと定着を確認することが困難であった。

ラムの入力はエディタを用い、コンパイルは Microsoft

そこで容易にプログラムの作成・実行ができるビジュ
アルプログラミング環境に注目した。ビジュアルプロ
グラミング環境とはグラフィカルなインターフェイスを活用し、ブロックやオブジェクトで構成された部品を配置したり、矢印で接続することでプログラミングを行うことのできる環境のことである。この環境についてはマサチューセッツ工科大学のメディアラボが開発した Scratch(2) や National Instruments Corporation開発の LabVIEW(3) などがよく知られている。今回は講義に合わせた環境が必要であるため、カスタマイズ可能であり、Web ページ上で動作可能な Blockly(4)を用いて開発することにした。Blockly は Google がVisual Studio のコマンド cl を用いて行っている。この講義科目および演習科目を受講する学生は高等専門学校に入学したばかりの 1 年生であるため、キーボードを用いた入力にも不慣れなものも多い。よってプログラムの作成およびコンパイル・実行にかかる時間も学生によって大きく異なっている。このことにより講義においてプログラムの動作を実感するためにプログラミングの演習問題を示しても、それを解くには十分な時間をとることが難しいと考えた。
以前、開発した 似たような教材として HTML のドロップダウンメニューを用いたインタラクティブ教材がある (6) 。この教材の例を図 1 に示す。

開発したブロック型の JavaScript で記述されたビジュアルプログラミング環境である。すでに Blockly を用いた C 言語のビジュアルプログラミング環境については佐野・香川によって報告 (5) がなされているが、今回は本校の講義に合わせて機能を変更できること、および C++ の記述方法と一致させることを理由に独自に教材の検討を行い、開発を行った。
本稿では、今回開発した教材の検討および試用について述べ、試用の際に行ったアンケートの結果と考察について述べる。

2

教材の検討
今回のビジュアルプログラミング環境の開発について行った検討を述べる。教材を用いるのはプログラミング初学者が受講する C++ の講義とし、C++の構

図 1: ドロップダウンメニューを用いた教材の例

この教材は JavaScript を用いて疑似的に実行結果ブロックはプログラム記述エリアの左側のツールボッを表示するものであった。しかしながら、教材の作成

クスにカテゴリ別に配置され、自在に選ぶことが可能

および実行の確認は手動で行う必要があったため、多である。

くの教材が作成できず、動作は確認できるもののプロ演算子ブロックはドロップダウンメニューを用いてグラムを作成した体験には繋がらないものであった。

演算子を変更できるようにした。これによって演算子以上より、講義の途中の短い時間で実行ができ、プブロックがブロックプログラムに組み込まれても容易ログラミング体験が簡易にできる教材の必要性を感じに演算子を変更できるようになった。また、ブロックた。そこでビジュアルプログラミング環境を用いるこを選択するツールボックスでおいては全ての演算子にとを考え、カスタマイズが自在である Blockly を使っついてドロップダウンメニューが選択された状態にして独自の教材を開発することにした。

た演算子ブロックを用意した。これは演算子をブロッ

多くの Blockly を用いた環境が自然言語に近い形でプログラムの制御構文を表現しているが、今回開発すクに組み込む際に演算子を選択する手順を省くためである。

る環境では C++ の構文に慣れること、プログラミン

左上最上部には作成したブロックプログラムを実行

グの体験を実感できることを理由に C++ の表現をそする「実行」ボタン、作成したブロックプログラムをのままブロックの表示とした。
講義と連動して教材を使うため、クリック 1 回で説XML 形式のファイルへ保存する「保存」ボタン、保存した XML ファイルを読み込み、ブロックプログラ明に用いたサンプルプログラムを用意する機能を搭載

ムを再構成する「読込」ボタンを設置している。これすることにする。また、この教材で作成したプログラム

らのボタンの下に、クリックすれば講義で用いたスラの再利用のために作成したブロックプログラムを XML

イドのサンプルプログラムをブロックプログラムで用形式のファイルへ保存する機能、保存した XML ファ

意するボタンを配置する。

イルを読み込んでブロックプログラムを再構成する機能を搭載するした。

環境の右側に用意したテキストボックスに表示すること作成したブロックプログラムを C++ へ変換する機能も搭載することにした。

3

プログラムの実行による標準出力はプログラミングにした。このテキストボックスの上に「Clear」「C++を表示」のボタンを配置した。
「Clear」ボタンをクリックすると、テキストボックスに表示された文字列が消開発教材去される。「C++を表示」ボタンをクリックすると、前節で述べた C++ のプログラミングをビジュアル環境で行うことのできる教材を作成した。この教材のブロックプログラムを C++ のプログラムに変換し、これがテキストボックスに表示される。

全体図を図 2 に示す。
ブロックプログラムの実行ボタン

今回作成したビジュアルプログラミング環境教材はHTML と JavaScript のみで構成されているので、本講義スライドのサンプルプログラムを用意するボタン
標準出力を表示する
テキストボックス

校で採用している学習マネジメントシステムの Web-Class には資料として公開することが可能である。

4

講義における試用

4.1

試用状況

新居浜高専電子制御工学科 1 年のプログラミング導入の専門科目の講義「情報処理 1」においてこのビジュブロックをカテゴリ毎に分けて配置するためのツールボックスブロックを配置し、プログラムを記述するエリア

図 2: 開発したビジュアルプログラミング環境

アルプログラミング環境の試用を行った。表 1 にこの「情報処理 1」の令和 6 年度の講義計画を示す。
第 4 回目の「分岐を行うための構文（1）」の講義から今回作成したビジュアルプログラミング環境を学生に公開した。さらにこの回以降は講義の進捗に合わせて扱うことのできるブロックを増やした。

左下のブロックを配置し、プログラムを記述するエ

第 6 回の「繰り返しを行うための構文（1）」の回か

リアは Blockly を用いて構成し、C++ の制御構文やらクリックすると講義の解説に用いたスライドに掲載

変数の宣言、演算子などのブロックは Blockly Devel-されたサンプルプログラムをビジュアルプログラミン

oper Tools を用いて独自に作成した。作成された独自グ環境に用意するボタンを追加した。講義の回が進む

とサンプルプログラムの数が増えるので、ここのボタの全ての要素を表示するプログラムを与え、白の矢印ンも増えることなった。の箇所にブロックを追加することで全ての要素の中で最も大きい整数が求めるプログラムを作成する問題で

表 1: 令和 6 年度の「情報処理 1」の講義計画
回

講義内容

1

コンピュータの基本構成とソフトウェア

2コンソールの入出力と書式設定

3

データ型と算術演算子

4

分岐を行うための構文（１）5分岐を行うための構文（２）6繰り返しを行うための構文（１）

7

中間試験

8

中間試験返却・復習

9繰り返しを行うための構文（２）10配列、配列と繰り返し

11二次元配列12関数（１）

1314関数（２）

15

期末試験

16

期末試験返却・復習

ある。

4.2

アンケート結果と考察

この演習を実施した 11 回目の講義において作成したビジュアルプログラミング環境の評価を調べるためアンケートを行った。アンケートの回答者はこの講義を受講している電子制御工学科の 1 年生のうち欠席者を除いた 41 名である。
このアンケート結果を図 4 〜図 7 に示す。
図 4 の結果から、あらかじめ公開していたビジュア
ルプログラミング環境をほとんどの学生が演習を行う講義より前に使っていることが分かった。

ローカル変数とグローバル変数

このビジュアルプログラミング環境を学生が活用するとどのような効果が得られるかを調べるために、第11 回の講義では演習とアンケートを実施した。
図 4: アンケート結果 (1)図 3: 配列の要素を全て表示するブロックプログラム

演習には不完全なブロックプログラムを与え、これ

図 5: アンケート結果 (2)にブロックを追加することでプログラムを完成させる問題を 4 問用意した。例えば、図 3 に示すような配列

また、図 5 の結果より、C++のプログラムを表示

できることは学生のほとんどが知っていたが、実際に表示した学生はほぼ半数で、これをエディタを使って保存し、実際にコンパイラを使って実行した学生はほぼ 1/4 であった。
これらのことより、環境の存在と利用については学生に周知することができたが、これを用いてコンパイラで実行できることを試してみようと思う学生が多くなかったと考えられる。
図 7 の結果から 2/3 の学生がこの環境を使いやす(4) “Blockly | Google for Developers”,
https://developers.google.com/blockly/(5) Y.Sano, K.Kagawa: “Design of a Programming
Environment for Non-Procedural Programming
Languages using Blockly”, The International
Journal of E-Learning and Educational Technologies in the Digital Media (IJEETDM) Volume 5 Issue 3, pp. 93-101 (2019)

いと感じているものの、1/3 の学生はそう感じていな(6) 占部: “プログラミング科目の理解を助けるインいことがわかった。また、図 6 の結果はプログラムをタラクティブ教材の検討”, 2016 PC Conference

エディタで作成し、コンパイルで実行する方法と比較

論文集, pp.63-pp.64 (2016)

した場合を示しているが、1/2 近くの学生がこの環境よりもコンパイルでの実行のほうが解きやすいと考えていることがわかった。この環境はプログラミングの理解を促すことが目的であるためエディタとコンパイルでプログラムで実行すること同等以上の使いやすさが必要であると考える。よって、この環境の利用を促すためには不便と感じる箇所を調査し、改良する必要があると考える。

5まとめ
本稿ではプログラミング導入のための講義において学生が講義の合間や復習のために容易にプログラムの動作を確認できるビジュアルプログラミング環境を構築したことを報告した。また、この環境を実際の講義で学生に利用させたときの使用感に関するアンケートについての報告を行った。アンケートの結果から、多くの学生が使いやすと回答したが、そう思っていない学生も少なくないため今後の改良が必要である。
しかしながら、理解に対する効果の調査を行うことができていない。これは今後の課題と考える。

図 6: アンケート結果 (3)

この学年では Visual Studio などの総合開発環境やVisual Studio Code のようなソースコード作成に特化したエディタの利用を行っていないため、これらの環境との比較が行うことができなかった。この調査も必要と考える。
参考文献(1) 占部, 永井, 眞鍋: “プログラミング導入教育における演習拡充の実践と効果”, 2023 PC Confer-ence 論文集, pp.199-pp.202 (2023)(2) “Scratch - Imagine, Program, Share -”,https://scratch.mit.edu/(3) “NI LabVIEW とはテストと測定のためのグラフィカルプログラミング”,

https://www.ni.com/ja/shop/labview.html

図 7: アンケート結果 (4)