Instractor’s Guide - Silentorial

インストラクターズガイド

学習に必要なもの

学習者およびインストラクターがサイレントリアルの利用に必要なものは以下の通りです。

パソコン（Windows PC, Mac, Chromebookなど）
ブラウザ（すでに搭載されているChrome, Edge, Safarなど）
p5.js エディタのアカウントを作るためのメールアドレス

ビデオ再生もプログラミング作業もすべてブラウザ内で実行しますので特別なアプリなどは不要です。パソコンに大きな負荷をかけるような操作はありませんので、通常にウェブサイトの閲覧ができればメモリやハードディスクの容量などは問いません。

p5.js エディタはログイン無しでもプログラミングは可能ですが、作った作品の保存や共有ができません。作品を保存しておくためにはアカウント作成（無料）が必要で、その際にメールアドレスが必要となります。

学習者に必要なスキル

ブラウザを使ってアドレス欄にURLをタイプし、ウェブページの閲覧ができる
半角英数字をタイプ入力できる

テキストコーディングでは半角英数字や各種記号（カッコや＝、＋など）を入力する作業がほとんどです。タイプ入力の練習方法はFAQ（よく聞かれる質問）をご覧ください。

インストラクターに必要なスキル

サイレントリアルを利用してプログラミング体験・学習をする場合、二つのシナリオが考えられ、それぞれにおいて必要なスキルを説明します。

シナリオ１：プログラミング体験をメインに進める

🦉ブラウザの利用など基本的なパソコンの操作

サイレントリアルは子どもが自走してプログラミング体験ができる内容となっていますので、インストラクターとしての最低限のサポートはブラウザを使ってきちんとビデオの再生とコード入力ができるようにすることです。具体的には「使い方」ページで説明したサイレントリアルを使ったコーディング作業をご覧ください。

ただ、事前知識よりも大切なのは、まずはご自身がサイレントリアルでコーディング作業をしてみることです。実際に手を動かして書くうちにどこが理解できてどこが不明瞭かがわかります。それに応じてコーディングの意味などを調べていけば、それが最良の準備となる一方で、インストラクター自身のプログラミング体験・学習ともなります。子どもたちに紹介する前にひと通りサイレントリアルをやってみることを強くおすすめします。

シナリオ２：プログラミングを探求的に理解していく

🦉基礎的なプログラミング経験

JavaやPython, C言語などの汎用的なプログラミング言語を使ってコーディング作業をしたことがある
ウェブサイト制作で簡単なHTMLやCSS、JavaScriptを書いたことがある

下記で解説しているように、プログラミングについてさらに理解を深めてもらう場合には最低限のプログラミング経験が必要です。どのプログラミング言語でも１つ経験があれば別の言語を理解するのは簡単にできます。サイレントリアルで使われているプログラミング言語はJavaScript（ジャバスクリプト）です。プログラミング経験のない方は例えば次のサイトなどを参考に基礎知識の準備ができます。

JavaScript入門：入門編 – JavaScript | MDN (mozilla.org)

プログラム経験のある方は p5.js で使用される特有のコードのリファレンスなどをご覧ください。

p5.js リファレンス（英語）：reference | p5.js (p5js.org)

※ 日本語に翻訳されたサイトもありますので、「p5.js 日本語リファレンス」のように検索して適当なサイトをお探しください。

各チャプターのポイント解説

パート１ジャンプゲーム

✅セクション１：Draw （描く）

まずは円や三角などの図形を描くコードを入力していきます。図形は基本的に「位置」と「大きさ」を指定します。特に位置は横位置を示すX軸、縦位置を示すの２つがありますが、様々な位置に図形を描いていくことでそれぞれの数字が何を意味するかを考えてもらうのが狙いです。

✅セクション２：Move（動かす）

描いた図形をプログラムで動かしてみます。まず円の横の位置をXという「入れ物」に入れます（プログラミングでは「変数」という概念）。入れ物の数字を x += 10 というコードで10ずつずらしていくとアニメの‟動き”を表現できます。何度も10の足し算が行われるのは、drawというfunction（ファンクション＝関数）が1秒間に30回実行されているためです。こうした連続動作の説明はあえてする必要はありません。「数字を変化させることで位置がずれていく」という仕組みが理解できれば十分です。

✅セクション３：Bounce（跳ね返る）

動いた円が端で跳ね返る動作をプログラミングします。ここで触れる概念は「条件文」です。もし円の位置が端を超えていったら足し算の‟方向”を逆にすると跳ね返るという仕組みです。ここで理解してほしいのが「もし～したら～」というIF文の仕組みです。アニメで「もし雨が降ったら傘をさす」などというストーリーをもとに考えてもらいます。右端から跳ね返ると今度は左端でも同じチェックをしないといけません。これを || という記号を使って、「もし右端を超えるか、左端を超えるかしたら」というロジックにしています。

✅セクション４：Jump（ジャンプ）

これまでのロジックを利用すると「ジャンプ」が表現できるようになります。まずジャンプは縦の動きなのでＸではなくＹの数字を変えていきます。ところがこれだけだと上に突き抜けてしまいます。そこで、足し算の数字そのものをＳ（スピード）という入れ物に入れ、それを引き算で少なくしていくと移動のスピードがだんだん小さくなり、途中から逆にマイナスになってしまいます。これが「重力」を表現する方法です。さらに、スペースキーを押すとジャンプする仕組みもIF文で作成が可能です。ここでユーザーとプログラムのインタラクションが感じられてゲームらしさが出てくるはずです。

✅セクション５：Fireball（火の玉）

さらにゲームらしさを高めていきます。まずは円をキャラクターの絵にしますが、画像の用意やアップロードなどの手順が複雑なため、すでにベースコードに組み込んだプロジェクトを利用します。左端のファイルリストから次の追加ファイルを確認してください。

img フォルダ：ゼロ君のキャラと火の玉の画像ファイル
MagicWand.js：ゼロ君と火の玉の class が入ったJavaScriptファイル

このベースコードを利用するため、指定されたリンクからp5.js プロジェクトを開き、それをDuplicate（複製）で自分のアカウントにコピーするところからスタートします。Chara という「クラス」から zero という「ゼロ君」のキャラを作成し、そこから show という関数を呼び出すだけでキャラが現れます。同様に「敵」の fireball もクラスを使って表示させます。ゲーム感を出すことを優先していますが、探求的に外部ファイルを見て、どうして「クラス」を利用するとキャラの動きが簡単に表現できるか考えてもよいでしょう。

✅セクション６：Hit（当たる）

最後に、ゼロ君が火の玉に触れたらゲームオーバーという仕組みを作ります。ここもベースプログラムからスタートします。その中には二つの物体の「当たり判定」をする collideRectRect（四角と四角が衝突した）という関数を外部ライブラリから利用しています。この関数を使う仕組みは index.html ファイルにある、”https://unpkg.com/p5.collide2d” という外部ライブラリを参照するところにあります。この参照があるとコード内で当たり判定のコードが簡単に書くことができます。

パート２アイコンデザイン

✅セクション１：Order（順番）

draw関数の中で図形を描いていく際にその「順番」が大切になります。図形を描くと、その前のコードで書いた図解よりも「前」に上書きされます。複数の円が重なっている様子からこの「順番」に気づいてもらいます。さらに文字（テキスト）を書く時にも、大きさや位置などをコードで指定する必要がある点も理解してもらいます。なお、最初に書いたnoLoop()；という行は draw 関数のループを防止するためのコードです。アニメと違って静的な絵を描く場合はループは不要ですので、必ずこの一行を setup 関数に入れておきます。

✅セクション２：Icon（アイコン）

ベースとなるシンプルなアイコンを用意します。キャンバスを800に広げ、円の中に図形やテキストを入れてデザインしていきます。サンプルでは図形はハートですがベースコードには星や多角形など別の形を描くコードが入っています。ここも必ずDuplicate（複製）でベースコードからコーディングを始めてください。そして、ハートが描けたら自分の好きな形やテキストに変更してオリジナル感を出してみてください。

✅セクション３：Shadow（影）

最も簡単な影の表現を理解します。同じテキストを薄い色で用意し、それをちょっとだけずらして後ろに描くというテクニックです。図形の描画でどうやって「影」のようなものを表現するかを理解してもらいます。

✅セクション４：Cool Shadow（カッコいい影）

ここでは p5.js に搭載された「ぼかす」機能などを利用して本格的な影を付けます。ここで初めて自分で「関数」を作ります。コードがちょっと長いですが、一行一行何をしているか確認しながらコードを書いていきますので、どうやって影ができているかが理解できるはずです。そして関数を作ることで shadow というコードを書くだけで影が付けられるという「関数の利点」も理解します。

✅セクション５：Color（色）

これまで red や blue など色は言葉で表現してきましたが、微妙な色合いを使うには数値で色を表現する方法を理解しないといけません。ここではRGBという３つの数字を組み合わせて色を決める方法を理解してもらいます。

✅セクション６：Gradation （グラデーション）

最後にアイコンに立体感を出すために２色の変遷であるグラデーションを体験します。ここでもグラデーションの関数は外部ファイルで用意されていますので必ずDuplicateでベースコードを利用してください。setGradient で２つの色を指定すると色のトランジションが表現できます。自分はどの色の組み合わせがよいか、いろいろと試してみるとよいでしょう。

探求的なプログラミング学習の進め方

学習を始めるにあたって

サイレントリアルはプログラミング（テキストコーディング）によってどのようなことができるのかを「実体験」から理解するのが主な目的です。あくまでビデオでのコーディングをまねて実行するのを繰り返すだけで作業は完了します。ただし、そこから子どもたちに期待することがいくつかあります。

こうした自発的探究心から徐々にテキストコーディングに慣れていくことが期待されますので、ただ単にビデオでのサンプルを書いて終わるのではなく、「コードを自分でカスタマイズする」ことを積極的に促してください。そこでうまくいかなかったり（バグになる）、思った通りに動かなくでも、その行為自体がプログラミングをさらに理解していく重要なステップです。

カスタマイズのポイントは「数値を大きく変えてみる」

プログラミングでは全般にわたって様々な数値を指定します。数値は例えば図形の位置や大きさ、動くスピードや角度などを反映しますので、その数値を変更することで「何を指定しているか」がよくわかります。その際には「なるべく大きく変更する」ことがコツです。例えば円を描画する次のコードをご覧ください。

circle (200, 100, 100);

この場合、最初の200というのは描く円の横の位置です。これを変更すると円が左右に移動します。その際に 200 を 210などに変更するとちょっとだけ右にずれるだけなので違いがよくわかりません。そのような場合は思い切って300などに変更します。変更が大きいほど違いがわかりやすいので、数字などをカスタマイズする場合は思い切った変更をすることをおすすめします。

コードの意味は知りたい時にだけ説明する

特に小学生の場合、数学の意味などはまだ理解が浅いため、例えば次のコードの意味をそのまま説明して誰でも理解できるわけではありません。

x += 10;

コーディングを進めるうちに、自分なりに考えた動作やデザインにしてみたいという子が出てきます。例えば、Part 1 – 1 でクマの顔を描いたところで、「クマの鼻に青い色をつけたい」と思ったとします。もちろんインストラクターとしてどうするかを教えるのは全く問題ありませんが、子どもたちが自走できるためには「自分で調べる力」も必要です。まずは検索エンジンを使ってやり方を探ぐるようにしてみてください。

通常の検索エンジンで構いませんが、生成AIであるChat GPTの機能を活用すると直接参考となるコードを見せてくれるので、検索結果を細かく精査する必要がないので便利です。例えばMicrosoft Bing検索エンジン（https://bing.com）を使えばChat GPTを利用した検索がすぐに無料でできます。例えば次のように、プログラミングでやりたいことを直接書いて検索します。検索ワードの冒頭に p5.js を入れることで、p5.js エディタで使えるコードが出てきます。

「p5.js 青い三角を描くコードを見せて」

すると次のようなコードが表示されます。

※一部のみ掲載
function draw() {
background(220);
fill(0, 0, 255);
stroke(0, 0, 255);
triangle(30, 75, 58, 20, 86, 75);
}

これを見ると fill を使うと色が付けられるということがわかります。

もちろん、常に簡単な検索結果が表示されるわけではないので、検索結果についてはインストラクターのサポートが必要となる場合もあります。ただ、「プログラミングを検索する」という行為そのものは早い段階でやっていくとこがプログラミングの自習力を高める上でとても大切なことです。今後はAIツールを使う力が求められる場面が増えていくことを考えると、プログラミングコードの検索で積極的にChat GPTなどのAIツールを活用していくことをおすすめします。

FAQ：よく聞かれる質問

サイレントリアルの目的は、プログラミングとはどんなことをするもので、コードを書くことでどんなことができるのか、その醍醐味を理解してもらうことです。サイレントリアルでやることは「プログラミングコードの模写」であって、プログラミング未経験者であれば年齢にかかわらず学べる内容となっています。

検索するといくつもタイピング練習ができるサイトが見つかりますが、プログラミングでは半角英数字のほか記号の入力も必要となります。半角英数字や各種記号の入力練習ができるサイトは以下のようなものがありますので参考にしてみてください。

▼実際のコードを入力練習するサイト
https://www.code-drill.com/chars/typing/type_javascrip

▼特殊文字の入力練習が出来るサイト
https://www.typingclub.com/sportal/program-3/3064.play

タイピングができるかどうか「タイピングゲーム」に挑戦するのもよいかもしれません。Kids Code Clubで提供しているプログラミングレシピ（チュートリアル）で、タイプ入力をゲームアプリで練習するものがありますので是非ご利用ください。

「テキストコーディングに挑戦！ ❶ まずはタイピングできるようになろう！」

書いたプログラムを実行して右に何も出てこなかったら、コード入力欄の下にあるエラーを見ます。残念ながらエラーはすべて英語ですので子どもはおろかインストラクターも理解できない場合があると思います。ただし、サイレントリアルの画面には正しいコードが表示されているので注意深く何を入力し間違えたかチェックしてください。必ず違いに気が付くはずです。典型的なミスは次の通りです。

大文字と小文字の違い
半角と全角の違い
余計な文字やスペースが入っている
．（ピリオド）や；（セミコロン）などの記号が異なるか抜けている

特に大文字と小文字の違いには十分注意が必要です。プログラミングではCatとcatは全く異なるデータとして認識されます。

サイレントリアルの一番の狙いは子どもがプログラミングそのものにワクワク感を覚え、興味を持ってもらうことです。さらにプログラミングを学習していく方法は様々ですが、当面はp5.js エディタでJavaScriptでのプログラミングを続けることをおすすめします。

p5.js はもともとデザイナーが簡単にプログラミングでアート作品を作れるように開発された仕組みです。ゲームはもちろん綺麗なアート作品も簡単にできますので子どもでも十分楽しみながらプログラミングの学習ができるはずです。

検索エンジンで「p5.js javascript 学習」と検索すると様々なブログ記事やビデオコンテンツ、あるいはオンラインの学習マテリアルなどを見つけることができます。必ずしも子供が簡単に消化できる内容ばかりではありませんが、小学校高学年以上であればサンプルコードを見ながらサイレントリアルと同様、コードをまねて書いていくことで自習するのは十分に可能です。