Discord でオンライン勉強会(社内)を開催した話

ここ数年、入社2年目社員を対象とした、フロントエンド(HTML5/CSS3/JavaScript)社内勉強会のメンターを担当してきました。
昨年度はこのコロナ禍で、社内の勤務体制がほぼリモートワークに移行していたのと、会議室での密を避けるため、オンラインで開催することを検討し、プラットフォームとしてDiscordを選びました。

[Discord](https://discord.com/) はマルチプラットフォームで動作する、ビデオ通話・音声通話・チャットツールであり、ゲームコミュニティで多く利用されています。

# なぜDiscordを採用したのか

今回実施したかった

- 参加者(5名)は、課題に対し、勉強会の時間中に手を動かしてコーディングを進めていく
- メンター(2名)は、質疑を受け付けたり、詰まった場合にサポートをする

といった形の勉強会を進めるのに、適した機能があったからです。

## ボイスチャンネル内で同時に画面共有できる

多くのWeb会議システムでは画面共有できるのは1人の参加者ですが、Discordでは[最大10人で画面共有(Go Live)](https://support.discord.com/hc/en-us/articles/360040816151-Go-Live-and-Screen-Share)ができます。

![スクリーンショット 2020-10-23 10.39.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4608/e704a70c-21b7-0bfa-3d44-fe0095cc8ef7.png)

オンライン開催かつ実装ベースの勉強会なので、ただ音声だけを共有している状況だと、メンター・参加者ともお互い何をやっているかわかりません。ですが、複数人で画面共有できると、参加者が今取り組んでいることを可視化できます。

## 用途別にボイスチャンネルが作成できる

Discordでは、ある目的を持った[サーバー](https://support.discord.com/hc/ja/articles/360034842871-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%B8%E5%8F%82%E5%8A%A0%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF-) を作成して、ここにユーザーを招待することができます。また、このサーバー内に、複数の「ボイスチャンネル」を作成することができます。

![スクリーンショット 2020-09-18 14.17.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4608/d8489eaf-7be4-f430-c20d-41becef04f2f.png)


今回は、全員で集まって実装を行う＆メンターが内容確認しつつサポートするための `勉強会メイン` を作成し、これとは別に個別に相談するための `スタディルーム` を準備しました。

## テキストチャットが利用しやすい

参考資料のURLやメモなど、勉強会の実施時に共有したい内容は多々でてきます。Discordではテキストチャットのチャンネルがボイスチャンネルと同列にあるため、Slackなどの別ツールに移らずに情報共有ができて、Discordに留まったまま勉強会が進行できます。また画像やファイル添付などの機能も充実しているため、普段使っているチャットツールと同様に使えます。

# Discord勉強会の進め方
1. 時刻になったら、全員 `勉強会メイン` ボイスチャンネルに入って開始する
2. 今日の課題(事前に提示＆内容の検討が宿題)について簡単に説明し、実装を開始する

ここから、参加者は 実装中の画面(**コーディングしているエディタ** or **動確しているブラウザ**)を画面共有してもらいます。

- 他人から見られながら作業することに抵抗がある人もいるかと考え、進行状況が確認できる上記何れかの画面共有を依頼しました
- 実際には、ほとんどがコーディングしているエディタを画面共有していてくれました

以降は、参加者は課題に取り組み、メンターは参加者の画面共有をみて、状況を確認していきます。

- コーディングが進んでなかったり、同じエラーがしばらく出続けている状況があったら、`勉強会メイン` でメンターから声掛けして問題を共有してもらい、必要そうであれば `スタディルーム` にメンター1名・参加者に入り、クローズドで対応を検討したりアドバイスをしました
- 参加者からの質問も、最初は `勉強会メイン`でメンターに呼びかけて話してもらい、内容によっては同様に `スタディルーム` を利用しました

最後にまとめの時間を設け、参加者各自の画面共有を使い、課題の進捗状況の報告・躓いた点やこだわった点などを全員で共有します。メンターより次回の課題内容と宿題の説明を行って、終了です。

(Discordとは関係ありませんが、課題の残りも次の勉強会までの宿題とし、次回勉強会前に提出してもらいメンターで内容の確認とフィードバックを行っていました。

# Discord勉強会のふりかえり

ふりかえりで出た意見として、以下のような内容がありました

<dl>
  <dt>参加者</dt>
  <dd><ul><li>勉強会で困ったことがあったら別のスペースで個別に対応してもらえることにとても安心感があった</li><li>メンターに質問がしやすい環境だった</li></ul>
</dd>
　<dt>メンター</dt>
  <dd><ul><li>Discordの配信を利用することにより、何をしているのかがすぐに見えていたため、状況が把握しやすかった</li><li>Discord を導入することで、リモート勉強会としても、まあまあ連帯感的なものを保って行えたかも</li><li>Discord 無課金だと画面共有の画質がイマイチ</li></ul>
</dd>
</dl>

メンターとしては、参加者が作業している画面をずっと共有することに抵抗を持たれることを危惧していましたが、そこはあまり気にならないようでした。おかげで、状況の把握がとてもやりやすく、参加者が詰まっている時にほどよいタイミングで声掛けが出来たかと思います。また、エディタの画面共有を見て、エディタ機能の知識の有無や、入力補助やエラーチェッカーなどのプラグインの使用有無がわかり、アドバイスをすることもできました。

また、Discordに限らずオンライン勉強会の利点としては、自分のメインマシン環境を使えるという点もあると思いました。以前は会議室に集合してノーパソでもくもく会的なことを行っていたのですが、自席はデュアルディスプレイのため、どうしても作業効率が落ちてしまうという問題が上がっていました。

今回、Discordは無課金で利用しました。無課金では画面共有の画質に制限があります。
無課金での画質について、ブラウザ上の画面の確認はできますが、エディタの小さいコードの字が読めない時がありました。課金すると[画質が上げられる](https://support.discord.com/hc/ja/articles/115000435108-Discord-Nitro-Classic-Nitro)ので改善できそうです。

# 今年度のオンライン勉強会に向けて
コロナ禍はいまだ続き、リモートワークも一時的な状況ではなくなってきました。ウェビナーでのセミナーや、オンライン勉強会も一般的になりつつあります。

今回、オンラインの勉強会を行い、勉強会の主目的である「課題に取り組む」「わからない部分をサポートする」については、ある程度達成できたと思っているのですが、対面ならではの副次的な部分についてはカバーできなかったという反省もあります。例えば、`お互いの顔を覚えてパーソナリティを知る`　とか `場の状況をみて、関連するトピックスを話したり、ちょっとしたアイスブレイクを挟んだり` とか。どうしても最後までちょっと堅苦しい雰囲気が抜けなかったかなと。これは自分の性格とかメンターとしての力不足な部分もあるかと思いますが。

リモート環境において、心理的安全性はより重要視され、これを高める工夫については様々な知見が出てきています。今年度はこの辺りも意識して、オンライン勉強会を開催したいと考えています。