ハンズオンを円滑に進めるテク

新人教育の時期ですね。
みなさん研修資料の準備は大丈夫ですか?

僕はこの前Reactのハンズオンをやったんだけど、そこで心がけた事や学んだ事を共有します。
ハンズオンの内容については既に記事を書いたけど、細かい所を書ききれなかった。
amagitakayosi.hatenablog.com

新人研修やインターンでも使えるテクでなので、ご参考に。

やったこと

最初に完成形を提示する

ハンズオンで作るアプリについて、動画で説明した。
最終的な目標がわかると、今やっている作業の意味がわかりやすくなる。

いくつかのステップに分けて説明する

今回のハンズオンでは、8つのステップにわけて実装を進めた。
ステップ毎にテーマを与える事ができるし、ハンズオン自体の進捗もわかりやすくなる。

ステップ毎に足並みを揃える

ハンズオンでは、一度置いていかれると追いつくのが難しい。
参加者の進捗は頻繁に確認すること。

挙手を多用する

「出来ましたか?」って聞いても、答えてくれる人は少ないので、「出来たひと〜?」って挙手してもらうとよい。
(今回は挙手してもらいすぎたかも……)

お手本ブランチを用意する

ちょっと変則的なんだけど、今回はお手本ブランチを用意して、困ったときに参照できるようにした。
このブランチはステップ毎にgitのタグを打ってある。
ちょっと遅れたとしても、 git checkout step-2 等とすれば追いつけるようになっている。

スクリーンショットを多用する

わかりやすさは 画像/動画 >>> 文字 >>>>>>>> 口頭での説明 だと考えてる。
複雑な所では、keynoteやSkitchの機能で注釈を入れると良い。

動画のつくりかた
動画つくるの、実はそんなに面倒ではない。
Macの場合の手順は次のとおり。

スライドの冒頭で、教科書や資料へのリンクを表示する

資料は事前に共有されたい!
作業のペースは人によって違うので、手元で資料を見れるとグッと進めやすくなります。

会場のWiFi情報なども載せておくとラッキー。

前日にTwitterで事前準備をお願いする

git clonenpm install といった、時間のかかる作業は事前にお願いしておくと良い。

学んだこと

参加者同士の協力をお願いする

開始時に「参加者の皆さん同士で助け合ってくださいね!(^~^)」とか言っておくと良い。
Reactハンズオンでは、何も言わずとも良い感じに助け合ってくれて、とても助かった。

来場者の前提知識をハッキリさせる

gitを知らない人がgit checkoutできなくて困ってた。
必要な知識をリストアップして、事前に共有しておくと良い。
発表資料には、前提知識のない人のために適切な教材へのリンクなどを貼っておくとよい。
(当日解説してもいいが、往々にして時間が足りなくなる)

以上です

明日はエイプリルフールですね。皆様のご入社をお待ちしております。