ビジュアルアート向けプログラミング言語Processingを基礎から学ぶ「easel」

　子ども向けのプログラミングツールは、子どもが操作しやすいようにビジュアル化したタイプのものばかりではなく、通常どおりテキストでコード（プログラム）を書くタイプのものもあります。今回紹介する「easel」は、Processingというプログラミング言語のコードを実際に書きながら、プログラム手法をステップバイステップで学べる教材です。Processingはビジュアルアートを通じてコーディングを学べる言語として生まれましたが、アーティストの表現手段として幅広く使われています。

スマホでもパソコンでも学べるプログラミング教材

　「easel」は、スマートフォンで学べる教材ですが、Webブラウザーで動くので、コードをタイプすることを考えるとパソコンで使うのが便利です。スマートフォンの横幅で見やすい作りになっているので、この記事ではパソコンでブラウザーの表示幅を狭めて使用します。全120以上の学習コンテンツがあり、登録なしのお試しで7個、無料会員登録で18個のコンテンツが利用できます。有料会員は月額990円（税込み）。

「easel」のトップ画面。パソコンで利用するときも、右側のように、ブラウザーの横幅を狭めた方が見やすい。推奨ブラウザーは「Safari」か「Google Chrome」。背景のアートはPrcessingで描かれている。

プログラムの編集と実行結果をボタンひとつで切り替えられて省スペース

　トップから［入門］を選び［図形］メニューから［点を描く］を試してみます。短文でとても小さなステップを踏みながら、どんどん下にスクロールして読み進めるようにできています。所々にオリジナルキャラクターが登場して解説してくれます。

［入門］メニューのトップ（左）。キャラクターが時々登場（中央）。適宜シンプルな図が入り、説明は明快（右）

　プログラムの編集画面と実行結果の出力画面が、［▶］ボタンと［■］ボタンで、切り替わるので、省スペースで無理なく確認ができます。最初に扱うプログラムは、ほんの１行。x＝140、y＝150の位置に点を描画するために「point(140, 150);」と記述します。このようにコードが簡単なうちに、全半角、スペース、大文字・小文字などのよくあるミスや、セミコロンなど頻出の記号などについて、気をつけるべき点をひとつずつ順に説明してくれます。テキストでコードを打つには、絶対に避けて通れないことなので、最初に押さえておくと安心です。

デモとして表示されているコード（左）と実行した出力結果（中央）。［▶］と［■］ボタンで表示を切り替えられる。よくあるコードミスの説明（右）

　他にも、色の扱いや、変数の概念、算数など、様々なメニュー別に、知識を積み上げて学べるようにできています。無料登録の場合、限られたメニューの1つ目のコンテンツしか見られないので、どんな手法の教材なのかを確認して気に入ったら、有料版でしっかり知識をつけると良いでしょう。

変数の説明（左）や算数の説明（中央）なども図を使って解説。コードが長くなると狭い範囲でスクロールするので若干全体を把握しづらくなりそうだ（右）

“つくる”編の作例を触ってみる

　「easel」のトップから［つくる］メニューに進むと、ビジュアルアートとして完成度の高い作例を開くことができます。無料登録では4作品開くことができます。左上の作例を選んで、［▶］ボタンと［■］ボタンでコード編集と実行結果の出力を切り替えてみましょう。

［作る］メニューのトップ（左）。作例のコード編集画面。少し長くて複雑（中央）。実行結果の出力画面。四角形がサイズ、色を変えて複数描画されている。左右に中心が揺らいで動き続けている（右）

　複雑なビジュアル表現のコードを初心者が読み解くのは困難ですが、コード編集で、わかりそうな数値を変更してみて、出力結果がどう変化するかをチェックして楽しんでみると良いでしょう。

色の部分のコードを書き換えて（下図左）、色が変更されたところ（下図中央）。さらに描画される四角形の数を減らした（下図右）

描画される四角形の数を増やすとなだらかに見える（下図左）。描画する形を四角から円に変更した（下図中央）。円にして数を増やし、境界線をなくして、色を変更した（下図右）

　作例を開いてコードを全て消して、自分が学んだコードを入力して、実行結果を見ることに使っても構わないでしょう。もう一度作例を開きなおせば、元の作例コードに戻ります。

　Processingはプログラムの実行結果が視覚的にわかりやすいので、自分の書いたコードのアウトプットを把握しやすいところが利点です。テキストで書くプログラミングに初めて挑戦する場合、アウトプットのわかりやすさは理解のしやすさにつながるでしょう。9才以上が推奨年齢とされていますが、小学生の場合、まずはパソコンで親が一緒に取り組んで、子どもが自分で説明を読み進め、コードの書き換えができることを確認できるまでサポートしてあげると良いと思います。