中間課題1

第7回 アルゴリズム概論

2026.05.21

まずはセットアップ

今日の土台を整えます

準備

今日の準備でやること

  1. デスクトップの algorithm2026/ フォルダを開く
  2. このページをクリックして開き、 関連資料の箇所から 07_20260521_data.zip をダウンロード
  3. 展開・解凍して 07_20260521_data を algorithm2026/ に配置
  4. VSCode で 07_20260521_data フォルダを開く
  5. index.html を 右クリック→Live Server で表示
  6. 普段使っている AIツール（ChatGPT など）をブラウザで開いておく

はじめに

マインド

プログラミング＆AI ＝ コンピューターへの "お願い"

みなさんは今何をしているか？ → コンピューターに、自分がやりたいことをお願いしている

「画面の数字を変えて」「ボタンを押したら動いて」— そういう 頼みごと を、
コンピューターが読める形で書いていく。

ただし、コンピューターはあいまいなお願いだと言うこときいてくれない
だから、ちゃんと 分解して 伝える必要がある。

振り返り

これまで覚えてきたお願いの仕方

  • 「◯◯にデータを表示して」の「◯◯」に相当 — querySelector('.xxx')
  • 人間の操作（クリック）に合わせて◯◯して、 とお願い — addEventListener
  • データを記憶しておいてもらう — let / const
  • 状況に合わせてやってほしいことを変える — if / else if / else
  • 指定した場所のデータを書き換える — innerHTML
  • たくさんのデータをまとめる — 配列と topics[0] のような番号アクセス
  • ランダムな数字を作ってもらう — Math.random() による乱数

今日の位置付け

今日の位置づけ

今日は本番です

先週 — 5/14

リハーサル

→

今日 — 5/21

中間課題

進め方そのものは、先週やったことと ほぼ同じです。 変わるのは お題（題材）だけ。

今日のお題

今日のお題

おるたなChannel式・人狼ゲーム用アプリの作成

参考URL（Youtubeショート）

目的 「アイスブレイク。初めて会った人同士が打ち解けられるきっかけのゲームになる」

ルール（4人1組想定）

  1. お題が渡されるが1人だけ違うお題が配られた人が人狼（例：3人はローソン、1人だけファミマ）
  2. お題を表す言葉を順に言い合っていく（例：「コンビニ」「全国にある」）
  3. 3巡くらいしたら、1人だけ違うお題だと思う人を指名
  4. 1番指名が多かった人 = お題の違う人だったら市民勝利、逆なら人狼勝利
ミッション

ミッション

おるたなChannnel式人狼が遊べるように「サポート」してくれるアプリを作ります！

今日のお題

制約と条件

  • 1画面のアプリ（複数ページに分けない）
  • ゲームの人数 — 4人1組を想定
  • これまでの講義範囲（HTML / CSS / JavaScript）の道具で作れるもの
  • できる人は プラスαをしてもOK
  • AIへの相談・ 周りの人との相談・講師チューターへの相談、全部OK

進め方

今日のお題

進め方の方針

  1. ブレインストーミング — アプリの仕様を作成する
  2. HTML / CSS — アプリ画面の中身と見た目を組み立てる
  3. JavaScript — 機能の言語化→実装
  4. 最終確認 - やりたいことと内容が一致しているかの確認

先週みなさんが踏んだ流れを、 別のお題で再現するイメージです。

先週との変更点

ブレインストーミング用アプリ

先週、配布ファイルが多すぎたことを反省し、今回はブレインストーミング用に皆さん個別にページを用意しました！

ただし、そのために「Notion」というものに登録をしていただく必要があるため、お手数ですがみなさんにはNotionへの登録をお願いいたします！

今から、Notionの登録について説明します！

Notionの登録手順

5分程度で終わります

手順1

Notionの登録ページにアクセス

  1. Chrome（または普段使っているブラウザ）で https://www.notion.com/ja を開く
  2. ページ右上の 「無料で始める」ボタンをクリック
  3. サインアップ画面が表示されたら次の手順へ

スマホではなく、 PCのブラウザから進めてください！

手順2

外大メアドを入力

  1. 「勤務先のメールアドレス」欄に 外大メアドを入力
  2. 「続行」をクリック

下の「Google」「Microsoft」ボタンは使わない！

手順3

届いたメールから6桁コードをコピー

  1. 外大メアドの受信箱を確認
  2. Notion から「Sign up for Notion」が届いている
  3. 本文の 6桁の数字をコピー

届かない時は迷惑メールフォルダもチェック

手順4

Notion画面に6桁コードを貼り付け

  1. Notion のページに戻る
  2. 「認証コード」欄に 6桁の数字を貼り付け
  3. 「続行」をクリック
手順5

名前を入力

  1. 「名前」欄に 自分の名前を入力
  2. 「続行」をクリック

講師から見て誰なのかわかる名前にしてね

手順6

新しいワークスペースを作成

  1. 「チームに参加するか、ワークスペースを作成」が出る
  2. 下の 「新しいワークスペースを作成」をクリック
手順7

用途を選択

  1. 「Notionをどんな用途で使う予定ですか？」が出る
  2. どれを選んでもOK（仕事/私生活/学校どれでも可）
  3. 「続行」をクリック
手順8

チーム招待はスキップ

  1. 「チームには他に誰がいますか？」が出る
  2. メアドは 何も入れずに 「続行」をクリック
手順9

フリープランを選択

  1. プラン選択画面が出る
  2. 右側の 「フリープラン」の「続行」をクリック

左の「ビジネス（無料体験版）」は選ばない！

手順10

デスクトップアプリはスキップ

  1. デスクトップアプリの案内が出る
  2. 下の 「今はスキップ」をクリック

これで登録完了！

登録完了

登録できたら…

こちらのページを開いてください！

進め方

180分の流れ

1コマ目（90分）

  • 15:00 〜 15:15 — 進行説明
  • 15:15 〜 15:40 — 課題開始
    （この間、人狼ゲームをしてもOK）
  • 15:40 〜 16:30 — 1on1タイム

2コマ目（90分）

  • 16:40 〜 17:50 — 1on1相談タイム
    （第二部は7枠：16:40 / 16:50 / 17:00 / 17:10 / 17:20 / 17:30 / 17:40）
  • 17:50 〜 18:00 — フリータイム + Phase2の準備
  • 18:00 〜 18:10 — 提出作業

評価のポイント

ちなみに

主な評価ポイント

  • 考えてもらったアプリの遊び方で 本当に遊べるか
  • 「なぜその遊び方・作りにしたのか」 が 論理的に通っている（理由がしっかりある）
  • アプリの画面上に、 必要な情報が 網羅されているか
  • チャレンジを入れていること

ヒント

ヒント1

アプリに全部を詰め込まなくていい

アプリには、必ずしも全部の機能を詰め込む必要はありません。

例）先週の雑談ネタアプリの場合、 「話す順番」 をアプリの機能にせず、 人側に任せるというで決めるという考え方もありました。

ヒント2

答えは1つではありません

この中間課題は、 答えが1つと決まっているものではありません。

あなたの考えにしっかりと「Why」を通してください！
そして、考えたことと形が合致しているかを、何度も確認してください！

1on1相談タイム

1on1

1on1相談タイムについて

  • 1人 10分目安で、 順番に話していきます！
  • チューター3名 3レーンで同時進行します！
  • 呼ばれた人から、 順番に指定のブレイクアウトルームに入ってください！
1on1

1on1で話すこと

これは 評価のための面談ではなく、 相談のための時間です。

  • 仕様書ガイドに書いた内容を見せながら、 自分の言葉で説明してもらう
  • 「ここどうしようか迷っている」 という相談も歓迎
  • まだ書き途中でも大丈夫。 一緒に整理する時間にあてます
  • 気になっているチャレンジがあれば、 そこも相談してください

提出物

提出

今日の提出物

この後、提出作業を一緒にやりましょう！（不足データがある場合は採点できないかも？）

  1. アプリ本体のデータ（index.html / style.css / script.js）
  2. ブレインストーミングの中身 & AIとのやり取りが書かれたスレッドの共有URL
    → 2については、各自に共有したページを私がチェックするので別途提出不要。

1だけいつものフォームから提出してください！

共有URLの提出について

Google AI Studioの場合

共有URLの提出について

ChatGPTの場合

Phase2に向けた準備

Phase2に入るまでにやっておくこと

次回予告

次回からPhase2

「Googleの世界（スプレッドシート・Drive・Gmail）」 に世界を広げて、 より実用的なテーマを扱っていきます！

今日、お手数ですが、並行して最低限の準備をお願いします！
10分くらいだと思います！（Googleアカウントがある場合）

大前提として、Googleアカウントがないと話が進みません！お持ちでない方は今すぐ登録を！

準備

準備の全体像

第8回までに、 ここまで終わらせておいてください。 全部で15〜20分ほどの作業です。

  1. Google ドライブで 講義用のフォルダを作る
  2. その中に 各講義日のフォルダを作る
  3. 2で作成したフォルダの中にそれぞれ1つずつスプレッドシートを作る
手順1

講義用のフォルダを作る

フォルダ名 — 「2026アルゴリズム概論」

  1. Chrome で drive.google.com を開く
  2. Google アカウントでログインする
  3. 左上の 「新規」ボタンをクリック
  4. 「新しいフォルダ」を選ぶ
  5. 名前を 「2026アルゴリズム概論」にして「作成」
手順2

今後の講義用のフォルダを作る

講義用フォルダの中に、 今後のためのフォルダを作ります

  1. 「2026アルゴリズム概論」 フォルダをダブルクリックで開く
  2. フォルダの中で 「新規」 → 「新しいフォルダ」
  3. 以下の名前で各フォルダを「作成」(合計3つ)
    • 「08_20260528」
    • 「09_20260604」
    • 「10_20260611」
手順3

スプレッドシートを作る

先ほど作成した3つのフォルダの中に、 新しくスプレッドシートを1つずつ作ってください！名前は来週以降設定しておくので、今は「無題のスプレッドシート」でOKです！

以上！おつかれさまでした！