Mercari Engineering Blog

We're the software engineers behind Mercari. Check out our blog to see the tech that powers our marketplace.

Visual Studio Live Share を使ってペアプロをしています

こんにちは、フロントエンドエンジニアの @nullpoo です。

今回は、最近パプリックプレビューとなった Visual Studio Live Share を使ってペアプログラミングをしたことをきっかけに気づいたことについて紹介したいと思います。 ドメイン知識の共有や作業効率の向上、他のエンジニアがコードを書く方法など、様々な気づきがありました。

Visual Studio Live Share とは

Visual Studio Live Share はMicrosoftが発表した、Visual StudioやVisual Studio Code上でネットワークを経由しリアルタイムでコードの編集やデバッグを行うための拡張機能です。 詳しくは下記公式ページを参照してください。 www.visualstudio.com

実際に作業を行っている様子をキャプチャしてみました。

f:id:nullpoo:20180619123216g:plain
共同編集の様子

共同編集者の作業内容が反映されているのがわかるかと思います。 ラグや同期ズレなどもほとんどなく、快適に作業が行えます。

導入方法の詳細については他のサイトなどを参照してもらえればと思いますが、流れとしては

  • VS Live Share という拡張機能をインストールする
  • MicrosoftアカウントかGitHubアカウントでログインする
  • Shareボタンで表示されたURLを相手に教える

といった流れで簡単に開始できます。

今回行ったこと

今年の3月に入社したメンバーがこれまで触っていなかったリポジトリに関わることになり、そのリポジトリのコードやドメイン知識を比較的持っている私がサポートをすることになりました。 普段このようなことを行うときには開発の概要について書いてあるWikiページを見てもらい、作成してもらったPull Requestをレビューしては修正してもらうということを繰り返していました。 しかし、この開発において Visual Studio Live Share を使うことで効率的に進められないかを模索してみました。

Visual Studio Live Share ならではの利点

今回この機能を使って感じた利点がいくつかありました。

作業分担

同時にコードを触ることができるので、1人はViewコンポーネントの作成、もう1人はデータフロー周りを担当するなど、分担して作業を行うことができました。 この際にコミュニケーションを取りながら進めることで、API仕様や実装イメージなどの認識のズレを減らすこともできます。

コードレビューを兼ねる

お互いの作業内容を見ることができるので、随時相談やコードレビューを行える状態となり、実装が終わった後に設計含め大きく修正するといったことを防ぐことができます。 また、従来であればPull Requestのコードレビューの際に些細なTypoやコードスタイルを指摘する地味に面倒な作業が起こりがちでしたが、リアルタイムでお互いに編集できるので、気がついた方がササッと修正したり指摘できます。

セッションを公開できる

セッション参加用のURLをSlackで公開しておくことで、作業の様子を見学する人が現れたり、場合によっては実装に加わってもらえたり他の人の作業の様子やペアプログラミングの様子を見ることができます。 他のエンジニアの作業の様子を見る機会というのはあまりないので、意外な気付きがあるかと思います。

得られたこと

ドキュメントだけでは伝えきれない意図を伝えられる

理想形はドキュメントが整備されてあり、新たに開発に加わったメンバーはそれを参考にすればスムーズに開発を行えるという形です。 しかし、急速に開発を進めたコードベースや開発を行う人が限定されていたりするとドキュメントが簡易的なものしか用意されていなかったり、情報が古かったり、ドキュメントが存在しないという状況もあるかもしれません。 ドキュメントを書くように意識しているとしても、設計の意図や作法について網羅的に記載するのは難しいです。

このような場合に今回のようにペアプログラミングを行うことで、

  • 気をつけるべきポイントや設計の意図について解説しながら開発を行うことができる
  • 自分自身が認識していなかったハマりポイントやノウハウを認識し、改めてドキュメントにすることができる
  • 慣れているメンバー以外の目線が入ることで改善のきっかけになる

といったメリットが得られます。

効率的な開発方法をお互いに学べる

今回 Visual Studio Live Share をきっかけに他のエンジニアと一緒に開発を行う中で、いくつかの学びがありました。 よく使うショートカットキーを教え合ったり、作業の様子を見つつどんなことを考えて実装しているのかを聞くことで、他エンジニアの思考プロセスを知ることができるなど、面白い経験ができました。 私が何気なくしていたChromeでのデバッグの方法も、一緒に作業していたエンジニアは初めて知ったということもあったので、いろんなエンジニアと一緒に作業してみることでノウハウなど吸収できることがあるかもしれません。

Visual Studio Live Share を行う上での注意点

ホストとゲストの関係性があるため、ゲスト側にはいくつかの機能制限がありました。 ファイル検索や文字列検索などが行えないため、Command+Pでサクサクファイルを開くことができない、ゲスト側でファイルの保存はできるがGitのコミットを行うことはできないなどです。 また、ホスト側のファイルを消したりもできてしまうので、Gitなどバージョン管理の仕組みを導入して復元や履歴を追えるようにしておきましょう。

追記

この記事の公開後に Visual Studio Live Share を開発しているMicrosoftの方(Jonathan Carter (@LostInTangent) | Twitter)から、「今日のアップデートでCommand+P問題は解決したよ」と教えていただき、試してみたところファイル検索が動作していました! 更に文字列検索についても数週間以内のアップデートで提供予定とのことでした。 要望などフィードバックも募集しているそうです。

Big shoutout to Jonathan Carter (from Microsoft) for reaching out to me for feedback !

まとめ

今回の体験が良かったので、他のエンジニアから開発の相談を受ける際に「Live Shareでやりましょう」と持ちかけるなど布教活動をしています。

メルカリでは様々なエンジニアと一緒に働く機会があり、今回のような形以外にも知見を得られるチャンスが多くあります。 メルカリでは一緒に知見を共有していけるエンジニアを募集しています!

Software Engineer, Frontend