JavaScriptによるタートルグラフィックス（試作版）

タートルグラフィックスとは

タートルグラフィックスは、初心者にも理解しやすい、目で見えるフィードバックを提供する、プログラミングの教育用ツールです。画面上を動く「タートル」（亀）をカーソル代わりに使って、線や図形を描くことにより、プログラミングの基本概念を学ぶことができます。

タートルが動く方向や距離、そしてペンの状態（上げる、下ろす）をコントロールすることで、ユーザーは具体的なコードの効果を直接目で見ることができます。

Monaca Educationとタートルグラフィックス

弊社（アシアル）の経験から言うと、タートルグラフィックスは、特に基本制御構造（繰り返しや条件分岐）を学ぶのに役立ちます。

これまで弊社では、アプリ制作教材（旧名称：APS。アプリプログラミングシート）の１つとして、『タートルグラフィックス（Python版）』を提供してきました。

幸い好評をいただいていますが、「JavaScript版は無いか？」というお問い合わせもいただきます。

今回紹介するのは、JavaScriptによるタートルグラフィックスの試作です。

JavaScriptによるタートルグラフィックスの試作

このサンプルプログラムは、HTML CanvasとJavaScriptを使って、シンプルなタートルグラフィックスの体験を提供します。

Monaca Educationでも実行できる、Python版のタートルグラフィックスと異なり、この試作プログラムでは亀が画面を歩くアニメーションはありません。そのかわりに、コードを実行するとすぐに描画結果が表示されます。

亀の動作を目で追う楽しさはありませんが、コードの効果を確認しながら、プログラミングの基本を学ぶことができます。

便利な機能として、描画した画像をPNG形式で保存できるオプションも備えています。画面にあるダウンロードボタンをクリックするだけで、自分がタートルグラフィックスで作り出した画像をファイルとしてダウンロードし、保存することが可能です。

この機能は、自分の作品を画像として保存した上で、他のコンピュータやデバイスにコピーしたり、他の人に共有・提出したりするのに役立ちます。

このプログラムは、特別な装飾や、複雑な機能を排除し、プログラミングとグラフィックデザインの基本に焦点を当てています。

アプリとソースコードのインポート

下記のボタンから、サンプルアプリとソースコードをMonaca Educationにインポートできます。

Monaca Educationにインポートする(要ログイン)

試作版の構成と使い方

構成

本試作版は、フォルダjsの中の、２つのJavaScriptファイルで出来ています。

１つは、main.jsです。このファイルに、タートルグラフィックスの亀を操作するプログラムを書きます。なお、上でインポートしたプロジェクトには、あらかじめ短いタートルグラフィックスのプログラムが記述されています。

もう１つは、turtle.jsです。こちらには、HTML Canvasを使って描画するためのプログラムが書いてあります。

「main.jsの中に、亀（turtle.js）を操作するプログラムを書く。操作された亀は、HTML Canvasに描き込む」というふうに考えるとよいでしょう。

試作版でできる亀の操作

本来のタートルグラフィックスには、多様な機能が組み込まれていますが、本試作版では次の機能を実装しています。

penup()	ペンをキャンバスから持ち上げる（ペンを下ろしてから移動させるまで、線は描かれなくなる）
pendown()	ペンをキャンバスに下ろす
goto(x,y)	現在の位置から、引数で指定された座標(x,y)まで移動する。その時点でペンが下りていたら、線が描かれる
forward(length)	指定した距離だけ前に進む。ペン（亀）には、現在の角度の情報が保存されているため、その時点で向いている角度にそって直進する
right(angle)	指定した角度だけ、右に向きを変える
left(angle)	指定した角度だけ、左に向きを変える
circle(radius)	指定した半径の円を描く。現在のペン（亀）の位置の、真左に、引数で指定されただけ離れた箇所に円の中心があるものとして円を描く。なお、真円ではなく、多角形（正１００角形）で円に見せかけている
color()	色を指定する。１つの値だけ指定した場合は、色の名前または先頭に#が付いた、16進数で表現した色の値（例：#11ffbb）として扱われ、３つの値を渡した場合は３つの値それぞれがR、G、Bの値として扱われる。ただし、プログラムの途中で色を変更しても個別には反映されず、最後に指定した色だけ使われる
width(), pensize()	線の太さを指定する
write()	文字列を現在位置の右下に表示する
writeMemo()	文字列を現在位置の近くに表示する。どれくらい離れるか、離れる距離をX、Yの値で指定できる。

タートルグラフィックス　プログラムの例

インポートするプロジェクトには、次のタートルグラフィックスのコードが含まれています（フォルダjsのmain.js）。

// Turtleクラスをturtle.jsからインポート
import { Turtle } from './turtle.js';

// キャンバスを準備する
const canvas = document.getElementById('turtleCanvas');
// タートル（ペン）を準備する
const turtle = new Turtle(canvas);

// プログラムの作例
turtle.penup();             // ペン先を上げる

turtle.goto(100, 70);       // ペン先を(100,70)に移動
turtle.width(10);            // ペンの太さを指定
turtle.color("blue");       // ペン先の色を指定（※デフォルトは黒）

turtle.pendown();           // ペン先をおろす
turtle.circle(30);          // 円を描く

// スタート地点へ移動
turtle.penup();
turtle.goto(-140, -140);    // スタート地点の座標(-140,-140)
turtle.writeMemo("描画する位置を移動",10,0);

// 描画スタート
turtle.pendown();

（中略）

// 描画（解答例3）
for (let i=0; i<4; i++) {   // ？のところに数を入れてみよう
    turtle.writeMemo("繰り返し:" + i + "回め",10,10);
    turtle.forward(60)
    turtle.left(90)
    turtle.forward(60)
    turtle.right(90)        // 右にペンの向きを変える
}

冒頭部分は、タートルグラフィックスのタートルを準備する処理です。

「// プログラムの作例」というコメント行から下に、亀を操作しているプログラムが書いてあります。ペンを上げたり・下げたり、ペンの位置を指定した座標に移動したり、色を変えたり、円を描いたりしています。

JavaScriptで書いてあるので、JavaScriptの文法に従った繰り返し（for文）も書くことができます。

コメントを画面に表示するようにして、どのような順序で描画されたか分かるようにもしています。