TRAINING

AI協働開発ハンズオン講座
情報系トラック

株式会社テクノプロ 御中 / 株式会社ギブリー
Givery
← トラック選択へ戻る

講座のねらい

全3日・各8時間。手を動かす時間が中心です。

この講座では、生成AIに「やらせて終わり」ではなく、出てきたものを自分で確かめて使うところまでを扱います。 3日間を通して、日本語で伝えて動くものを作り、その内容を自分の目で検証できる状態を目指します。

Python も Node.js も使いません。追加のインストールも不要です。 VSCode でコードを書き、ブラウザで動かします。管理者権限のない貸与PCでそのまま進められる構成です。

3日間の流れ

各日のゴールと時間の使い方です。1日は[480min]で、これに昼休憩が加わります。第1回と第2回のあいだは2週間、第2回と第3回のあいだは1週間あきます。

DAY 1
Copilotで作る・直す、既存アプリへの機能追加と規約

この日のゴール

  • 貸与PCのVSCodeでCopilotに日本語で質問し、日本語の返事が返る
  • Ask・Agent・Plan を選んで頼み、差分を読んでから Keep できる
  • 配布のアプリを先に読ませてから機能を2つ足し、出てきた合計を自分で検算できる

時間の使い方

[100min]環境セットアップ(VSCode・GitHubアカウント・Copilot招待・疎通確認)
[30min]AI駆動開発の世界(LLMとエージェントの動き方)
[95min]Copilotの基本操作(Ask・Agent・Plan、Keep)と機密の扱い・プロンプトの型
[10min]休憩
[60min]仕様5行から動くWebアプリ(バイブコーディング・ブラウザで確認)
[10min]休憩
[75min]既存アプリへの機能追加(先に読ませる→絞り込みと合計を足す→検算)
[10min]休憩
[90min]モデルの使い分けと規約ファイルのチーム展開、振り返り

この日の終わりに手元に残るもの

worklog.html(仕様5行から作ったアプリ)絞り込みと合計を足した index.htmlcopilot-instructions.md / AGENTS.md(規約ファイル)model-memo.txt(検算とモデル比較)
DAY 2
テストをAIと作る(テスト設計・テストデータ・単体テスト・セキュリティ)

この日のゴール

  • AIが入れた1行の不具合を、症状だけ伝えて直させられる
  • 仕様から観点を出し、期待結果の出どころまで書いたケース表を作れる
  • AIに書かせた単体テストを読み、通ったことの意味を自分で判定できる

時間の使い方

[60min]配布ZIPの展開と、AIと進めるデバグ(1行壊して症状だけ伝えて直させる)
[37min]テスト業務とAIの分担
[10min]休憩
[114min]観点抽出とテストケース生成(Day1で足した機能のケース表)
[60min]テスト設計の基本(期待結果の出どころ・要件ID・判定表)
[10min]休憩
[70min]テストデータと報告書
[10min]休憩
[73min]取込の実装と単体テスト(AIが書いたテストを人が判定する)
[27min]表示と書き出しの穴(セキュリティ)
[9min]振り返りとDay3予告

この日の終わりに手元に残るもの

testcases.md(出どころつきのケース表)data.csv(テストデータ)report.pdf(報告書)worklog-core.js と tests.html(取込と単体テスト)
DAY 3
E2Eとスキル・エージェントによる自動化と認定

この日のゴール

  • 取込から再読込までをE2Eで流し、落ちた理由を画面と結びつけて言える
  • 毎回の手順をスキルとエージェントに移し、次の人が同じ結果を出せる形にできる
  • 新しい勤怠形式の取込を実技で仕上げ、判断の理由をつけて提出できる

時間の使い方

[10min]Day2の振り返りと今日の準備
[90min]ブラウザだけで回るE2E(読む・壊して確かめる・報告書に実行結果)
[10min]休憩
[120min]手順と見る役の固定(スキル・規約・エージェント)
[40min]認定とリテラシーチェック
[10min]休憩
[120min]実技(新形式の9月分を取り込み、判断を提出)
[10min]休憩
[60min]講評とコメントへの対処、修了証
[10min]3日間の成果物と来月の手順

この日の終わりに手元に残るもの

e2e.js(取込から再読込までのE2E)report.pdf(実行結果を足した報告書)test-design と regress のスキル、tests 用の規約security-reviewer(見る役のエージェント)submit_名字.md(実技の提出)

使う道具

3つだけです。役割がはっきり分かれています。

道具役割
VSCodeコードや文章を書く場所です。1.116以降(Copilot Chat標準搭載)なら Copilot Chat が最初から入っています。
GitHub CopilotVSCode の中で相談できる相手です。日本語で頼めます。
ブラウザ(Edge等)作ったものを動かして確かめる場所です。データを読ませるときは、ファイルを画面にドラッグして落とします。

事前の準備

当日までにお願いするのは、GitHubアカウントの準備だけです。

  1. 配布物のZIPを受け取り、デスクトップに展開しておきます。Windows用とMac用があるので、お使いの端末に合う方を使ってください。
  2. VSCode が起動することを確かめます。管理者権限は要りません。
  3. GitHub から招待メールが届きます。アカウントを作成し、招待の承諾まで済ませてください。手順は下の「GitHubアカウントの準備」にあります。間に合わなかった場合は当日の午前に一緒に行いますので、そのままお越しください。

教材

回ごとに、投影スライドと配布物をまとめています。

第1回

Copilotで作る・直す、既存アプリへの機能追加と規約

環境を整えたあと、仕様5行から動くWebアプリを作ります。午後の後半は配布の作業記録アプリを先に読ませてから機能を2つ足し、規約ファイルまで置きます。

第2回

テストをAIと作る(テスト設計・テストデータ・単体テスト・セキュリティ)

Day1で機能を足したアプリを題材に、デバグから入ります。仕様からケース表とテストデータを作り、取込の実装と単体テスト、表示の穴まで扱います。

第3回

E2Eとスキル・エージェントによる自動化と認定

E2Eで取込から再読込までを流し、繰り返す手順をスキルとエージェントに移します。午後は新しい形式の取込を実技で仕上げます。

研修中に手が止まったときは、お手元のハンズオンガイドに同じ手順が書いてあります。 スライドは流れていくので、戻りたいときはガイドをご覧ください。

補足資料

本編では時間の都合で扱わない内容と、研修で作ったファイルの早見表です。研修の前後にお読みください。

配布物

回ごとに1本です。展開すると tpro-work というフォルダになります。デスクトップに置いてください。

回Windows用Mac用
第1回 情報系_Day1_配布_Windows用.zip Mac用
第2回 情報系_Day2_配布_Windows用.zip Mac用
第3回 情報系_Day3_配布_Windows用.zip Mac用
ハーネス早見表 ハーネス早見表(PDF、A4横1枚)
ファイル名が文字化けする場合は、もう一方のZIPをお試しください。 解凍ソフトによって日本語名の読み方が違うため、2種類をご用意しています。

守っていただくこと

受講者のみなさんは派遣先の情報を扱う立場にあります。演習では次を前提にしてください。

演習で使うデータはこちらでご用意しています。実際の業務ファイルや業務画面は使わないでください。

よくある質問

Python は入れなくてよいのですか

要りません。この講座は VSCode とブラウザだけで完結します。データの集計もグラフも、配布物に同梱したライブラリでブラウザ上で動きます。

プログラミングの経験がなくても大丈夫ですか

開発経験がある方を想定していますが、AI活用が初めてでも進められる構成です。

作ったものは持ち帰れますか

持ち帰れます。作ったファイルはご自身の端末に残ります。ただし提出物には制限があります。次の項目をご覧ください。

提出するものはありますか

言語化したテキストのみを提出します。コードと実データは提出しません。 提出方法は当日ご案内します。

途中で分からなくなったらどうすればよいですか

手を挙げてください。演習には「うまくいかないとき」の項目を用意しています。 時間内に終わらなくても構いません。全部終わらせることが目的ではありません。

研修で使った環境は、そのあとも業務で使えますか

利用の可否と範囲は、所属先と常駐先の取り決めによります。研修中に断定はできませんので、 社内の手順に沿ってご確認ください。費用の仕組みだけ書いておきます。 GitHub Copilot には無料プランがありますが利用量に上限があり、業務で日常的に使うには足りません。 有償プランは個人向けが月10ドルから、組織向けの Business が1席あたり月19ドルです。 2026年6月に課金方式が変わり、使ったモデルとトークン量に応じて減る GitHub AI Credits になりました。 コードの補完は非課金なので、補完中心の使い方であればほとんど減りません。 (出典 GitHub Docs、2026年9月9日確認)

機密情報を含むファイルは、どのタイミングでAIに読まれますか

エクスプローラーにファイル名が並んでいるだけなら送られません。 送られ始めるのは、そのファイルをエディタで開いたときと、中の文字を選択したときです。 VSCode は開いているファイルと選択範囲を、こちらが指定しなくても会話に添えます。

気をつけていただきたいのは .gitignore の扱いです。除外に書いていても、 そのファイルを開くと除外が迂回されます。「除外に書いたから安全」は成り立ちません。

「このプロジェクトは何をしているものですか」のような質問でも送られます。 VSCode はワークスペースの索引を持っていて、会話の内容に応じて関連するファイルを自動で拾います。 公式ドキュメントには、検索で一致した内容は AI がそのファイルを開かなくても会話に含まれる、と書かれています。

確実なのは、機密ファイルを含むフォルダを VSCode で開かないことです。 開かざるを得ない場合は、機密ファイルを別のフォルダへ移してワークスペースに含めない、 files.exclude でエクスプローラーからも隠して開く事故を防ぐ、の順で対処してください。 (出典 VS Code Docs、2026年9月9日確認)

ほかの会社の導入事例はありますか

社名と数字が公開されているものを挙げます。日立製作所は約200名での社内評価で「タスクを迅速に完了できる」が83パーセント、 富士通は10,000名超が利用して作業負荷を20パーセント削減、東芝テックは約300名でのPoC、 カカクコムはトライアル後に全開発者へ展開しています。 客先との話では、規模の大きい会社の名前より、近い規模の会社の数字のほうが通ります。

仕組みをもっと詳しく知るための資料はありますか

次の3つが出発点になります。 ワークスペースの索引とファイルの扱い、 カスタム指示ファイル、 プランと課金。 1つ目は上の機密ファイルの質問で引いているページです。

用語集

研修中に出てくる言葉です。分からないまま進めず、ここで確かめてください。

使う道具と画面
VSCodeブイエスコード
コードや文章を書くエディタ。正式名は Visual Studio Code
GitHub Copilotギットハブ コパイロット
VSCodeの中で相談できる生成AI。提供元はGitHub社
GitHubアカウントギットハブ アカウント
Copilotを使うために必要な利用者登録。研修の初日に作ります
エクスプローラー
VSCodeの左側に出るファイルの一覧
チャットパネル
VSCodeの右側に開く、AIとやりとりする欄
サインイン
自分のアカウントで使える状態にすること
拡張機能かくちょうきのう
VSCodeに後から足せる機能。本研修では追加インストールをしません
tpro-workティーピーアール オー ワーク
デスクトップに置く作業用フォルダ。配布物はすべてこの中に展開します
生成AIの仕組み
生成AIせいせいエーアイ
文章やコードを作り出すAI。検索と違い、探すのではなく作って返します
モデル
生成AIの中身にあたるもの。用途によって選び分けます
検算けんざん
AIが出した数字を、別のやり方でもう一度確かめること
指示文しじぶん
AIへの頼み方を書いた文。役割・文脈・制約・出力形式の4つで組み立てます
プロンプト
AIへの指示文。本研修では日本語で書きます
LLMエルエルエム
大規模言語モデル。次に来そうな言葉を確率で選び続ける仕組み
トークン
文章を細かく区切った単位。AIはこの単位で次の語を選びます
インライン補完インラインほかん
入力の途中に灰色で候補が出る機能
Askアスク
チャットの入力欄の下で選ぶロールの1つ。聞くだけで、ファイルは変わりません。中身を聞く、説明させる、案を比べるときに使います
Agentエージェント
ファイルの作成と書き換えまでするロール。どのファイルを開いて直すかまでAIが決めます。書き換えは Keep するまで確定しません
Planプラン
作業の計画と手順だけを出すロール。ファイルは変わりません。大きな変更の前に段取りを確かめるときに使います
Keep / Undoキープ / アンドゥ
Agent が出した差分を受け入れる操作と、戻す操作。Keep は、その行を自分が書いたと認める操作です
差分さぶん
AIの提案による変更前と変更後の違い。読んでから Keep すると、ファイルに書き込まれます
スラッシュコマンド
入力欄で / から始めて呼び出す、定型の指示
ファイルと実行
HTMLエイチティーエムエル
ブラウザが表示できる形式のファイル。拡張子は .html
CSVシーエスブイ
カンマ区切りの表データ。Excelでも開けます
Markdownマークダウン
記号で見出しや箇条書きを書く記法。拡張子は .md
拡張子かくちょうし
ファイル名の末尾に付く .html や .csv の部分。中身の種類を表します
ドラッグ
ファイルや文字を押したまま動かす操作。データの読み込みは画面に落として渡します
テストとセキュリティ(情報系)
受入基準うけいれきじゅん
何ができていれば合格かを、数えられる形で書いたもの
テストケース
どの入力で何が返れば正しいかを1件ずつ書き出したもの
期待結果きたいけっか
その入力に対して返るべき値。仕様から書くのが原則で、実装から写しません
同値クラスどうちクラス
同じ結果になる値のかたまり
境界値きょうかいち
同値クラスの境目の値。不具合が出やすい場所
正常系 / 異常系せいじょうけい / いじょうけい
想定どおりの入力で通る経路と、想定外の入力を渡したときの経路
PASS / FAILパス / フェイル
テストが通ったことと、落ちたこと
カバレッジ
テストが通ったコードの行の割合。正しさそのものは測れません
E2Eテストイーツーイー テスト
画面操作の順番どおりに通して確かめるテスト。End to End の略
Playwrightプレイライト
ブラウザを実際に操作してテストするツール。貸与PCには入れないので、本研修では講師の画面で見せるだけです
要件IDようけんアイディー
仕様書の要件に付いた番号。R-03 のように書き、期待結果がどの要件から来たかをケース表に残します
出どころでどころ
期待結果をどこから取ったか。仕様・受入基準・保留・推測の4つで書きます。仕様を満たす証拠になるのは仕様と受入基準だけです
層そう
そのケースをどう確かめるか。単体・E2E・人が見る、の3つから選び、ケース表の列に入れます
判定表はんていひょう
条件の組み合わせと、そのときの結果を並べた表。全部の組み合わせは作らず、関係する条件だけを組み合わせます
契約けいやく
関数ごとに、受け取るもの、返すもの、読めなかったときに返すものを1行で書いたもの。テストはこれを見て書きます
assertアサート
期待値・実際値・ケースIDを受け取り、一致すれば PASS、違えば FAIL を出す小さな関数。本研修では自分で読んで確かめたものを使います
SUMMARY 行サマリーぎょう
tests.html の上に出る、PASS・FAIL・保留の件数とケースIDの一覧の1行。Day3 の実技の提出にそのまま貼ります
保留(HOLD)ほりゅう(ホールド)
仕様書が決めていないため、客先に確認中のケース。FAIL とは別に数えます
シナリオ
E2E の1本。前提(Given)、操作(When)、結果(Then)の3つで書き、結果は件数で書くと確かめやすくなります
?e2eイーツーイー パラメータ
index.html の後ろに付けて開くと、e2e.js を読み込んで E2E を流す印。付けずに開けば普段の画面です
SQLインジェクションエスキューエル インジェクション
入力値によって命令を書き換えられてしまう欠陥
XSSクロスサイト スクリプティング
入力値がそのまま画面で実行されてしまう欠陥
innerHTML / textContentインナーエイチティーエムエル / テキストコンテント
文字列をHTMLとして書き込む書き方と、文字として書き込む書き方
AGENTS.mdエージェンツ ドット エムディー
AIに読ませる事実だけを書くファイル
copilot-instructions.mdコパイロット インストラクションズ
Copilotが毎回読む前置きを書くファイル。.github フォルダに置きます
手順を残すしくみ(情報系)
規約(instructions)きやく(インストラクションズ)
特定のファイルを扱うときだけAIが読む決まりを書くファイル。.github/instructions に置き、先頭の applyTo で対象を書きます
applyToアプライトゥー
規約が効くファイルの範囲。tests/** と書けば、tests フォルダの中のファイルを扱うときだけ読まれます
スキル
手順をまとめたフォルダ。.github/skills/<名前>/SKILL.md を置き、AIが関係ありと判断したときと、/ から呼んだときに読まれます
カスタムエージェント
役割を決めたAIの定義。.github/agents/<名前>.agent.md に書き、親の Agent がサブエージェントとして呼びます
サブエージェント
親の会話から切り出して、別の文脈で走らせるAI。結果だけが区画に分かれて返ります。親より上のモデルでは動きません
守っていただくこと
丸めるまるめる
固有の情報を業界や工程のレベルまで抽象化して書くこと