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

suzuki

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

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

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

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

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

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

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

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

各画面への組み込み

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

品質担保

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

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

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

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

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

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

Gaji-Labo は React 開発の実績と知見があります

フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。「人手が足りず信頼できるエンジニアを探している」「フロントエンドの効率化をどうしたらいいか分からない」「自分たちで手を付けてみたがいまいち上手くいかない」などのお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!


suzuki

投稿者 suzuki

フロントエンドグループリード。
HTML/CSS のマークアップから始まり、現在は React や TypeScript を使ったコンポーネント実装をすることが多いです。淡々と実装するだけではなくコミュニケーションを取りながら、チームとしてプロジェクトを前に進めることを意識しています。最近は会社の成長へのコミットに関心があり、組織・チーム全体で強まるためにはどうするのだろう?ということを考えています。