一覧へ ｜ 単元設計
道具 5 Streamlit で Web アプリを作る ｜ 単元設計
Python を数十行書いて、入力すると結果が返るページを作り、人に使ってもらえるようにする 6 回です。回のファイル名は lessons/w-01〜w-06。
この単元の位置
HTML も CSS も JavaScript も出てきません。Python が少し書ければ、その日のうちに人が触れるものになるという道を通します。
この単元の値打ちは最後の 1 回にあります。自分の端末で動かしているうちは、自分しか使えません。第6回で公開して、他の人の端末から開けるようにするところまで行きます。探究 第12回 形にして、使ってもらうの社会実装は、ここで作ったものが受け皿になります。
本質的な問い
自分が分かったことを、他の人が自分で触れる形にできるか。
単元の目標（3観点）
| 観点 | 目標 |
|---|---|
| 知識・技能 | 入力の部品を置き、表を読み込み、図を出すアプリを作れる。公開に必要なファイルを用意できる |
| 思考・判断・表現 | 相手が何を入れて何が返るかを先に決め、それに合う部品を選べる。公開前に確かめるべきことを判断できる |
| 主体的に学習に取り組む態度 | 自分で触るだけで終わらせず、人に触ってもらって直そうとしている |
評価課題（単元末）
「自分の調べたことを、人が触れるアプリにして公開する」（第6回）
| 観点 | B | A | C の生徒への手立て |
|---|---|---|---|
| 知識・技能 | 入力と出力がそろい、動く。公開して URL が開ける | まちがった入力でも止まらないよう手当てしている | 第2回の 5 行のアプリに戻し、1 か所だけ変えさせる |
| 思考・判断・表現 | 何を入れると何が返るかを一文で書けている | 相手を決め、その人が最初の 10 秒で分かる説明を置いている | 「使う人は誰か」を先に決めさせる |
| 態度 | 一度は人に触ってもらっている | 触ってもらって直した所と理由を書いている | 隣の人に 1 分だけ触らせる |
各回
| 回 | 題 | 書くもの | ここでできるようになること |
|---|---|---|---|
| 1 | アプリの実行と編集 | st.title st.write | 動かすまでの手順。app.py を保存して開く。書き換えると画面が変わる |
| 2 | 入力の部品 | st.slider st.selectbox st.text_input st.checkbox | 相手に入れてもらい、入った値で結果を変える。入力 → 処理 → 出力が 1 画面に載る |
| 3 | 表の読み込み | st.file_uploader pandas st.dataframe | CSV を受け取り、中身を見せる。列を選ばせる |
| 4 | グラフの表示 | st.bar_chart st.line_chart st.metric | 選んだ列を図にする。どの図が合うかを決める |
| 5 | 状態の保持と画面の構成 | st.session_state st.sidebar st.tabs | 押した回数を覚える。設定を横に寄せる。長くなったら分ける |
| 6 | 公開と試用 | requirements.txt | GitHub に置いて公開する。URL を人に渡す。公開前に確かめる |
各回は 10分版・20分版・50分版の 3 つの進め方を持ちます。第1回だけは環境の用意があるので、20分版から始めます。
教室での動かし方（学校の環境に合わせる）
どれか一つが使えれば進められます。学校の実態に合わせて選びます。
| やり方 | 向く場面 | 気をつけること |
|---|---|---|
| 端末に Python を入れて動かす | 各自の端末に入れられる | pip install streamlit が通るか、事前に 1 台で確かめる |
| クラウドの実行環境で動かす | 端末に入れられない | 学校の規定と、アカウントの扱いを先に確認する |
| 教師の 1 台で投影し、設計だけ各自が書く | 環境が整わない | 第1〜5回は紙で設計できる。第6回だけ実機を使う |
環境が整わなくても、第1〜5回は「何を入れると何が返るか」の設計として進められます。 教師用メモに、その場合の進め方を書いています。
公開する前に、必ず確かめる
第6回の中心です。3 つとも生徒に声に出させます。
- 個人が分かるデータを一緒に置いていないか。GitHub に CSV を入れると、誰でも見られます
- 相手が最初の 10 秒で何をすればよいか分かるか。説明を 1 行、上に置く
- まちがった入力でも止まらないか。空欄、0、とても大きい数を入れてみる
公開したものは、やめ方も決めます。誰が、いつ、どうやって止めるかまで書いておきます。探究 第12回の引き渡しメモと同じ考えです。
情報の授業とのつながり
| 思い出すこと | 戻る回 | 生徒が聞いた言葉 |
|---|---|---|
| 目的から手順へ | 情報Ⅰ (3) 第11回 | 目的・手順・プログラムの順で作った |
| プログラムの評価と改善 | 情報Ⅰ (3) 第12回 | プログラムの評価と改善 |
| 頼む側と返す側 | 情報Ⅰ (4) 第3回 | サーバとクライアント |
| 入口と出口の約束 | 情報Ⅱ (4) 第11回 | 入口と出口は約束、中身は自由 |
| わざとおかしな入力を | 情報Ⅱ (4) 第13回 | 想定外の入力でも止まらないか |
| 図の選び方 | 情報Ⅰ (4) 第9回 | この問いに合うグラフはどれか |
詳しいコードは 情報学探究マニュアル 第9節 にあります。
どの段階で使うか
- 高等学校 情報Ⅰ (3): 第1・2回。プログラムが人の役に立つ形になることを見る
- 高等学校 情報Ⅱ (4): 6 回すべて。Web システムを題材に選んだ班に。第9〜13回と重ねて進められます
- 探究: 第8回 道具を選ぶで「相手に触ってもらう形にしたい」を選んだ班が、この 6 回を通します
- 中学校: 扱いません。技術分野 第6・7回の双方向のしくみまでで十分です
設計指針（第2版）との対応
- Ｆ２（プログラムの設計/構築）: Ｆ２Ｌ３ から Ｆ２Ｌ４「抽象階層をもつプログラムを設計/構築できる」(高選) へ。指針は「手続き/関数による抽象化…を自分が開発するプログラムに取り入れさせ、その効果を確認させる」としています。第5回がその場面です
- Ｆ４（ソフトウェアのテストと改良）: Ｆ４Ｌ３「複数種類のテストケースや要求仕様に基づき…プログラムの不備を確認し修正できる」(高選)。第6回の「まちがった入力でも止まらないか」
- Ｊ３（システムの設計/構築/評価/運用）: Ｊ３Ｌ１「システム開発が単なるプログラム作成と違う点」(高選)。公開・運用・やめ方まで含めるのがそれです
- Ｂ５（情報デザインに配慮した内容）: Ｂ５Ｌ４（統一された UX をグループで設計/制作。高選）。相手が 10 秒で分かるか
他校でそのまま使える形にする
学校固有の呼び名や校内の道具名は書きません。動かし方を 3 通り用意し、環境が整わない場合の進め方も各回に書きます。コードはすべて枚の中に載せ、外のページを見に行かなくても進められます。
出典
- 高等学校学習指導要領（平成30年告示）解説 情報編（PDF）。情報Ⅰ (3)、情報Ⅱ (4)（サーバサイドプログラムやデータベースは深入りしない範囲で扱う）
- 日本学術会議「情報教育課程の設計指針（第2版）」令和8年5月12日。カテゴリ Ｂ・Ｆ・Ｊ
- Streamlit のドキュメント。入力の部品、
st.session_state、st.sidebar、公開の手順