今回のLTを機にGitHub Copilotを使い始めた話

2026/05/27　なんでもCopilot#82「なんでもCopilot2周年 feat CWBJ　
https://nandemo.connpass.com/event/391809/

Transcript

1. 祝 2周年 なんでもCopilot#82 「なんでもCopilot2周年 feat CWBJ」 今回のLTを機に GitHub Copilotを使い始めた話 —生成AIでブログ整理やアプリ開発を進めてみたら AIに丸投げだけでは進まなかった作業—
2. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 2 • Aki（CWBJ２期生 使う＆創る人コース） • 普段の仕事：社内販促物制作・イベント対応 • 普段使っている生成AI：ChatGPT • 仕事で一番使う生成AI：Photoshop • 主な活動 ：地元を盛り上げたい活動 ：音楽活動 ：散策 ：中国語学習 自己紹介 奥会津只見 イラスト美術館 奥会津イベント情報やミニ雪像、 3DCG制作に挑戦している記事など
3. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 3 • CWBJ参加 → ほそじゅん さんからのお誘い • LT参加 → ほそじゅん さんからのお誘い 参加のきっかけ 「GitHub Copilot 使っていればOK」 ※資料は後程共有します。
4. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 4 VS CodeやGitHub上で動作する開発者向けのAIアシスタント GitHub Copilot Freeプラン （2026年5月時点） • コード補完：月2,000回 • Chat / Agent mode：月50回 → 使ったのはコレ プロンプト Visual Studio Code画面 GitHub Copilot プランおよび価格 より抜粋 (2026年5月時点） CHAT
5. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 5 1. 奥会津のイベント情報をまとめた ブログ記事の土台作りを半自動化し 継続的に記事を公開できるようにしたい 2. Teamsのテキスト履歴を活用した 中国語会話練習アプリを作りたい 3. Gitをゲーム感覚で理解できるUIを作りたい GitHub Copilotで やりたかった3つのこと
6. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 6 やりたかったこと➀ ローカルな情報の入手問題 • 公共の情報なのにWeb検索で探せない • コミュニティ内でしか出回らない • 実施日の間近に突然出てくる ブログ制作の問題 ブログ記事制作を半自動化し、継続的に記事を公開できるようにしたい 自分で集めるしかない • どの説明・文章を抜粋するか迷う • 各イベント情報の体裁を合わせるのが大変 • チラシにしかない情報を手で打つのが面倒 • 実施日までに間に合わなくて投稿が流れる 手間になる土台部分を半自動化したい
7. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 7 Copilot にチラシ画像やメモを読んでもらって記事の土台を作りたい ちらしの情報を記事の土台に変える 素材準備 Copilotに読ませる 材料を用意 • チラシ画像を集める • 投稿文や説明文を .md にまとめる • 過去記事コードを 見本として用意 GitHub Copilotに やってもらいたいこと 抽出 ・整理・ コード化 • 情報を抽出 • 記事掲載用に整理 • WordPress用 コード生成 結果 WordPressに貼れる 記事の土台ができる • 画像を見ながらの 手打ちやコピペの 作業が減る • 自分は記事を書く ことに集中できる プロンプトはChatGPTと 相談しながら作成しました
8. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 8 ブログプロジェクトのフォルダ構成 Visual Studio Codeで.mdファイルを開いた画面
9. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 9 結構満足→記事の手直し＆追加 只見通信｜2026 Vol.2 奥会津をもう少し奥まで WordPressやプラグインの テーマのアップデートでど うなるか見ていきたい サムネイル画像も WordPress側で自動 取得し直せばきちん と反映する。 奥会津のイベント情報をまとめた ブログ記事用の生成データ 抜粋 公開した記事 抜粋
10. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 10 やりたかったこと➁ Teamsのテキスト履歴を活用した 中国語会話練習アプリを作りたい • 一問一答 • 中国語会話 • 音声で聞く／話す • 添削 • 他の素材でも練習できる仕組み ※無料のMicrosoft Teamsアカウントを使用 復習もせず放置したままで大変申し訳ない 状態のTeamsのチャット画面
11. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 11 Messages.jsonの中に使えそうな情報が入っている Teamsのログの構成 • displayName：誰の発言か • content：本文 • conversationId：どの会話か • timestamp：いつの発言か • languageStamp：言語判定の参考 2段階で学習アイテムJSON化 抽出・整形 データエクスポートサイトからエクスポートした .tarファイルを展開（Visual Studio Code画面）
12. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 12 作ろうとしたアプリの構成 自分が習った表現を使って復習できる練習アプリ 項目 内容 開発言語 JavaScript / TypeScript 実行環境 Node.js アプリ形式 ローカルで動くWebアプリ 入力データ Teamsエクスポートの messages.json 学習データ 抽出・整形した learning_items.json LLM Ollama上のローカルLLM 使用モデル qwen2.5:1.5b サーバー Node.jsサーバーでJSONとLLM APIを扱う UI ブラウザUIで、出題・表示切替・音声再生を操作 音声出力 ブラウザの speechSynthesisによる中国語の読み上げ 音声入力 ブラウザの音声認識APIによる会話入力（予定）
13. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 13 実感したこと➀ ※個人的な見解です 1. 生成AIと一緒ならかなり進められる • JSON抽出 • Webアプリ化 • ローカルLLM接続 • UI反映まで到達
14. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 14 様々な要因によるプロンプトの無駄打ちが発生した 実感したこと➁ ※個人的な見解です 1. 生成AIと一緒ならかなり進められる 2. 前提知識がないと原因を取り違える 3. 段階的な確認が必要 4. 入力データが荒いと生成も崩れる 5. Git導入しておけばよかった
15. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 15 ➁前提知識がないと原因を取り違える 理解が足りていなかったこと 起きたこと 本来の確認 サーバー再起動が必要な場面 古いコードのまま動かしてい た可能性 変更後に npm run serve を 再起動 src/client/*.ts を直したら ビルドが必要 UIが変わらない npm run build:client を実行 最初からUIで確認していた サーバーの問題か、画面反映 の問題か切り分けられない APIを単体で確認 大きな変更後に型チェックを していない 先に分かるエラーを見落とす npx tsc --noEmit を実行 前提知識を先に押さえていれば、無駄打ちは減らせた。 Webアプリの基本確認を知らず、原因をプロンプト側に寄せて考えていた。
16. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 16 ➂段階的な確認が必要 UI画面だけを見て、原因の場所を切り分けないまま進めていた。 確認順序を先に決められていれば、無駄打ちは減らせた。 1. 条件を固定して確認 例：「汽车」だけで問題生成 2. API単体で確認 例：Invoke-RestMethod で返り値を見る 3. 反映処理を確認 例：サーバー再起動 / build:client 4. 最後にUIで確認 5. 節目でGitコミット
17. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 17 ➃入力データが粗いと生成も崩れる 教材用に整理しきれていないデータを、プロンプトで補正しようとしていた。 Teamsログを 学習データ化 Webアプリ 環境を構築 ローカル LLM接続 Node.js TypeScript Server Client 音声UI Ollama 全件ランダム化 Copilotに頼んだ補正例 • ピンイン・数字・かな混じり除外 • 選んだ語を質問に必ず反映 • リトライ・fallback • fallback多様化 • 長いフレーズの分解 • 日本語寄り漢字語の除外 • 怪しい候補だけLLMに再抽出 qwen2.5:0.5b で試す ↓ モデルを qwen2.5:1.5b に上げた ↓ 比較的自然な 質問が出た learning_items .json 全体から 候補を選択 messages.json ↓対象会話を抽出・整形 cc_lesson_messages.json ↓アプリ用の学習 アイテムに変換 learning_items.json 入力データを先に整えていれば、 無駄打ちは減らせた。 無料枠の50回を使い切った ターゲットを “汽车”に固定
18. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 18 ➄Git導入しておけばよかった 戻れる地点がないので、実行時補正で積み増していた。 Copilotに頼んだ補正例 • ピンイン・数字・かな混じり除外 • 選んだ語を質問に必ず反映 • リトライ・fallback • fallback多様化 • 長いフレーズの分解 • 日本語寄り漢字語の除外 • 怪しい候補だけLLMに再抽出 Gitで戻れる状態を作っていれば、 悪化した時点で戻って、原因を見直せた。 コミットをしてたら ここに戻りたい・・ Teamsログを 学習データ化 Node.js TypeScript Server Client 音声UI messages.json ↓対象会話を抽出・整形 cc_lesson_messages.json ↓アプリ用の学習 アイテムに変換 learning_items.json Webアプリ 環境を構築 ローカル LLM接続 全件ランダム化 qwen2.5:0.5b ↓ qwen2.5:1.5b ↓ 比較的自然な 質問が出た ターゲットを “汽车”に固定 Ollama learning_items .json 全体から 候補を選択
19. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 19 COMMITをしていたら戻れるくらいしか よくわかっていない・・ Gitについて
20. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 20 やりたかったこと➂ Gitをゲーム感覚で理解できるUIを作りたい
21. 祝 2周年 なんでもCopilot#82 なんでもCopilot2周年 feat CWBJ 21 ご清聴ありがとうございました