こんにちは。LINE Growth Technology UITチームの田中祥子です。 この記事では、LINE Growth Technology(以下、GT)のUITチームでコミュニケーションの一環として行っている「Communication Dev」について紹介したいと思います。
経緯
GT のフロントエンドエンジニアはGTの開発室の中にあるUITチームに所属しています。メンバーはそれぞれ別のプロジェクトに所属していることが多く、メンバー間のコミュニケーションが希薄でした。 また、私自身が入社して日も浅く、1つのプロジェクトにしか携わっていないので、UITチームの他のメンバーとの交流がほとんどありませんでした。 そこで、普段交流のないメンバーと一緒に何かを開発をすることでコミュニケーションの機会を増やし、GTのUITチームとして絆を深めることを目的に始まったのが「Communication Dev」という取り組みです。 Communication Devでは、GT UITチームのメンバーがAチームとBチームとして4人ずつに分かれ、週に最低30分ほど時間を取り、チーム開発を行いました。 それでは、具体的にどんなことに取り組んで来たのかを振り返っていきたいと思います。
Communication Dev での取り組み
テーマ決め
テーマ決めでは実用的な案から遊びの案まで、様々な案を出し合いました。 下記はその実際に出た案の一部です。
- 社内の勤怠システムの改善
- 新宿エリア版コロナ対策サイト
- 出社のヒートマップ
- ピアボーナスサービス
- 打刻ガチャ
- ゲーム
今回の Communication Devでは2チームに分かれて活動していたのですが、意外と皆考えることが一緒で、2チームとも似たような案が出ていたのが面白かったです! 両チームとも社内システムへの改善案が出ていたのはGTらしいと思いました。 そして私のチームでは、在宅勤務が続く中で、感謝の気持ちを伝える機会を増やせたら良いねという話になり、ピアボーナスサービスを作ることにしました。 ちなみにテーマ決めだけで3週間かかってしまいました。
Verda でサーバーを建てるワークショップ
メンバーが全員がフロントエンドエンジニアということもあり、インフラ周りはあまり触ってこなかったメンバーが多かったので、開発に進む前に表題のワークショップを行いました。 これは元々Bチームで行うワークショップでしたが、Aチームからの参加者も多い会となりました! ワークショップでは社内プライベートクラウドのVerdaを使って以下の内容について学びました。
- Verdaでサーバーを準備してサービスを建てる
- Load Balancerの設定を作る
- DNSを設定できる
わからない用語も気兼ねなく聞ける雰囲気で取り組めたので非常に有り難かったです。 Verdaの操作については「忘れてる!」というメンバーも意外といたので安心しました。 フロントエンドエンジニアだけでインフラの勉強会をやってみると、普段の勉強会より質問しやすい空気になるので、定期的に開催していきたいですね。
画面遷移図とデザインを作るワークショップ
私のチームでは、画面設計をある程度決めてからの方が技術選定がやりやすいということで、技術選定の前段階として、画面遷移図とデザインを作ることになりました。 今回は以下のような工程で進めていきます。
機能の洗い出し
まずはテーマに沿って作成した大まかな機能要件を元に、具体的にどんな機能が必要なのかを改めて洗い出します。 優先順位は特に考えず、思いつくだけ書いていきました。
オブジェクトの抽出
ここで言うオブジェクトとは、ユーザーが関心を寄せる対象のことを指します。 オブジェクトを決めることで、サイトにどんな情報が必要かを明確にすることができます。 そこで、オブジェクトにはどんな情報を持たせるのか、そしてそのオブジェクトに対してどんなアクションができるのかを定義しました。 アクションは機能要件の洗い出しで出てきた機能をそのまま書いていきます。
画面遷移図の作成
抽出したオブジェクトを画面に当てはめて画面遷移図を作成します。 大まかに一覧画面と詳細画面の形に落とし込んで、画面同士の関係を整理しました。
デザインの作成
画面遷移図を元に、必要な画面をUIでどう表現するかを考えてデザインを作成します。今回はFigmaを使用しました。 Figmaを使うのが初めてだったので苦戦しましたが、画面遷移図のおかげでスムーズに作業に取り組めました。 慣れてくると、同時編集でワイワイしながらできたので楽しかったです。 Figmaでデザインを進める中で、「ピアボーナスサービスなら、いつでもどこでも気軽に使える方が良いよね」という話になり、モバイルに絞ってデザインすることにしました。
技術選定、モブプロ
モバイル版に絞った開発としたので、モバイルに適した技術を選びます。 LINE MINI Appやflutter、React Nativeなどいくつか候補が上がりましたが、今回はReact Nativeで作っていくことにしました。 選定理由は、現在携わっているプロジェクトでReactを扱っているメンバーが多く、より知見を深めたいという話になったためです。 なかなか各々で作業時間を取るのは難しかったので、モブプログラミングの環境を用意しました。 モブプログラミングはオンラインで利用できるIDEを社内サーバーに立てて行うことでそれぞれの操作を共有しながらスムーズに行うことができます。 ドライバーはメンバー内で交代しながら作業を進めました。 自分がドライバーのときはコーディングを見られることにあまり慣れていなかったので緊張しましたが、他のメンバーがコーディングを優しく教えてくれたので楽しく作業ができました! また、他のメンバーのコーディングを直接見ながら気軽に質問もできたので、非常に勉強になりました。
終わりに
第三四半期内に全部を完成させることはできなかったのですが、コミュニケーションを活性化させるという目的は達成することができました。 Communication Devの活動を通して、GT UIT内でのコミュニケーションが以前よりも増えたことを実感しています。 実際、有志でCommunication Devの延長戦も開催しています。 また、実際にフロントエンドエンジニアのみが集まって開発を行ってみて感じたのは、同じフロントエンドエンジニアでもコーディングの方法や進め方が皆それぞれ違って面白いということでした。 普段のプロジェクトとは違い、サーバーサイドエンジニアがいないのも新鮮でした。
今年は在宅勤務が非常に多い状況で、リアルでのコミュニケーションがどうしても減ってしまっています。 特に私は今年の2月に入社したのもあり、Communication Devがなければほとんど話すことがないままの人もいました。 この状況の中で、リモート環境でもコミュニケーションを活発にとれる取り組みができたことに感謝しています。 それと同時に、Communication Devの中での取り組みを社内にもっと還元していけるようになれば良いと思っています。