Monacaとp5.jsを利用した プログラミング学習

2021年3月26日（土）開催のプログラミング教育実践事例研究会 2022春 ～EdTech導入補助金によるMonaca Education活用事例～での千葉県立沼南高等学校 沼崎拓也先生の発表資料です。

Transcript

1. Monacaとp5.jsを利用した プログラミング学習 千葉県立沼南高等学校 情報科 沼崎 拓也
2. 本校でのプログラミング教育 • EdTech導入補助金で Monacaを導入 • 3年「情報の科学」 × 2クラス • 1年「社会と情報」 × 5クラス
3. 3年「情報の科学」 • 1年時に「社会と情報」を履修済 • タイピングなどの基本操作はできる • プログラミング入門として、1学期にScratchを扱った
4. Scratchでの内容 • 基本的なブロックの使い方の紹介 • 出力（「～」と言う），文字列の連結，繰り返し，条件分岐 • 変数の説明 • 変数名は「ｘ」や「答え」などアルファベットも日本語も利用 • 取り上げる要素について例題と練習問題を用意 • 学習範囲を終えたら簡単な作品制作
5. 完成作品の例 • ミニゲーム • 野球の投手から動いてくるボールをタイミングよく打つと跳ね返る • ショートストーリーの紙芝居 • キャラクターが対話、場面に応じてコスチューム変化 • 算数問題（足し算）ドリル • 一桁の足し算をランダムで出題、正解なら得点が増え 制限時間内での得点数を競う • その他：「おみくじの改造版」や「多角形の作図の応用」など
6. 「情報の科学」でのMonacaの授業 • テキスト「Monacaで学ぶはじめてのプログラミング ～モバイルアプリ入門編〜」を使用 • 教師機の画面配信でプロジェクトの準備など指示 • 完成後の動きを見せてから、テキストのコードを入力させる • 教員2名で机間巡視し、動作しない生徒をフォロー
7. 結果として • あまり機能せず… • 動かない生徒が多数 • 教員が生徒の画面とテキストを"にらめっこ"で ミス探し
8. 本校生徒の反応 • いわゆる 「typo」 や 「転記ミス」 • 英単語の知識やライティング経験が少なく、ミスに気付きにくい • 「予約語」や、「変数名」など短い単語でも起きる • 「転記ミス」 とは、行の途中で他の行と混乱する、など • 文字の種類による文法ミス • 日本語混入や数字・記号の全角、あとは全角スペース • 英字の大文字・小文字
9. JavaScriptでの気づき • タイピング速度とは異なる点でのつまずきが見られた • IDEの機能を利用しても視認性の向上は予約語の色づけ程 度 • 「どの時点まで書けば未完成でも動くか」が分かりにくい • デバッグ手法が確立されない…
10. 授業改善に向けて • 学習に困難を抱えている生徒における「写経」型学習では、 事前指導や補足指導が重要 • タイピングするコード量を減らす題材にできないか検討 Monacaで使用できる言語のうち、短いコードで記述可能な p5.js（Processing）に着目
11. p5.jsとは • もともとはJavaベースだったProcessingという言語を JavaScript上に移植したJSライブラリ • JSのライブラリが読み込める環境ならば動く Processingは「電子アートとビジュアルデザインのためのプ ログラミング言語であり、統合開発環境（IDE）」
12. Processing
13. p5.js（Processing）の特徴 • メディアアート指向のため、描画などに特化した関数がある • Scratchのように（x,y）の2次元座標系での指示が基本 • 関数とパラメータ引数のみで動作できる命令が多い • アニメーションなどの動的なコンテンツも作りやすい
14. Monaca＆p5.jsの具体例
15. p5.jsを動かすまでの流れ 1. 新しいプロジェクトを作る 2. テンプレートでProcessing（p5.js）を選択 3. 用意されている「sketch.js」というファイルに記述する
16. p5.jsを動かすまでの流れ 4. あらかじめ用意された関数内にコードを書く 5. 保存をして、プレビューで動作を確認 「コードを書いて」「動作確認」のサイクルを短くできる （プロトタイピング 開発に近い） コードのミスに気付きやすい
17. p5.jsプログラムの基本構造 function setup(){ 略 } • プログラム実行時に一度だけ実行される関数 function draw(){ 略 } • フレームレート60fpsで繰り返して実行される関数 • 変数を活用すると色々なことが実現できる
18. コードの例
19. 四角形の描画 始点（50,50）で高さ100幅100の四角
20. 円の描画 中心（100,100）で高さ100幅100の円
21. 色の塗り方
22. 課題の例 • 移動する図形で簡単なアニメーションをつくろう • ボタンやイベントの概念を理解しよう • 自動販売機を完成させよう
23. 作品例（教員）
24. 変数とアニメーション • 繰り返しの命令を扱ったあと、Processingの基本構造の draw関数の説明
25. p5.jsプログラムの基本構造 • function setup(){ 略 } プログラム実行時に一度だけ実行される • function draw(){ 略 } フレームレート60fpsで繰り返して実行される 変数を組み合わせると活用が広がる
26. 図形の座標にグローバル変数
27. 課題の例 • 移動する図形で簡単なアニメーションをつくろう
28. 条件分岐とアニメーション
29. 課題の例 • ボタンやイベントの概念を理解しよう
30. ボタンやイベントの概念
31. 課題の例 • 自動販売機を完成させよう
32. 自動販売機の完成
33. 気づきの例 【例】 elipse( 50, 50, 100, 100); → 円が出てこない。何かが間違っている。 → ellipse のスペルが違っていた 【例】 ellipse( x, y, 100, 100); → 円が動かない。 → xの値がインクリメントされていない
34. 注意点 • JavaScriptとは違う言語なので、Monacaデバッガーが 働く場所が限定される • 存在しない変数の参照や，変数の値などはチェック可能。 • Processing由来の命令のスペルチェックなどは不可能
35. 評価と生徒の感想 • 今回は、「写経」型のように用意されたコードを完成させるも のだった • その中で 「完成レベル」 「追加で工夫した点」 で評価基準を作成し、評価とした
36. 生徒の工夫の例 • 教員が簡易的に済ませた処理の修正 • 投入金額が1000円を超えると桁がずれる → 表示する処理を確認して十分な桁を取る • 自販機の配色を変更 → 用意したテンプレートの自販機の色から好きな配色へと変更
37. 生徒の評価・感想 学年末の振り返り 面白かった単元としてプログラミングを回答した生徒 102名中 61名 （59％） 中途半端な内容で終わったが生徒の反応は良かった
38. まとめ
39. 情報Ⅰの教科書見本より 取り上げられているプログラミング言語の分類 • テキスト型 • VBA • Python • JavaScript • ビジュアル型 • Scratch
40. 情報Ⅰを迎えるにあたって • 中学校までにビジュアル型プログラミング言語を経験してく る生徒が増える • テキスト型プログラミングとのギャップが現れる生徒も 一定数いると想定 • スマホアプリという枠組みや、動くプログラミングでそのギャッ プを補っていきたい
41. Monacaの可能性 • 各自のスマートフォンで動かしていくことで授業へのモチ ベーションが上がる期待 • パソコンで、文字だけの出力のプログラミングではなく、見ら れる"作品"を作れる環境 • アプリの見た目から作るプロトタイピング開発の可能性
42. 参考資料 『初心者でも「コード」が書ける！ゲーム作りで学ぶ はじめてのプログラミング』 うえはら著 竹林暁監修（技術評論社） 『p5.jsプログラミングガイド改訂版』 松田晃一 著（カットシステム）