ID:66760さん

## **訪日外国人向けOTAサービスでの主要な取り組み** 私は訪日外国人向けにアクティビティを予約できるOTAサービスを提供しています。 以下に、私が取り組んだ代表的な施策を記載します。 ## **Cypress導入によるテスト環境の改善** 所属するプロダクトにて、決済とは関係ないと思っていた機能を修正後、決済が失敗してしまうという事象が発生したので、リリース前に決済が失敗に気づけるように、E2Eテストの導入検討をしました。 そして、Cypressを以下の理由で導入をすることにしました。 - 知見があるチームメンバーがいる。 - ドキュメントやgithubの更新がされている。 - 使用ユーザーが多い。 そしてCypressをCircleCIと統合し、テスト環境を大幅に改善しました。具体的な取り組みは以下の通りです。 - data-cy属性の活用によるテスト保守性の向上 - ステージング環境でのバックエンド再現 - wait-on関数導入によるテスト実行タイミングの最適化 - CIパイプラインの最適化（テスト実行時間短縮、並行実行導入） これらの施策により、品質保証プロセスが改善され、リリース前に決済の確認もすることができ、プロダクトの信頼性が向上しました。 ## **Next.js Image導入によるパフォーマンス改善** パフォーマンス改善のため、Page Speed Insightsで計り、画像処理のパフォーマンスが悪いということに気づきました。 そして、画像処理のパフォーマンス向上のため、Next.js Imageを導入しました。 - 10個のLPすべてに適用 - priorityやsizesの適切な設定。検証のconsoleを確認し、warningがでないように設定。 - 画像サイズに応じて自動的にsizesを調整する関数の実装 この取り組みは直接的な大幅なパフォーマンス改善にはつながりませんでしたが、次のパフォーマンス施策への足がかりとなりました。 ## **特集ページの作成** Next.js/TypeScriptを使用して5つのLPを作成しました。 - モバイルファーストのCSS設計（mixinを使用） - SSGによるデータ連携でSEO対策 - i18nを使用した多言語対応（最大5言語） - 言語ごとの文字数の違いに対応したスタイル調整 ## **チームメンバーとのコミュニケーション強化** フルリモート、フルフレックスの働き方を採用しているため、コミュニケーションを特に重視しています。 - 週2回のチームメンバーミーティング - 週3回のエンジニアのみのミーティング - 週1回の先輩エンジニアとのミーティング - Slackでの随時質問対応 - 必要に応じた即時ハドルの実施 プロダクトの遅延を防ぐため、コミュニケーションでカバーできることは最大限取り組んでいます。 ## **ディレクターとのコミュニケーション改善** 技術的な説明をする際は、以下の点に注意しています。 - 専門用語を避け、分かりやすい言葉で説明 - 必要に応じて生成AIツールを活用し、説明の質を向上 - 期日や不足情報を積極的に確認し、コミュニケーションエラーを防止 これらの取り組みにより、プロジェクトの効率と品質の向上に貢献しています。

## プロジェクト名 「TOUCH POINT BI」 https://ebilab.jp/service/ ## プロジェクトの目的 小売業・サービス業に特化したBIツール。 現場の課題をひとつずつ解決しながら生まれたBIツールで、店舗業務の煩わしい作業を全て自動化し、飲食・小売店、あらゆるサービス業を支える経営支援ツールです。 ## チーム構成 全6名 フロントエンド・バックエンドエンジニア　2名 データサイエンティスト　2名 BIエンジニア2名 ## 使用言語 Next.js/TypeScript/GraphQL/Laravel/Python/prisma/postgreSql/Vercel/Azure/PowerBI ## プロジェクトの内容 フロントエンドはNext.js/TypeScript/Vercelで構成し、バックエンドはGraphQLを通してPoweBIの分析レポートを取得し、LaravelやPythonの環境に依存しているデータのやり取りを行っております。 ## 主に取り組んでいる事 主に取り組んだことはTOUCH POINT BIの追加実装やバグ修正、そしてバージョン2に移行する業務をしております。 隔週に一回、カスタマーサクセスの方と開発チームを交えたミーティングを行い、顧客の要望を聞いて、チームで取り組むべきかを議論し追加実装を行いました。 その中で私はNext.js/TypeScript/GraphQL/Laravelの箇所で追加実装やバグ修正があれば、先輩エンジニアの方に壁打ち相手になってもらい、分からないことがあれば質問しながらタスクに取り組みました。 ## 常に意識していた点 誰が見てもわかりやすいように、現状のコードのルールなどを理解しながらコードを書いていきました。 そして、プルリクエストを申請する際もコメントなどを記載して相手に伝わりやすいように気をつけました。 また、React Developer Toolなどを使って無駄なレンダリングがないか、パフォーマンスも意識しながら書いております。 ## 実際に取り組んだ事 - 課題 1日の売り上げやその日の労働人数などを記録する日報の機能に、1日の賃貸料金を記入する項目があったのですが、お客様から「1日の賃貸料金はあまり変動がない為、できるだけ、賃貸料金を入力する手間を省きたい」という要望がありました。 - 使用技術 Next.js/TypeScript/GraphQL/Prisma/PostgreSQL/Docker/Azure/Vercel - 取り組んだこと 取り組んだことは、DB、Next.js、GraphQLの順で説明させていただきます。 DB 月の賃貸料金の項目を増やし、保存するタイミングは日報も月の賃貸料金も一緒だが、月の項目も増えていく可能性も考え、日報と月報のデータは分け、新たに月報のテーブルを作成しました。 Next.js 月の賃貸料金の追加処理ではNext.jsで同じフォームを作成し、月の賃貸料金を入力すると、その月の賃貸料金をその月の日数で割った値を日の賃貸料金に自動出力されるようにしました。 また、一度入力されると月と日の賃貸料金の両方とも値を保持するようにしております。 GraphQL GraphQLのresolver内でで値を受け取り、値を整形、そしてそのデータをPrismaにてテーブルへ保存する処理を作成しました。 取得の処理では、GraphQL でリクエストする値を取得し、resolver内で値を整形、そしてPrismaにてテーブルから値を取得しました。 - 工夫した点 可読性を上げるため、GraphQLの実装で、resolverでは値を整形するロジック、PrismaにはDBとのやりとりだけを書くように意識しました。 そして、再現性のある型を作成したりしました。 - 結果 お客様から日報の入力する時間が減って、以前よりもサービスが使いやすくなったというお声をいただけました。