HEIMアプリの開発で、VSCodeのLive Shareを使ったペアプロを導入してみた

ペアプロをしました

こんにちは!crispyでエンジニアインターンしている村上といいます! エンジニアインターンとしてアプリ開発に携わり、新しいタスクを進めるにあたってペアプロで開発をしたので、気づきや感想など書いていきたいと思います!

ペアプロとは?

ご存知の方も多いと思いますが、ペアプロとはペアプログラングのことです。 僕よりも経験豊富でバリバリ書けるメンターの方と一緒に、ヒントやアドバイスをいただきながらプログラミングしました。 僕の場合はリモートで参加しているので、その場合わせではなくGoogle Meetでビデオチャットを取りながらVisual Studio CodeのLive Shareというツールを用いてペアプロを行いました。

ペアプロで実装したもの

ペアプロでは、HEIMアプリの追加機能を実装しました。 HEIMアプリでは商品について口コミ投稿する機能があり、その時に商品を検索して選択するシーンがあります。 今回実装したものは、商品を検索した時、違う商品が出た場合にお問い合わせをしていただけるためにお問い合わせフォームを用意することです。 f:id:shun114:20210520175223p:plain (↑実装前:左、実装後:右)実装後、画面の下側に「違う商品が表示された場合はこちら」の文章とお問い合わせへのリンクが表示されていることがわかります。

コードでは、このような感じになります。

実装前

f:id:shun114:20210520172211p:plain 今回は、緑色でハイライトされた箇所をメインで変えていきました。 ちなみに、ハイライトしているのは僕ではなく、一緒にペアプロしていただいている方です。 このように相手のカーソルの動きやハイライトされている箇所が、こちら側からもわかりやすく表示されています。

実装後

f:id:shun114:20210520172347p:plain 実装後はこのようになりました! ちなみに、お問い合わせの文章とリンクのUI部分は以下のコードになります。

f:id:shun114:20210520172423p:plain 青いハイライトは自分が選択しているものです!他の方とカーソルやハイライトのカラーを分けてくれているので混乱することもなさそうですね!

ペアプロ楽しい

ペアプロは想像していた以上に学びが多く、貴重な時間になりました。 もちろん自分が知らなかった知識や書き方などが勉強になったのが言うまででもないですが、その他にも自分より実力者の方のコーディングの様子をみれることが勉強になりました。

相手の方のスピード感

まず感じたのは自分より実力者の方のコーディングのスピード感に圧倒されました。 Live Shareを使用しているので、目の前PCの画面に映るわけですからより圧倒されます。 知識やスキルの前に、そのあたりのスピード感から自分にもまだまだ伸び代があることを知れるととても嬉しく思います! また、ツールなどを駆使してより効率よく進められたりなど、開発を進めている上でのテクニックなども参考になるものが多いです。(ペアプロなので、それらの知識をリアルタイムで聞くこともできるメリットもあります。)

相手の雰囲気を感じて、より集中できる

僕はフルリモートで働いているのですが、その中でもペアプロは直接コミュニケーションを取れる機会の1つです。 そのため、普段よりも相手の雰囲気を感じ取ってより緊張感を感じれる状態でコードを書くことができました。

より効率よく学べる

途中過程を一緒にコーディングするため開発の進め方の相談もでき、わからない箇所があればすぐに質問ができるためわからない箇所をそのままにして後々全然理解できない状態であったことも防げるため 他のコードを参考にして学んだり、チャット上でのやりとりより、効率よく学ぶことができました。

少し気になったこと

ペアプロを行って全体を通して良い体験になったのですが、少し気をつけた方が良さそうなこともありました。

コードの解読に集中すると、置いていかれることがある

説明を受けるタイミングと、自分で考えるタイミングを分けておかないと「考えている時に説明されていて、どこを説明されているのかわからなくなってしまった」という問題が起きやすいと思います。 この問題は自分が行いたいことや相手にお願いしたいことを伝える、など相手とコミュニケーションを欠かさずにとることによるすれ違いを起こさない工夫をすることによって解消されるのではないかなと思います。 特に隣り合わせでペアプロをしている場合はお互いの様子がみれることによって察することができますが、リモートだと常に相手の映像を見るわけにもいかず相手の様子を知ることが難しいため、自分から積極的に発言したりするなど、より多くコミュニケーションを取っていく必要があると思います。

ペアプロを通しての気づき

ペアプロは良さがたくさんあり、特に教えていただく側の成長に大きく貢献すると思うのですが 意識次第でより効率的に行えるのではないかなと思いました。

何か目的を持って行う

ここでの目的は「つまずいた箇所を教えてもらう」のような抽象的なものではなく、「ここの行数の役割がわからない」「このUIを実装したいけど、どのように書けばいいのかわからない」といったようなわからないこと、教えてもらいたいことを明確にしたものを考えました。 目的を明確にすることによって、質問も曖昧にならずにアドバイスも的を射たものになりやすくなるのではないでしょうか?? また聞きたいことが明確であれば、事前に自分でも調べることができるため、自分の意見を持った上での相談ができると思います! このようにすると、自分で考えた上での相談の形になるのでより理解度が深まるのではないかと思いました。

学び手がコードを積極的に書いてみる

ペアプロは即座に教えていただけることができる環境なので、どんどんチャレンジできる環境なのではないかなと思いました。 フィードバッグやアドバイスをすぐに頂くことが可能であるため、その場でより良い書き方を教えていただいたり、うまくいかなかった時には原因を理解するスピードが早いなど、いいことが多いのではないでしょうか? また、途中浮かんだ疑問点のように些細な質問も聞きやすく理解度を深めやすくなるのではないでしょうか?

最後に

以上、僕自身がペアプロをしてみた感想や気づきを書いてみました! ペアプロがどんな雰囲気か感じ取っていただけたり、何か参考になるものがあれば幸いです。 ペアプロにはメリットが多いと思いますが、それも忙しい中付き合っていただいている相手がいるお陰であることを忘れずにいれば、より充実した時間になると思います。

ペアプロは手段であり、工夫次第によってさらに良い開発体験になると思います!!

最後まで読んでいただきありがとうございます! crispyでは、HEIMの開発を一緒に盛り上げてくれるエンジニアを募集しています!