この章1ではオンラインのモブチュートリアルというものを説明します。これはオンラインを使いみんな（モブ）でチュートリアルをやってみるというものです。
このオンライン・モブチュートリアルは誰でもかんたんにできます。学校の友人、職場の同僚、プログラミング仲間などと一緒にやってみましょう。
オンラインモブチュートリアルは、得られるものが多いのに、かんたんにできてオススメです！
- みんな軽視しがちだけどチュートリアルをやると理解が深まる
- 退屈なチュートリアルでも楽しくやれる
- みんなの知見や知識を共有できる
- 喋りたい欲求を満たせる
これのベースアイデアはモブプログラミングというものです。
モブプログラミングとは、あるひとつのプログラムを複数人でつくることです。同様にペアプログラミングというプログラムを二人でつくる手法もあります。
これらは、あるひとつの成果物（プログラム）を複数人でつくるもので、三人集まれば文殊の知恵のような考え方です。
モブプログラミングと言いましたが、モブでやれることはプログラミングだけではありません。モブデザインや、モブインフラ構築も可能です。もちろん、今回紹介するようなチュートリアルも同じです。
モブプログラミングでは操作を行う、タイピングする人をタイピストと呼び、それ以外の人はモブと呼びます。
ペアプロでは車を操作するイメージでドライバーとナビゲーターという比喩を用いてますが、モブプログラミングでは操作をする人は車の運転手ほどは、自分自身では思考・判断をしないため、ドライバーという言い方をせず、タイピストといいます。
タイピストは、モブに言われたことをそのままタイプする役割です。モブに指示されていないことをタイピングするのはアンチパターンです。そのため、モブの指示がわかりにくいときはモブにそれを質問します。もちろん誰でも自明なことであると判断できればモブが言ってないことを補ってもいいですが、モブの発言が主体です。
モブチュートリアルの場合も同じです。タイピストは言われたとおりにタイピングするだけです。モブが話し合って、エディタやターミナル、ブラウザなどに入力するものを指示します。
タイピストは時間を決めて持ち回りにしましょう。10分〜15分程度でスイッチするといいでしょう。
オンラインでコミュニケーションするツールと、動かす環境を準備する必要があります。
オンラインコミュニケーションツールとして、Zoom や Discord などを用意して全員が接続します。Discord に最近機能追加された GoLive を使えば、Windows でも Mac でも簡単に画面を共有できます。有料 Slack であれば Slack 通話を使えばいいでしょう。
無料の場合、Zoom か Discord かは好みで選んでいいと思います。今なら Discord がオススメでしょうか。
チュートリアルをするための環境の準備も重要です。もちろん題材によりますが、ある程度定番といえるものはあります。
Windows であれば WSL2 や PowerShell などが必要でしょう。Mac であれば、ターミナル（もちろん iTerm2 などでもいいでしょう）が必要でしょう。
あとは VSCode や他任意のテキストエディタ・IDE も必要です。モブプログラミングやモブチュートリアルでは、VSCode の LiveShare という、オンライン共有機能がとても便利です。とても強いこだわりがなければ VSCode を選ぶことをオススメします。VSCode + LiveShare の場合は環境構築は一人だけで済みます。
Docker もたいていの場合は必要になるでしょう。
題材によっては JDK も必要です2。
他にも事前ダウンロードが必要なものもあります。1GByteを超えるような大きなソフトウェアをダウンロードしなければいけないような場合は、余裕のあるときにダウンロードをしておかないと、時間がかかる、あるいはそもそも空き容量が足りないなどといったトラブルに見舞われることもあります。
Ruby の gem や JavaScript の npm などといったパッケージも、LTE回線でダウンロードしようとすると大変なことになりがちです。
ウェブブラウザ上でコード開発ができるようなサービス（オンラインサンドボックス）を使うと、そういった手間を省くことができます。たとえば、JavaScript なら、CodeSandbox というサービスがあり、これを使えば、React/Vue/Angular などをオンライン上でコード編集と動作まで全てを行えます。
- コミュニケーションツールとして、Zoom や Discord などを準備する
- ターミナルやエディタを予め用意しておく。なるべくなら VSCode + LiveShare を使う
- Mac なら HomeBrew は最低限入れておく。他にもそれぞれの言語の環境を整備しておく
- Docker が使えるなら、Docker 推奨
- JDK が必要な場合、予めインストールしておくか、インストールするための時間を取る
- パッケージインストールが必要な場合、LTE回線など貧弱なネットワークで参加する場合、予めダウンロードしておいたほうがいいでしょう
- CodeSandbox のようなオンラインサンドボックスでできるチュートリアルであれば、そちらの準備をする
もちろん、こういった環境構築・準備自体を、オンラインでみんなで手伝いながらやるというのもアリでしょう。この場合、主目的は「チュートリアルをやること」ではなくなり、「環境構築をすること」になるかもしれません。
やり方自体はとてもかんたんです。
まずチュートリアルのページを全員の手元でアクセスします。
だれかが画面共有を行い、チュートリアルに沿って操作をします。他の人はワイワイしながら指示をだしていきます。ペアプログラミングやモブプログラミングとは異なり、みんなで一つの成果物を作るのではなく、みんなでチュートリアルをやり遂げることが目的です。
タイピストは、モブが喋ってくれないとタイプできない（してはいけない）ため、モブが喋る必要があります。
それでも、チュートリアル文章の確認や、動作の確認、仕様の調査などに夢中になって、口が止まってしまうこともありますが、ワイワイ喋ったほうが絶対に捗るので、なるべく空白を作らないようにしたほうがいいです。
分からないことはリアルタイムで質問しましょう。誰か分かる人が答えたり、画面共有してる人がぐぐったりしていきます。URL などは Discord のテキストチャンネルや Zoom のチャットなどで共有しましょう。
前述のとおり、ローカルで環境構築をしてチュートリアルをする場合は、VSCode + LiveShare を推奨します。誰か一人が環境構築を行い、その人がホストになって LiveShare のセッションを開始し URL を発行します。他のメンバーはその URL にアクセスし、LiveShare のセッションに接続をします。
LiveShareでは予め、GitHubかMicrosoftのアカウントでサインインしておく必要がありますが、それ以外はだいたいオートで進むので難しいこともありません。
このやり方をする場合、画面共有はブラウザ画面やターミナルなどを映しておくといいでしょう。
- 環境構築を行うのはホストの一人で済む
- チュートリアルのススメ方が、全員同じになる
筆者が Microsoft のフロントエンドブートキャンプを、オンライン・モブチュートリアルしたときには、メンバー個々人のローカルでそれぞれ入力するというやり方でやってみたのですが、指示通りに入力するだけでは済まない題材だったため、コード編集の自由度が高く、途中でメンバー間の差異が広がってしまいました。それはそれで得るものもあったのですが……。
チュートリアルといっても題材によっては、間違いさえしなければ、誰がやっても同じになるタイプのチュートリアルもあればそうじゃないものもあります。フロントエンドブートキャンプは後者に該当するものでした。
LiveShare のようなサービスを使わず、個々人のローカルでチュートリアルをする場合、途中で止まってる人がいたら、その人に画面共有を移して、みんなでワイワイ手助けしながらチュートリアルを進めましょう。
実際にタイピングして体で覚えるというのも馬鹿にできません。チュートリアルページからのコピペで済ませるのではなくて、文字を実際にタイプすることをオススメします。
モブチュートリアルに慣れてきたら、モブプログラミングにチャレンジしてみると面白いかもしれません。
たとえば、掲示板アプリを作る、チャットアプリを作る、カレンダーアプリを作るなどです。
一人なら挫折するようなこともみんなが集まれば、挫折せずにやり遂げられるかもしれません。
みんな（モブ）で楽しむチュートリアルしてみませんか？
Footnotes
-
この章は https://note.com/erukiti/n/n663ae81b91ce を加筆・修正したものです。 ↩
-
筆者が Flutter のチュートリアルをやろうとしたときは、僕を含めたメンバーそれぞれの環境に JDK が入ってないため諦めたことがあります。 ↩