【Tech Conference vol.2】コミュニケーションと技術を加速させるリモートワークペアプログラミング

とらのあなラボTechConferenceVol.2におけるセッション「コミュニケーションと技術を加速させるリモートワークペアプログラミング」の登壇資料です。

■イベント情報
https://yumenosora.connpass.com/event/241175/

■今後のイベントについてはこちら
https://yumenosora.connpass.com/

■虎の穴ラボ 採用サイト
https://yumenosora.co.jp/tora-lab/

Transcript

1. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. コミュニケーションと技術を加速させるリ モートワークペアプログラミング 虎の穴ラボ株式会社 藤原佳顕 T O R A N O A N A L a b
2. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 目次 1. 自己紹介 2. 虎の穴ラボのリモートワーク 3. リモートワークの課題と改善 4. ペアプロでやってきたこと 5. まとめ
3. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 自己紹介ページ(藤原) 藤原 佳顕（ふじわら よしあき） ‣ Webエンジニア ‣ 新規事業担当（Fantia、Creatia）、アーキテクトチーム ‣ 前職：独立系ソフトウェア会社、主に GISとWeb、ライブラリ開発 ‣ TypeScript、C#、Ruby on Rails、C++ ‣ React、Vue、Angular ‣ 入社理由 ‣ 自分がスキルアップできそうな場所に行きたい ‣ オタク系の話ができるところに行きたい 好きなモノ ‣ シューティングゲーム、格闘ゲーム ‣ SF小説 ‣ プログラミング
4. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 虎の穴ラボのリモートワーク
5. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 虎の穴ラボのリモートワーク 歴史
6. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 虎の穴ラボのリモートワーク 日本全国からテレワークによる 勤務可能に！ 入社後、2週間は秋葉原事務所にて勤務 （宿泊費・交通費は会社負担） 2週間経過後、 地元からフルリモートで勤務可能 もちろん、入社してから地方へ移住も OK！ 福島 京都 高知 メンバーの住まい 北海道 長野 三重 鹿児島
7. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワーク フレックス利用率 2021/7〜2021/9 3ヶ月での利用有無 100% 63.6% 管理職含めて全員が フルリモートワークを達成 虎の穴ラボのリモートワーク
8. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワークの課題と改善
9. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワークの課題と改善 一番大きな課題 • コミュニケーションコストの増大 ◦ メンバーと話す機会がなくなった or 減った ▪ 隣に座ってる人がいたからこそのコミュニケーションがなく なった ◦ 技術的な共有がしにくくなった ▪ 単に使い方ではなく、考え方などの部分
10. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワークの課題と改善 メンバーと話す機会がなくなった or 減った • いくつかの対策 ◦ https://toranoana-lab.hatenablog.com/entry/2021/12/12/120000 ◦ 明示的な雑談タイムを設ける ▪ https://toranoana-lab.hatenablog.com/entry/2021/09/17/184306 ▪ 通常の雑談はこちらでまかなえる ◦ 各チームレベルでのSlack上での分報チャンネル ▪ プロジェクトに関係ある(っぽい)内容なら何でも書けるチャンネル
11. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワークの課題と改善 雑談タイムの部屋割
12. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワークの課題と改善 Twitterのトレンドが流れてきたりも
13. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. リモートワークの課題と改善 解決されない問題 • 技術的な部分の共有 ◦ コミュニケーションタイム ▪ 本当の雑談 ◦ 分報 ▪ プロジェクト固有の雑談になりがち 技術的な雑談ができる場がほしい！
14. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて
15. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 技術的なコミュニケーションロスを解消するためのペアプロ • 行った内容 ◦ 通常プロジェクト以外(社内アプリなど)で行う ◦ 週1〜2回、一回1時間で実施 • どのように行うか？ ◦ ピンポン形式 ◦ ドライバー・ナビゲーター形式
16. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて ピンポン形式 　　　実装対象に対しての理解を参加者がある程度持つ場合 は、 　　　コーディングする担当定期的に交代しながら、実装を行うピンポンスタイルで行う。 　　　コーディングのスタイルや実装方法の考え方を掴むことを目的とする。 実施ケース例 • 社内労働時間管理ツールのVue2→Vue3アップデート ◦ 事実上の全面書き換え ◦ 週毎にコーディングする人を交代 ◦ 逆にペアプロ実施者どちらもがそこまでの知見がないゆえの実施
17. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 実施ケース例(Vue2→Vue3) @Component({ components: { InformationModal, Bell, }, }) export default class Information extends Vue { public information: InformationInterface = initInformation; public informations: InformationInterface[] = []; private intervalId: number; private currentIdx: number = 0; private viewLabelIdx: number = 0; public showInformationModal = false; public showInformetionAlert = false; @Prop() public linearToRow: () => void; async mounted() { // 略 } } export default defineComponent({ components: { InformationModal, Bell }, props: { linearToRow: { type: Function as PropType<() => void>, require: true, }, }, setup(props) { const state = reactive<State>({ information: initInformation, informations: [], intervalId: -1, currentIdx: 0, viewLabelIdx: -1, showInformationModal: false, showInformetionAlert: false }); // TODO: 略 } }
18. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 具体的に行ったこと • Vue2(Class Component)をVue3(Composition API)に書き換え ◦ Vue2の時点で拡張を使っていたこともあり大きく書き換えた ◦ Vue3が正式に出て間もない時期から開始 ▪ 世の知見もそこまで無い ピンポン形式でよかったこと • 尖った技術を使うからこそ活かせる部分がある ◦ 知見が少ないからこそ互いに調べる→知見の共有が高速になる
19. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて なぜペアプロでおこなったか？ • アプリの管理をある程度共有しておく必要があった ◦ せっかく大きく変えるので一緒にやれば1からの知見になる • 社内的にフロントを大きく改善して行こうという流れがあった ◦ 最新のフロントエンド技術に明るい人を増やす ◦ VueにせよReactにせよAngularにせよ考え方は持っていけるは ず
20. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて ドライバ・ナビゲータ形式 　　　参加者間で実装対象に関する理解に差があるときにドライバ・ナビゲータ形式で行う。 　　　プロジェクトへの参加する際のキャッチアップや、対象サービスへの理解など、 メンバー間でのギャップを埋めることを目的とする。 実施ケース例 • 社内プロジェクト管理ツールの拡充 ◦ GraphQL + Rustで出来ているツールの拡充 ◦ 筆者が先んじて作っていたもの • 新規メンバーのオンボーディング ◦ 新入社員や、別プロジェクトからの移動
21. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 社内プロジェクト管理ツール
22. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 社内プロジェクト管理ツール Dieselのモデル構造体 GraphQLのインターフェース構造体 Into/TryInto RDB psql GraphQL Query/Mutation dataloader repository actix-web handler METHOD: POST endpoint: /graphql
23. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 社内プロジェクト管理ツール // 以下抜粋 #[juniper::graphql_object(Context = Context)] impl Query { fn all_projects(&self, context: &Context) -> FieldResult<Vec<Project>> { let projects = ProjectRepository::all_projects(context) .and_then(|projects| Ok(projects.into_iter().map(|p| p.into()).collect())) .map_err(Into::into); projects } async fn find_project(&self, context: &Context, id: i32) -> FieldResult<Project> { let project = ProjectRepository::find_project(context, id)?; Ok(project.into()) } async fn all_users(&self, context: &Context) -> FieldResult<Vec<User>> { load_all_users(context).await.map_err(Into::into) } }
24. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて 具体的に行ったこと • RDB周り含めた機能拡張 ◦ RustでのRDBを扱う方法 ▪ 新規チームは基本Railsなので違うものを扱う ▪ Rails以外でどうやってORMやマイグレーションツールを扱うか • どちらかというとRailsが特殊 • GraphQLでAPIを扱う ◦ とりあえずREST APIとなることが多かったので違う選択肢があったほうが良い ドライバ・ナビゲータ形式 • 最初期の導入をスムーズに進められる ◦ 最初にナビゲータが悩んだ箇所で悩まなくて良い • 設計思想の共有が簡単 ◦ ナビゲータが説明しながらドライバに実装してもらうので、なぜそういう実装にしたか、なぜそういう フォルダ構成なのかの共有がもれなくできる
25. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて なぜペアプロでおこなったか？ • かなり尖っている言語、アーキテクチャを使っていた ◦ ピンポン形式でやっても知っている側がやっているときに何をやっ ているか見ている側はわからない可能性が高い • 自分が好きな技術の布教 ◦ Rust布教したいという草の根活動
26. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて その他コミュニケーション 〇〇というフレームワークが出たので 使ってみた 休みの日に△って映画見てきました 次の勉強会はどうしようか・・・ 他のプロジェクトでは〇〇言語ってどういう書き方してます？ 最近出た◇って本がおすすめ ! 休みの間にこんなの作ってみました！
27. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて • 使ったツールについて ◦ 基本的にはGoogle Meetのみ ▪ ソースは全画面共有でブラウザ画面ごと共有 ◦ 画面設計時にGoogle Jamboardを利用(ホワイトボード) ◦ VSCodeなどに付随する画面共有ツールは未使用 ▪ 互いの理解があったり、理解が早かったりすると逆に同期とかの時間が惜 しい
28. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて
29. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて • 苦労した点 ◦ 時間を合わせるのが大変 ▪ 毎週決まった曜日、決まった時間で実施しているが業務が立て込むと流れ る ▪ →無理しない方針に。業務があれば業務が優先。その代わり、ペアプロ時 にキリが悪ければ延長も自由にしている ◦ 実際の書き方の例示方法 ▪ Meetのチャット欄を活用した ▪ 最終的にはコピペでも自分で書くのが大事だと思うので、そのようなスタイ ルに
30. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. まとめ • ペアプロを行うことでのリモートワークの技術的コミュニケーションロス の解消方法を紹介しました。 • 実際何を題材にペアプロをしたか紹介しました。 • ぜひ小さいところからペアプロ始めてみてください。
31. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 次のセッションについて 15:00〜 私、ECサイトはユーザーに使いやすくって言ったよね！ ～とらのあな通販サイト 改善の取り組み～ 登壇：マーケター 下野 晃生