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

by 虎の穴ラボ株式会社

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. 自己紹介ページ(藤原) 藤原佳顕（ふじわらよしあき） ‣ Webエンジニア ‣ 新規事業担当（Fantia、Creatia）、アーキテクトチーム ‣ 前職：独立系ソフトウェア会社、主に GISとWeb、ライブラリ開発 ‣ TypeScript、C#、Ruby on Rails、C++ ‣ React、Vue、Angular ‣ 入社理由 ‣ 自分がスキルアップできそうな場所に行きたい ‣ オタク系の話ができるところに行きたい好きなモノ ‣ シューティングゲーム、格闘ゲーム ‣ SF小説 ‣ プログラミング

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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上での分報チャンネル ■ プロジェクトに関係ある(っぽい)内容なら何でも書けるチャンネル

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについてピンポン形式　　　実装対象に対しての理解を参加者がある程度持つ場合は、　　　コーディングする担当定期的に交代しながら、実装を行うピンポンスタイルで行う。　　　コーディングのスタイルや実装方法の考え方を掴むことを目的とする。実施ケース例 ● 社内労働時間管理ツールのVue2→Vue3アップデート ○ 事実上の全面書き換え ○ 週毎にコーディングする人を交代 ○ 逆にペアプロ実施者どちらもがそこまでの知見がないゆえの実施

Slide 17

Slide 17 text

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({ information: initInformation, informations: [], intervalId: -1, currentIdx: 0, viewLabelIdx: -1, showInformationModal: false, showInformetionAlert: false }); // TODO: 略 } }

Slide 18

Slide 18 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて具体的に行ったこと ● Vue2(Class Component)をVue3(Composition API)に書き換え ○ Vue2の時点で拡張を使っていたこともあり大きく書き換えた ○ Vue3が正式に出て間もない時期から開始 ■ 世の知見もそこまで無いピンポン形式でよかったこと ● 尖った技術を使うからこそ活かせる部分がある ○ 知見が少ないからこそ互いに調べる→知見の共有が高速になる

Slide 19

Slide 19 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについてなぜペアプロでおこなったか？ ● アプリの管理をある程度共有しておく必要があった ○ せっかく大きく変えるので一緒にやれば1からの知見になる ● 社内的にフロントを大きく改善して行こうという流れがあった ○ 最新のフロントエンド技術に明るい人を増やす ○ VueにせよReactにせよAngularにせよ考え方は持っていけるはず

Slide 20

Slide 20 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについてドライバ・ナビゲータ形式　　　参加者間で実装対象に関する理解に差があるときにドライバ・ナビゲータ形式で行う。　　　プロジェクトへの参加する際のキャッチアップや、対象サービスへの理解など、メンバー間でのギャップを埋めることを目的とする。実施ケース例 ● 社内プロジェクト管理ツールの拡充 ○ GraphQL + Rustで出来ているツールの拡充 ○ 筆者が先んじて作っていたもの ● 新規メンバーのオンボーディング ○ 新入社員や、別プロジェクトからの移動

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて社内プロジェクト管理ツール // 以下抜粋 #[juniper::graphql_object(Context = Context)] impl Query { fn all_projects(&self, context: &Context) -> FieldResult> { 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 { let project = ProjectRepository::find_project(context, id)?; Ok(project.into()) } async fn all_users(&self, context: &Context) -> FieldResult> { load_all_users(context).await.map_err(Into::into) } }

Slide 24

Slide 24 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて具体的に行ったこと ● RDB周り含めた機能拡張 ○ RustでのRDBを扱う方法 ■ 新規チームは基本Railsなので違うものを扱う ■ Rails以外でどうやってORMやマイグレーションツールを扱うか ● どちらかというとRailsが特殊 ● GraphQLでAPIを扱う ○ とりあえずREST APIとなることが多かったので違う選択肢があったほうが良いドライバ・ナビゲータ形式 ● 最初期の導入をスムーズに進められる ○ 最初にナビゲータが悩んだ箇所で悩まなくて良い ● 設計思想の共有が簡単 ○ ナビゲータが説明しながらドライバに実装してもらうので、なぜそういう実装にしたか、なぜそういうフォルダ構成なのかの共有がもれなくできる

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて ● 使ったツールについて ○ 基本的にはGoogle Meetのみ ■ ソースは全画面共有でブラウザ画面ごと共有 ○ 画面設計時にGoogle Jamboardを利用(ホワイトボード) ○ VSCodeなどに付随する画面共有ツールは未使用 ■ 互いの理解があったり、理解が早かったりすると逆に同期とかの時間が惜しい

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved. ペアプロについて ● 苦労した点 ○ 時間を合わせるのが大変 ■ 毎週決まった曜日、決まった時間で実施しているが業務が立て込むと流れる ■ →無理しない方針に。業務があれば業務が優先。その代わり、ペアプロ時にキリが悪ければ延長も自由にしている ○ 実際の書き方の例示方法 ■ Meetのチャット欄を活用した ■ 最終的にはコピペでも自分で書くのが大事だと思うので、そのようなスタイルに

Slide 30

Slide 30 text

Slide 31

Slide 31 text