Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2022年2月26日開催の情報科オンラインセミナー『 新学習指導要領スタート直前!―情報Ⅰ指導のポイントを考える―』での早稲田大学蓮池隆先生の講演資料です。

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

Other Decks in Education

Transcript

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

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

    これまでの授業で気をつけたところ – 2022年度の情報Ⅰ実施に向けて
  3. 自己紹介 鈴木 潤(すずき じゅん) jnsuzuki@js.doshisha.ac.jp 2005年3月 京都教育大学教育学部情報教育専攻 卒業 2005年4月 同志社高等学校に情報科教諭として入社

    2010年 同志社中学校・高等学校に(統合) 今年は 入社して17年目。 生徒部主任(生徒会、クラブ、学校行事を管轄) 学習指導委員(カリキュラムに関すること) 同志社大学理工学部で「情報と職業」を担当
  4. 同志社中学校・高等学校 4 京都駅→ 学校→ 妙 法 大 大 地下鉄で 20分

    京都市左京区岩倉に 同志社中高があります 同志社大学 二条城→ 御所→ キリスト教主義学校 自由な校風
  5. 同志社中学校・高等学校 創立者 新島 襄 全日制普通科 1クラス 45名 1学年8クラス 360名 1学年8クラス

    360名 1学年8クラス 360名 高校で 1080名 高等学校部分 他中学(受験)で80名 同志社中学から280名 コース制がない 8クラスが同じ条件のクラス替え
  6. 他大学への進学も一定数います 6 同志社大学 同志社女子大学への推薦 他大学を受験 神学部 文学部 社会学部 法学部 経済学部

    商学部 政策学部 グローバル地域文化学部 文化情報学部 理工学部 生命医科学部 スポーツ健康科学部 心理学部 グローバル・ コミュニケーション学部 学芸学部 現代社会学部 薬学部 表象文化学部 生活科学部 看護学部 同志社大学 同志社女子大学 例年 300~320名程度
  7. 今日はここの お話をします

  8. ICT環境 メディアセンター「知創館」 Windows ノートPC 50台 Windows 貸出用ノートPC 75台 デスクトップPC 20台

    図書館開架部分 情報教室 HR教室 iPad BYAD 2017年度 高1より一人1台
  9. 2014年度「情報特論」新設 高3:2単位 1学期 ×サーバーサイドでのアプリ ×開発環境の構築 (アップロード?Apache?) ◦SQLは比較的うまくいく 生徒も楽しんでいた ロボット教材で 物理的なプログラミング

    ×大失敗…うまくいかない ×ロボットがうまく完成しない ×シミュレータ通り動かない (当然) →挫折感がいっぱい 2学期
  10. 2014年度の情報特論 2学期の中間試験あたり (10月中旬)で方向転換 HTML・CSS (1年で既習) JavaScript スマホのアプリ つくってみたい ほぼ1ヶ月半でアプリ制作

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

  12. 12 情報特論の1年間の流れ

  13. 情報特論の授業の流れ(1学期) 1学期前半(約10回) #01 ガイダンス・Monacaアクティベーション #02 HTML・CSSのおさらい(ID・クラスの違い) #03 CSSボックスモデル(画面デザイン) #04 JavaScriptの変数・条件分岐

    #05 演算子・繰り返し処理・配列 #06 関数 #07・08 実際のアプリ作成(時計) #09 イベント・DOM #10 CSSとDOMの組合せ 見えるもの 動くものを 先に扱う 条件分岐や 繰り返し処理は 慣れてから
  14. 毎回の授業の流れ(1学期) 1学期の各回の授業 ・前回の質問のフィードバック ・プリントで作業をすすめて動作確認 &机間巡視 ・おさらいの課題を最後に取り組む (できる生徒は半分くらい) ・作業の進捗や質問をフォームに入力 14

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

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

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

  18. 情報特論の授業の流れ(2学期) 2学期 構想 プロトタイプ を作る 練り直し コーディング あきらめる 部分を決断 完成

    集中作成期間 中間試験あたり 期末試験あたり 期末試験終了後 終業式 18 9月 10月 11月 12月
  19. 構想 作品制作のとりかかり ノベル系ゲーム ストーリー・分岐・パラメータの変化イベントを考える クイズ ①基本ルールをつくり、プロトタイプを作成 ②クイズの問題量を増やす アクション系ゲーム ①Canvasでいくか、CSSでいくかを検討 ②プロトタイプをつくる(ブロック崩しを参考)

    タイマー・タイミングゲーム プロトタイプをつくる 作品制作のとりかかり データベース(共通) ①記録する・呼び出しするデータ形式・データ構造を考える データベース(記録) ①記録するデータ形式にあわせた入力画面をつくる ②読み込んだデータ形式を表示する出力画面をつくる データベース(検索) ①どのような条件で調べるか検索条件入力画面をつくる ②絞り込んだデータを表示する出力画面をつくる データベース(検索・Webサイト) ・あらかじめ登録する情報を収集してデータを構造化する。
  20. 毎回の授業の流れ(2学期後半) 2学期の各回の授業 ・前回の質問のフィードバック ・各自で課題に取り組む&デバッグ 受講生 30~40名/講座 (机間巡視は 一人1分でしか…) ・作業の進捗や質問をフォームに入力 20

    https://ict-enews.net/2020/01/08monaca/
  21. 21 プロトタイプを作る ・データベースアプリ ・Canvasを使ったアニメーション ・ブロック崩し ・ぷよぷよプログラミング を2学期前半で作ってみる。 コーディング

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

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

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

  25. 2022年度から 情報Ⅰではどうしよう… HTML・CSS 写経(2時間くらい) 自分で作ってみる (そこそこ自力でできる) したいこと≒できること ネットで 調べたり JavaScript

    写経(2時間くらい?) Web スマホアプリ 何が作れるかわからない 何をしていいかわからない したいこと≠できること ネットで調べても いろいろあって??
  26. HTML・CSS・JavaScript 共通の難しさ • 教科書・テキストのフォント • 全角・半角の混在(日本語があるから) • スペル間違い • 自力でのデバッグの困難さ

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

  28. 全角・半角の混在 / スペル間違い <> かっこ? 正解はこちら スペースが 全角 ◦title ◦1

    ×エル これが半角 <> 間違い ◦body デバッグが大変
  29. 生徒からの質問の例 この文書を見ていただきたいのですが、 ①画像が現れない ②#navigaterの左端が緑色が出てきてしまう理由 を教えてください

  30. 教科書・プリント・開発環境で工夫を ・シンタックスハイライト(自動色つけ)がある環境 ・等幅フォントを用いる 半分くらいは、自力で見つけられる ・フォントの指定 Consolas → i I 1

    l o O 0 Monacakomi → i I 1 l o O 0 https://anko.education/tool/monacakomi Windows Vista以降標準
  31. 教科書・プリント・開発環境で工夫を ファイル名拡張子を表示させる ブラウザで表示 右クリック メモ帳で編集 保存・更新

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

  33. 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("ほげほげ");
  34. JavaScriptで説明が難しい例① camelCase → 大文字・小文字の区別がある <html> <head> <script> window.onload = function(){

    document.getElementById("a").innerText="ほげほげ"; } </script> </head> <body> <div id="a"></div> </body> </html> 34
  35. 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);
  36. 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から調べた情報で自力で作ろうとすると とたんに難しくなる
  37. 2022年度情報Ⅰに向けて 逐次処理 条件分岐 繰り返し if if~else if~else if~else switch for

    while do~while 変数 配列 演算子 算術~ 比較~ 論理~ データ型 null スコープ 単項~ 代入~ for~in 文字列結合 配列 多次元配列 連想配列 関数 引数 戻り値 無名関数 即時関数 配列の操作 再帰関数 組み込みオブジェクト Math Date 正規表現 AJAX DOM イベント処理 Timer 扱う内容は精査して、1年生 情報Ⅰへ
  38. ・プログラミング部分は→たぶんスムーズ (実際に動かして試す方が理解ははやい)≒共通テスト対策 ・問題解決やモデル化とシミュレーションと組み合わせると… ひっかかる(だろう)ポイント タイプの遅さ スペリング 漢字変換 環境構築 繰り返し処理! 例:ぷよぷよプログラミング

    落ちゲー → 再帰処理が必要(実は難しい) 変数や関数を 自分で定義できる デバッグが 自力でできる 作りたいもの 作るべきもの が明確にする 課題設定 作れるものを 自覚する めちゃ大変
  39. 2022年度情報Ⅰに向けて これまでの情報特論 (1)情報社会の問題解決 (2)コミュニケーションと情報デザイン (3)コンピュータとプログラミング (4)情報通信ネットワークとデータの活用 これからの情報Ⅰ 大事なのは 開発環境構築 →できるだけシンプルで、自分で試せるもの

    他の内容と 関連できるか!? まずは、よくばらず基本を丁寧に
  40. おわりに • プログラミングでうまくいかないときに、生徒自身や生徒同士 で解決できるようにしたい。(今は教員が作っている・・・) • 高3で予定の情報Ⅱや情報研究では 課題解決をメインにしたグループでのプロジェクトにしたい。 40 https://codepen.io/jnsuzuki/pens/public