グラフの表示
選んだ列を図にする。どの図にするかは、何を知りたいかで決まる
10〜50分教師用メモ
準備（授業前） 動かし方を 3 通りから先に一つ選ぶ（①各自の端末に入れる ②クラウドの実行環境 ③教師の 1 台で投影し、設計だけ各自が書く）。前回と同じにしておく。前回の 06 行の設計（何の表か・選ばせたい列）を各自が開けるようにしておく。教室コードは第1回と同じものを板書する。「教師」を押す。
投影 05 の 3 つの図と 3 行のコードを並べて投影し、問いと図と 1 行を指で結ぶ。06 の仕分けは答え合わせの前に迷ったものを 2 つ挙げさせる。
時間配分
- 50分版 01〜15 全部。02・03 前回と目標 5分 ／ 04〜07 どの図が合うか 16分 ／ 08〜11 コードに直す 18分 ／ 13 道具 5分 ／ 12・14・15 まとめ 6分
- 20分版 01・03・05・06・07・09・10・12・14。図の仕分け 8分 ／ コードに直す 7分 ／ まとめ 5分
- 10分版 01・05・06・10。3 つの図と 3 行を見せ、仕分けを 5 分、自分の問いに合う 1 行を書いて 3 分で終える
この回の評価（評価規準と B・A の基準は 単元設計のページ。詳しいコードは 情報学探究マニュアル 第9節・第10節）
- 知識・技能 棒・折れ線・数を 1 つ の 3 つを、対応するコードの 1 行に結べる（体験01・体験02）
- 思考・判断・表現 自分の問いに合う図を選び、なぜその図なのかを言える（体験02）
- 態度 出た図を見て、選び直したり列を変えたりしている（体験02・ふりかえり）
指導要領 高等学校 情報Ⅰ (3)「コンピュータとプログラミング」イ(イ)、情報Ⅰ (4)「情報通信ネットワークとデータの活用」ア(ウ)・イ(ウ)、情報Ⅱ (4)「情報システムとプログラミング」ア(ウ)。設計指針（第2版）はこの単元で Ｆ２Ｌ４（抽象階層をもつプログラムを設計/構築できる）・Ｆ４Ｌ３（テストケースに基づき不備を確認し修正できる）・Ｊ３Ｌ１（システム開発が単なるプログラム作成と違う点）・Ｂ５Ｌ４（統一された UX をグループで設計/制作）に対応する。この回はＢ５Ｌ４で、見る人に伝わる見せ方を選ばせる。
前にやった回 情報Ⅰ (4) 第9回「この問いに合うグラフはどれか」。あのときは紙の上で図を選んだ。今日はその続きで、選んだ図をコードの 1 行に直す。
環境が整わない場合の進め方 この回は実機がなくても進められる。06 の仕分けと 10 の設計は端末の中だけで完結する。Streamlit はブラウザだけでは動かないので、出る図は 09 の説明と 13 の道具で見せる。13 の道具は同じデータを何種類かの図にして見比べられるので、20分版でもここだけは残すとよい。
相手の表を受け取って、列を選ばせた
前回は、表の中身を数字のまま出した。数字が 30 行並んでいても、多いか少ないか、増えているか減っているかは一目では分からない
この列を、どの図にすれば、知りたいことが見えるのか
教師用メモ
3 分。前回の 06 行の設計を開かせる。「選ばせたい列」に書いたものが、今日図になる。
授業の終わりにできるようになること
問いから決める
図ごとに 1 行
画面を分ける
どの図が合うか
知りたいことのほうから、図を選ぶ
問いが決まれば、図は 1 つに決まる
st.bar_chart(df[col].value_counts())
st.line_chart(df[col])
st.metric("回答の数", len(df))
※ value_counts() は「その列に同じ値がいくつあるか」を数える。だから棒の高さになる。st.line_chart は数の列でないと出ない
教師用メモ
5 分 情報Ⅰ (4) 第9回の図の選び方の表と同じ。散布図・帯グラフ・箱ひげ図はここでは出さない。Streamlit の 1 行で出せる 3 つに絞る。
目もりは 0 から st.bar_chart は 0 から始まる。手で細工しないかぎり、見せ方でだます形にはならない。第9回で扱った「区切りの幅を変えると山の形が変わる」との違いも、余裕があれば触れる。
題を付ける 図の上に st.write で「何を、誰に、いつ数えたか」を 1 行書かせる。第10節（マニュアル）と同じ決まり。
この問いに合う図はどれか
知りたいことが 8 つ。それぞれに合う図の印を付ける。まず上で付ける印を選び、次にその印を付けるものを押す。全部に印を付けたら「答え合わせ」
教師用メモ
進め方（9分） 一人で 4 分、迷ったものを挙げさせて 5 分。
見分け方 「ごとの多い少ない」なら棒。「時間とともに」「増えているか減っているか」なら折れ線。「1 つの数を大きく」なら metric。問いの言葉の中に、図が書いてあることに気づかせる。
迷うところ 「月ごとの移り変わり」。「ごと」が入っているが、並ぶのが月なので順番に意味がある。順番に意味があれば折れ線。ここが、第9回でやった図の選び方の核。目標 01。
並ぶ順番に意味があるかで分かれる
| 順番に意味がない | 教科・部活・色。並べ替えても困らない → 棒グラフ |
| 順番に意味がある | 日・月・時刻。並べ替えると話が変わる → 折れ線グラフ |
| 1 つだけ強く出したい | 人数・平均・最大。いちばん上に置く → 数を 1 つ |
| どれにも決まらない | 問いがまだ決まっていない。「何を知りたいか」を先に一文で書く |
図を先に決めてから問いを作ると、たいてい合わない。問いが先、図は後
教師用メモ
2 分。「順番に意味があるか」は、情報Ⅰ (4) の尺度の話とつながる。深入りはしない。判断の基準として 1 つ持たせれば十分。
コードに直す
選んだ図は、1 行で書ける
列も図の種類も、相手に選んでもらう
import streamlit as st
import pandas as pd
up = st.file_uploader("CSV を選ぶ", type="csv")
if up:
df = pd.read_csv(up)
st.metric("記録の数", len(df))
col = st.selectbox("図にする列", df.columns)
kind = st.selectbox("どの図にするか", ["棒", "折れ線"])
if kind == "棒":
st.bar_chart(df[col].value_counts())
else:
st.line_chart(df[col])前回の st.dataframe の代わりに、3 行が入っただけ。上の if up: も df.columns も、前回のまま
※ st.line_chart は数の列でないと出ない。文字の列を選ばれると止まる。止まらないようにする手当ては第6回で扱う
教師用メモ
6 分 前回のコードと並べて見せる。足したのは 3 行だけ。1 回で全部書かず、動くものに 1 行ずつ足していく作り方を、ここでもう一度見せる。第11回（情報Ⅰ (3)）と同じ。
if 〜 else 情報Ⅰ (3) 第5回の分岐。選ばれたものによって出すものを変える、いちばん素直な使い方。
止まる場面 文字の列で折れ線を選ぶと止まる。ここで直そうとしない。第6回でまとめて手当てすると伝えて、今日は止まる場面を見るだけにする。
自分の問いを、図とコードの 1 行にする
前回決めた列を使う。知りたいことを一文で書いてから、合う図を選び、コードの 1 行まで書く。図から先に決めない
全員の「知りたいこと → 図と 1 行」が右に並ぶ。問いと図が合っていないものを 2 つ拾い、どちらを直すかをクラスで決める
教師用メモ
進め方（14分） 書く 6 分 → 隣と交換して「その図で、その問いに答えられるか」を確かめる 4 分 → 読み上げ 4 分。実機がある教室は、書けた人から動かす。
よくある直し 知りたいことが「グラフを出したい」→ 何を比べたいのかまで書かせる ／ 時間の列なのに棒を選んでいる → 07 の表に戻す ／ 列の名前を df[col] のまま書いている → 自分の列の名前に直させる。
問いと図が合わないとき どちらを直すかは本人が決める。問いを変えてもよい。情報Ⅰ (4) 第9回でやったとおり、図に合わせて問いを作り替えるのも一つの手。ただし合わせた理由を言えることを求める。目標 03。
早く終わった生徒へ 図の上に st.write で「何を、誰に、いつ数えたか」の題を 1 行足す。
足したのは 3 行だけ
| 棒 | st.bar_chart(df[col].value_counts())。項目ごとの多い少ない |
| 折れ線 | st.line_chart(df[col])。数の列でないと出ない。順番に意味があるとき |
| 数を 1 つ | st.metric("記録の数", len(df))。いちばん上に置くと、相手が最初に見る |
| 選ばせる | 列も図の種類も st.selectbox で。相手が自分で見方を変えられる |
次回は、状態をおぼえる。押すたびに全部やり直される、という性質に向き合う
教師用メモ
2 分。「相手が自分で見方を変えられる」が、このアプリの値打ち。紙のグラフとの違いをここで一度言葉にする。
問いが先、図は後、コードはその 1 行
同じデータを見比べて、自分の図を選ぶ
道具で同じデータを見比べてから、自分の問いに合う図を 1 つ選ぶ。選んだ理由も一緒に送る
- 「この枚で開く」を押す
- 同じデータを 2 種類以上のグラフにする
- 自分の問いに合うものを 1 つ選び、理由を言う
教師用メモ
進め方 道具で比べさせてから選ばせる。同じものを選んでも理由が違うことを見せる。少数派の理由を必ず 1 つ読み上げる。
6分。情報Ⅰ (4) 第9回の続き。図を選んだ理由を言わせてから、その図に対応する 1 行に結ぶ。
道具は外で公開されている Web アプリ。この授業のページの中で開くので、別のページへは移らない。閉じれば、そのままこの枚に戻る。ブラウザの中で動き、入力はこの授業のサーバーには送られない。
今日の目標、自分はどこまで
3 つの目標それぞれに、できた／だいたい／まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る
教師用メモ
1 分。03 が「まだ」の生徒は、問いがまだ一文になっていないことが多い。次回の冒頭で個別に一文を書かせる。
図にして、はじめて見えたこと
一文でよい。まだ図が出せていない人は「出したら何が見えると思うか」を書く
教師用メモ
3 分。「思っていたのと違った」が出たら必ず読み上げる。そこが探究の入口になる。教室コードを忘れずに板書。