営業代行 Web サービスの設計・開発を行っていました。
前職は受託開発企業をしており、お客様から営業代行 Web サービス開発を受注し設計・開発を行いました。営業職の人の営業リスト作成・メール営業・問い合わせフォームへの営業・日程調整を効率化することができるシステムになっています。(※他社様のサービスだと Musubu[ https://musubu.in ] が近いです。日程調整は調整アポ[ https://scheduling.receptionist.jp ] が近いです。)
主な機能は以下の通りです
- 営業リストの作成
- 営業リストへの営業メール配信
- 営業メールの開封率などの結果確認
- 営業リストへの問い合わせフォーム配信
- リンククリック数などの結果確認
- 日程調整作業自動化
- Google・Outlook カレンダーとの連携
- Zoom・Google Meet・Teams Web 会議サービスとの連携
2022 年 12 月~ 2023 年 2月に要件定義、2023 年 4月~ 2023 年 5 月まで基本設計、
2023 年 6 月~ 2023 年 12 月まで開発を行いました。チーム構成は以下の通りでした。
### 要件定義時
- メンバー 2 名(アドバイザー的立ち位置 1 名)
2週間ごとにお客様にFigmaで作成した画面のモックをお見せして、承認をもらっていました。
業務内容は以下の通りです。
- 画面モック作成
- 技術調査
### 基本設計時
- メンバー 2 名(アドバイザー的立ち位置 1 名)
1週間ごとにお客様に画面の基本設計をお見せして、承認をもらっていました。
業務内容は以下の通りです。
- テーブル設計
- API設計
- 画面の基本設計
### 開発時
- リーダー 1 名(私)
- メンバー 5 名(アドバイザー的立ち位置 1 名)
開発フローは 1 週間ごとのタスクを割り振り、私がレビューするという形でした。
リーダーとして以下の業務を行いました。
- 機能開発
- API 開発
- フロントエンドのページ開発
- レビュー
- 質問対応
- テスト
- デプロイ用 Docker ファイル作成
### 使用技術
- Nuxt・Vue・Typescript・Pinia:環境構築・共通部品作成・共通コンポーネント作成・各ページ作成
- Java・SpringBoot・Junit:環境構築・共通部品作成・各種API作成・各種バッチ作成・APIレベルでの自動テスト
- MySQL:SQL作成
- Redis:セッション管理に使用
- Docker:AWS ECRにPushするDockerイメージ作成
- AWS:インフラチームが構築したためほとんど触っていない
- GitLabCI:インフラチームが構築したためほとんど触っていない
- Figma:画面モック作成時に使用
#### 【フロントエンド開発】共通コンポーネントの作成
このプロジェクトは業務システムではなく Web サービスであったため UI フレームワークを使うことができなかったためテキストボックス・ページネーションなどを自作する必要がありました。
チームメンバーがフロントエンド開発に入る前に共通コンポーネントを一人で作成しました。各コンポーネントのロジックは Composable 関数、見た目はコンポーネントに記述することでコンポーネントから分離しました。通知コンポーネントのようなページをまたいだデータ保持が必要な場合は、Provide によって最上位コンポーネントに Composable 関数を注入しました。また、通知コンポーネントのようにSSR時に生成されるデータが存在する場合は、Nuxt3のSSR フレンドリーなuseState関数を使用することでサーバーサイドで生成されたデータをハイドレーション時に復元できるようにもしました。
#### 【フロントエンド開発】モダンな技術の導入
前職の会社では Vue2・Nuxt2・Javascript・SPA を使用することが多かったが開発後の保守フェーズのことを考え Vue3・Nuxt3・Typescript・SSR を導入しました。しかしチームメンバーはこれらの技術に触れたことがなかったため質問対応が大変でした。useAsyncDataというSSRフレンドリーなfetch関数を使用すると、SSR時にAPIを呼び出す場合にサーバー側とクライアント側の両方でAPI呼び出しを行ってしまうバグが発生しました。ソースコードを読むことによってuseAsyncDataに渡す関数がundefinedやnullを返却する場合はサーバー側でデータを取得できなかったと判定されクライアント側でもう一度APIを呼び出してデータを取得するように実装されていることが原因であるとわかりました。またPiniaという状態管理ライブラリーを使用していたためデータを取得してもuseAsyncDataにデータをキャッシュする必要がなかったためuseAsyncDataに渡す関数がundefinedを返却していることも原因でした。そこでuseAsyncDataに渡す関数は必ず取得したデータを返却するようにチームに共有して開発効率を上げることができました。また、質問対応した場合はドキュメントにまとめてチームメンバーに公開することで質問対応に割かれる時間を削減することができました。
### 【バックエンド開発】外部サービスとの連携
日程調整機能を作成するにはGoogleカレンダーやOutlookカレンダーのように外部サービスを利用する必要がありました。
しかし各外部サービスごとに異なるライブラリーを使用しなければならないため、素直に実装すると外部サービスを利用する場合必ず条件分岐しなければならなくなってしまいます。またチームメンバーにAPI単位でタスクを割り振ると外部サービスを呼び出すメソッドを重複して実装してしまう可能性もありました。
この問題を避けるために先にインターフェースを定義して、外部サービス用のアダプターをチームメンバーに実装してもらい、その後外部サービスを利用するAPIの実装をしてもらいました。
この取り組みによってチームメンバーの作業効率を上げることができたと思います。