本記事は、2023 LTS グループアドベントカレンダー ６日目の記事です。🎉
一覧はこちら↓
https://qiita.com/advent-calendar/2023/ltsgroup
はじめに
元塾講師でエンジニア歴2年目のまだまだ駆け出しの私が思い切って、
社内勉強会を開きました。
この記事は、その振り返り（失敗談）を赤裸々に語ったものになります
「初心者でも勉強会は開催できる！」ということが伝われば幸いです！
きっかけ
SES事業をしている弊社では月に1度、帰社日を設けて、
15:00〜社員全員が集まるようにしています！
ある帰社日を利用したその午前中には参加自由の勉強会が開催され、
なんかみんなでワイワイやっていて楽しそうでした。
もともと塾の講師だったから人に教えることは得意！
僕もやりたい！ と言うと、
ノリがいい上司が「やりたいなら、やってみなよ！」って感じでトントン拍子に決まりました！
大学生みたいなノリの上司で時々、心配になりますが・・・
勢いで勉強会の開催は決まりましたが、ここから勉強会の準備がなかなか大変でした。
勉強会1カ月前～2週間前
目的を決める
まずは勉強会の目的を決めることろから始めました。
以下の3つの目的を設定しました
①新人の知識のキャッチアップ
（特にフロントエンド）
②学習モチベーションの維持
③単純に面白そう！
知識のキャッチアップのために
フロントエンドでは、デファクトスタンダードになりつつあるReactの講座にしようと決めました。
いい勉強会の条件
勉強会をするにあたって、3つの目標設定を設けました。
①他の予定を空けてでも、参加したいと思えるくらい楽しい！
②ただ、参加するだけでなく、意見交換や議論が出来て、おもしろい！
③勉強会で学んだことが、業務や個人開発の役に立つ！
こちらは「暇人プログラマー」というポッドキャストで話されていた内容をもとに作りました
2週間前～1週間前
題材の決定
折角、集まって勉強会をやるので、一方向ではなく、双方向にやり取りができるハンズオン形式にしました。
実際に、動くアプリを作ることでやる気や自信に繋がると思いました。
題材も、初学者の人にとっつきやすいように「ポケモン」や「ECサイト」など馴染みがるものを選びました。
1週間前
スコープの調整
Reactの書き方に集中したかったので、
CSSなど、デザインは一切、省きました。
CSSのコードは全て、コピペで対応という形にしました。
3日前
スライドの作成
props, stateといったReactの基本的な概念や構文などをスライドでまとめました。
（どう考えても始めるのが遅く、もっと早く取り掛かるべきでした・・・）
前日～直前
必要なツール・ライブラリーの確認、環境構築の確認
- git
- Node.js
- npm
など、必要なツール・ライブラリーを調べて
参加者1人に協力してもらって、環境構築も出来そうだし、OK！問題なし！
（そう思っていた時期が僕にもありました・・・）
当日
勉強会の内容
第1回目『Reactでポケモン図鑑を作ろう！』
つくったアプリ↓
第１回の資料
第2回目『Next.jsでショッピングサイトを作ろう！』
つくったアプリ↓
第２回の資料
やってみた感想
まずは、アンケートでの結果発表！！
第１回勉強会の結果発表！
５点満点で評価してもらいました
回答数：９件
- たのしい！ : 4.1点
- おもしろい！ : 3.3点
- 役に立つ！ : 4.5点
頂いた感想
Good！
- Reactに慣れたらかなり楽にアプリやサイトが作れそうだと感じました。
- どうやってReactを始めるのかを知ることができてよかったです。
bad...
- Reactがどう使われてるのかの話をもう少し聞きたかった。
- 時間が少なくて出来ることが限られてしまうのが悔しいですね…
第２回勉強会の結果発表！
回答数：８件
- たのしい！ : 4.0点
- おもしろい！ : 3.0点
- 役に立つ！ : 4.9点
Good！
- モチベ上がりました。定期的にこういう会があるとありがたいです
- たくさんの知識を学習しました。もっとGitHubとコマンドの操作を了解したいです。
bad...
- 受講側の知識がまだそこまでないので議論や意見交換はできなくても仕方ないかと思います。
- 予習の必要があるのであれば、動画等の情報共有は1週間くらい前に欲しいと思いました。
総じて、
・みんなでワイワイやれて楽しかった！
・議論はあまりできず、おもしろくなかった・・・
・めっちゃ役に立つと思った！
という感想でした。
難しかったところ
- タイムマネジメントが超ムズイ
- 環境構築で大幅な時間ロス
- Dockerで環境構築を整えるべきだった
- エラーが出た時の回避策を考えてなかった
事前に立てたタイムスケジュールは絶対に守られません！
バッファを持たせて、さらにここだけは重要だから絶対に教えたい！と優先度をつけて講義することが大事だと思いました
特に環境設定は平気で2,3時間解けるので、事前に入念にチェックする必要があります。
npx create-next-app . ってコマンド打っときゃ、大丈夫だろうと思っていた自分が甘かったです。。。
nodeのバージョンとか、windowsか、MacかのOSよって、
思わぬところで見たことがないエラーが出てきます。
よかったところ
なぜ、Reactが必要とされているのか？
学習の目的・背景を伝えることができました。
人に教えることでなんとなくで理解していた概念が自分の言葉で説明できました！
やってよかったこと
- 当日のみ使用するチャットルームを作成した
- アイスブレイクの時に、自由にチャットしてもらい、書き込むことにハードルを低くした
初めに、「最近ハマっていること」など、自由に書いてもらって、質問しやすい雰囲気づくりをしました。 - 先に完成品を作ったので、分からなければ最悪コピペでも大丈夫な状況を作った
-
1時間に10分は休憩の時間を必ず設けた
50分やって10分休憩
講義している方は、アドレナリンが出ているので、気にならないですが、
受けている方はずっと座っているので、1時間ぐらいで集中力が切れてしまいます
どうしても、教える側が喋って、教わる側が黙る構造ができてしまうので、なるべく発言しやすい環境を整えました
とはいえ、まだまだ質問をするのには、ハードルが高かったようで、なかなか双方向の講義ができなかったので、
匿名性の担保が必要かなと感じました。
匿名でリアルタイムにチャットできるslidoというサービスがよいと思いました。
得られた教訓
予想外のエラーを想定内の事態になるように、プランBを常に用意しておこう。
例えば、環境構築がうまくいかない！
→ ブラウザでReactのコーディングが出来るツールを使おう！
→ 2人1組になってペアプロ方式にしよう！
受講者のスキル感を事前に把握しておこう！
アンケートを取るなどして、受講者が今どれくらいのレベルなのかを聞いておきましょう。
そうすることで、受講者のレベルに合わせた説明が出来るようになります。
常にうまくいかなかった場合を想定して、次善策を持っておくことが、勉強会を円滑に進めるコツだと思いました。
反省点は多いですが、
総括して、普段話す機会がない人とも話せたので、やってよかったと思いました！
副産物
勉強会の資料用に作成したQiitaの記事がバズった！
特に、ポケモン図鑑の記事で 100いいね！ が付いたのはびっくりしました！
来年もたくさん勉強会をやりたいと思います！
最後まで読んで頂きありがとうございました！！
質問・感想はお気軽にコメント欄へご投稿ください！