Emscriptenと D3.jsを用いた C言語ポインタの

Webベース動的可視化システムの開発

Development of a Dynamic Visualization System for C pointers that uses Emscripten and D3.js

西山 恭平*1, 香川 考司*2

Kyohei NISHIYAMA*1, Koji KAGAWA*2 *1香川大学大学院工学研究科

*1Graduate School of Engineering, Kagawa University *2香川大学工学部

*2Faculty of Engineering, Kagawa University Email: s15g480@stu.kagawa-u.ac.jp

あらまし：C言語学習者にとって，ポインタの概念はイメージしづらく，学習意欲を下げる原因となりう

る．イメージを補助するためのツールや研究もあるが，それらは Web アプリケーションではなく導入作

業などが必要となる．そこで，C言語学習者が気軽に利用できる，新たなポインタのアニメーションによ

る可視化システムを Emscriptenと D3.jsを用いて実現するWebベースシステムとして提案し，開発する．

キーワード：C言語ポインタ，可視化，Emscripten，D3.js，Webベース

1. はじめに

C 言語プログラミングの学習において，ポインタ

は実際の動作をイメージすることが難しい構造であ

る．特に，ポインタを用いたリストや木構造などの

データ構造はテキストや図だけでは理解が難しいこ

とがある．ポインタの理解を支援する方法として，

GDBや統合開発環境の Eclipseや Visual Studioのデ

バッグ機能を用いて変数のメモリ番地の割り当てを

確認する方法が挙げられる．しかし，この方法では

文字情報として得られるアドレスからつながりをイ

メージしなければならないため学習者の負担が大き

い．また DDDなどの GUIデバッガでポインタのつ

ながりを可視化する方法もあるが，ブレークポイン

トの設定や，ステップ実行の仕組みなどを学習する

必要があり，慣れていないと使い辛い．

また，ポインタの理解を支援する既存研究として

メモリ空間を可視化し，ポインタのつながりも図示

する SuZMe(1)などのデバッガも開発されている．こ

れはメモリ空間とポインタ変数の対応付けがイメー

ジとして理解しやすいデバッガであるが，Webアプ

リケーションではない．さらに多くの学習者に気軽

に利用してもらうためには Web アプリケーション

にする必要があると考えられる．そこで，本研究で

は Web アプリケーションによるポインタ可視化シ

ステムの開発を行う．Webアプリケーションとして

開発する上で，Emscripten(2)を基盤とし，D3.js(3)によ

るアニメーション表現により，学習者のポインタの

動作イメージの補助と理解を図る．

2. システムの概要

本研究において開発するシステムは，ポインタを

学び始めた段階のC言語学習者を対象とする．また，

学習者の導入と操作方法の学習の負担を軽減するた

め，ブラウザにコードを入力するだけで使えるWeb

ベースシステムとする．ブラウザ上で入力されたコ

ードをコンパイルし，結果を表示するために C言語

から JavaScript への変換を行う Emscripten を用い，

Emscriptenが生成する asm.js(4)形式の JavaScriptを解

析することで得られたデータを用い，データ駆動型

のグラフィックライブラリである D3.js によるアニ

メーションを表示する．

3. 関連技術

3.1 Emscripten

Emscripten は C/C++で記述されたソースコードを

中間コードに変換し，それを JavaScriptに変換する．

実際にCのコンパイラを用いて中間コードを生成す

るため，コードの解釈を間違えることがない．また，

Emscriptenで出力された JavaScriptは asm.jsという形

式でありアセンブリに近い記述である．つまり，ア

ドレスの参照先への書き込みや読み出しを直接記述

しているため，それを読み取ることでポインタの動

作を抽出することができる．

3.2 D3.js

D3.jsは JavaScriptのデータ駆動型グラフィックラ

イブラリである．配列や JSON といったデータに基

づいて SVG 形式の画像を出力することが可能であ

る．本研究では抽出したポインタの動作データを参

照し，ブラウザ上に SVG形式の画像を出力してアニ

メーションを行う．D3.jsはデータからグラフを生成

する仕組みや，グラフにアニメーション効果を付与

する仕組みが存在するため，データからポインタの

動作イメージをアニメーション化するのに適してい

る．また，グラフやアニメーションの詳細は自由に

記述することもできるため表現の自由度も高い．

A3-2

― 157 ―

4. システムの構成

本システムは大きく二つの部分に分けられる．一

つはブラウザからデータを受け取り，Emscripten の

生成した JavaScript を解析してアニメーション用の

データを作成する Java Servlet によるサーバサイド

のバックエンドである．もう一つはブラウザ上でア

ニメーションを表示するHTML5と JavaScript (D3.js)

によるフロントエンドである．このシステム構成を

図 1に示す．

図 1 システムの構成図

本システムは学習者つまりユーザからみるとただ

のWebページであり，C言語のソースコードをブラ

ウザのテキストエリアに記述するか，ファイルアッ

プロードフォームより送信するだけで利用可能であ

る．

ファイルを送信すると図 2のようなアニメーショ

ン表示画面が表示される．アニメーションは画面上

の再生ボタンを押すと開始され，プログラムの実行

状態に合わせて一定間隔で進行する．アニメーショ

ンに使われているグラフは，メモリ上のアドレスの

位置を意識するというよりは，直感的なポインタの

接続イメージに近いものとなっている．

アニメーション制御の操作ボタンは動画プレイヤ

を参考にした形状をしており，直感的な操作に近づ

ける目的がある．アニメーション中は，画面上に表

示されたC言語のソースコードの対応する行がハイ

ライトされる．これにより学習者は今アニメーショ

ンで表示されているのがどのポインタ操作なのかを，

ソースコードと対応付けて確認できる．また，アニ

メーションの間隔は学習者自身で調整することが可

能である．繰り返しを用いたポインタ操作などを，

間隔を短くして一気に飛ばしたり，間隔を長くして

動作の詳細を把握したりといったことに使うことが

想定される．表示されているノードはドラッグする

ことで固定することもできる．これで自動的なレイ

アウトが気に入らない学習者でも自分の好みのレイ

アウトを実現できる．また，この固定は，ドラッグ

するだけででき，ダブルクリックで自動レイアウト

に戻るため，DDDなどのレイアウト作業に比べると

手間がかからない．

図 2 アニメーション表示画面

5. まとめ・今後の課題

C言語学習者を対象とした，Webベースポインタ

可視化システムの開発を行った．Emscriptenと D3.js

を用いることで，Webベースでの可視化システムが

実現でき，Webベースのため導入などの手間がかか

らず簡単な操作で使用することができるようになっ

た．また，ポインタの繋がりを強調した簡単なグラ

フによるアニメーションは，学習者のポインタのイ

メージを支援することにつながると考えられる．

また，本研究室に所属する 4年次生の学生 2名に

本システムを試用してもらったところ，使いやすく，

ポインタが直感的にイメージしやすいという意見が

得られた．一方，アニメーションの動きに無駄があ

る所や，UIが直感に寄っているため言葉による説明

を付加したほうが良いなどの改善意見も得られた．

これらの意見に関しては今後対応していく必要があ

る．

本システムは，現時点ではローカルサーバ上での

み動く試作段階であり，今後公開サーバ上に構築す

る必要がある．また，システムが利用可能になれば

プログラミングの講義などで実際にポインタを学び

始めたばかりの学習者による評価を行う必要がある．

アニメーションによる支援範囲も現時点では基礎的

なポインタにのみの対応となっており，今後構造体

や関数ポインタ，ポインタのポインタなどの複雑な

構造にまで支援範囲を広げる必要がある．

参考文献

(1) 小池伸弥，郷健太郎，“プログラム実行時のメモリ空

間可視化におけるインタラクションの提案”，情報処

理学会インタラクション 2012, pp.665-670, 2012.

(2) Alon Zakai, “Emscripten: An LLVM-to-JavaScript

Compiler”, Proceedings of the ACM international

conference companion on Object oriented programming

systems languages and applications companion,

pp.301-312, 2011.

(3) Mike Bostock, “D3.js – Data-Driven Documents”,

http://d3js.org/ (2015)

(4) David Herman, Luke Wagner, Alon Zakai, “asm. js:

Working Draft 17 March 2013”, Available online at

http://asmjs.org/spec/latest/, Accessed June, 2013.

ブラウザ：フロントエンド サーバ：バックエンド

UI

JavaScript

D3.js

JavaServlet

Emscripten

解析部

C

asm.js

改変JavaScript

SVG 操作

教育システム情報学会 JSiSE2015

第 40 回全国大会 2015/9/1～9/3

― 158 ―