こんにちは。ユアマイスターのテックリード福田と申します。

この記事では、先日弊社オフィスで行われたプチ開発合宿の様子を紹介します。

プチ開発合宿開催の背景

元々は宿泊施設を借りて3日間くらいの開発合宿をやろうという計画を練っていたのですが、ご時世の都合によりたびたび延期となってしまっていました。
やむを得ず今シーズンは『できる範囲でできることから』ということで、社内で十分な感染対策を施した上で1日かけて1つのテーマに取り組む日を設けることにしました。

ユアマイスター株式会社は2021年8月に創業5年を迎えました。プロダクトの根幹となる部分は創業初期に作られてからずっと運用され続けており、ビジネスの急成長とプロダクトを取り巻く環境の変化にさらされつづけた結果、いわゆる技術的負債を抱え込んでいる状態になってしまっています。

今後さらなる発展を遂げるためには、そろそろこれまでのビジネスの基盤を築くにあたって借り入れてきた負債を返済しなければなりません。成長の土台となる足場をしっかりと作り直すことがエンジニアチームにとっての最重要課題となっています。

Bootstrapからの脱却

ユアマイスターでは、これからのプロダクトとそれを開発・運用するチームのあるべき姿を示すテクノロジー戦略を策定し、それに基づいてより開発効率を高めることができるような技術導入を進めています。
とりわけ現在はサーバレスアーキテクチャの導入に意欲的に取り組んでおり、メインで運用中のCakePHP製アプリケーションに関してはまずテンプレートエンジンが担っている部分をVue.jsに移行し、その後残ったバックエンド部分を徐々に分割しながらWeb API化する、という流れでのサーバレス化を行っている最中です。

移行完了後のフロントエンドはTypeScript + Vue.js 3.x + WindiCSSを中心とした構成になるのですが、現在採用しているいくつかのライブラリやフレームワークがそれらと干渉していて移行作業の妨げとなっています。そのようなフレームワークの代表例がBootstrapです。

技術スタックの移行は、他の開発案件と並行して各エンジニアが毎週決まった時間を確保した上で少しずつ進めているのですが、改修を行うタイミングがバラバラなため、自分の改修が他人に迷惑をかけないようにスコープを絞って作業せざるを得ません。一方で、Bootstrapのようにアプリケーション全体で利用されているフレームワークを剥がす作業は影響範囲が広い上にまとまった工数が必要となるため、業務の隙間を縫うような進め方ではなかなか手がつけられずにいました。

そこで、Vue.jsへの移行に関わっているエンジニアを一堂に集め、全員が同じタイミングで作業することによって進め方に起因する問題を回避しつつ、特別なことをやっている感を醸し出して他部署から持ち込まれがちな割り込み作業をそれとなくブロックしながら、アグレッシブに脱Bootstrapを進めてしまおうというのが今回のプチ合宿の狙いです。

開催に先立って、とりあえずBootstrapを読み込む部分だけを削除した作業ブランチを事前に用意しました。そのままデプロイすると、当然ながら画面のレイアウト崩れが大量に発生します。この崩れた状態のアプリケーションと本番環境で稼働しているものと同じ状態のアプリケーションと見比べながら、Vue.jsを用いてフロントエンドを実装し直してBootstrapを取り除く前と同じ状態に戻すことが本日のゴールとなります。

プチ合宿スタート！

当日は会議室に集まってプチ合宿の主旨とゴールを説明し、作業の分担を行ったうえでもくもくとコーディングを行いました。

私は主にBootstrapに依存している他のライブラリをどうにかする作業をしたり、アプリケーション全体に影響するような設計の見直しを行ったり、メンバーからの質問に答えたりしていました。

インターン生も参加してくれています。

おやつにドーナツをいただきました。

合宿の成果

ブランチを作ったときに予想していたとおりではありますが 残念ながら、物量がプチ合宿を企画した時に想定していたよりもかなり多く、1日で当初予定していたところまでタスクを進めることはできませんでした。

開発を行う中でBootstrap以外にもアプリケーション全体に影響を与えている独自のCSSが発見され、そちらへの対処を余儀なくされたあたりは事前のリサーチが足りていませんでした。
また、改修の影響範囲を調べているうちに使われていないコードや現代の流行にそぐわない機能が見つかり、そのまま実装し直すのもあまりに忍びなくて仕様変更の調整が必要となったことも思うように進捗が出なかった原因です。

とはいえ、及び腰になりがちなフロントエンドフレームワークの入れ替えという一大イベントの足がかりを作ることには成功したので、その点に関しては良かったなと思います。
参加した各メンバーにとっても、現状の技術に対する理解度や自分が1日でどれくらいのコードを書くことができるのかを把握する良い機会になったのではないでしょうか。

コミュニケーション手段としての開発合宿

普段の業務はリモートワークを中心に行っていますが、合宿形式で1日業務を行うことでオフラインでの開発作業にもメリットがあることが再発見できました。ただ単にいつもよりちょっと楽しいだけではありませんでした。

オフラインの強みは、なんといってもコミュニケーションが即時かつ同期的にできるところです。
Slackのような非同期のコミュニケーションツールは大変便利ですが、どうしても情報を受け取る側が情報の要否を判断して無意識化でフィルタリングし（あるいは見逃し）ていたり、自分の都合のいいときまで受け取りを遅延させるといったロスの発生が避けられません。
今回のプチ合宿で取り上げたような広範囲に影響する開発作業を行う際は大小さまざまなトラブルが発生し、こういったロスが進捗に多大な悪影響を及ぼします。
結果を見れば、集まって作業したことが問題の軽減にプラスに働いたのではないかと思います。

スムーズな進行のためには意思決定と問題解決ができる人がその場に参加している事が非常に重要です。人間はたいへん社会的な生き物であり、対面で投げかけられたコミュニケーションを無視することは通常難しく、議論が発生したときにそれをリードできる人物がいなければ全員の時間を浪費してしまうため注意が必要です。

みんなで集まって1つのことに取り組む合宿は、技術スタック入れ替えのような作業に着手する際にチームの共通認識を構築する手段として非常に有効だと感じました。

ユアマイスターの次期プロダクトではVue.js 3.x系などの採用が決まっていますが、このような新しい技術のキャッチアップはまだまだ途上であり、普段からペアプログラミングなどを通じてスキルアップに取り組んでいます。私もそれなりの時間を確保してメンバーとペアプログラミングを行っているのですが、リモートで実施するとどうしても主たる参加者とのクローズドなコミュニケーションになってしまいます。
その場にいなかった別のメンバーとペアプログラミングを行う際に、設計ポリシーなどのコードからは読みとるのが難しいハイコンテキストな情報を繰り返し説明しなければならないなど、効率的ではないと感じることもありました。

ユアマイスターではこれからも継続的にこういった技術的なターニングポイントの発生が見込まれているため、定期的に合宿を開催しチーム全体のレベルアップを図っていきたいと思います。

おわりに

良かったところも反省すべきところもそれぞれありましたが、たまにこういうイベントをやってみるといろいろ気づきがあるな、と実感できるプチ合宿でした。
次回は延期になっているガッツリ開発合宿をなんとか実施できればなぁと思います。ありがとうございました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

現在、エンジニアを積極採用中です。ぜひ会社説明資料もご覧ください！

YOURMYSTAR ENGINEER：https://speakerdeck.com/yourmystar/engineer

ユアマイスターの技術的な挑戦やチームに興味をお持ちいただけた方は、１度カジュアルにお話しましょう！