ID:69552さん

## プロジェクト概要 Nuxt.js2系で動いている美容師向けのサービスをNext.jsにリプレイスするプロジェクトです。 ## チーム情報 フロントエンドエンジニア: 4名 テスト: 1名 デザイナー: 1名 ## 担当 - PM、EM - メンバーの採用 - フロントエンド実装(リード) - 設計 - 開発 - コードレビュー - テストディレクション ## 開発環境 Next.js, Nuxt.js, TypeScript, Node.js, Storybook, Vitest, Jotai, React Query, React Hook Form, CSS Modules, Sass, Radix UI, Headress UI, ESLint, scaffdog, Express, Prisma ※全て私が技術選定をしました ## 開発メンバーの採用活動 プロジェクトを進行するにあたり、社内にフロントエンドに精通しているメンバーがいませんでした。 EMも担っていることもあり、採用活動からスタートしました。 スケジュール的に主に業務委託の採用をメインに活動し、書類審査〜面談まで全て対応しました。 自身のSNSからも募集をし、1名採用費用0で採用しました。 現在社員の採用も実施しており、書類審査、カジュアル面談、1次面接を担当しています。 ## プロジェクトの課題 社員は私1人で、他4名は業務委託メンバーでスケジュールがある中でのリプレイスプロジェクトだった為、コードの品質や設計のばらつきが懸念されていました。 その為、他メンバーがJoinするまでにscaffdogを用いて、基盤コードの自動生成を構築しました。 pageの設定ファイル、コンポーネントの記述ファイルを中心に設定し、 コマンドを入力と質問に答えるだけで、 Page, Component, Storybookの基盤コードを作成できるようにしコーディング規則がばらつかないよう準備しました。 全てのComponentにStorybookを使用する方針で実装しました。 またApi部分ではReact Queryを用いてベースとなるファクトリー関数を実装しました。 この関数を使うことで、後から加わる開発者がスムーズに同じ設計でApi部分の実装ができるようにし、煩雑になりがちなキャッシュのkeyを自動で管理できるよにしました。 ## 実装内容(詳細) ※apiは全てある状態で、Nuxt.js2系が既に動いている状態のため、既存のNuxt.js2系のコードを読みながらNext.jsに移行していくような作業 1. 基本的にベースとなる基盤コードの実装を中心に行なった 基盤コードの実装を主に担当し、ページの移行タスクは業務委託のメンバーにお願いしました。 コードレビューと品質管理、社内の調整業務を行いました 2. 決済機能のフロント実装 決済に関わるフロントエンドの実装は私が担当しました。 Next.jsとapi routes, 既存のExpressサーバーを用いて、セキュアに実装しました。 3. 既存サービスのUI・UX改善のアプローチ ただ移行するだけでなく、既存サービスのUI・UXの改善を実施しながら行いました。 具体的にいうと、社内の営業CSメンバーから、ユーザーから上がってきている改善点をヒアリングし、外部のデザイナーに落とし込みながらユーザー体験の向上に心がけました。 またデザインも整備されていない状態だった為、これを機にXD→Figmaへのデザイン移行も実施しました。

## プロジェクト概要 美容師向けのイーラーニングサービスの新規開発です。 ## チーム情報 PL: 1名 エンジニア: 6名 テスト: 1名 デザイナー: 1名 ## 担当 - PL - ワイヤーフレーム、デザインディレクション - フロントエンド実装(メンバー) - バックエンド実装(メンバー) - テストディレクション ## 開発環境 Next.js, Nuxt.js, TypeScript, Express, Node.js, Prisma, AWS, PostgreSQL, Jest, Vimeo Api, Vimeo, chart.js ## 新規サービスの0→1立ち上げのPLを担当 新規サービスの立ち上げをPLとして行いました。 実装と並行して社内調整やリリース準備を行い、半年ほどの期間でリリースしました。 ## プロジェクトの課題 プロジェクト開始から主にコミュニケーション部分に課題がありました。 - 外部開発会社 - 外国籍のメンバー が絡むプロジェクトで認識のズレが起きやすいような状況でした。 Notionでチケット管理を徹底し、1週間でスプリントを回して開発を進めました。 週1の全体MTGでチケットの進捗と仕様に関して確認し、遅れや懸念点がないかの確認を徹底して補いました。 MTGのファシリテーターも担当し、全体の空気が和やかになるようにも心がけました。 また今回のプロジェクトで使用するコンテンツは自社の動画制作チームが実際に撮影したしたものだったため、開発とコンテンツ制作を同時に進めていました。 このコミュニケーション部分も担当し、開発と配信現場のコミュニケーションコストも解消しました。 ## 実装内容(詳細) 1. 動画周りの実装 動画を再生している間、視聴ログを取得する実装をしました。 Vimeo apiを用いて、動画の再生、停止、早送り、途中離脱等、様々なパターンで動画の視聴ログをサーバー側に送る実装をしました。 かなりテストがしづらい実装だったため、ログのパターンを仕様書に洗い出し、全てのパターンでテストコードを書きました。 端末やOS依存でのエラーも多発し、動画周りの知識が向上しました。 2. 動的なフォームのフロント実装、api実装 イーラーニングサービスの為、確認テストのような機能がありました。 回答形式と問題形式が複数あり、apiのレスポンスに応じて動的にフォームを切り替え、値を取得していく実装を行いました。 またバックエンド側のロジックも実装し、テストの合格ロジックや問題形式によるテーブル設計も行いました。 3. 動画アップロードロジックの実装 Vimeo apiを用いて動画のアップロード実装を行いました。 tusプロトコルを用いてアップロードの中断と再開のロジックも担当しました。 4. 決済周りのapi開発 Prismaを使用し、バックエンド側もTypeScriptで実装しました。 ベリトランスのモジュールを利用し、継続決済の実装を一部担当しました。 その他周辺apiもテーブル設計等しながら他メンバーと共に実装しました。 ※視聴ログ周りのテーブル設計は他メンバーが対応 4. リリースしてからの保守運用 プロジェクトリリースまではPLで全体管理を中心に行なっていましたが、リリース後はフロントエンドのリードエンジニアも担い、設計〜コードレビューまで担当しました。 また社内からの要望をまとめ、開発の優先度をつけるなど全体のタスク管理をしてプロジェクト全体をリードしました。

## プロジェクト概要 0→1でタイトルにあるサービスを新規開発で立ち上げている段階で現在開発中です。 副業として月80時間で参画し、現在も開発を続けています。 ## チーム情報 PM: 2名 フロントエンド: 4名 バックエンド: 4名 SRE: 1名 デザイナー: 2名 ## 担当 - フロントエンド実装 - api実装 ## 開発環境 Next.js, TypeScript, Nest.js, Node.js, Go, grpc, protocol buffers, AWS, mongo db ## プロジェクトの課題 - 人材不足 - 開発知識の不足 プロジェクト初期からJoinしましたが、事業会社が開発組織を内製化したばかりということもあり、技術顧問はいたものの、開発メンバーや知識が全体的に不足している状況でした。 自身の新規開発の経験を活かし、積極的にナレッジの共有をしました。 ## 開発内容(詳細) 1. フロントエンドの画面実装 参画当初、メンバー内にいわゆるモダンフロントエンドの知識があるメンバーが少なかった為、画面の大部分を実装しました。 かなりフォームの量が多いサービスだったため、React Hook Formを用いた設計や、ドラッグ&ドロップでの並び替えの基盤実装などを行いました。 2. Protocol buffersを用いたschema駆動開発 Protocol buffersを用いて、api設計の対応も一部行いました。 フロントエンド実装がメインでしたが、繋ぎ込みの際、一部Go言語でバックエンド実装も行いました。 参画初期にフロントエンドを実装するエンジニアが足りなかった関係もあり 画面数の半分くらいを1人で実装しました。 コンポーネント設計から幅広く、フロントエンド部分を担当し、protocol buffersを用いてapi設計等も担当しました。 3. コミュニケーションコストの削減 普段自分で副業のマネジメントをしていることもあり、副業人材のマネジメント工数に関しては理解していました。 その経験をもとにコミュニケーションコストをいかにかけさせないかを意識していました。 具体的にいうと、実装するページが決まっていた為、自分でissueを作成し、開発リーダーには確認許可を取るだけという形を提案して行いました。 仕様書があまり纏まっていないプロジェクトでしたが、デザインから仕様を汲み取り、issueを作成しドメイン知識の確認、実装方針の確認のみとしました。 コミュニケーションコストが掛からなくて助かると非常に高い評価をいただけました。 またリリース前には、自身の経験を活かし、注意点や確認点を積極的に発信していきました。

## プロジェクト概要 WordPressで構築されている、会員数6万人のシステムを Nuxt.jsとNode.jsでフルリプレイスしました。 WordPressで実装したと思えない規模で、都度決済と継続決済の仕組みも導入されており、正直バグだらけのレガシーシステムをリプレイスようなイメージで、 決済移行も絡む、とても緊張感のあるプロジェクトでした。 ## チーム情報 PM: 1名 フロントエンド: 2名 バックエンド: 3名 デザイナー: 1名 ## 担当 - フロントエンド実装 - api実装 - データ移行 ## 開発環境 Nuxt.js, TypeScript, Express, Node.js, Prisma, SQL, AWS, PostgreSQL ## プロジェクトの課題 仕様書が全くない中でのリプレイス作業 WordPressの開発がオフショアであったこともあり、仕様書がほとんどない中、データベースの移行と決済移行をしなければなりませんでした。 ## 開発詳細 1. 移行スクリプト WordPressのデータをPostgreSQLに移行するといった形だった為、 移行スクリプトをSQLで書きました。 移行後のデータベース設計自体は、他のリードエンジニアが行い、自分の担当としてはWordPressのデータを把握し、それを新しいテーブル構造に落とし込むSQLを書くといった感じです。 SQLだけではどうにもならない箇所は部分的にPythonを使用しました。 2. フロントエンドとapiの実装 このプロジェクトでは、特に分業制を取らず、フロントエンドとバックエンドを満遍なく担当しました。 バックエンドでは、WordPressのデータを移行し、apiとして返すを実装し、フロントエンドではWordPress特有のHTMLデータをどう表示するかが課題にあり、MCEエディタを導入し、スタイルガイドをデザイナーと一緒に設定し、移行前の表示と変わらないように実装しました。 3. 決済移行での決済会社とのやりとり、テスト 決済会社の移行作業を行いました。 メイン実装自体は他のリードエンジニアが行い、自分は移行する決済会社とのやりとりとテストの実施を中心に行いました。 継続決済が非常にテストしづらかった為、テスト用の決済apiを作成しました。 任意の日付を指定するとテスト環境で決済が行えるといった関数でこれを用いてテストをスピーディーに行いました。