株式会社VISIONARY JAPAN Advent Calendar 2025

株式会社VISIONARY JAPAN

【AIは学び続けられない】過疎った勉強会を「再開発」して気づいた、エンジニアに必要な"居場所"の作り方

Last updated at 2025-12-22Posted at 2025-12-18

はじめに

「AIが苦手なことは、学び続けること」

物理学者の田中秀宣さんは、とある対談の中でそう語っていました。（25:08頃）

「今何がAIができないかっていうと、学び続けることができないんですよね」

この言葉を聞いて、ふと思いました。

自分たちが3年間続けてきた勉強会は、まさに「学び続ける」場だったんだと🧐

その記録を、この記事にまとめてみます。

2023年2月、2人で始めたフロントエンドの雑談会が、約3年で「学びラボ」という社内の学習プラットフォームになりました。

学びラボのロゴ

この記事は、小さな雑談会から始まり、参加者が増えていく中で見えてきた課題に向き合い、最終的に Next.js + NestJS のモノレポで学習管理アプリを開発・運用するまでの記録です。

まだ小さな取り組みですが、継続的に参加してくれる人たちが増え、少しずつ「学びの文化」が根付いてきたように感じています。

技術的な実装の話だけでなく、自分で考え、自分で動くことで小さな変化を起こしていったプロセスもお伝えできればと思います。

この記事の3行まとめ

時間制約・心理的障壁・モチベーションという3つの課題を、AI要約・ゲーミフィケーション・QRコードで解決
YouTube字幕→トランスクリプト→Gemini APIを使った、実務で使えるAI要約実装とClaude Code活用パターン
「AIは学び続けられない」だからこそ、小さく始めて継続し、好奇心と継続力で文化を作ることに価値がある

この記事で扱うこと

少人数の雑談会から学びの文化が生まれるまで
規模拡大に伴って見えてきた課題（時間的制約、心理的障壁、モチベーション）
課題解決のために開発した学習プラットフォームの実装
- AIアーカイブ機能（Gemini API）
- ゲーミフィケーション（ポイント・ランク）
- QRコード出席システム

※ 本記事の内容は、ボトムアップの提案が比較的許容される環境での一例です

すべては、少人数の雑談会から始まった
継続することで、文化が生まれた
フロントエンドから、会社全体へ
「参加できない人」「参加しづらい人」の存在
誰もが参加できる仕組みを作る
開発プロセス：設計とAIの協働
実装で工夫したポイント
AI時代における「作る」ことの意味ー技術で居場所を作る

すべては、少人数の雑談会から始まった

2023年2月、2人のフロントエンドエンジニアで「最近試した技術」や「ハマった問題」を共有する雑談会を始めました。

当時の状況

参加者：3名程度
頻度：週1回、30分程度
内容：フロントエンド技術に特化（React、Next.js、CSSなど）
形式：カジュアルな雑談

特別なことは何もしていませんでした。

ただ、継続することだけは大切にしていました。

なぜ雑談会を始めたのか

当初から、明確な目的があったわけではありません。

ただ、いくつかの「こうだったらいいな」という想いがありました。

雑談会で大切にした3つのこと

💬 話すことで知識を構築する
📻 ラジオ感覚で気軽に聞く
🤝 技術だけじゃないコミュニケーション

💬 1. 話すことで、知識が構築される

インプットだけでは、学びは定着しないのではないかと感じていました。

学んだことを言語化することで、理解が深まる
説明しようとすると、自分の理解の穴が見える
質問されることで、新しい視点が得られる

雑談会は、誰かに教えるための場ではなく、自分の知識を整理する場でもあったと思います。

📻 2. わからないことでも、まずラジオ感覚で聞いてみる

勉強会というと、「ちゃんと理解してから参加しないと」と思いがちです。

しかし、ラジオ感覚で聞き流すことから始めても良いのではないかと考えていました。

最初は全然わからなくても、繰り返し聞くうちに理解できることがある
「あのとき聞いた話、今ならわかるかも」という瞬間がある
わからないなりに聞いておくことで、どこかで点と点がつながる

このハードルの低さが、継続の鍵だったと感じています。

🤝 3. 技術の話だけじゃない、コミュニケーションの場

雑談会は、技術を学ぶ場であると同時に、人とつながる場でもありました。

他のエンジニアが何に興味を持っているのか知れる
困ったとき、相談しやすい関係ができる
「この人、こんなこと知ってるんだ」という発見がある

技術的なスキルだけでなく、組織の中での心理的安全性も少しずつ高まっていったように思います。

🎯 誰かに言われてやったわけじゃない

この取り組みは、誰かに指示されて始めたものではありません。

2人で週1回、30分の雑談会から始め、
続けていたら参加者が増え、会社が予算をつけてくれました。

「許可を取ってから始める」のではなく、
小さく始めて、続けて、価値を示す。

結果として、社内の正式な取り組みになっていきました。

継続することで、文化が生まれた

数ヶ月続けるうちに、変化が起き始めました。

📈 起きた変化

Before	After
運営側がテーマを提示	「〇〇について話したい」と参加者から提案
単発参加が多い	「次回も参加したい」と継続参加が増加
フロントエンドのみ	「バックエンドの話もしていいですか？」と領域拡大

気づいたら、「勉強会の文化」が根付いていました。

文化は一度の大きなイベントではなく、小さな積み重ねで作られるんだなと思いました。

フロントエンドから、会社全体へ

勉強会が軌道に乗ってきたタイミングで、新たな挑戦を始めました。

この取り組みを「学びラボ」と名付け、フロントエンドに限定せず、会社全体で学び合える場へと発展させることにしました。

🌍 なぜ拡大したのか

もっと多くの人に学びの場を提供したいと思うようになりました。

フロントエンドだけでなく、バックエンド、AI、ビジネス領域まで
エンジニアだけでなく、ビジネスサイドも
技術だけでなく、組織やマネジメントの話も

📅 テーマの拡大

📆 時期	🎯 テーマ	👥 平均参加者数
初期（2023年2月〜）	フロントエンド技術	3〜5名
拡大期（2024年半ば〜）	バックエンド、インフラ	10〜15名
現在（2025年4月〜）	AI、ビジネス、組織論	20〜30名

しかし、拡大するにつれて、新たな課題が見えてきました。

「参加できない人」「参加しづらい人」の存在

続けていく中で以下の課題が出てきました。

直面した3つの課題

時間的な制約: 業務で見れない、後から追うのが大変
心理的な障壁: 「途中参加しづらい」「レベル感が不安」
モチベーション: 参加しても成長が可視化されず、続かない

このとき感じたのは、
「参加できない理由は、意欲ではなく仕組み側にあることが多い」ということでした。

誰も取り残さない学びの場を作りたい！

だからこそ、以下の機能を実装しました：

アーカイブ機能：時間的制約の解消
AI要約：学習ハードルの低減
ゲーミフィケーション：継続へのモチベーション
QRコード出席：心理的障壁の軽減

誰もが参加できる仕組みを作る

3つの課題に対して、それぞれ機能を開発しました。

学びラボのホーム画面

1. アーカイブ機能：時間的制約の解消

課題: 業務で参加できない、後から追うのが大変

解決策: いつでも、どこでも学べる環境を作る

📹 勉強会の録画・資料をアーカイブ化
🤖 Gemini APIを活用して、動画や資料の内容を簡潔に要約
🔍 タグ検索で過去の勉強会を探しやすく

結果: 月平均150回以上のアーカイブ閲覧

2. ゲーミフィケーション：継続へのモチベーション

課題: 参加を続けるための動機づけが不足

解決策: 学びを楽しく、継続を習慣にする仕組み

🎫 スタンプ
勉強会参加でスタンプをコレクション
⭐ ポイント制度
参加、発表などの活動に応じてポイントを付与
🏆 ランクシステム
ポイントに応じてランクアップ
📊 統計グラフ
自分の学習履歴を可視化

スタンプコレクション画面とランク・ポイント画面

💡 余談：なぜドーナツなのか

スタンプのデザインがドーナツになったのは、雑談会での何気ない会話がきっかけでした。

「エンジニアの勉強会って、ケータリングでドーナツが出るのが慣習だよね」

この一言から、「学びラボのスタンプもドーナツにしよう」というアイデアが生まれました。

小さな遊び心ですが余談でした。

3. QRコード出席システム：運営負荷の軽減

課題: 運営が出席登録をアナログで管理しており、手間がかかっていた

解決策: QRコードで自動化し、運営の負担を軽減

勉強会の時間になるとステータスバーが表示され、出席ボタンから参加コードの入力またはQRコードの読み取りで出席登録。

さらに、要望を受けて、スマートフォンのネイティブカメラアプリからQRコードを読み取っても参加記録が登録される機能を実装しました。アプリを開かずとも、カメラでQRコードを読み取るだけで出席完了できます。

pic.twitter.com/gi8rqfJXmN
— mccart (@mccart_dev) December 18, 2025

開発プロセス：設計とAIの協働

実は、このアプリの開発途中で、作り方が大きく変わりました。

Phase 1: 丁寧な設計から始めた

最初は、設計を丁寧に行いました。

FigmaでUIを作成
ワイヤーフレームで画面遷移を整理
テーブル定義でデータ構造を設計

「何を作るか」「どう使ってもらうか」を明確にすることに、時間をかけました。

この段階は、自分の頭の中にある「こうしたい」という想いを、形にする工程だったと思います。

Phase 2: Claude Code登場による実装の時短

2025年途中、Claude Codeが登場したことで、開発スピードが変わりました。

それまでは、Figmaを見ながらCSSを書いたり、テーブル定義を見ながらマイグレーションファイルを書いたりしていました。

しかし、この作業をAIに任せることにしました。

UI実装: Figmaのデザイン意図を伝え、Tailwind CSSのコンポーネントを生成
ボイラープレート: NestJSのController/Serviceの雛形を自動生成
型定義: DBスキーマからTypeScriptの型を自動生成

気づいたこと：設計こそが、AIへの最強の指示書

Figmaやテーブル定義をしっかり作っておいたおかげで、AIへの指示が明確になり、手戻りを減らすことができました。

人間とAIの役割分担

振り返ってみると、こんな分担になっていました。

役割	人間がやったこと	AIがやったこと
Why & What	課題発見、UI/UX設計、DB設計	-
How	-	コード生成、ボイラープレート実装
Quality	レビュー、微調整、リリース	-

このスタイルが、一人での開発を可能にしたと思います。

実装で工夫したポイント（技術編）

AIアーカイブ機能の実装＆プロンプト設計

課題：限定公開のYouTube動画を要約したい

勉強会の録画は、社内限定公開のYouTube動画としてアップロードしていました。

この動画の内容を要約するために、以下の方法を採用しました。

YouTubeの字幕機能をONに設定
youtube-transcript ライブラリで字幕（トランスクリプト）を取得
取得したテキストをGemini APIで要約

YouTube Data APIを使う方法もありますが、字幕データの取得には制限があるため、@danielxceron/youtube-transcript というライブラリを使いました。

注意点：

YouTubeの字幕機能がONになっている必要がある
自動生成字幕でも手動字幕でもOK
限定公開・非公開動画でも取得可能

プロンプト設計：試行錯誤の末に辿り着いた形

プロンプトは試行錯誤の結果、以下の構成に落ち着きました。

import { GoogleGenerativeAI } from "@google/generative-ai";

async function summarizeYouTubeVideo(transcriptText: string): Promise<string> {
  const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
  const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash" });

  const prompt = `以下はYouTube動画の文字起こしテキストです。このテキストを以下の形式で要約してください：

【概要】
動画全体の要旨を2-3文で説明

【主なポイント】
- ポイント1
- ポイント2
- ポイント3

【結論】
動画の結論や重要なメッセージ

文字起こしテキスト:
${transcriptText}`;

  const result = await model.generateContent(prompt);
  return result.response.text();
}

プロンプト設計のポイント：

構造化された出力形式を明示：【概要】【主なポイント】【結論】という形で、何をどう出力するかを具体的に指定
各セクションに具体的な制約：「2-3文で」など、より具体的な指示を与える
一貫性のある結果：構造化することで、毎回同じ品質の要約が得られる

最初は「要約してください」だけのシンプルなプロンプトでしたが、要約の品質が安定しませんでした。

AIは「何を出力すべきか」が曖昧だと、毎回異なる形式で返してきます。

そこで、出力形式を明示的に構造化することで、一貫性のある要約が得られるようになりました。

AI時代における「作る」ことの意味ー技術で居場所を作る

作ったのは「アプリ」ではなく「居場所」

この記事を通して伝えたかったのは、技術的な実装だけではありません。

振り返ってみると、技術的な実装そのものよりも、「文脈に合わせた体験設計」が大切だったと感じています。

あえてスプレッドシートではなく、スマホで完結するQRコードにした
ランク制度を入れて、少しの遊び心を足した
アーカイブ機能で、参加できない人も後から学べるようにした

これらは、社内のメンバーの顔を思い浮かべながら設計した結果です。

AI時代における「作る」ことの意味

AIはコードを書けますが、「社内の空気を読んで、適切なタイミングで、適切なツールを提案する」ことはできません。

AI時代、コードを書くこと自体の価値は下がっていきます。

その分、「何を作るか・なぜそれが必要か・どう届けるか」といった文脈を設計する力の価値は、むしろ高まっていくのではないかと思います（主語がでかいですが...）。

大切にしてきたこと

🌱 小さく始める：完璧を目指さず、まず動かす
🔄 継続する：文化は積み重ねで作られる
📈 拡大する：成功したら、より多くの人に届ける
🤗 包摂する：誰も取り残さない仕組みを作る
🛠️ 改善する：運用しながら、育て続ける

誰かに言われてやったわけじゃない

「こうしたい」という想いから始まった
提案し、実行し、証明した
居場所は、自分で作れる

そして、環境の大切さ

このプロジェクトは、自分で考えて動くことを許容してくれる環境があったからこそ実現できました。

環境が人の可能性を引き出すということを、改めて感じています。

これからも

🔗 技術で、人と人をつなぐ
🌟 学びの文化を、さらに広げる
🚀 好奇心を持ち続け、作り続ける

今後の課題

利用者が増え、データが蓄積されるにつれて、スケーラビリティへの対応も必要になってきました。

現在は、クエリの最適化やページネーションの実装、データベースインデックスの見直しなど、段階的に改善を進めています。

作って終わりではなく、育て続けることが大切だと感じています。

最後まで読んでいただき、ありがとうございました！

この記事が、何か作りたいと思っている方の参考になれば嬉しいです🙇

補足：技術スタック一覧

フロントエンド

Next.js (App Router)
React
TypeScript
Tailwind CSS
TanStack Query
Zod

バックエンド

NestJS
TypeScript
Supabase (PostgreSQL)
Gemini API

インフラ

Vercel (Web)
Google Cloud Run (API)
Supabase (Database, Auth)

開発ツール

pnpm (モノレポ管理)
ESLint + Prettier
Husky (Pre-commit hooks)
GitHub Actions (CI/CD)
Playwright (E2E テスト)

参考リンク

【数式で解くAIと人が混ざる社会】知性の物理2.0・田中秀宣／社会が相転移する／AIは「これはアメリカ式の助言です」とは言わない／あなたの考えは本当に"あなた"のもの？【CROSS DIG 1on1】 - この記事を書くきっかけとなった動画

タグ: #Next.js #React #NestJS #TypeScript #Supabase #AI #AIエージェント #ポエム #学習管理 #社内勉強会 #モノレポ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up