見てマネしてやってみる！

動画で学ぶ
プログラミング

ファジーパンツたちと一緒に
楽しく体験していこう！

サイレントリアルって何？

サイレントリアルは「サイレント＋チュートリアル」。言葉や音声での説明を排除し、“模写”を促すことでプログラミングを体験してもらうためのチュートリアルビデオです。

プログラミングで最も大切なことは「まずは体験してみること」です。ほんの少し文字や数字でコードを書くだけで図形を描いたり、キャラクターを動かしたりすることができますが、「プログラミング学習」ではどうしても”変数”や”関数”といった難しい言葉から始めてしまいがちです。ワクワク体験をする前に挫折するのはこれが原因です。

サイレントリアルでは一度に書くコードは数行にとどめ、それでも図形が動いたり、ジャンプしたりと、まずは「プログラミングをすると何が起こるのか」を体で理解することからスタートします。「説明しないチュートリアル」― それがサイレントリアルです。

キャラクター紹介

サイレントリアルはこう使う！

実際の画面はこんな感じ

まずは見る！

まずはどんなプログラミングコードをどこに書くかをじっくり観察します。
これが「見るモード」です。

まねして書く！

次はビデオを一時停止して、新しく書かれた数行のコードを画面を見ながら同じように打ち込んでいきます。
これが「やるモード」。

実行してみる！

プログラミングコードが書けたら今度は実行。まずは実行してどうなるかを画面で確認します。
これが「実行モード」です。

見る・まねて書く・実行をくりかえします

言葉や音声での説明はありません。「見る」「まねて書く」「実行してみる」この３ステップをどんな子供でも初めてのコーディングでも楽しく挑戦できるように、作業を促すリズミカルな効果音と楽しいキャラクターたちがサポートします。

ゲームとアートプログラミングの２本

ジャンプゲームを作ろう！

まずは簡単な図形を描くところからスタートし、図形を動かしたり、キー操作に反応させたりと、ゲームを作るための基礎プログラミングを体験していきます。

❶ 図形を描こう
❷ 円を動かそう
❸ 円が跳ね返る
❹ 円をジャンプさせよう
❺ キャラを表示させよう
❻ 衝突でゲームオーバー

アイコンをデザインしよう！

自分だけのオリジナルアイコンを作ります。文字や図形を描画するなかで、立体的に見せるためのちょっとした工夫や、影を付けることで本格的なグラフィックス作品に仕上げます。

❶ 図形を描く順番
❷ ベースアイコンを作る
❸ 影をつける（１）
❹ 影をつける（２）
❺ 好きな色にする
❻ グラデーション

なぜ“非言語”のチュートリアル？

“模写”だけでは子供はわからない？

小中学生がプログラミングを始めるにあたって最も重要なのは「コードを書くのが楽しい」と思えることです。そのためにも、図形に色が付いたり、移動したり、形が変わったり、音がでたりなど“結果”に触れさせてあげることです。それが楽しいと思えたら子供にとって「コードの意味」は二の次。わからなくても、とにかくコーディングで何かを達成させることができるということを理解するのがまずは大切なのです。

テキストコーディングは小学生には無理？

たしかに子供にとってブロックをマウス操作で移動させるよりもテキスト入力をすることは難しいことです。大文字小文字の違いや、見慣れない記号などスタート時点ではある程度のサポートが必要です。しかし、一度慣れてしまうと戸惑いはすぐに消え、タイプ入力作業もスムーズに進めることができるようになります。テキストコーディングでは run, set, open, get など重要な英単語が頻出するので、次第に英語の意味も頭に入ってくるという効果も期待できます。最初から「テキストコーディングはダメ」と考える必要はありません。

使用するプログラミングツール

p5.js Web エディタ

ブラウザ内でプログラミングをするのでインストール不要

プログラミングの最初の“壁”は各種ツールなどをインストールしたり設定しないといけないことです。サイレントリアルではいつも使っているブラウザの中でJavaScriptというプログラミング言語が使える p5.js Web Editor を使います。このため、https://editor.p5js.org のサイトを開けばすぐにコーディングを始めることができます。

p5.js Web エディタ▶ https://editor.p5js.org

一般社団法人キッズコードクラブ

見てマネしてやってみる！

動画で学ぶ
プログラミング

サイレントリアルって何？

キャラクター紹介

サイレントリアルはこう使う！