🏫 先生向けガイド
中学校の技術・家庭科 技術分野では、プログラミングは内容「D 情報の技術」の中で扱います。 このページは、ひなテックGamesの教材（実際に公開されて動いているWebアプリのソースコードを、ブラウザ上で読み・その場で書きかえて動かせる）が 「D 情報の技術」のどこに当てはまり、どこには当てはまらないかを整理し、2〜4時間の単元案と教材の選び方をまとめたものです。 インストール・アカウント登録は不要で、1人1台端末のブラウザだけで動きます。
小学校での位置づけ（B・C分類）や6段階の道すじ、安全性、Google Classroomでの配布方法はガイド トップにあります。
現行の学習指導要領（平成29年告示）では、「D 情報の技術」は次の4項目で構成され、 プログラミングを扱うのは(2)と(3)です。 本サイトが力になれるのは(1)・(4)と、(2)に入る前の「コードを読み書きする力」の準備です。(3)には対応しません。
| 項目 | 本サイトの位置づけ | 使うページ |
|---|---|---|
| (1) 生活や社会を支える 情報の技術 |
段階④。実際に社会で動いているWebアプリの中身をそのまま読めます。説明用に書き直したコードではなく、生徒が遊んでいるゲームそのもののコードです。「HTMLが構造・CSSが見た目・JavaScriptが動き」という3つの言語の役割分担が、1本のゲームの中で見えます | 各ゲームの「ソースコードを見る」 |
| (2) ネットワークを利用した 双方向性のあるコンテンツの プログラミングによる 問題の解決 |
段階④⑤⑥の前段の練習として。本サイトのゲームは1人で遊ぶ構造で、双方向性のあるコンテンツを生徒が制作する教材ではありません。この項目を直接ねらう教材ではなく、制作に入る前に、変数・分岐・反復を実物のコードで読み、書きかえて確かめる準備と位置づけてください | ソースページの「書きかえて動かす」 |
| (3) 計測・制御の プログラミングによる 問題の解決 |
対応しません。センサやアクチュエータを扱わないためです | — |
| (4) 社会の発展と 情報の技術 |
段階⑥。生成AIにコードを書かせ、動かし、直させる体験は「これからの情報の技術とどう付き合うか」を考える具体的な材料になります。AIが「確率で答えている」ことを体験できる画像認識AIの解説ページもあります | 授業案 例⑤・AI時代のゲームの作り方 |
※ 項目名は文部科学省の公開資料に基づきます。各段階への当てはめは本サイト運営者による整理で、文部科学省が示したものではありません。実際の指導計画に合わせて取捨選択してください。
全ゲームにソースページがありますが、初めてコードを読む中学生には、ルールが単純で「読みどころ」がはっきりしているものから始めるのが向いています。 右の列が、そのゲームのコードで1か所だけ読むならここという箇所です。
| ゲーム | 読みどころ（1か所だけなら） | 扱える概念 |
|---|---|---|
| 2048 | 同じ数が並んだら × 2 して合体する数行。さらに、盤面を回転させて上下左右4方向の処理を「左に動かす」1つにまとめている工夫 |
配列・反復・分岐・関数（処理の共通化） |
| 迷路ゲーム | 迷路を自動で作る部分。「行けるマスがあれば進む、なければ戻る」をスタック（配列）で実現している | アルゴリズム・2次元配列・スタック |
| ブロック崩し | パドルのどこに当たったか（0〜1）を角度に変え、cos・sinで横と縦の速さに分ける計算 |
変数・関数・三角関数（数学とのつながり） |
| 神経衰弱 | カードの配列をシャッフルする処理と、「2枚めくったら比べる」状態の管理 | 配列・乱数・状態（フラグ） |
| タイピングゲーム | キー入力と、お題の文字列の「今何文字目か」を比べる処理 | 文字列・イベント・変数 |
| リバーシ | 盤面の2次元配列と、置いた石からひっくり返せる石を探す処理 | 2次元配列・反復のネスト・条件分岐 |
各ソースページには、ファイルごと（HTML・CSS・JavaScript）の解説と、「このコードを書きかえて動かす」欄があります。 数値を変えて実行すると、その場でゲームが変わります。サーバーには何も送られません。
1時間ずつ独立しているので、時数に合わせて途中で切っても、順番を入れかえても構いません。 Scratch経験がない学級は1時間目を、ある学級は2時間目から始めてください。
| 時 | 活動（段階） | ねらいと進め方 |
|---|---|---|
| 1 | ブロックを1つ変える（②③） 授業案 例④ |
Scratch版で「予想→変更→確認」。数に名前がついている（変数）ことを体で覚える。中学生なら2048や迷路のScratch版でも可 |
| 2 | コードを読む（④） 同じゲームのソースページ |
1時間目に変えた数と同じ役割の変数をJavaScriptの中で探す。ScratchとJavaScriptの対応表で「ずっと＝requestAnimationFrame」「もし＝if」をつなげる。ワークシートは「変数の名前／何を覚えている数か／どこで使われているか」の3欄 |
| 3 | コードを書きかえる（⑤） ソースページの「書きかえて動かす」 |
「直したい動き」から逆に「どの数を変えればよいか」を探して書きかえる。エラーが出たら戻して試し直すことを経験させる（エラー表示は日本語の手がかりつき）。ふり返りは「変えたところ／予想／実際」の3点 |
| 4 | AIに作ってもらう（⑥） 授業案 例⑤ |
作りたいものを条件の箇条書きにしてAIに頼み、動かし、エラーを伝えて直してもらう。2〜3時間目で「どこを見れば何が変わるか」の見当がついているので、AIが出したコードにも手が出せる。(4)社会の発展と情報の技術の話し合いにつなぐ |
1時間だけなら：2048のソースを開き、合体の処理にある × 2 を × 3 に書きかえて動かす。出てくる数が 2, 4, 8… から 2, 6, 18… に変わり、値と挙動の関係が目で見えます（該当のコードはこちら）。
| よくある様子 | 手立て |
|---|---|
| コードを最初から全部読もうとして止まる | 「全部は読まない」と最初に宣言する。読むのは1か所（上の表の「読みどころ」）。それ以外は「今日は見なくていい」 |
{ } や ; の記号に気を取られる | Scratchのブロックの「くぼみ」と同じで、まとまりを示す記号と説明する。対応表の図を横に置く |
| 英語の変数名が読めない | ソースページの解説に日本語の意味がある。「名前は人間が決めたもの。ballSpeed は『ボールの速さ』と決めただけ」と、名前は約束にすぎないことを伝える |
| 書きかえてエラーが出て固まる | 「元に戻す」で戻せる。エラー表示を読ませ、「どこを直せばいいか教えてくれるメッセージ」と扱う。わざとエラーを出して見せると怖さが減る |
| 数を変えても何も変わらない | 「実行」を押し直したか確認。ゲーム開始時にしか読まれない値（初期値）は、リスタートしないと反映されない |
| できる生徒が先に進んで退屈する | 「別のゲームで同じ役割の変数を探す」「変えた数を元に戻さずに、さらに別の1か所を変えて意図した動きにする」と課題の質を上げる |
スコアは評価に使いません（上手い生徒ほど高い点が出るだけで、何を考えたかは表れないため）。段階ごとの目安です。
| 段階 | こう言えたら分かっている | 主に見る観点 |
|---|---|---|
| ④ コードを読む | 変数が何を覚えているか、条件が何を分けているかを自分の言葉で言える。HTML・CSS・JavaScriptの役割の違いを説明できる | 知識・技能 |
| ⑤ コードを書きかえる | 直したい動きから逆に「どの数を変えればよいか」を探せる。エラーが出ても戻して試し直せる | 思考・判断・表現 |
| ⑥ 自分で作る | 作りたいものを他人に伝わる条件に分解できる（AIへの指示の文章がそのまま評価材料になる） | 思考・判断・表現／態度 |
ふり返りは「変えたところ／予想／実際どうなったか」の3点を1〜2行で。詳しくはガイド トップの「評価（見取り）の観点」。
扱えます。段階④⑤（コードを読む・書きかえる）は、ソースページに変数や関数の役割の解説がついており、先生が全部を読める必要はありません。「この数を変えたら何が起きるか、予想してから試す」進め方なら、答えを先生が知らなくても授業が成立します。
直接は使えません。本サイトのゲームは1人で遊ぶ構造で、ネットワークを介したやりとりを生徒が制作する教材ではないためです。(2)を扱う前に、コードを読み・書きかえる力をつける準備教材として位置づけてください。
「2048のソースを開き、合体の処理にある × 2 を × 3 に書きかえて動かす」だけで1時間が成立します。出てくる数が 2, 4, 8… から 2, 6, 18… に変わるので、値と挙動の関係が目で見えます。
段階①〜③（遊ぶ・Scratchで中を見る・作りかえる）は進められます。段階④⑤のコードを書きかえる活動は文字入力があるため、キーボードのある端末（Chromebook・Windows・外付けキーボードのiPad）をおすすめします。
ソースページの「書きかえて動かす」はブラウザ内だけで動き、サーバーには保存されません。残したい場合は、書きかえたコードをコピーして学校のドキュメントに貼るか、変更点をワークシートに記録させてください。
情報Ⅰの(3)コンピュータとプログラミングで扱う配列・反復・分岐・関数を、同じゲームのコードで読めます。情報Ⅰ向けに、実際のゲームのコードを題材にした読解問題ページも用意しています。
授業での活用事例や改善のご提案など、お気軽にお問い合わせください
ひなテック公式サイトへ →