本記事はBASEアドベントカレンダー2024の16日目の記事です。
はじめに
BASE FeatureDev3Group でWebアプリケーションエンジニア をしている かぴ(@ysssssss98) です。自分は2024年の10月にBASEへ入社して今月で3ヶ月目になります。前職ではバックエンドエンジニアとしてWebAPIの開発をしたりインフラ(AWS)の管理、小規模チームの開発進捗管理やメンバー育成、オフショア開発、採用業務をしていました。
現在はBASEでプロジェクトに参画し、Webアプリケーションエンジニアとしてバックエンドだけでなく今まで実務経験がほとんどなかったフロントエンドにも挑戦しています！スクラム開発も初挑戦です！
今回は自分が新しい環境で新しい挑戦をする中で非常に効果があった開発チームでの取り組み、ペアプログラミングについて紹介します。ペアプログラミングのやり方や効果が認知され、もっとペアプログラミングが盛んになったら幸いです。
ペアプログラミングとは
ペアプログラミング（英: pair programming）はソフトウェア開発の手法の一つで、2人のプログラマが1台のマシンを操作してプログラミングを行う手法。
当初は、2人が1台のワークステーションに向かって作業するものだったが、現在では一人で複数台を同時に使ったり、一台に複数台のディスプレイを使うことも多くなり、具体的なやり方は変わっている。
実際にキーボードを操作してコードを書く人を「ドライバ」、もう1人を「ナビゲータ」と呼ぶ。30分ごとか、単体テストを1つ完成させる度に役割を交替するのがよいとされる。また、1日に一度の頻度でパートナーを変えるのがよいともされている。
ペアプログラミングは1人で実装しないところが特徴です。前職ではペアプログラミングをすることはめったになく基本1人で実装していることが多かったです。また、手を動かす人が定期的に変わるのも特徴です。複数の人間が同じことに向き合うため知識の共有や実装方法の教育によるスキル向上が見込めます。
どんな風にペアプログラミングをしているのか
次に自分のチームがどんなツールを使ってペアプログラミングを行なったのか紹介します。自分のチームが使ったツール以外でも同等の環境を準備できるので代替ツールも紹介します。
自分のチームが利用したツール
1. Gather
バーチャルオフィスツールです。バーチャルオフィス内にアバターが出てきて会話する際は特定の場所にアバターが集まることで自動的にビデオ通話が開始します。画面共有やチャットもできます。
2. Figma(FigJam)
オンラインデザインツールです。デザインを作るための使用が多いですが、今回私たちのチームはホワイトボートのような用途で使用しました。ペアプログラミング中のアプリケーション設計を視覚的に共有するためです。
3. Code With Me
JetBrains社が提供するペアプログラミングツールです。リンクを共有すると複数のユーザーで同じコードを編集できます。どのユーザーがコードのどこを編集しているか表示できたり、ユーザーのコードを追従可能です。
代替ツール
自分たちのチームが普段使っているツール以外でもペアプログラミングをリモートで行うことは可能です。前職や過去に自分が使ったことのあるツールで今回の構成を代替できるものを紹介していきます。
1. Slack
Slackのハドル機能が使えます。チャンネルに入ってるユーザーはいつでも入れますし、チャットも可能です。
2. Miro
オンラインホワイトボードツールです。付箋や図形を使って視覚的に情報を共有できます。
3. Live Share
Visual Studio Codeの拡張機能です。Code With Meと同様にユーザーがコードのどこを編集しているのか視覚的に確認することができます。 marketplace.visualstudio.com
ペアプログラミングを通じて得られたもの
自分が持っていない実装の引き出しと技術の知識
自分が特にこのメリットを体感したのはフロントエンドの実装です。具体的にはCSSの書き方やReactのコンポーネント分割、TypeScriptによるデータフェッチ処理でした。
個人的には特にCSS実装がペアプログラミングの効果を発揮したと感じています。なぜなら自分はCSSに苦手意識を持っていたからです。タスク着手時はどうやったらデザイン通りのUIが実現できるのか、バックエンドから受け取ったデータの値によって変わる動的なUIをどこで記述するのかなど不安でいっぱいでした。
自分がドライバ(実際にコードを書く側)の時はフロントエンド経験豊富な方にナビゲータ(実装の助言を行う側)を担当していただき、どんなCSSを当てていくのかを丁寧に解説していただきながら納得感を持って手を動かしていきました。時には言葉だけでなくその場で実装を代わっていただくことでコードベースの共有をいただきました。また、自分がナビゲータの時は疑問に思ったらすぐに「なんでこのスタイルの当て方をしてるんですか？」、「このスタイルを当てると〇〇になるという認識であっていますか？」という質問を積極的に行い、経験豊富な方の思考を言語化しながら進めることができました。その中で自分の中に新しい引き出しが増えたり相手の考え方が共有されていったと考えています。
最初のフロントエンド実装タスクでは約半日ほどナビゲータの方に付きっきりで実装を見てもらっていました。しかし、2つ目のフロントエンド実装タスクでは1時間~1時間半の時間のみ見ていただくだけで他の時間は自力で実装を進められるようになりました。
個人的にはアウトプットよりインプットの方が少し多かったので今後のフロントエンド実装では自分がナビゲータになる頻度を増やし、アウトプット量の割合をより増やしていきたいです。
コードレビューの時間短縮
コードを書いてるだけでは認識を合わせるのが難しいものもあるかもしれません。自分が経験したのはバックエンドのクラス設計やクラス間でのデータの流れをペアプログラミング中のコーディングだけで伝えようとすることが難しかったです。
その時は対策としてペアプログラミング中にFigmaやMiroを使い、図解することで認識合わせを円滑に進めました。「ペアプログラミングなのだからコーディングをお互いに行う」というこだわりを持つ必要はないです。コーディングしながら別の方法で知識の共有をした方が有効な場合は別の方法を積極的に使うことも大事だと私は考えています。
心理的安全性の向上
ペアプログラミングをするとコミュニケーション頻度が増えます。実装をしながらお互いの技術知識の共有ができます。他にも休憩中に雑談をすることもあります。相互理解によってチームメンバー同士で会話することのハードルが下がります。 自分自身、最初はGatherに入ってペアプログラミングすることに躊躇してました。しかし最近は自分からGatherに入ることをチーム全体に共有できるようになったり開発メンバーがペアプログラミングしましょう！という提案を自然とできるようになりました。
また、チーム全員で開発のレトロスペクティブ(振り返り)を行った際に「ペアプログラミングを続けたい」という意見は多かったです。
ペアプログラミングの注意点
ペアプログラミングはたくさんのメリットがありますが、一方でデメリットもあります。次に自分が経験したデメリットを紹介します。
一時的にチーム全体でタスク消化に使える時間が減る
ペアプログラミングは基本的に1つのタスクを2人以上で行います。つまり本来ペアプログラミングをしなければ2人で違うタスクを並行で進められるのにあえて2人で1つのタスクを対応することになります。知識の共有やメンバー間のスキル差分がなくなっていけばこのデメリットは相殺できますが、ペアプログラミング導入序盤は速度が落ちる可能性が高いです。
ペアプログラミング後の疲労
これは私が実際にペアプログラミングをして一番感じたことです。結論から言うと脳にかかる負担が大きいです。
ペアプログラミングはドライバ(実際にコードを書く側)、ナビゲータ(実装の助言を行う側)共に情報をインプットする量、アウトプットする量が多いです。コミュニケーション量が多いため相手の意見を理解する力、自分の意見を言う力、瞬発力も必要です。また、ペアプログラミング中は実装に詰まってもすぐ一緒に調べることができて解決スピードも速いです。そのスピード感からストレスフリーで実装を行うことができます。しかし、その分短期間で扱う情報量が多いです 個人的な所感として、ペアプログラミングは最長でも1時間に1回休憩を入れたほうが良いと思いました。
おわりに
以上がペアプログラミングをして自分が体験したものになります。「ペアプログラミングって聞いたことあるけどどうやったらいいんだろう？」と考えている方に何か1つでも参考になったら嬉しいです。また、新たにメンバーを受け入れる環境やメンバー全員の認識合わせを円滑にしたいチーム、メンバー同士のスキル向上を目指すチームにとってペアプログラミングの実施が有効な一手になったら嬉しいです。
BASEでは現在Webアプリケーションエンジニアを積極採用中です。興味ある方は是非ご応募ください。 採用情報 | BASE, Inc. - BASE, Inc.
明日はPay IDチームの小林さんによる記事です。お楽しみに！
