MOSHフロントエンドの現状とこれから

2023-12-08現在地点とこれからやろうとしていること

本記事はMOSH Advent Calendar 2023の8日目の記事です。

はじめに

まず前提として私はMOSHのプロダクティビティチームというチームに所属しています。プロダクティビティチームは開発組織にとってよりよい環境・基盤を提供することを目指してツールの導入や新たな仕組みの構築などを率先して行っています。

現在MOSHでは以下のような技術・ツールを採用しています。

MOSHのWebアプリケーションはすべてAngularで構成されています。

また、移行中のため新旧基盤が混在しています。開発は基本的に新基盤のみですが画面によっては旧基盤に依存している部分もあり動作時は新基盤側をモジュール化、旧基盤側で読み込むような構成になっています。そのためにモノリポの管理ツールであるNxを入れています。

旧基盤からの廃止を目指しながらも機能開発を止めずに進められるよう、このような手段を取っています。

StorybookとChromaticを使用してUIの管理を行っており、コードサンプルの役割も兼ねています。

スナップショットテスト等は現状実施していませんがやっていきたい気持ちはあります。ただ、その際のスナップショット更新など運用にかかる作業は極力排除してできるだけ負担にならないようにしていきたいと思っています。

API側ではOpenAPIを利用していたこともあり、フロントエンドでも対応することになりました。

結果としてAPIリクエスト・レスポンスの型やAPIクライアントの自動生成が可能となり、より機能の開発に集中できる環境ができました。しかし、導入したてでまだガッツリ使えている状態にはなっていないため今後は地道に旧APIクライアントからの移行を進めていきます。

OpenAPIの導入までの話は以前発表した勉強会のスライドにもまとめています。

直近はこのようなことを計画しています。

デプロイフローの手順が多くリリース作業が少し手間がかかるものとなっているためそれを改善しようとしています。デプロイにかかる時間の短縮やデプロイフローを今よりも簡潔にし、誰でも気軽にリリースができるような環境・雰囲気に変えていこうと思っています。

また、Angularのバージョンアップに関しては不定期実施となっておりいつバージョンを上げるかが決まっていないため、このままだとバージョンが大きく離れていくことが予想されます。なので、きちんと計画を立てて一定の期間で定期的に実施するような仕組みにしていきたいです。

どんな組織でも課題は常につきものです。たくさんの課題の中から今どれをやるべきか、どれをやればよりプロダクトが前に進むかということを考えながらこれからも地道にやっていきます。