k_101kg

## 概要 生成AIを活用した占いサービスのフロントエンド開発を担当し、新規実装からグロース期の改善、運用まで幅広く携わりました。 また、Google Analyticsによるデータ分析からUI改善までを主導し、ユーザー離脱率の改善にも貢献しました。 ## チーム規模 開発時 5~10名 （PM1名、フロントエンド3名、バックエンド3名、デザイナー1名） 保守運用 4名（PM1名、フロントエンド2名、デザイナー1名） ## 使用技術 - Next.js（app Router） - Typescript - Go - gRPC - Tanstack Query - React Hook Form - Google Analytics - UnivaPay ## 担当範囲 - 詳細設計 - 実装 - テスト - 運用/保守 ## 担当業務 - UI/UX設計 - UI/UX改善 - コンポーネント作成 - LINE認証 - チャット機能の実装 - UnivaPayを用いた決済機能の実装 - エラーハンドリング設計、実装 - Tanstack Queryを用いたAPI組み込みとキャッシュ管理 - gRPCとconnectWebを用いたAPI組み込み - React Hook Formを用いたフォーム管理 - グロースフェーズのサイクル基盤の整備 - Google Analyticsの導入、設計、実装、分析 - Google Adsenseの導入、設計、実装 ## 工夫したこと **gRPC × Tanstack Query による型安全なAPI連携の構築** バックエンド（Go）とフロントエンド（Next.js）間のAPI連携にgRPCとconnect-webを使用。API定義から型を自動生成し、Tanstack Queryと組み合わせてキャッシュ制御も含めた型安全な実装を行いました。 **即時反映と履歴管理を両立するチャットUX設計** メイン機能である、チャット機能の設計、実装を担当しました。 ステート管理においては、ローカルステートと、データベースから取得したグローバルステートを組み合わせる設計を採用し、ユーザーの入力や操作に対して即座に反映されるローカルステートと、履歴や結果などのデータベースに保存される情報を効率的に管理することでスムーズなユーザー体験を提供しました。 **Google Analyticsを活用し、会員登録までの離脱率を改善** Google Analyticsの設計、実装、分析を担当し、「認証→オンボーディング→会員登録」のフローのどこでユーザーが離脱しているかを分析。UI/UX改善施策（チャット導線改善、モーダル表示の変更など）を実施し、特定ページでの離脱率を約25%改善しました。 **複数機能の並行開発を支えるブランチ運用の整備** 運用フェーズでは週ごとのリリースに対応するため、並行開発が可能なブランチ運用を検討・導入しました。これにより、複数の機能開発を同時進行で行いつつ、グロースフェーズのスムーズな開発プロセスを実現しました。

## 概要 生成AIを活用したBtoB向け占いサービスのフロントエンドを担当。技術選定から設計・実装・テストまでをフロントエンド1人で対応しました。 ## チーム規模 3名（PM1名、フロントエンド1名、バックエンド1名） ## 使用技術 - Next.js（App Router） - TypeScript - gRPC - connect-web - Tanstack Query - React Hook Form - Vanilla Extract - Google Analytics ## 担当範囲 - 詳細設計 - 実装 - テスト ## 担当業務 - 技術選定、開発環境の構築、GitHub Actionsの導入 - UI設計およびコンポーネントの実装 - LINEログイン認証の実装 - React Hook Formによるカスタマイズ可能な質問フォームの設計・実装 - フォームの質問と回答データを企業ごとに管理可能な設計の実施 - Tanstack Queryを用いたAPI連携とキャッシュ管理 - gRPC + connect-webを用いた型安全なAPI通信の構築 - エラーハンドリングの設計・実装 - Google Analyticsの導入・設計・実装 ## 工夫したこと **Zero Runtime CSSによるパフォーマンス最適化** 従来使用していたemotionでは、ランタイムでのCSS適用によりパフォーマンスへの影響が懸念されていました。そこで、Next.jsのApp Routerとの親和性が高いVanilla Extractを採用し、CSSをビルド時に生成する構成を採用。ランタイムコストを削減しつつ、保守性の高いスタイル設計を実現しました。 **フォームの柔軟なカスタマイズ性を設計** 「企業ごとに自由な質問内容や回答形式を設定し、それに対するユーザーの回答を集計・管理したい」という要件に対し、React Hook Formを用いた汎用的なフォーム構成を設計しました。 質問・回答のデータを柔軟に管理・出力できるようにし、企業ごとに最適化されたデータ収集が可能な設計としました。

# T3 Stackを活用したフルスタック開発での実績 TypeScriptのフルスタック開発に注力しており、T3 Stack（Next.js / tRPC / NextAuth.js / Prisma / Tailwind CSS / TypeScript）を活用した開発経験があります。特に、型安全・モジュール性・開発効率の高いアーキテクチャに魅力を感じ、実務・個人開発の両方でスキルを磨いてきました。 ## 技術書典でT3 Stackの書籍を出版 「技術書典」にて、T3 Stackに関する書籍を執筆・出版しました。 私はNext.js App Router + T3 Stackの実践的な活用方法に関する章を担当し、以下のようなテーマで執筆しました - App Routerアーキテクチャ設計とRSCの特性を活かした設計 - tRPCを用いた型安全なデータフェッチ - NextAuth.jsによる認証機能の構築 - App Routerにおけるエラーハンドリング 執筆を通して理解を深め、App RouterやRSCの特性を実際のプロジェクトに活かせる実践力を身につけました。 出版書籍：https://techbookfest.org/product/b3eDnjgVNdBhFk4ZLF72ew?productVariantID=55QTxSyqkyfBnTiMGMpEev ## T3 Stackを採用した個人開発で技術記事の管理アプリ「Tech Stock」をリリース 技術記事を保存・管理できる個人開発アプリ「Tech Stock」を開発・公開しました。 「読みたい記事を後で見返せない」という課題感から、学習進捗を可視化し、メモを残せるアプリをT3 Stackで実装しました。 - 要件定義、UI設計、DB設計、実装、デプロイまで一貫して担当 - tRPC + Prismaによる型安全なAPI設計 - NextAuth.jsによるGoogleログインの導入 - Tailwind CSSでのUI設計とレスポンシブ対応 Tech Stock：https://tech-stock-app-six.vercel.app/ 個人開発記事：https://zenn.dev/kiwichan101kg/articles/cc5f8bf784ce22 ## 個人開発の内容をLT登壇 T3 Stackを用いた開発経験を、**オンラインLT会（参加者約80名）で登壇**して共有しました。 登壇を通して、社内外への技術発信・ブランディングの意識も高めています。 登壇スライド： https://speakerdeck.com/kiwichan/t3-stackdege-ren-kai-fa-sitara2ri-deshi-zhuang-dekimasita

## 概要 AR機能を備えたSNSアプリの開発に向けて、React NativeのARライブラリ「Viro」を使った技術検証を担当。 検証の結果、ユーザーの要件を満たすには技術的な制約が多く、Viroの採用を見送るという判断を提案しました。 検証の過程では、ライブラリの不具合を発見して初めてOSSにコントリビュートしたり、技術記事の執筆や100人規模のオフラインイベント登壇など積極的な課外活動を行いました。 ## チーム規模 4~6名（PM1名、フルスタックエンジニア2名、フロントエンジニア1名、デザイナー1名） ## 使用技術 - Expo - Firebase - Express - Viro（React NativeのARライブラリ） ## 担当範囲 - ARライブラリの技術検証 - 採用判断 ## 担当業務 - ARライブラリ（Viro）の導入・調査・サンプル実装 - ARオブジェクトの移動、回転、拡大/縮小操作 - 写真、動画撮影 - 表示不具合の調査とライブラリのソースコード解析 - ライブラリのバグのOSSコントリビュート - Blender / Mayaでの3Dオブジェクト検証と表示確認 - ドキュメント不足の中で、Discordのコミュニティで情報収集・質問 - イベント登壇や記事執筆によるアウトプット ## 工夫したこと **主体的な情報収集、初のOSSコントリビュート** 技術検証を進める中で、ライブラリのドキュメントは古く情報も少なかったため、自らDiscordコミュニティに参加し、英語で質問するなどして最新情報を収集しました。情報の少ない中でも主体的に動き、問題を解決していく姿勢を大切にしました。 また、ライブラリの不具合を発見し、調査・修正の上、自身初となるOSSへのコントリビュートを実施し、不具合の改善に貢献しました。 **ユーザー視点での技術選定** 「ユーザーが自由に作成した3Dオブジェクトをアプリに表示する」という要件に対して、 - Blenderで作成した素材が表示できず、Mayaでの特定条件でのエクスポートが必要 - カメラ機能（内カメラやフラッシュ）が不十分 といった制約があり、多くのユーザーに使ってもらうには不向きであると判断し、Viroの不採用を提案。代替案としてARKit / ARCoreの活用を提示し、ユーザー体験を優先した技術選定を行いました。

## 概要 SNSアプリの管理者用Web管理画面を0→1で構築。短い納期かつ曖昧な要件の中で、AIツールも活用しながらスピード感を持って開発を推進。 ## チーム規模 3名（PM1名、フルスタックエンジニア2名） ## 使用技術 - Next.js（App Router） - Express - Typescript - tRPC - tanstack Query - Tailwind CSS - shadcn ui - Turborepo - firestore（NoSQL） - firebase (authentication、app hosting、functions) - github - Notion ## 担当範囲 - 要件定義 - 詳細設計（機能、UI） - 実装 - テスト ## 担当業務 - Expo（モバイル）/ Next.js（Web）/ Express（API） をTurborepoで統合し、モノレポ構成による効率的な開発体制を構築 - tRPCによる型安全なAPIベース実装を担当し、クライアントとサーバーの統一された型管理を実現 - Firebase（Firestore）を用いたNoSQL設計およびデータの読み書き処理を実装 - Firebase Authenticationとカスタムクレームを活用した管理者権限の認可処理を導入し、ユーザーごとのアクセス制御を実現 - Googleアカウントとの紐付け機能の実装 - API認証の設計・実装により、セキュアな通信環境を構築 - クリーンアーキテクチャに準拠したバックエンド設計により、保守性・拡張性の高いコードベースを実現 - 管理画面の一覧機能におけるページネーション処理の実装 - 投稿管理や検索機能など、複数のAPIエンドポイントの設計・実装 ## 工夫したこと **認証フローの構成とセキュリティ対策** 管理者のみがログインできる要件に対応するため、一般的なサインアップ機能は削除し、事前にFirebase Admin SDKを用いてアカウントを作成。初回はメールアドレスとパスワードでログイン後、Googleアカウントとの紐付けを行うことで、2回目以降はGoogleログインが可能となる認証フローを設計しました。また、トークン検証やCookie操作といった認証まわりの処理はNext.jsのServer Actionsに切り出し、セキュリティを意識した責務分離を実現しました。 **AIを活用することで開発スピードの向上** デザイナーが不在でワイヤーフレームもない状況の中、AIツール（V0）を活用してワイヤーフレームを自動生成し、必要な機能の洗い出しを短時間で実施しました。UI実装にはTailwind CSSとshadcn/uiを採用することで、スタイリングとコンポーネント設計の工数を削減し、限られた期間内での画面構築を可能にしました。 クリーンアーキテクチャに基づいたAPI構成を採用し、Cursorエディタを活用してベースコードをもとにエンドポイントを短時間で作成。効率的な開発環境を整えたことで、1日あたり2本のペースでAPIエンドポイントを実装するなど、高い開発スピードを維持しました。