こんにちは。ATOM事業部の下江です。普段はテックリードと共に二人体制でフロントエンドエンジニアとして開発を行っています。
最近は、ATOMの新機能リリースに向けた機能開発を行っています。
今回はフロントエンド開発のペアプロをして得た知見を紹介していこうと思います。
経緯
テックリードと私はお互い在宅ワークなので、いままで同じ画面を見ながらソースコードを共有する一般的なペアプロをやってきませんでした。 しかしながら、よりスピード感のある開発ができるようにと、リモート上でペアプロしてみることになりました。
やりかた
お互いにJetBarins IDE製品を使って開発をしていたため、Code With Meを使ってソースコードを共有しながら、Slackで通話をしつつ進めました。 ツールの詳しい使い方等は割愛しますが、以下のようなことができます。
- ホストが共有リンクを作成し、ゲストがリンク先にアクセスするだけで画面共有ができる
- IDE上で自分が見ているファイル、カーソル位置、選択状態が、相手にも分かる
- 差分表示したとき、ゲストが修正した内容と自分が修正した内容が区別されて表示される
要件定義やワイヤーができている前提で、 「事前にどのような設計をするのか」「開発の順序は？」といった点を中心にレビューしていただきました。
得た知見
私の場合、開発着手前に行う設計作業が大きく抜けてました。 開発着手の前にやることとして、以下に取り組むようにしました。
- パターン網羅したテストデータを作成する
- 他の画面も含めワイヤーを眺めながら、コンポーネント設計する
- 他画面で使いまわせそうな部品が無いか？
- ディレクトリ構成どうするか？
また、開発着手する上では、以下を先に定義するようにしました。
- コンポーネント間で受け渡すデータ(emit,props)
- コンポーネント自身で保持するデータ(state)
他にも、Smart Page Rulerプラグインを入れ、デザインズレをチェックするやり方、 実装後、要件定義に書かれた仕様を一つ一つ問題なく動作するかチェックしていく赤ペンチェックを取り入れました。
まとめ
ペアプロを行う方法を紹介しました。 また、ペアプロをやってみて得た知見を紹介しました。 実際にペアプロ前に比べるとクリティカルな指摘や不具合が随分と減り、効果はすぐに実感できました。
今回は、web上での画面の見え方をSlackの画面共有機能を用いて行ってましたが、 今後、ngrokのようなツールを用いて、画面を触ってもらいながらのペアプロができるように改善したいです。
