データサイエンスの未来へ向けた一歩を踏み出そう

自分のスマホで動作するアプリ開発の授業同志社中学校・高等学校情報科鈴木潤 [email protected] 東京書籍×アシアル情報教育研究所情報科オンラインセミナー 2022/2/26

今日お話ししたいこと • 高３自由選択「情報特論」でのスマホアプリ開発 – １年間の授業の流れと、生徒作品の制作の様子 • 情報Ⅰでのプログラミングに向けて – HTML・CSS・JavaScriptでつまづきやすいところ –
これまでの授業で気をつけたところ – 2022年度の情報Ⅰ実施に向けて

自己紹介鈴木潤（すずきじゅん） [email protected] 2005年3月京都教育大学教育学部情報教育専攻卒業 2005年4月同志社高等学校に情報科教諭として入社
2010年同志社中学校・高等学校に（統合）今年は入社して17年目。生徒部主任（生徒会、クラブ、学校行事を管轄）学習指導委員（カリキュラムに関すること）同志社大学理工学部で「情報と職業」を担当

同志社中学校・高等学校 4 京都駅→ 学校→ 妙法大大地下鉄で２０分
京都市左京区岩倉に同志社中高があります同志社大学二条城→ 御所→ キリスト教主義学校自由な校風

同志社中学校・高等学校創立者新島襄全日制普通科１クラス４５名１学年８クラス３６０名１学年８クラス
３６０名１学年８クラス３６０名高校で１０８０名高等学校部分他中学（受験）で80名同志社中学から280名コース制がない８クラスが同じ条件のクラス替え

他大学への進学も一定数います 6 同志社大学同志社女子大学への推薦他大学を受験神学部文学部社会学部法学部経済学部
商学部政策学部グローバル地域文化学部文化情報学部理工学部生命医科学部スポーツ健康科学部心理学部グローバル・コミュニケーション学部学芸学部現代社会学部薬学部表象文化学部生活科学部看護学部同志社大学同志社女子大学例年 300～320名程度

今日はここのお話をします

ICT環境メディアセンター「知創館」 Windows ノートPC 50台 Windows 貸出用ノートPC 75台デスクトップPC 20台
図書館開架部分情報教室 HR教室 iPad BYAD 2017年度高１より一人１台

2014年度「情報特論」新設高3：2単位１学期 ×サーバーサイドでのアプリ ×開発環境の構築（アップロード？Apache？） ◦SQLは比較的うまくいく生徒も楽しんでいたロボット教材で物理的なプログラミング
×大失敗…うまくいかない ×ロボットがうまく完成しない ×シミュレータ通り動かない（当然） →挫折感がいっぱい２学期

2014年度の情報特論２学期の中間試験あたり（１０月中旬）で方向転換 HTML・CSS （１年で既習） JavaScript スマホのアプリつくってみたいほぼ１ヶ月半でアプリ制作

Monacaの良いところ環境設定がいらない家でも続きが出来る自分のスマホで動く

12 情報特論の１年間の流れ

情報特論の授業の流れ（１学期）１学期前半（約１０回） #01 ガイダンス・Monacaアクティベーション #02 HTML・CSSのおさらい(ID・クラスの違い) #03 CSSボックスモデル（画面デザイン） #04 JavaScriptの変数・条件分岐
#05 演算子・繰り返し処理・配列 #06 関数 #07・08 実際のアプリ作成（時計） #09 イベント・DOM #10 CSSとDOMの組合せ見えるもの動くものを先に扱う条件分岐や繰り返し処理は慣れてから

毎回の授業の流れ（１学期）１学期の各回の授業・前回の質問のフィードバック・プリントで作業をすすめて動作確認＆机間巡視・おさらいの課題を最後に取り組む（できる生徒は半分くらい）・作業の進捗や質問をフォームに入力 14

毎回の授業の流れ（１学期）スライドで作業を指示（ファイル共有もしている）ソース以外の解説をプリントで配布サンプルソースコードに指示のための連番の作業番号を付与

16 自作時計をつくる数字画像は自分で描く

17 評価はペーパーテストでソース→実行結果実行結果→ソース

情報特論の授業の流れ（２学期）２学期構想プロトタイプを作る練り直しコーディングあきらめる部分を決断完成
集中作成期間中間試験あたり期末試験あたり期末試験終了後終業式 18 ９月１０月１１月１２月

構想作品制作のとりかかりノベル系ゲームストーリー・分岐・パラメータの変化イベントを考えるクイズ ①基本ルールをつくり、プロトタイプを作成 ②クイズの問題量を増やすアクション系ゲーム ①Canvasでいくか、CSSでいくかを検討 ②プロトタイプをつくる（ブロック崩しを参考）
タイマー・タイミングゲームプロトタイプをつくる作品制作のとりかかりデータベース（共通） ①記録する・呼び出しするデータ形式・データ構造を考えるデータベース（記録） ①記録するデータ形式にあわせた入力画面をつくる ②読み込んだデータ形式を表示する出力画面をつくるデータベース（検索） ①どのような条件で調べるか検索条件入力画面をつくる ②絞り込んだデータを表示する出力画面をつくるデータベース（検索・Webサイト）・あらかじめ登録する情報を収集してデータを構造化する。

毎回の授業の流れ（２学期後半）２学期の各回の授業・前回の質問のフィードバック・各自で課題に取り組む＆デバッグ受講生 30～40名／講座（机間巡視は一人１分でしか…）・作業の進捗や質問をフォームに入力 20
https://ict-enews.net/2020/01/08monaca/

21 プロトタイプを作る・データベースアプリ・Canvasを使ったアニメーション・ブロック崩し・ぷよぷよプログラミングを２学期前半で作ってみる。コーディング

あきらめる部分を決断集中作成期間 11月中旬

生徒作品完成例 http://doshisha.click/joutoku/sample.html 23 完成

くそゲーでも作るのは大変電卓は簡単？→結構難しいぞ！いつもやってるゲーム →絵だけ豪華だけど？？？自分で作れなくてもどうやって作るかがわかれば発注できる！！ 24

2022年度から情報Ⅰではどうしよう… HTML・CSS 写経（2時間くらい）自分で作ってみる（そこそこ自力でできる）したいこと≒できることネットで調べたり JavaScript
写経（2時間くらい？） Web スマホアプリ何が作れるかわからない何をしていいかわからないしたいこと≠できることネットで調べてもいろいろあって？？

HTML・CSS・JavaScript 共通の難しさ • 教科書・テキストのフォント • 全角・半角の混在（日本語があるから） • スペル間違い • 自力でのデバッグの困難さ

教科書・テキストのフォントそのまま Wordにコピペすると＜＞は全角？半角？ダブルクォートが？？あれ？

全角・半角の混在／スペル間違い <> かっこ？正解はこちらスペースが全角 ◦title ◦1
×エルこれが半角 <> 間違い ◦body デバッグが大変

生徒からの質問の例この文書を見ていただきたいのですが、 ①画像が現れない ②#navigaterの左端が緑色が出てきてしまう理由を教えてください

教科書・プリント・開発環境で工夫を・シンタックスハイライト（自動色つけ）がある環境・等幅フォントを用いる半分くらいは、自力で見つけられる・フォントの指定 Consolas → i I 1
l o O 0 Monacakomi → i I 1 l o O 0 https://anko.education/tool/monacakomi Windows Vista以降標準

教科書・プリント・開発環境で工夫をファイル名拡張子を表示させるブラウザで表示右クリックメモ帳で編集保存・更新

Monacaを使うと、だいぶ楽ちんです

JavaScript特有の難しさ JavaScriptで良いのか？ ×同じ動きでも書き方がいろいろ（流行とか） 33 • Vanilla(バニラ) JavaScript • 90年代後半のJavaScript •
ES5…2009年公開 • ES2015(ES6)…2011年公開 • React • Angular • Vue • jQuery • TypeScript //Vanilla document.getElementById("a").innerText="ほげほげ"; //jQuery $("#a").text("ほげほげ");

JavaScriptで説明が難しい例① camelCase → 大文字・小文字の区別がある <html> <head> <script> window.onload = function(){
document.getElementById("a").innerText="ほげほげ"; } </script> </head> <body> <div id="a"></div> </body> </html> 34

JavaScriptで説明が難しい例② 変数のスコープ、即時関数・無名関数がわかりにくい var a = "taro"; if(true){ var a =
"hanako"; } document.write(a); //hanako var a = "sanshiro"; //再定義可 document.write(a); //sanshiro setTimeout(function(){alert("Hello");},1000) 35 let b = "taro"; if(true){ let b = "hanako"; } document.write(b); //taro let b = "sanshiro"; //error! document.write(b);

JavaScriptで説明が難しい例③ ・省略した書き方、新しい書き方がいろいろ //従来の書き方 function tasu1(a,b){ return a+b; } //従来の書き方（無名関数） var
tasu2 = function(a,b) return a+b; } //（ES6以降）アロー関数 const tasu3 = (a,b) => { return a+b; } //アロー関数（単一式） const tasu14 = (a,b) => a+b; //従来の書き方 let n = '鈴木'; document.write('私は'+n+'です'); //テンプレート文字列 let m = '鈴木'; document.write(`私は${m}です`); Webから調べた情報で自力で作ろうとするととたんに難しくなる

2022年度情報Ⅰに向けて逐次処理条件分岐繰り返し if if～else if～else if～else switch for
while do～while 変数配列演算子算術～比較～論理～データ型 null スコープ単項～代入～ for～in 文字列結合配列多次元配列連想配列関数引数戻り値無名関数即時関数配列の操作再帰関数組み込みオブジェクト Math Date 正規表現 AJAX DOM イベント処理 Timer 扱う内容は精査して、１年生情報Ⅰへ

・プログラミング部分は→たぶんスムーズ（実際に動かして試す方が理解ははやい）≒共通テスト対策・問題解決やモデル化とシミュレーションと組み合わせると… ひっかかる（だろう）ポイントタイプの遅さスペリング漢字変換環境構築繰り返し処理！例：ぷよぷよプログラミング
落ちゲー → 再帰処理が必要（実は難しい）変数や関数を自分で定義できるデバッグが自力でできる作りたいもの作るべきものが明確にする課題設定作れるものを自覚するめちゃ大変

2022年度情報Ⅰに向けてこれまでの情報特論（1）情報社会の問題解決（2）コミュニケーションと情報デザイン（3）コンピュータとプログラミング（4）情報通信ネットワークとデータの活用これからの情報Ⅰ 大事なのは開発環境構築 →できるだけシンプルで、自分で試せるもの
他の内容と関連できるか！？まずは、よくばらず基本を丁寧に

おわりに • プログラミングでうまくいかないときに、生徒自身や生徒同士で解決できるようにしたい。（今は教員が作っている・・・） • 高３で予定の情報Ⅱや情報研究では課題解決をメインにしたグループでのプロジェクトにしたい。 40 https://codepen.io/jnsuzuki/pens/public

データサイエンスの未来へ向けた一歩を踏み出そう

データサイエンスの未来へ向けた一歩を踏み出そう

More Decks by アシアル情報教育研究所

Other Decks in Education

Featured

Transcript