ID:69031さん

## プロジェクト概要 - **目的・背景** 飲食店の注文業務の効率化と人手不足の解消を目的に、QRコードを用いたモバイルオーダーシステムを開発しました。注文から決済までをスマートフォン上で完結させることで、店舗側・顧客側の双方のストレスを軽減することを目指しています。 - **規模感、チーム構成、担当した役割** チームは3〜5名で構成されており、自分は主にフロントエンド・サーバーサイドを一貫して、全体的な設計方針の決定や運用改善、技術選定にも関与しました。Sentryを活用した障害監視の導入・改善や、AIツールを積極的に取り入れることで、開発スピードと品質向上の両立に貢献しました。 - **使用技術や開発環境** - 使用技術: TypeScript、React、Next.js、GraphQL（Hasura）、Sentry、Apollo Client - 使用ツール: GitHub、Jira、Slack、Notion、Figma、GitHub Actions、AIアシスタント（Cursor・Claude Code等） - 開発環境: Next.js + GraphQL ベースのSPA/SSR構成、Sentryによるモニタリング、GitHub ActionsでCI/CDパイプラインを自動化 --- ## 取り組んだ課題 - **どんな課題だったのか** 飲食店の現場では、注文業務に多くの人手と時間が取られ、ピークタイムにオペレーションが回らないという課題がありました。顧客も待ち時間や注文ミスといったストレスを抱えている状況でした。 - **取り組み・工夫点** - フロントエンドはNext.js＋TypeScriptで実装し、スマートフォンでの快適な操作性を重視したUI/UX設計 - GraphQL（Hasura）を採用し、柔軟かつ効率的なデータ取得を実現。Apollo Clientによるキャッシュ戦略の最適化も実施 - Sentryを導入し、障害発生時の即時検知と対応フローを構築。アラート精度のチューニングやSlack連携で運用負荷も軽減 - 開発チーム内でAIツール（Cursor・Claude Code等）を導入し、繰り返し業務の自動化・レビュー精度の向上・ドキュメント生成の効率化を推進 - コンポーネント設計の見直しやディレクトリ構成の最適化により、保守性・拡張性を高めた開発体制を構築 - スキーマの型定義やGraphQL Codegenの導入により、バックエンドとのデータ連携の信頼性を向上 --- ## 取り組みの成果 - Sentryの本番運用の改善により、障害検知のリードタイムを大幅に短縮。運用負荷の削減に成功 - AIツールの活用により、開発チーム全体の生産性が向上し、スプリントごとの開発速度を平均15〜20％改善(ベロシティ) - HasuraによるGraphQLバックエンドの柔軟性と、自動生成された型定義により、バグの減少と開発のスピードアップを両立 - フロントのUIはモバイルファーストで設計し、実店舗でのユーザビリティテストでも高評価を獲得 - 全体を通じて、生産性と品質の両面からの改善をリードし、実務にも展開可能な知見を多数獲得 ---

## プロジェクト概要 - **目的・背景** 「ゲームをしながら英語を学ぶ」という新しい学習体験を提供する、eスポーツ英会話サービスの開発を行いました。ゲーム内の英語コミュニケーションを活かし、学習者と英語コーチを結びつける仕組みを構築しています。 - **規模感、チーム構成、担当した役割** 開発メンバーは自分を含む3〜4名。自分はPL兼フルスタックエンジニアとして、社内管理ツールやコーチ向けの管理ダッシュボードの開発を担当しました。バックエンド・フロントエンドの実装から、インフラ構成・技術選定・開発方針の決定まで幅広く関与しました。 - **使用技術や開発環境** - 使用技術: TypeScript、React、NestJS、Prisma、PostgreSQL、Docker - 使用ツール: GitHub、VScode、Slack、Notion、Figma、GitHub Actions - 開発環境: Docker によるローカル開発環境の構築。CI/CD は GitHub Actions にて自動化。 --- ## 取り組んだ課題 - **どんな課題だったのか** 英語学習のモチベーションを維持しづらいという一般的な課題に対して、「ゲーム」と「会話」を融合することで、実践的かつ楽しみながら学べる体験を提供。 一方で、運営に必要なコーチ管理、生徒管理、セッション履歴、スケジュール機能などのシステム整備が求められました。 - **取り組み・工夫点** - React + TypeScript によるコーチ用ダッシュボードの設計・実装 - NestJS + Prisma による型安全で拡張性の高い API 設計 - OpenAPI に基づいた仕様設計により、フロント・バック間の開発効率を向上 - Prisma によるスキーマ駆動のデータ設計と、RBAC（ロールベースアクセス制御）による権限管理 - Notion による仕様整理、GitHub Projects を活用したタスク管理、Slack 通知などチーム開発の仕組み化 - MVP方針でのスピード開発とユーザーの声を反映した短期サイクルの改善 --- ## 取り組みの成果 - コーチと運営向けの管理機能が完成し、実際の運用での業務負担を軽減 - モダンな技術スタック（NestJS、Prisma、TypeScript）を活用し、保守性・拡張性の高いアーキテクチャを実現 - コード品質の維持（ESLint、Prettier、huskyの導入）や、統一されたディレクトリ設計により、チームでの開発効率が向上 --- その他のプロジェクトや技術選定などの詳細もご希望あれば共有可能です。

## プロジェクト概要 - 詳細記事 https://qiita.com/derasado/items/855ddfa1cdcdd52c47de - **目的・背景** - 個人開発（4名）として、エンジニアを目指す人と現エンジニアをマッチングさせるエンジニア専門マッチングサービスの開発・運用を行っています。 - **規模感、チーム構成、担当した役割** - 開発メンバーは自身を含む4名で、エンジニアの面接・採用、技術選定、開発・設計からデプロイまで全ての工程を担当しています。 - 自分がPLとしてチームをまとめつつ、開発・設計・マーケティングなど含め全領域を担当しフルコミットしております。 - **使用技術や開発環境等** - 使用技術: JavaScript (TypeScript)、React.js (Next.js)、PHP (Laravel)、HTML、CSS (Tailwind CSS)、Node.js、GitHub Actions、GitHub (Git)、AWS(Amazon SES)、GCP(Cloud Run, Cloud Build, Cloud Storage, Cloud SQL, Cloud Scheduler, Cloud Tasks, Secret Manager)、Docker、PHPUnit (テスト)、PHP Stan (静的解析)、Open API、MailHog、Nginx、npm、Webpack、Stripe、GA4、Sentry - 開発環境: Dockerを使用 - 使用ツール: Figma、VScode、Notion (ドキュメント管理)、Slack、GitHub Projects、GAS、Sentry ## 取り組んだ課題 - **どんな課題だったのか** - エンジニアを目指す人や現エンジニアだが教えて欲しい人と、現役エンジニアを簡単にマッチングさせるために、エンジニアに特化したマッチングサービスを提供すること。 - **取り組み・工夫点** - チームで進めるにあたり、Notionを使ったドキュメント整理やCIなど各種Slackへの通知、GitHub Issue（GitHub Projects）での課題管理、テスト環境や開発環境の整備に重点を置きました。 - 最新のバージョンや人気のライブラリなどを積極的に取り入れ、モダンな技術を使いながら実務で役立つ開発を行っています。 - アプリケーションのペルソナ設定やニーズの把握にも取り組み、エンジニア志望者の意見を取り入れながら必要な機能の設計を行っています。 - フロントではLint・Prettier・huskyなどの設定を行い、統一感のあるコード・バグの少ないコードを保つようにしており、ディレクトリ設計もモダンな目的駆動開発を用いた設計にしております。 - make fileを用いて、全ての使用するコマンドの可視化しました。 - バージョンアップ系の対応は、フロント・サーバーサイド・インフラなど含め全て自分で行っており現在も追従してほとんどの技術は最新バージョンで運用できております。 - サーバーサイドでは、静的解析(PHPStan)・テスト(PHPUnit)・フォーマットにはPHP CS Fixer(PSR12)を用いており、堅牢なサービスになるように開発しております。 - 開発も行いつつ、マーケティング戦略も考案・実行 - 個人開発規模で予算感も限られているので、MVPにて進める。 ## 取り組みの成果 - **現在の成果** - Figmaを使ったワイヤフレーム（UI）の作成や、機能の設計、CI周りや開発環境周りの整備に取り組んでいます。 - 新しい技術を積極的に導入し、快適な開発が行えるような環境を整えています。 - このプロジェクトを通じて学んだ便利な技術は、実務プロジェクトにも活かすことができました。 - 300人の先行登録、2024年5月末にはβ版リリースで順調にユーザー数を増やしています。 その他の詳細は下記記事にてまとめておりますので、よろしければご確認頂けましたら幸いです。 https://qiita.com/derasado/items/855ddfa1cdcdd52c47de

## プロジェクト概要 - **目的・背景** - 広告一括管理を行うアプリの開発・運用を受託するプロジェクトに参加しました。 - **規模感、チーム構成、担当した役割** - 開発メンバー7名、マネージャー1名のチームで、私は主にフロントエンド50%とサーバーサイド50%の機能開発およびUI作成(Figma)を担当しました。 - **使用技術や開発環境等** - 使用技術: JavaScript, TypeScript, Vue.js, React.js, Next.js, PHP, Laravel, HTML5, CSS, Tailwind CSS, Git, GitHub, Storybook, yarn - 開発環境: Vagrant・Dockerを使用した構築 - 使用ツール: Figma, Backlog, Slack, VScode, Sequel Ace, Mail Trap, iterm2 ## 取り組んだ課題 - **どんな課題だったのか(機能実装例)** - 媒体毎の広告データをアプリで一括管理するための、各媒体とのやりとりや媒体APIの実装(Google, Facebook, Twitter, Yahoo, TikTok, Microsoft, LinkedIn, Pinterestなど) - 2要素認証機能の実装(Twilio APIを使用) - 広告レポート作成や広告最適化機能の改修・新規追加(フロントエンド・バックエンドのAPI連携を担当) - SQLパフォーマンスの改善とチューニング ## 取り組み・工夫点 - **開発における取り組みと工夫** - 媒体の広告APIを扱うことが多かったため、ドキュメントの読解やドメイン知識の吸収に努め、不明な点については仮説を立てながらコードベースでテストを行いながら開発を進めました。 - 大量のデータ処理に対応するため、DBへの問い合わせ回数を意識し、バルクインサートやSQLのチャンク処理を行うなどのパフォーマンス改善に取り組みました。 - バックエンドからフロントエンドまで一貫して対応したため、効率的な開発を進めるための設計からフロントエンド実装までをリードしました。 - フロントエンド領域では、エンドユーザー目線での使いやすさとわかりやすさを意識し、UI・UXの設計と実装に取り組みました。 ## 取り組みの成果 - **媒体別広告一括管理アプリの成功**: 8つの主要媒体（Google、Facebook、Twitter、Yahoo、TikTok、Microsoft、LinkedIn、Pinterest）とのAPI接続に成功し、ユーザーはそれぞれの広告データを一つのアプリで一括管理することができるようになりました。これにより、ユーザーの広告管理効率が大幅に向上しました。 - **2要素認証機能の導入**: Twilio APIを使用した2要素認証機能を開発・導入しました。これによりアプリのセキュリティが大幅に強化され、ユーザーデータの保護が徹底されました。 - **広告レポート作成機能と広告最適化機能の改善**: 広告レポート作成機能と広告最適化機能の改修・新規追加に成功し、ユーザーがより詳細なレポートを取得し、広告戦略の最適化を図ることができるようになりました。具体的には、広告のパフォーマンス改善率が平均30%向上しました。 - **チームとの協力による開発効率の向上**: チームとの連携により、開発プロセスがスムーズに進行しました。一貫してフロントエンドとバックエンドの開発を担当したことで、開発時間を約20%短縮しました。また、開発品質も向上し、バグレートが前年比で15%減少しました。 以上の取り組みにより、私の技術力と結果を出す能力、チームでの連携能力が高まりました。次のステップでも、これらの経験を活かして貢献できると自負しています。

## プロジェクト概要 - **目的・背景** - 投票システムのフロントエンドとアニメーション作成を担当する開発プロジェクトに参加しました。主な用途は、YouTubeの音楽ライブ配信での紅白対抗のチャットベースの投票システムです。 - **規模感、チーム構成、担当した役割** - 開発メンバー3名、デザイナー2名のチームで、私は主にフロントエンド90%とサーバーサイド10%の機能開発を担当しました。 - **使用技術や開発環境等** - 使用技術: JavaScript, TypeScript, Vue.js, React.js, PHP, Laravel, HTML5, CSS, Tailwind CSS, Git, GitHub - 開発環境: Dockerを使用し、プロトコルはWebSocketを利用 - 使用ツール: Figma, VScode ## 取り組んだ課題 - **どんな課題だったのか(機能実装例)** - YouTubeの音楽ライブ配信において、紅白に分かれたチャットベースの投票システムを開発しました。 - リアルタイムでの投票が行われるため、WebSocket通信を使用してアニメーションや動きのあるフロントエンドを実装しました。 - web animation APIやVue.js・React.jsなどのアニメーションライブラリを活用しました。 ## 取り組み・工夫点 - **開発における取り組みと工夫** - アニメーション関連のライブラリやAPIを積極的に活用し、動きのある投票システムを実現しました。 - バックエンドのロジックとの連携を考慮し、表示のタイミングを調整するために工夫しました。 - ユーザーが主にスマートフォンで利用することを想定し、スマートフォン向けに最適化したUI/UXを提供するために努力しました。 ## 取り組みの成果 - **プロジェクトにおける成果** - 紅白音楽祭のYouTube配信に1000人以上の参加者があり、投票システムに対する好評を得ることができました。現在までに3回のイベントを開催し、システムの改善を進めています。 - 今後、このシステムを活用して営業展開を行う予定があります。 以上の取り組みにより、アニメーションとフロントエンド開発のスキルを活かし、成功した投票システムの開発とイベントの運営を行いました。

## プロジェクト概要 - リポジトリ https://github.com/Sado4/Smart-kanri-app - **目的・背景** - 美容業界（ネイルサロン・美容室）向けの顧客管理アプリの個人開発を行いました。 - **規模感、チーム構成、担当した役割** - 自身のみで要件定義、設計フェーズ、実装、インフラデプロイ、運用までを担当しました。 - 月額2万2000円でWebマーケティング支援も提供し、最大8店舗に導入した実績があります。 - **使用技術や開発環境等** - 使用技術: HTML・CSS（Bootstrap）・PHP（Laravel）、MySQL、JavaScript、AWS（EC2, S3, RDS, Route 53, ELB, ACM）、Git、GitHub、Docker、Docker Compose - 使用ツール: SendGrid（メール送信）、Adobe XD（画面遷移図）、Lucidchart（ER図）、Drawio（AWS構成図）、VScode、TablePlus（SQLクライアントツール） ## 取り組んだ課題 - **どんな課題だったのか（機能実装例）** - 紙ベースで顧客管理をしている個人店舗や高額な費用を支払ってホットペッパーや他のサービスを利用している美容業界の店舗に対して、費用を抑えてWeb上で顧客管理ができるアプリを提供しました。 ## 取り組み・工夫点 - **取り組みと工夫** - 個人開発において、全ての工程を自身で担当しました。不明な領域については調査をしながら慎重に設計からデプロイまで行いました。 - デプロイ後は、自ら店舗に対してテレアポなどの商談活動からクロージングまで行いました。 - UIに関しては、既存のサービスを参考にしながら、スマートフォンやPCからでもシンプルで使いやすいインターフェースを実装しました。 - ネイルサロンを経営している知り合いからのフィードバックや現場の課題をヒアリングしながら、必要な機能や現場のニーズに合わせた提案や新機能の実装を行いました。 ## 取り組みの成果 - **プロジェクトの成果** - 顧客管理アプリとWebマーケティング支援のサービスにより、最大同時に8店舗の契約を獲得し、運用を行いました。 - 実際の店舗からは喜ばしいフィードバックをいただき、サービスの改善や新たな要望の取り入れをしながら運用を継続することができました。 - 具体的にはお客様にタブレットを渡して、顧客情報をお客さん自身に入力してもらうための専用入力画面や顧客毎の施術メニュー項目の設定追加。 上記の取り組みにより、美容業界の店舗に対してニーズに応える顧客管理アプリを提供し、営業と開発の両方のスキルを活かして成果を上げました。