-
大手エンタメ企業の社内管理ツールのフロントエンドのテックリード
--- 大手エンタメ企業の社内管理ツール ---
チーム 約10名
開発 4名
◆契約形態
業務委託
◆概要
クライアント向けの社内管理ツールの開発
◆使用技術
・React
・Amplify
・GraphQL
・AWS
◆担当範囲
・フロントエンド
・バックエンド（Lambda）
・コードレビュー
・画面設計（一部）
・詳細設計（一部）
・開発チーム（4名）全体のサポート
◆背景
クライアント（グループ全体）が膨大な商品を管理しており、歴史的な背景もあり情報が散らばっていた。それを一元管理できるツールの需要が生まれた。
◆解決する課題
・情報を誰でも簡単に取得、管理できる
・外部APIとの連携をユーザが気にせず管理ツール内で行い、業務効率を向上
◆実績
・TOPページから各ページへのルーティングとパンくず機能
・共通処理（ユーザ権限によりリダイレクト、データ登録時の重複禁止バリデーションなど）
・GraphQL+MUIのDataGridProを利用したサーバーサイドページネーション機能
・新機能のテーブル設計、一覧画面、検索機能、CRUD操作のフロント実装
・特定データの履歴テーブルを作成するバックエンド処理（DynamoDBのイベントで発火するLambda処理）及び一覧画面、検索機能のフロント実装
・特定データをCSVで出力するエクスポート機能の実装
・特定データをCSVで新規登録、編集、削除するインポート機能の実装
・CSVインポート時の進行状況、エラーメッセージを確認する一覧画面の設計および実装（GraphQLのsubscribeなど利用して動的にUIを設計）
◆チームとの連携
【前提】開発メンバー6名、全員副業者、週~約10時間稼働、経験の浅いメンバーがほとんど
・新機能実装を担当し、他画面で同様の機能が必要になった時に自身の実装を参考にしてもらい、工数削減を意識
・データ入れ替えなど、開発者それぞれの環境で必要な操作は必ずドキュメント化して共有
・PMから降りてくるタスクの細分化とゴールの明確化を意識して詳細を記載した
【サーバ・OS】
MacOS
【DB】
Dynamo
DB
【使用言語】
React.js
Amplify
Lambda
OpenSearch
CodeCommit
S3
GraphQL
Docker
Git
Asana
Figma
【作業工程】
詳細設計 実装・単体 -
コンサルの自社開発「アンケートシステム②」のフロントエンドの技術選定〜開発〜テスト〜運用を1人で
--- アンケートシステム② ---
チーム 5名
開発 2名
◆契約形態
業務委託
◆概要
日々の体調管理とアンケート回答が簡単にできるシステム構築
◆使用技術
・TypeScript
・Next.js
・Docker
・Nest.js
・AWS
◆担当範囲
・フロントエンド
・仕様検討
・デザイン検討
◆背景
参加した研修後にアンケートを通じてモチベーションや感想を共有し、個々の可視化を図り、モチベーション管理に貢献
◆解決する課題
・アンケート回答者が自身のモチベーション変化を振り返ることができる
・研修後の振り返りが可能
・同じ研修メンバー同士でモチベーションと振り返りを共有
◆実績
・next-authを使用したメールアドレス認証、認可
・react-fullcalendarを使用したカレンダー機能
・SWRを使用した一覧データのキャッシュ管理
・jestを用いた単体テスト
・RouterHandlerを経由したサーバーへのリクエスト設計
・SSE(Nestjsサーバー)を利用したデータの即時反映
◆チームとの連携
・MVP実装段階から参加し、企画側の決定事項が少ない段階からスピーディに実装
・開発環境をほぼゼロから構築し、featuresディレクトリ採用の意図をドキュメント化し、チーム全体に共有
・AppRouterで使用可能な新技術を積極的に導入し、別プロジェクトでも利用できるサンプルとして提供
◆課題
・開発初期段階での仕様変更が多いため、VRTなどのテスト導入ができていない。修正が難しい場面が多い。
・SWRをクライアント側で利用しているが、Nextサーバー側も活用したい。
・SWRのキーの管理が複雑になり、一元管理ができていない（様々なコンポーネントにキーが散乱している）
◆学び
・議論を進めるために、機能の「たたき台」を早期に作成
・自己管理でタスクを進めつつ、改善点や追加事項を常にセルフ管理
【サーバ・OS】
MacOS
【DB】
MySQL
【FW・MWツール等】
Next.js
TailwindCSS
Nest.js
Docker
Git
AWS
Firebase
Cloud
Messaging
【使用言語】
TypeScript
【作業工程】
詳細設計 実装・単体 -
コンサルの自社開発「アンケートシステム①」のフロントエンドの技術選定〜開発〜テスト〜運用を1人で
--- アンケートシステム① ---
チーム 5名
開発 2名
◆契約形態
業務委託
◆概要
アンケートの管理、結果集計アプリとアンケート回答アプリの2つのアプリ構築
◆使用技術
・TypeScript
・Next.js
・Docker
・Nest.js
・AWS
◆担当範囲
・フロントエンド
・仕様検討
・デザイン検討
◆背景
企業向けに、研修後の成果を測定するためにアンケートが必要
◆解決する課題
・様々なフォーマットのアンケートを簡単に作成
・アンケート遂行に必要な機能を網羅（メール配信、回答結果のグラフ化、比較など）
◆実績
・Cookie認証、認可
・複数テーブルのCRUD操作
・SWRを使用した一覧データのキャッシュ管理
・Rechartsを使用したデータのグラフ表示
・jestを使用した単体テスト
◆チームとの連携
・企画段階から開発に参加し、詳細設計やデザインが固まる前に実装の「たたき台」を提供
・ほぼ1人でのフロントエンド実装だが、リーダブルコードを心掛ける
・テスト導入提案をし、少しずつ実装進行
◆課題
・ディレクトリ構成の整理
・E2Eテストの導入
・開発側から企画への新機能提案
・PageRouterからAppRouterへの移行
◆学び
・議論を進めるために、機能の「たたき台」を早期に作成
・自己管理でタスクを進めつつ、改善点や追加事項を常にセルフ管理
【サーバ・OS】
MacOS
【DB】
MySQL
【FW・MWツール等】
Next.js
TailwindCSS
Nest.js
Docker
Git
AWS
【使用言語】
TypeScript
【作業工程】
詳細設計 実装・単体 結合テスト 保守・運用 -
ベンチャーシステム開発企業で業務フローシステムの開発の設計から開発まで担当
■ プロジェクトの目的
自社で汎用的に使用しているプロジェクトにワークフロー機能を追加する
■ 体制・人数
2人
■ 自分のポジション・役割
DB設計、フロントエンド開発及び一部APIの実装も行う
■ 目的を達成する上での課題と取り組み
2人体制だったが、基本的には私ひとりで開発を進めることになった為、決められた納期に対して逆算してタスクを作成し、もうひとりのメンバーとこまめに進捗を共有しサポートをもらえたこともあり納期通り納品を行えた。
また、初めて使用する言語（React）であった為、オンライン教材など利用しながらキャッチアップに努めていた。