Gaji-Labo フロントエンドチームでの Web アプリケーション開発の流れ

こんにちは、Gaji-Labo フロントエンドエンジニアの鈴木です。
普段の React + TypeScript での Web アプリケーション開発で、具体的にどのように動いているかについて書いていきます。

どんなことをやっているか

直近では新規機能開発、既存画面のリニューアル案件などがあり、2名〜体制のチームを作って進めています。
チーム内ではざっくりこんな感じで分担することが多いです。

• コンポーネント実装、Storybook への追加、各画面への組み込み
• テスト環境整備、API 周りのコミュニケーション・実装、画面単位のテスト

Storybook を使用したコンポーネント開発

Gaji-Labo ではコンポーネント開発時に Storybook を導入して開発を進めることが多いです。
作ったコンポーネントを即画面に組み込むのではなく、まずは Storybook に載せていく流れです。

この方法を採用すると、コンポーネント開発の手分けができ、狭い影響範囲内でガシガシ開発を進めることができるので速度が出やすいです。
特にコンポーネント開発の手分けができる点は、チーム開発との相性も良いです。

以前 Storybook 駆動開発について書いたブログはこちらです。 https://wp.gaji.jp/2020/01/16/2199/

各画面への組み込み

コンポーネント単位での実装後、各画面への反映を行っていきます。
Gaji-Labo では外部パートナーのエキスパートエンジニアと協働しています。
パートナーエンジニアと分担しながら、 API 繋ぎ込みや繋ぎ込み後の実装が期待通りか等をチェックします。

品質担保

Gaji-Labo 側での作業完了後は、以下のような工程に移ります。

• レビュー依頼をし、フィードバックがある場合は対応
• ステージング環境での確認
• テストケースのチェック

ステージング環境やテストケースの有無は各プロジェクトごとに異なりますが、それに相当する確認を行います。
ここまでの工程でも Gaji-Labo 内部でレビューしていますが改めて確認しています。

チームでアウトプットを最大化する

チームで動くことにより、負荷の分散やタスクの同時進行が可能になります。
また、外部パートナーとの協働によって、弊社だけではカバーできない領域にも踏み込むことができています。

今後は、より Gaji-Labo のカバー範囲を広げつつ、チームで動くことでアウトプットの最大化に繋げていきたいと考えています。