プログラミング初学者のための学習支援ツールの開発
早川美徳, 酒井正夫, 三石大, 長谷川真吾, 静谷啓樹, 磯邉秀司, 小泉英介, 二階堂秀夫
東北大学 教育情報基盤センター
hayakawa@cite.tohoku.ac.jp
概要：東北大学では，大学初年次の情報教育において，アカデミックスキル習得の一環としてプログラミング演習を含んだ授業を実施している．そこで用いるために，初学者でも容易にプログラム作成とその実行が可能なテキストエディタ(簡易 IDE)，および，エディタと連携して動作し，教員が学生からのレスポンスをリアルタイムに収集するためのソフトウェア，簡易的なグラフィック描画用ソフトウェアを開発し，授業で使用した．

1 はじめに実行結果の確認が可能な環境を提供することが，	  東北大学では，大学初年時の情報教育科目と特に初学者向けのこうした科目では必要とされして，全学教育「情報基礎」が開講されており，ていると考えた．

文系理系を問わず多くの学部・学科で必修科目	  そこで，授業での使用を想定し，使用するプに，その他でも選択科目に指定されている．こログラミング言語を選ばずに使うことの出来るの科目は，平成 20 年に策定された「全学教育『情簡易 IDE（テキストエディタ），演習室で学生報基礎』第３版」に沿って，共通化されたシラのレスポンスを収集するツール，および，簡便バスのもとで実施されており，担当教員によっにコンピュータグラフィックスを試すことのでて扱うトピック等に多少の違いはあるものの，きるアプリケーションを開発したので，本稿で(1) 情報技術を活用した基本的な知的生産活動はその詳細について報告する．

が可能になること．
(2) コンピュータサイエンスの手法による論理

2 簡易ＩＤＥ兼テキストエディタ的思考と問題解決ができるようになること．	  前節で述べた「情報基礎」は，殆どのクラス(3) 情報社会の一員として責任を自覚し, 情報で Linux 環境(CentOS)を使って授業が実施さの科学・技術と人間との関係に問題を発見できれている．プログラミングに関係する課題を実るようになること．

施する際に，多く用いられている開発環境は，が共通の目標として設定されている[1]．

OS に標準的にインストールされているテキス	  その中でも，(2)は今日的な意味での高度な知ト エ デ ィ タ （ KWrite ）， 端 末 エ ミ ュ レ ー タ的生産者を養成するために，特に重要性が増し（Konsole）とその中で動作する Linux コマンていると考えられるが，この科目においては，ド，および C コンパイラ(gcc)であった．

実践的なプログラミングのスキルを学ぶことに	  コマンドを使ってのコンピュータ操作の経験専ら重点を置いているわけではなく，プログラを持たない受講者にとっては，コマンドライン

ムミングは問題解決ための汎用的・現実的アプ

インターフェースそのものに慣れるだけで少なローチではあるものの，必ずしもそれが唯一でからぬ努力と忍耐を強いられるであろうし，エはない，という立場が取られている．

ディタとターミナルを行き来しながらの作業は，	  その意味で，ソフトウェアの使い方の修得や様々なミスを誘発する要因となり得る．

煩雑な操作そのものに割かなければならない時	  例えば，コンパイルコマンドを含む基本的な間をできるだけ減らし，手軽にコーディングとコマンドとそのオプションなどがなかなか覚えられない，シェルの作業ディレクトリを正しく把握しておらず，エディタのファイルの保存先とは異なるディレクトリで操作する，エディタで空白を含む名前を付けてファイルを保存した
ため，シェル環境でうまく取り扱うことができなくなる，エディタでの編集結果を保存し忘れたまま，コンパイル・実行へと進む，といった状況をしばしば目にする．	  また，エディタでコーディングを行う際，コメント部以外の場所で日本語文字を入力したため，コンパイルエラーとなってしまう，特に，コード中に紛れた全角スペースが見つけられな
い，行番号表示の機能に気づかず，エラー等の

図 1: TurtleEdit の画面構成.

際に手で行数を数えている，といった様子もしばしば観察されていた．	  コマンドラインベースではなく，本格的な統合開発環境（IDE）を活用することによって，上記のトラブルや課題の多くは解消可能かもしれないが，ソフトウェアの操作方法に加え，いくつかの専門的な用語や概念を修得しなければならず，全学教育の一環として行われている科目の，しかも限られた授業時間数の中では，導入しづらいのも事実である．	  そこで，ごく単純な機能のテキストエディタを基本として，その中で，ファイルの保存，コンパイル，実行，さらには，結果の出力を可能とする，言わば，「教育用簡易版 IDE」を新規に開発することにした．そして，亀のようにゆったりと歩むことをイメージして，TurtleEditと命名した．	  開発環境には NetBeans を用い，全て Javaでコーディングしているため（5,000 行程度），OS に依らず，各種の環境で実行可能である．
GUI 部分は Swing コンポーネントを使用した．
ソースコードは MIT ライセンスで公開している（NetBeans のプロジェクトファイル形式）1．	  TurtleEdit は IDE としてはごく基本的な機能しか提供しないが，初学者の学習を支援する
1

http://seaotter.cite.tohoku.ac.jp/coda/tedit/

ために，以下の特徴を持つ：l 全ての全角文字は薄い色の四角で囲まれ，半角文字と明瞭に区別できる．
l 常に行番号が表示される．
l 空白を含む名前でファイルを保存しようとすると警告を出す．
l ボタンを押すと，あらかじめ登録したコマンドが実行される．その機能を用いて，コンパイル，実行，中断を，ボタン操作のみで行うことができる．
l コンパイルコマンドの終了コードが 0 以外（コンパイルエラー）であった場合は「実行」ボタンが働かない．
l 編集内容を保存しないまま「コンパイル」ボ
タ ン を押 す と ，フ ァ イ ルの 保 存 が 促さ れる．
l ボタンひとつで，作業ディレクトリの内容が確認できる．	  TurtleEdit の画面構成を図 1 に示す．同時に開くことのできるファイル（ウィンドウ）はひとつのみで，ウィンドウ上部に「コンパイル」，「実行」，「中断」，そして「作業ディレクトリ確認」のボタンが配置されている．その下に，編集用作業区画，さらにその下に，実行結果を表示する区画が配置され，両者の境界位置は自由に移動可能である．最下部の区画は，（ダム）ターミナルとして機能する．	  ボタンを押したときに実行されるコマンドは，「設定」画面で，ユーザーが自由に変更することができる．その記述を書き換えることで，C,Java, Ruby, Python など，各種の言語に対応することができる他，TeX のコンパイルと結果のプレビューも可能である．典型的な設定はプリセットされており，使用言語の切り替えも簡単である．	  ソースプログラムを記述した上で，「コンパイル」ボタンを押すと，以下の一連の動作が開始される：
1. ファイルが保存されていなければ保存ダイアログが表示される．
2. 設定されたコンパイルコマンドが別プロセスとして実行される．
3. コンパイラからの出力は，最下段の区画に表示される．
4. コンパイラの終了コードが 0 の場合は，内部フラグがセットされ，「実行」ボタンが有効となる．
5. コンパイルの途中で「中断」ボタンが押されたら，プロセスが中断される．	  次いで「実行」ボタンを押すと，実行コマンドとして登録してあったコマンドが別プロセスとして起動される．プロセスの標準入出力は，画面最下段の区画に接続されるので，キー入力を伴うようなプログラムでも動作するが，端末制御を伴うようなプログラムについては，期待したように動作しないという問題がある．

図２：レスポンス送信画面.

教員側が状況を正しく把握することが難しい場合がある．そのような際，学生のレスポンスを即時的に収集できる仕組みがあれば，「課題を終えたら，ボタン１を押してください」といった指示を与えることによって，的確に状況を知り，それをもとに適切な授業の進行の調整が可能となるものと考えられる．こうした機能を実現する仕組みとしては，「クリッカー」や，それと類似の，スマートフォン等でも利用可能なウェブベースのアプリケーションがいくつかのベンダーから提供されている．	  しかしながら，PC 端末の並んだ教室で，レスポンス収集にそれらの PC を使わない手は無いし，演習中に携帯デバイスの操作を求めることは，学習者の注意を散漫にする恐れもある．	  そこで，前節で述べた TurtleEdit の機能の一部として，学生が教員にレスポンスを送信する機能を実装し（図 2），合わせて，教員側がそれを収集するソフトウェア（TurtleMessenger,
以下 TM，図 3）を開発した．TM は，GLP3．
0 のもとでソースコードを公開している2．

3 レスポンス収集ツール	  大人数がプログラミング演習を一斉に行うよ
うな状況では，学生毎に進度が大きく異なり，	  このソフトウェアの基本的な動作は，以下のとおりである．

同一のサブネットに収容されていることを前提に設計されているが，同じサブネット内に異なるグループ（クラス）が存在する場合にも対応できるよう，使用する通信ポート（管理画面の「通信チャネル」）の切り換え，および，投稿用の暗証番号の設定が可能である．TM 側で暗証番号を設定しておくと，異なる暗証番号を持つメッセージが送信されても，それらは無視される．	  レスポンスの結果は，送信者のログイン ID
図 3: TurtleMessenger(TM)の画面構成.

1. 教員が TM（図３）を起動し，教員から学生へのメッセージ（指示等．140 文字以内）を記入して，「受付開始」ボタンを押すと，定期的にサブネット内に UDP でブロードキャストが送信される．パケットには，教員からのメッセージと，公開暗号鍵が含まれる．
2.

学生が TurtleEdit のヘルプメニューから「フィードバック」を選択すると，回答用のウィンドウ（図２）が現れる．

3.

TurtleEdit 側はブロードキャストパケッ
トを受信し，教員側 PC の IP アドレスを取得するとともに，ウィンドウ内に教員からのメッセージを表示する．

4.

学生は，0 から 9 までの 10 個のラジオボタンの一つを選択し，「送信」することができる．また，ハンドル名と 140 文字を超えないショートメッセージを合わせて送信できる．送信パケットには，暗号化された学生のユーザーID と端末のホスト名が含まれる．

5.

TM は TCP ポートをリスンしており，学生からの回答を収集し，それを表示する．	  以上のように，このツールを用いることで，10 の選択肢からの「投票」と，Twitter のようなメッセージ投稿が可能となる．	  このソフトウェアは，演習室内の端末が全てによって区別されるので，同じ ID でログインした者が，例えば，最初に選択肢「1」 を，次いで「2」を送信したとすると，集計結果としては，「1」の投票数が１つ減り，「2」が増える，という動作をする．この性質を使って「課題 1まで完了したら 1 を，課題 2 まで完了したら 2を送信すること」等の指示をすることによって，教室全体での進捗状況を教員がモニターすることが可能となる．	  また、演習等の進行状況の把握の他にも，ピアインストラクションを取り入れた授業の実施，簡易アンケートやミニットペーパー，出席状況の把握等への利用も考えられる．	  教員用ソフトウェア TM は，レスポンス結果を受講生と共有するために，所謂画像転送シス
テムと併用することを想定して，簡便な操作で，投票の集計結果を別ウィンドウ上にグラフ表示したり，投稿されたメッセージを投稿時刻とハンドルネームと共に表示することができる．	  また，TM はウェブサーバとしても動作させることが可能で（図３の管理画面で「Web アクセスを許可」をチェック），受講者側のウェブブ
ラウザからアクセスすると，ブラウザ上に投票の集計結果，および，メッセージのタイムラインが表示される．そして，これらの情報は，JavaScript によって動的に更新される．	  収集されたデータは，受信時刻や発信者のユーザーID，端末のホスト名とともに，時系列的に記録され，CSV 形式でファイルとして保存す2

http://seaotter.cite.tohoku.ac.jp/coda/tfbk/

	  クライアント・サーバー間は極めて単純なリクエスト・レスポンス型のプロトコルによって通信を行う．クライアントが描画等の命令を送信すると，サーバーはリクエストを処理し，結果とオブジェクトのステータスを返す．ステー
タスには，カメのオブジェクトに生じたイベン
図 4: TurtleField(TF)による描画の例.

ト情報も含まれ，例えば，他のオブジェクトと衝突した際等に，それをイベントとして検出することができる．担当教員は，それらを授業のることができる．

振り返りや分析の参考とすることも可能である．	  サーバーは画面を常に繰り返し更新し，１回の画面更新あたり，クライアント側のリクエス

4 グラフィックス描画ツール

トを１つ実行してはクライアントにレスポンス	  問題解決の手法としてプログラミングが有効を返す．従って，複数のクライアントが同時になのは，単に「答え」が得られるだけでなく，接続しているような場合でも，画面の更新に応結果を多様な形態で表現・表示できる点にもあじたタイミングで，複数のオブジェクトの動作る．特にグラフィックス表示はその重要な手段が（強制的に）同期される．

であることは言うまでも無いが，汎用的なプロ	  プログラミング初学者が TCP クライアント

グラミング言語を用いて Linux 端末等で CG をを作成するのは容易ではないので，あらかじめ体験することは，初学者にとっては，かなり煩各 種 言 語 （ C, C++, Java, Python, Ruby,雑なコーディングを強いることになる．

Scheme (Racket), JavaScript (Node.js 上で動	  そこで，TurtleEdit 等と併用して，初心者で作)）用 API を提供することで，学習者は簡単も容易にタートルグラフィックスを可能にするな関数呼び出しだけで，「亀場」を扱うことがでためのソフトウェア TurtleField(以下，TF)をきるようにした．描画コマンド（関数）は，教併せて開発した．TF は C で記述され（コード育用として実績のある，タートルグラフィック部分のみで 6000 行程度），Linux, Mac OS,スの流儀に従って設計した．

Windows 用の実行ファイルを配布している3．	  例えば，C 言語を用いる場合，API 用ファイ	  TF は TCP サーバーとして独立して動作し，ル tutle.h をダウンロードした上で，プログラクライアントからコネクションが張られると，ムの冒頭に画面上にカメのオブジェクトがひとつ生成され#include "turtle.h"る．オブジェクトはコネクションが張られていと記述し，いくつかの関数呼び出しを行うだける間だけ「亀場(turtle field)」と名付けられたで，TF を操作できるようにした．簡単な例とし二次元的な世界に「生存」し，クライアントプて，「亀場」に四角形を描画する C プログラム

ログラムからのコマンドによって，移動や描画の例を以下に示す：を行う．複数のクライアントが同時に接続することも可能なので，ひとつの画面上で複数のオブジェクトが協調して描画作業をしたり，オブジェクトをロボットに見立てて「群れ」行動や「対戦」させたりすることも可能である．
3

http://seaotter.cite.tohoku.ac.jp/coda/tfield/#include "turtle.h"main() {CON("localhost") ; /* TF との通信を開始する */CLR() ;/* 画面をいったん消去する */RST() ;/* 亀の位置を初期設定する*/

PD() ;/* ペンを下げる */FD(100.0) ;/* 前進 100 */LT(90.0) ;/* 左回転 90 */FD(100.0) ;/* 前進 100 */LT(90.0) ;/* 左回転 90 */FD(100.0) ;/* 前進 100 */いについて，前年度もこの科目を担当した経験

LT(90.0) ;/* 左回転 90 *//* 前進 100 */のあるティーチングアシスタント(TA) 3 名に質FD(100.0) ;}	  ほぼ同じ内容で実施した前年度の授業との違問したところ，以下のような回答（一部要約）を得た：	  TF は単にグラフィック表示だけでなく，例えば，課題結果の提出のため，キーまたはメニュ【質問 1】TurtleEdit を用いなかった前年度の授業と，ー操作によって，描画の内容を（ユーザーID 等

TurtleEdit を用いた今年度の授業とで，受講者の質問の情報と共に）PNG 形式でファイルに保存するやトラブルの内容に違いはあったか：機能なども組み込んである．
「あまり違いがなかったように感じる．ヘッダファイル

5 授業実践の例の置き方の質問が増えたが，それ以外について，質問の	  開発したコードは，東北大学教育情報基盤セ内容は変わらなかったと思う．」

ンターが運用する情報教育システム（ICL シス「『コンパイルってどうすればいいのか(コマンドを忘テム）の Linux ブートイメージに含め，KDEれた)』という質問はなくなった．その一方，『変更が反の K メニューから開けるようにデスクトップ設映されない』という質問はあった．」

定ファイルをインストールした．バイナリーフ
ァイルや画像等のデータを全て含めても，ファ【質問 2】TurtleEdit を用いたことで，TA の仕事が「やイル容量は 4M バイト程度にしかならないため，りやすくなった点」，および「やりにくくなった点」：

ディスクスペースへの負担はほぼ無視できる．	  2014 年 4 月から 7 月にかけて，東北大学の全「端末上でコマンド操作を教える必要がなくなった点

学教育として実施されている「情報基礎」の２はやりやすかった．一方，端末を用いた説明ができなくつのクラスにおいて，アカデミックスキルの修なった．」

得を目的としたプログラミングに関係する授業「コンパイル等の概念を説明せずに済んだ，という点ににおいて，TurtleEdit 等のツールを使用した．

おいてはやりやすかったが，一方で，カレントディレク対象のクラスは農学部，薬学部，理学部（生物）トリの概念が分かっていないせいか，保存したファイルの１年生で構成されている．クラスあたりの学の紛失があった．」

生数は 130 名を超え，160 台の PC 端末が設置「コンパイルや実行のやり方が分からないという質問された大教室で授業は実施された．

は減った。初めて使った機能で不慣れな部分はあったが、	  授業の大まかな流れは，〔1 回目〕基本的な概（やりにくくなった点は）特になし。」

念と関連ソフトウェアの操作方法，〔2 回目〕C
言語の基本構造，画面出力，〔3 回目〕条件分岐，【質問 3】その他，授業で用いたツール（TE, TM, TF）〔4 回目〕反復処理，〔5 回目〕多重ループ，〔6とその利用法について，意見・感想：回目〕関数で，C 言語の標準的かつ入門的な内容と言ってよい．6 回目に課題の説明を行った．

「『フィードバック』機能は，講義進行にメリハリを与それぞれの回では，プログラミング言語の説明えると TA をやっていて感じた．」

や技法よりも，具体的な問題解決の手順を意識「フィードバック機能については，（課題が）終わった

した例題に取り組むために，より多くの時間をら押すというのがあまり適当ではないかと思ったので，割いた．

エディタと連携させて，課題の亀の動作ができたら自動的に終了を送信した方が良い．それが技術的に難しいのであれば，せめてエディタと同画面にボタンを配置するの検討事項のひとつと考えている．

べきで，新たにウィンドウを開くのは煩わしい．」

6 まとめ	  また，受講者全員に対して毎年実施している学生による授業評価アンケート調査の自由記述
欄には，著者(早川，酒井)の授業に対して，例年，「プログラミングは難しすぎる」といった主旨の記述が数件程度寄せられるが，TE の使用の如何に関わらず，その内容や傾向に目立った

東北大学教育情報基盤センターでは，目下，情報教育用システムの更新作業中で，2015 年 4月からは新システムが稼働を開始する予定である．	 
さらに，「情報基礎」の科目の内容も，新しい学習指導要領のもので「情報」を学んだ新入学者に対応すべく，「コンピューテーショナル・変化は見られなかった．また，ツールの使用にシンキング」[2]をひとつのキーワードとして，ついての記述も無かった．

現在内容を見直している途上である．	 	  以上をまとめると，少なくとも，学生は特段

本稿で紹介したソフトウェアツールは，次期の困難やトラブル無く TurtleEdit 等のツールシステムにもインストールする計画であり，新を使用できたものと考えられ，その意味で，こしい「全学教育『情報基礎』第 4 版」の実施をうした支援ツールが授業の中で前景化せず「黒支援するツールとしても，担当教員に活用を呼子」的な役割を果たしたという点では，当初のねらいは果たされたと解釈することができる．	  一方で，TA のコメントは，演習を通じて，「コびかけ普及を図るとともに，アンケート等を通じて，その効果や改善点について分析を進めたいと考えているところである．

ンパイル」「作業ディレクトリ」など，ソフトウ

参 考 文 献 	 

ェア開発において必要とされてきた基本的な用[1]	 磯辺秀司,	 小泉英介,	 静谷啓樹，徳山豪「情語や概念を修得する機会が失われてしまった可報基礎 A	 講義ノート(平成 26 年度版)」およ能性も示唆している．ただし，このことがび「情報基礎 B	 講義ノート(平成 26 年度版)」，TurtleEdit 等のツールを用いることの弊害と言(学外未公開)，2014.	 

えるかどうかについては，科目の目指すところ[2]	 磯辺秀司,	 小泉英介,	 静谷啓樹，「コンピュに依るところであって，「情報基礎」の目標のひテーショナル・シンキング 」，共立出版，とつである「コンピュータサイエンスの手法による論理的思考と問題解決ができるようになること」にとって，高い優先度で修得すべき事項とのバランスのもとで評価されねばならないだ
ろう．また，反省点のひとつとして，TA に対して，こうしたツールを使用するねらいと，ツールの細かな動作について，事前に踏み込んで説明すべきであったと考えている．	  また，授業を担当した TA からは「もっと踏み込んで，学生がどんなエラーを出しているのかもリアルタイムで集計できれば，面白いかもしれない．」とのコメントも寄せられた．授業目的とはいえ，受講者の活動を本人が知らぬ間に収集し利用することが適切か否かも含め，今後2014．