アルゴリズムを組み立てる

第6回 アルゴリズム概論 — 中間の予行演習

2026.05.14

まずはセットアップ

今日の土台を整えます

準備

今日の準備でやること

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

最初は index.html と style.css と script.js がほぼ空の状態です。今日それを、 自分の手とAIの力で埋めていきます。

はじめに

今日の軸

テクノロジー = コンピューターへの "お願い"

これまでみなさんは何をやってきたのか？ → 実はこれだけです！

みなさんは「コンピューターに色々なお願いをしている」

人にお願いがうまくできる = 自分が何をやりたいかをしっかりと言語化できる

やりたいことをしっかり言語化できれば
それこそ、AIとも仲良くなれます！

振り返り

前回までに学んだお願い

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

今日の位置付け

今日の位置づけ

今日は予行演習です

今日 — 5/14

リハーサル

→

来週 — 5/21

中間課題

お題と制約を与えます。その中で、最適なアプリの形を考えて作ってもらいます！

来週にいきなりこれやれあれやれというのは大変だと思うので、今日は来週の中間課題のためのリハーサルをします！

基本今までやったことをベースにすればできる範囲に落とし込みます！

密かな狙い

ものづくりの体験

テクノロジー分野のものづくりの流れの基礎を体験してもらいます！

AIを活用したものづくりにも挑戦できるようになる!?

最近、AIを活用したアプリ作りが盛んだったりします。（バイブコーディング = AI に対話で指示を出してアプリを作る最近の作り方）
少し大袈裟かもしれませんが、 今回のワークや課題を通じて流れを学んでもらえたら、みなさんにだってできると思います！

今日のお題

雑談ネタ提供アプリ

  • 初めましての人が集まったとき → 何を話せばいいか気まずい
  • 今回のアプリが使う → みんなが話すネタを提供してくれる
  • これで気まずさ解消！
今日のお題

制約と条件

  • 1 画面のアプリ（複数ページに分けない）
  • 画面には必ず 雑談ネタ（話しのネタ）を表示
  • 使う場面 — 大学の授業で始めましての人と出会ったとき
  • 使う人数 — 4 人 1 組程度
今日のお題

進め方の方針

  • これまで学んだ HTML / CSS / JavaScript の範囲で作る
  • できる人はプラスαをしてもOK
  • AIにも壁打ち相談をしながら仕様を決めていく

企画を作る

考え方

AIをうまく活用するポイント

「5W1H + Situation(状況)」をしっかりと伝えること

  1. ゴールを伝える　-　雑談対話ネタアプリを作りたい
    （細かいルールや使い方の流れも伝える）」
  2. 前提を伝える　-　「自分は未経験者・初学者」「大学の講義内の取り組み中」「VSCodeとChatGPT（?）使う」
  3. AIの役割を設定する　-　「あなたはアプリ作りを丁寧にわかりやすく教えられる開発者です」
  4. 制約を伝える　-　「大学の講義で学んだのは○○とか◯◯」
    （資料URLを渡すとGood）
コツ 1

ゴールを伝える

ただやりたいこと、作りたいものを伝えるだけではなく、どんな場面でどんな人がどうやってアプリを使うのか、などを丁寧に伝えてあげましょう！

  • 何を作りたい？ ー 雑談対話ネタアプリ
  • どんな場面で使う？ ー 大学の授業で始めましての人と出会ったとき
  • 誰が使う？ — 大学生
  • 使う人数 — 4 人 1 組程度
  • アプリの目的は？ — はじめましての人も仲良くなれる！
  • 使い方 — アプリの使い方・遊び方の流れを伝える

今回は、お渡ししているbrainstorm.mdにテンプレートを用意しています！

コツ 2

前提を伝える

AIの目線と自分の目線が合うように、前提条件を伝えてあげましょう！

  1. 状況 — 自分は誰で、 何をしているか
  2. これまでやったこと — 学んだこと、 すでに書いたもの
  3. 今やりたいこと — 次に進みたいこと
  4. 相談したいこと — 具体的に何を手伝ってほしいか
  5. 条件 — 守ってほしい制約

お渡ししているplan.mdにプロンプトテンプレートを用意しています！

コツ 3

AIの役割を設定する

私たちが問題を解決したい時、内容によって弁護士や医者など、相談する専門家を変えますよね。

AIも同じです。例えば「あなたはプロのWeb開発者です」と役割を与えることで、その分野の専門家として的確な回答をしてくれます。

コツ 4

制約を伝える

話の食い違いを防ぐためにも。制約や条件があれば必ず伝えてあげましょう！

  • 文系大学生
  • 大学の授業で プログラム×AI を活用したアプリづくりに取り組み中
  • プログラミングは初心者
  • 学んだ内容を伝える — 資料のURLを共有すると今回はGood！
  • 条件 — 守ってほしい制約

ブレインストーミング

ブレインストーミング

AIと壁打ちをしながら企画を固めてみよう

  1. plan.md に書かれている内容を埋めてみてください
  2. brainstorm.md に書かれている内容を埋めてみてください
  3. ここまでの内容をAIに共有し、相談してみてください
  4. 相談しながらplan.md とbrainstorm.mdに書いた内容を手直ししてみてください
  • plan.md ー AIへ相談するために必要な基本情報を書くプロンプトを書く場所
  • brainstorm.md ー 作りたいものの詳細を書く場所
お願い

AIのアドバイスを丸呑みしない！！

前提が正しく伝わっていなかったり目線があっていなかったりすると、AIも変なことを言ってくる可能性があります。

AIの言ったことを鵜呑みにせず、 「なんでそういう提案にしたの？」 というプラスαの質問ができるようになるとGoodです！

AIの提案が自分の財産や知見になります！

ちなみに

中間課題でプラスαで評価するポイント

  • 考えていただいたアプリの使い方・遊び方で 本当に遊べるか
  • 「なぜその遊び方にしたのか」 が 論理的に通っている（矛盾がない）
  • アプリの画面上に、必要な情報が 網羅されている か（足りないツッコミが入らない状態）
  • チャレンジを入れていること
ブレイクアウト

ブレイクアウトルームで進めます

  • 4〜5 人 1 組のルームに分けます
  • 各ルームに チューターが巡回 します
  • 巡回が来たら、 1 人 1 回以上は 今書いている内容を画面共有 or チャットで見せて相談し、アドバイスを受けてください

HTML と CSS を作る

考え方

HTMLとCSSを作っていく

今回HTMLとCSSについては大きくAIの力を活用し、頼りまくりましょう！ただし、人によって出力される結果は変わってきますのでそこが難しいところです。

  1. htmlcss.mdの内容を埋めてみてください
  2. AIに相談をしてみてください
  3. AIから出力された内容をHTML・CSSに貼り付けしてみてください
  4. ブラウザ（Chrome）で表示して、修正した方が良さそうなところは修正してみてください
大事

返ってきたコードを、 そのまま信じない

AI から HTML / CSS が出力されたらindex.htmlとstyle.cssに貼り付けましょう。

そして、ブラウザで表示してみた上で、以下を確認しましょう！

  • 自分が指示書に書いた内容と矛盾していないか？
  • 他の人がこの画面を見た時に、ちゃんと私の意図が通じるか？

疑問を持つことが大事！少しでも気になったことがあれば、AIに「ブラウザに表示したら◯◯のように見えたのですが、なぜこうしたのでしょうか？？」と聞くようにしましょう！

ブレイクアウト

ブレイクアウトルームで進めます

  • 4〜5 人 1 組のルームに分けます
  • 各ルームに チューターが巡回 します
  • 巡回が来たら、 1 人 1 回以上は 今書いている内容を画面共有 or チャットで見せて相談し、アドバイスを受けてください

JavaScript を作る

まずは手順を整理する。 実装まで行けたらプラスα

考え方

JavaScript は 「手順の整理」 から

JavaScript は 自分の遊び方を機能としてリクエストする 部分です。私たちが今まで学んだことはまだごく一部。

ここで AI に丸投げすると、 自分がわからないものが出てくる = 正しい判断ができません。そうならないように、まずは以下をまとめましょう！

  1. brainstorm.md の「アプリは遊び方の中で、いつ・何のために使いますか？」 を見返す
  2. 「ボタンを押したら何が起きるか」を、 まず自分の言葉でざっくり書き出す。
    （最初から完璧に書く必要はありません！）
  3. 2を AIやチューターさんと壁打ちして、 抜け漏れや変なところがないかを確認する
  4. 今までの講義でやったように「コンピューターにも伝わる手順」 に整理する。
  5. ここまでできたら十分です。 余裕がある人は script.js に実装してみましょう
整理

自分のやりたいことをしっかりとまとめよう

コンピューターにお願いができる = 自分がやりたいことを自分自身でしっかりと理解できている必要があります！

そうすることで、ちょっと迷うことが起きても「自分の考え」に基づいた判断ができるようになります。

整理

言語化のゴールイメージ

  1. 画面を開くと モーダル上にお題が6個並ぶ
  2. 「回答タイム（class="button"）」 ボタンを押すとモーダルが消える
  3. 番号が書かれたカード（class="card"）を押すと 数字→答えに書き変わって表示される
  4. 「もう一度」ボタン（class="retry"）を押すと最初からまた遊べる
JavaScript

言語化のための相談

  1. 前提条件を伝える — 自分はプログラミング初心者、 講義の範囲で作っている
  2. 状況の共有 — ブレインストーミングの内容、 HTML / CSSの内容を共有する
  3. 相談したいこと — 遊び方を、 講義の範囲の道具で 「コンピューターに伝わる言葉」 に書き換える手伝いをしてほしい
  4. 条件 — 講義の範囲のみ / ステップごとに整理 / なぜそうするのかも教えて

js.md にJavaScript用のための指示書テンプレートを入れています。 そこにブレインストーミングの内容と HTML / CSS を貼った上で、AIと相談をしてみましょう！

JavaScript

想定される 「設計手順」

js.md指示書の条件をちゃんと書くと、 AI からはこういう形で返ってくると思います！。

ステップ 1 — ボタンが押されたことをきっかけにする

まず、 そのボタンが押されたら何かを始める、 という形を作る

なぜそうするのか — コンピューターは勝手に空気を読んで始めてはくれません。 何をきっかけに動くかを、 こちらが先に伝える必要があるからです。

大事

知らない言葉が出てきたら

AI の答えに、 講義で習っていない言葉が出てきたら以下のようにしましょう！

  1. まず、 講義資料に同じ言葉がないか 探してみる
  2. 見つかった → 過去の自分の学びと結びつけて読む
  3. 見つからない → AI に 「これは何ですか、 講義の範囲で言い換えてください」 と聞き返す

別スレッドを立てて、そのことについてのみ聞くのも場合によってはいいかもしれません！

ブレイクアウト

ブレイクアウトルームで進めます

  • ブレイクアウトルームに分かれて作業
  • js.md の中身を埋めてAI と壁打ちをする
  • 最終的に作り方がまとまったらprocess.mdに貼り付けておく
  • 今日の必須はここまで。 余裕がある人は script.js に実装してみる
  • 動かない、 詰まったときは AI に聞く前に 「今どの工程を書いているのか」 を言葉にしてみる
  • 巡回が来たら、 1 人 1 回以上は画面共有で見せる
今日の締め

今日の提出物

今日のデータを一式提出してください！今回は講義内で提出しちゃいましょう！今から一緒に提出作業をやりましょう！

  • 一通りデータを提出してください。
  • ai_log.md に AI とのやり取り全部 を貼り付けて提出してください
  • 講師がチェックして、来週皆さんが中間課題うまくできるようにするためのアドバイス・レビューをお送りさせていただきます！

前回提示の課題含めて、日曜夜にはお送りできるよう頑張ります...！

来週の中間課題について

来週のお題

人狼ゲーム用に使うアプリを作る

ただし。普通の人狼ではなく「TikTok」でよくある方式の人狼ゲームにします！(4人1組で遊ぶことを想定)

  1. 参加者にお題が配られる。（ただし、1人だけ違うお題が配られる）
  2. ゲームスタート。お題を抽象的に表す言葉を順番に言い合う
    （人狼の人は自分が人狼だとバレないよう注意する）
  3. 3巡くらい言い合ったら、最終的に人狼は誰なのかを指名する
  4. 指名が多かった人 = 人狼なら市民の勝利。そうじゃなければ人狼の勝利

例 — 3 人には「ファミマ」、 1 人には「ローソン」 のお題が配られる。 全員で当てる。

イメージを膨らませるための参考情報

TikTok・おるたなChannel公式

来週の流れ

中間課題の流れです

今日と全く同じです！JavaScriptの実装まで行っていただきます！

  1. AIと壁打ちをしたり他の人やチューターさんと相談しながら作るものの仕様を決める
  2. 作るものの仕様を決めたら、アプリ化する
  3. 一通りのものを提出してもらう

※途中でチューター・講師との1on1タイムがある予定です

来週のお題

今日と来週で、 変わるのは 「ネタ」。やることは一緒

今日（5/14）

  • ネタ — 雑談ネタアプリ
  • 位置づけ — 予行演習
  • アプリ作りの練習

来週（5/21）

  • ネタ — TikTok 式人狼
  • 位置づけ — 中間試験
  • 1on1あり

ブレインストーミング → 画面づくり → 動きの整理、 という 流れそのもの は同じ。

ちなみに

中間課題でプラスαで評価するポイント

  • 考えていただいたアプリの使い方・遊び方で 本当に遊べるか
  • 「なぜその遊び方にしたのか」 が 論理的に通っている（矛盾がない）
  • アプリの画面上に、必要な情報が 網羅されている か（足りないツッコミが入らない状態）
  • チャレンジを入れていること

講師がチェック・採点をするときに「これ、ここがおかしくない？」という矛盾がないこと。これが大切です！

重要なポイント

人に相談しても、講師チューターに相談してもOK

基本的に中間課題中に周りと相談してもOK。講師チューターに相談してもOKとします。

来週のお題

来週の提出物

  • アプリ本体（HTML / CSS / JavaScript）
  • ai_log.md — AI とのやり取り全部
  • ブレインストーミングの中身
  • 「なぜそうしたか」 を書いた文章
ついでに

次のフェーズの準備も、 できる人はやっておいてください

第 8 回以降は、 ブラウザの中だけではなく、 Google の世界 もプログラムで扱っていきます。
Google アカウントを持っていればすぐ終わるので、 時間があるときにやっておいてください。

  • 大学の Google アカウントでブラウザにログインしておく
  • Google ドライブが開けるか確認しておく
  • Google スプレッドシートが新規作成できるか確認しておく

ここは来週の課題とは別です。 できる人だけ、 先に準備しておいてもらえれば大丈夫です。

席

席のエリア表

後

チーム7

後

チーム8

後

チーム9

中

チーム4

中

チーム5

中

チーム6

前

チーム1

前

チーム2

前

チーム3

TikTok 式人狼を遊べたら遊んでみよう

来週のお題を、 プレイヤーとして体験する

ゲーム

ルール（4 人 1 組で 1 ゲーム）

  1. 1 人が「人狼役」 になる。 他の 3 人は「市民役」
  2. 市民 3 人には 同じお題、 人狼 1 人には 違うお題 が配られる
  3. 順番に 自分のお題に関するヒント を 1 言ずつ言っていく
  4. 全員言い終わったら、 みんなで「誰が人狼か」 を指差す
  5. 当たれば市民の勝ち、 外せば人狼の勝ち

例 — 市民「ファミマ」 / 人狼「ローソン」。

気づき

遊ぶと、 設計の問いが見えてくる

遊んでみると、 こんな疑問が湧いてきます。

  • お題が かぶったらどうする？
  • 全員が市民役（または全員が人狼役）になったら成立しないよね
  • 誰がどのお題を持っているか、 アプリは管理する？
  • 4 人がバラバラの端末で見たとして、 同じゲームに参加していることをどう確認する？

そして「どこまでアプリに役割を任せるか」の線引きが重要になってきます。

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