この記事は ヤプリ #2 Advent Calendar 2022 の12日目の投稿になります。
こんにちは、フロントエンドチームのマネージャーの山田です。
今回はヤプリのフロントエンドチームが2022年に取り組んだ内容について紹介させていただきます！
2022年に取り組んだこと
振り返って2022年の冒頭、フロントエンドチームは業務を特にフロントエンドの技術力が必要な領域にフォーカスして、プロフェッショナルな業務に集中する指針を打ち出していました。
詳細は2022年冒頭に書いた以下の記事で紹介していますが、技術負債の解消やUI改善に取り組みたかった事、意欲的に挑戦できる業務や環境の構築を進めたいなどの背景がありました。
tech.yappli.io
そんな2022年のフロントエンドチームですが、新たに2人のメンバーが加わり6人体制になりました！
1人目は2022年5月に入社してくれたフロントエンドエンジニアの平川で、2人目はサーバーサイド主務でフロントエンドにも強い武井がサーバーサイドチームからフロントエンドチームに移籍してくれました。ヤプリの開発組織ではエンジニアリング領域における移籍は複数事例があり、当人の希望とチーム状況に応じて対応されます。
では、2022年に6人のフロントエンドチームで取り組んだ主な作業を紹介していきます。
デザインシステムの構築
2022年からデザインシステムの構築を本格的に進めています。背景はこちらの記事でも触れていますが、実装とデザインファイルの乖離によるアウトプットの品質低下と開発効率低下の課題に対する取り組みになります。
エンジニアとプロダクトデザイナーが密に連携し、現状の実装と照らし合わせてコンポーネントの再設計を行いながらデザインシステムの構築を進めました。実装における課題感も多数浮き彫りになったので、各コンポーネントを順々にリファクタしながら進めています。
フロントエンドの開発者体験向上
ヤプリではサーバーサイドエンジニアも基本的なフロントエンド開発を行っています。フロントエンド専任ではない開発者も触れる領域だからこそ、より開発が容易かつ品質も安定するように開発基盤の強化に取り組みました。主たる取り組みとしてTypeScriptによる型の導入とテストの整備が挙げられます。
TypeScriptでは型の恩恵による開発速度向上や品質向上を実現しました。ここではリファクタ作業と並行して実装レクチャを行う事により各メンバーが早々にTypeScriptで実装が可能となるよう習熟をフォローする取り組みも行いました。
テストの整備については既存のテストコードのリファクタを行い実装コスト削減に取り組むと共に、フロントエンドにおけるテスト戦略の指針を定義し品質を整えました。 ここでの取り組みは今年開催したYappliの Tech Confrence でも紹介しており、Yappliの Tech Blog でも記事にしているので是非読んでみてください^^ tech.yappli.io
その他に多言語対応における大規模リファクタも実施しました。リファクタ前は外部ツールを使って多言語対応を実現していましたが、機能要件が満たされない事や外部ツールに依存することによる実装影響とその対応コストにも課題があったため、元々実装していたi18n機構を整備し外部ツールに依存しない多言語対応を実現しました。リファクタ前は画面構造に合わせた階層構造の翻訳キーと翻訳ワードの紐付け構造でしたが、covid19 を参考に日本語をキーとする仕組みに変更し、課題解決と共に翻訳定義の運用保守性の向上を実現しました。
R&Dにおける、webviewベースのアプリ機能開発
ヤプリ製のアプリは一部機能を除きiOS、Androidのそれぞれがネイティブの開発言語で実装されており、アプリらしいユーザ体験と高いパフォーマンスを実現しています。
それ故に一つの機能を開発する場合、サーバーサイドとフロントエンド、iOS、Androidの実装が必要となります。複数の領域のエンジニアが足並みを揃えて開発を行うので、実装量は多く、認識齟齬を防ぐため厳密な仕様定義や密なコミュニケーションが必要となります。総じて開発コストが高く、何を開発するのかの意思決定も慎重になります。
この機能開発におけるコスト高の課題に対するアプローチとして、サーバーサイドとフロントエンドの実装のみで機能開発が完結する「webviewを用いたweb技術での開発」案が出てきました。 ネイティブの機能性や表現を必要としない簡易的な機能であれば、webviewベースの開発でも十分なクオリティを実現しながら爆速開発が出来るのでは？という見込みの元、ヤプリのプラットフォームに容易に組み込めるかを検証するR&Dを行いました。
結果として、この取り組みによりwebviewベース機能開発基盤の試作と検証を行い十分な実現性の確認が出来ました。来年からこの開発基盤でも機能開発を進めたいです^^
遊撃作業
2022年の指針の１つとして、フロントエンドエンジニアは開発プロジェクトには専任で属さずタスクの作業依頼でスポット参加する体制にしました。意図通りプロジェクト開発業務においてもコアなフロントエンド開発にのみに注力する事が出来たので、良いバランス感で以前と遜色ない貢献が出来たと思います。
その他
他にも運用保守対応をはじめCMSの機能拡張や外部ツールの導入、フロントエンド実装についての相談役、またフロントエンドの技術力を向上させる取り組みとしてペアプロやライブコーディングの実施など、多くの業務領域でヤプリのフロントエンドを盛り上げました。 あと、花火を打ち上げたりもしました。綺麗ですね。 tech.yappli.io
2022年を振り返って
good だったところ
2022年を振り返って成長した部分は沢山ありますが、2021年からの変化として特に大きいと感じたのはフロントエンドチームがしっかりチームとして機能出来た部分だと思ってます。メンバーも増えて、以前は個の力で対応していたものにチームとして取り組む事が出来ました。
- 技術的負債の解消や、開発者体験の向上にチームとして取り組めたこと。
- 属人化していた作業をフロントエンドチームで冗長化できたこと。
- プロダクトデザイナーと密に連携してデザインシステム構築を進められたこと。
2022年冒頭で想定した以上の結果と同時にフロントエンドチームの地盤がより強固になったと感じています。
motto だったところ
反面新たな課題もあります。意図してプロジェクトに属さないという意思決定の結果として、大きな機能開発でプロジェクトの一員として深く関わる機会から遠ざかってしまった事や、プロフェッショナル領域に注力するからこそのタスクの属人化する傾向になった事などが挙げられます。ここのバランス感はしっかり考える必要があると感じました。
- チームで一つの大きなものを開発するという経験が出来なかったこと。
- 多くの課題解決を並行して進めた事により、それぞれのタスクが個々人に依存してしまったこと。
来年は大規模な機能開発プロジェクトへの参加も行って、主メンバーとして仕様や要件に深く関わりながら開発する機会も創出したいです。
2023年に取り組むこと
総括として2022年のテーマだった技術負債解消や開発者体験向上など、地盤強化はしっかり進めることが出来ました。2023年は引き続き地盤の強化を進めつつ、新たに攻めの開発にも取り組んでいきます。
具体的には以下の取り組みを予定しています。
- R&Dとして検証していたwebviewベースの開発基盤による新機能開発。
- 大規模の機能開発プロジェクトにおけるフロントエンド開発。
- 続・デザインシステムの構築。
来年も柔軟に取り組みを考えて、プロダクトと一緒にメンバー全員が成長出来るよう取り組んでいきたいです。
最後に
さて、いつもの締めになります。ヤプリでは一緒にプロダクトの成長を加速させてくれるフロントエンドエンジニアを積極募集しています！！
もし興味をお持ちいただけましたら、カジュアルにお話出来たら嬉しいです。お待ちしております ^^
