VSCodeでDraw.ioをLive Shareしたら最高の体験だった

こんにちは、弥生のMisoca開発チームの黒曜(@kokuyouwind)です。

Kaigi on Railsの登壇が決まったのでよろしくおねがいします。弥生社員としては初登壇になります。

前回の記事が濃厚だったため、今回はライトなTips記事です。よろしくおねがいします。

tech.misoca.jp

👯‍♀️ VSCode LiveShareを使ったリモートペアプログラミング

皆さん、ペア作業してますか?

ペアプログラミングはドライバー・オペレータの交代など具体的なノウハウも多く、このブログでも以前に紹介記事を書きました。

tech.misoca.jp

上記の記事ではリモートでのペアプログラミングについてscreenhero*1を使っていると書きましたが、現在ではVisual Studio CodeLive Share機能がよく使われています。

この機能は画面を共有するのではなくコードの編集結果のみを共有するため、以下のような利点があります。

  • 各自の設定・キーバインドでエディタを利用できる
  • 画面共有と比べて軽い

なお音声はZoomを使って繋ぐことが多いです。最近ではLive Share Audioがプレビュー公開されているため、こちらを使えばVisual Studio Codeのみでペアプロが完結できるようになるかもしれません。*2

✏️ draw.io を使ったペア設計

Misoca開発チームでは他にも、クリティカルな本番作業をペアオペレーションで行ったり、難易度の高いプルリクエストのレビューをモブレビューで行ったりなど、様々な作業がペア及びモブで行われることが多くあります。

今回は設計作業でVisual Studio CodeのDraw.io拡張を使ってみたところ、非常にスムーズなペア作業ができた話を紹介します。

f:id:kokuyouwind:20200831103341p:plain

Draw.io拡張を入れると、上記のようにVisual Studio Code内にDraw.ioのエディタがそのまま表示されます。(この図は本番のECS化について検討しているアーキテクチャ図です)

この図はLive Shareセッションを繋げば各自が自由に編集できるため、例えば「図にElasticacheが足りないから足しておくね」と言いつつアイコンを追加したり、「S3はNATゲートウェイ挟んでアクセスするんだっけ?」と確認して繋ぎ変えたりといったことが柔軟に行えました。

もちろんこれらはクラウドサービスとしてのDraw.ioを利用しても行えるのですが、比較すると以下のような利点があると感じました。

  • 拡張機能自体がローカルにあるためか、クラウドと比較して挙動が軽く、相手の変更が遅延なく反映される
  • ローカルファイルとして保存するため、ソースコードと一緒にGit管理できる
  • 他のソースコードと行き来して、ペア設計とペアプロをシームレスに行える

🛫 今後やりたいこと

上記のように利点を挙げましたが、今回のペア設計では既存のソースコードリポジトリと別の場所にファイルを置いているため、2番目と3番目のメリットは享受できていませんでした。

とても便利に使えることがわかったため、例えばペアプロの前のタイミングでクラス構成をざっと書いてからコーディングに入るなど、もっとライトに活用していけると良いなと思っています。

📢 宣伝

Misocaチームではペア設計を活用したいエンジニアを募集しています。

*1:現在ではSlackに統合され、Slack Callの画面共有機能になっています。

*2:筆者の環境でも試してみましたが、残念ながらうまく音声が繋がりませんでした。正式公開を待ってまた試したいと思います。