勉強会_AIでジェネレーター_新人向け_石黒友季子_20260524

勉強会 / 新人向け AIといっしょに、はじめての ジェネレーターづくり ～ 1枚のHTMLで「入力→出力」の小さな道具を作ってみる ～ 対象：プログラミング初級〜新人エンジニア（写経できればOK） 面白きこともなき世を面白く 石黒友季子

ORIENTATION 今日のゴールと進め方 ゴール 進め方（90分の例） ① 解説：道具のしくみ（20分） • 「入力→出力」の小さな道具を1つ作れる ② デモ：AIと一緒に作る（20分） • AIへの「伝わる頼み方」を体験する • 動かして・直すまでを一周する ③ 演習：自分で作る（35分） ④ 振り返り（15分）

WHAT そもそも「ジェネレーター」とは？ 入力されたものを、決まった形に整えて出すだけの小さな道具です。 入力 処理 出力 名前・項目など 整える・組み立てる 完成した文章 例）名前を入れたら「あいさつ文」が出てくる、みたいなもの。これも立派なジェネレーター。

WHY なぜ「1枚のHTML」から始めるの？ すぐ動く 配りやすい こわくない ブラウザで開くだけ。準備がいら ない ファイル1つ渡すだけ。環境構築の 説明が不要 小さいから、壊しても気軽に直せ る

FLOW 作る流れは、たった4ステップ 1 2 3 4 決める 頼む 動かす 直す 何を作るか 小さく決める AIに伝わる形で お願いする ブラウザで 開いて確認 おかしければ 直して再確認 ③④はぐるぐる繰り返してOK。少しずつ良くしていきます。

STEP 2 AIへの頼み方＝「分・形・完・格」 分 形 完 格 小さく分けて頼む 出力の形を言う 完成の条件を言う ていねいさを言う 「ふわっとお願い」だと、ふわっとしたものが返る。具体的に頼むほど、近いものが出ます。

EXAMPLE AIへの「頼み方」具体例 プロンプト例（コピペで使える形） 「名前を入力すると、あいさつ文を作る “1枚のHTML” を作って。 ・入力欄1つ（名前）と、出力欄1つ（あいさつ文） ・ボタンを押すと『◯◯さん、こんにちは！今日もよろしくお願いします』と表示 ・外部のライブラリは使わず、ファイル1つで完結 ・コードはコピペでそのまま動く形で出して」 → 分（やること）・形（HTML1枚）・完（こう表示）・格（コピペで動く）が入っています。

STEP 3 動かす：ブラウザで開くだけ ① AIが出したコードをコピー ② メモ帳に貼って index.html で保存 ③ ファイルをダブルクリックで開く サーバも環境構築もいりません。これがHTML1枚の良いところ。

STEP 4 直す：エラーは“こわくない” うまく動かないとき AIに“そのまま”伝える 「こう表示されてほしいのに、 • 画面が真っ白／ボタンが効かない • 文字化けする • 思った表示にならない こうなった。エラーは○○。 直して」 エラー文は要約せず “全文そのまま”貼るのがコツ

演習（35分） 「あいさつ文ジェネレーター」をAIと作る 1 作るものを決める（名前→あいさつ文） 5分 2 プロンプトを書いてAIに頼む 10分 3 出たコードを保存して開く 10分 4 おかしければAIに伝えて直す 10分

WORKSHEET あなたのプロンプトを書いてみよう 「分・形・完・格」を意識して、AIへの頼み文を下書きしよう。 ✎ ✎ ✎ ✎

TIPS つまずきポイント＆コツ 小さく頼む 一度に全部でなく、まず最小で動かす 事実を渡す エラーは全文。『動かない』だけだと直せない 少しずつ足す 動いたら1機能ずつ追加していく

SAFETY 安全のはなし（だいじ） 作った道具に、入力した内容が「どこへ行くか」を意識しよう。 • 今日のような“1枚HTML”は、ふつう端末の中だけで完結（外部送信なし） • でも「外部に送る機能」を足すと話は別。送り先を確認する • 会社の情報・個人情報は、安易に入力・送信しない

REFLECTION 振り返り 1 今日いちばん『できた！』と思ったこと 2 次に作ってみたい小さな道具 3 まだ分からないこと

今日のいちばん大事なこと 「小さく作って、動かして、直す」 これを、AIといっしょに。 お疲れさまでした。面白きこともなき世を面白く