2025/11/21 現在
氏名:田村元(たむらげん)
フロントエンドを中心に活動している Web アプリケーションエンジニアです。 これまでに複数のプロダクトや SaaS の立ち上げ・開発を経験し、現在は一人法人 株式会社ジーイーエヌ を運営しています。 Next.js / TypeScript / Supabase / Drizzle ORM / shadcn/ui などのモダンスタックを活用し、 AIアシスタントによる自然言語タスク管理 SaaS「Listee」を設計・開発・運用しています。
Listee は LLM(大規模言語モデル) と 音声アシスタント(Amazon Alexa) の両方に対応しており、 チャットや音声による自然な会話でタスクを管理できる次世代の生産性ツールです。 現在は OSS 化を進めており、GitHub 組織 listee-dev で公開準備を進行中です。 また、受託開発ではスタートアップやSaaS企業のプロジェクトに参画し、モダンフロントエンドの設計・実装をリードしています。
モダンフロントエンド開発の設計・実装・改善を得意としています。 特に Next.js / TypeScript を中心とした開発経験が豊富で、App Router、Server Actions、Edge Runtime など、最新の Next.js 機能を実務で活用しています。 パフォーマンスと開発者体験(DX)の両立を意識した設計を重視しています。
- Next.js(App Router / Server Components / Suspense など)の実案件運用経験
- TypeScript による型安全な設計と、エディタ補完を最大限に活かした開発
- Biome による Lint / Format 統合、Vercel / GitHub Actions を用いた自動デプロイ環境構築
- Bun を利用した高速なローカル開発環境の整備
- shadcn/ui をベースに、Tailwind CSS と組み合わせた UI 構築を中心に実施
- コンポーネント設計・トークン設計を通じて、Figma との整合性を重視した実装
- アクセシビリティ(a11y)やライト/ダークモードへの対応を標準化
- コンポーネント抽象化や Slot API 活用による再利用性の高い UI 設計
- TypeScript + Drizzle ORM + Supabase による型安全なデータアクセス層を構築
- drizzle-valibot を活用し、Drizzle スキーマから Valibot スキーマを自動生成
(
createSelectSchema/createInsertSchema)することで、静的型と runtime validation の整合性を維持 - 外部入力や API レイヤーでは、Valibot の
pipe機能を用いて業務ロジックに応じた制約を追加 - スキーマとバリデーションを単一ソース化し、型定義と実行時チェックを重複なく同期
- RLS(Row Level Security)を前提とした Supabase のアクセス設計を実施し、フロントエンドからの安全な操作を保証
- GitHub Actions を活用した Lint / Build / Test / Preview の自動化
- Vercel でのマルチブランチ Preview 構成による開発効率の最適化
- 小規模チームでも安定したデリバリーを可能にする開発フローの設計
React / Next.js / TypeScript を中心に、モダンフロントエンドの開発をすることが多いです。 すでに確定している要件からの開発案件や、ふわっとした要件で開発進めることや、モダンフロントエンドのみならず、Web 制作の jQuery を利用したコーディング案件、また、PoC などでフルスタックに開発してほしいなどでも、柔軟に対応いたします。現在は、業務委託案件を中心に対応させていただいております。準委任契約では、最低稼働時間は設定せず、お試しで 1 時間から稼働可能です。請負契約の事前見積もりは無料で対応いたします。準委任・請負でどちらが適しているかが不明な場合も、柔軟に対応しておりますので、お気軽にお声がけください。
| No | 所属 | 業種等 | 期間 | 役職等 |
|---|---|---|---|---|
| 1 | 株式会社ジーイーエヌ | IT・一人法人 | 2022 年 12 月〜現在 | 代表取締役 |
| 2 | フリーランスエンジニア | - | 2020 年 01 月〜2022 年 11 月 | フリーランス |
| 3 | 株式会社ツクルバ | 不動産 | 2018 年 04 月〜2019 年 12 月 | 正社員 |
| 4 | フリーランスエンジニア | - | 2016 年 04 月〜2018 年 03 月 | フリーランス |
| 5 | 株式会社スマイルメーカー | IT・ブラウザゲーム | 2014 年 03 月〜2016 年 03 月 | 正社員 |
| 6 | ヘルプリー合同会社 | IT・一人法人 | 2012 年 07 月〜2014 年 02 月 | 代表社員 |
| 7 | 株式会社ジェーシービー | 金融・クレジットカード | 2006 年 10 月〜2011 年 12 月 | 正社員 |
1. 0. 自社プロダクト開発:「Listee」(https://www.listee.in)
期間: 2023年〜現在
概要:
AIアシスタントによる自然言語タスク管理を実現するコラボレーション型SaaS。
音声(Amazon Alexa)およびチャット(LLM)を通じて、会話ベースでタスクを作成・整理・共有できることを特徴としています。
Next.js / Supabase / Drizzle ORM / shadcn/ui などのモダンスタックを用いたフルスタック開発を行い、
現在はOSS化を進めるため、GitHub Organization listee-dev にてリポジトリを整備中です。
主な開発内容
- Webアプリケーション全体の設計・実装・運用
- Alexaスキル「Listee Ask」開発および Login with Amazon によるアカウント連携機能の実装
- LLM(大規模言語モデル)によるチャット連携機能を開発し、自然言語でのタスク生成を実現
- Supabase / PostgreSQL によるカテゴリ・タスク・招待テーブル設計と認証・権限管理の実装
- Stripe による有料プラン(Free / Plus / Pro)決済導入
- Drizzle ORM と drizzle-valibot を組み合わせ、スキーマとバリデーションを単一ソース化
- モノレポ構成(
listee-devorg配下のlistee-app,listee-api,listee-ask,listee-libs,listee-cli等)を整備し、OSS化を見据えた構造を確立
成果
- LLMチャットおよびAlexa音声操作を組み合わせた、会話型タスク管理体験を実現
- Supabase と Next.js による軽量かつ拡張性の高いチームタスク管理基盤を構築
- OSS化に向けたリポジトリ構成とCI/CD環境を整備し、公開準備を進行中
- Stripeによる課金機能を導入し、SaaSとしての収益モデルを確立
技術スタック: Next.js / TypeScript / Supabase / Drizzle ORM / drizzle-valibot / Stripe / Alexa Skills Kit / LLM / shadcn/ui / Vercel / GitHub Actions / Bun / Biome
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社ROUTE06 | 2024 年 08 月〜2025 年 10 月 | Giselle フロントエンド開発 |
| 株式会社ツクルバ | 2023 年 09 月〜2024 年 04 月 | 「ウルカモ」フロントエンド開発 |
| 株式会社住宅ローン診断カンパニー | 2022 年 12 月〜2023 年 08 月 | 住宅ローン関連システム開発 |
| ドクターズモバイル株式会社 | 2022 年 12 月〜2023 年 08 月 | 医療関連システム開発 |
期間: 2024年8月-2025年10月
職種: フロントエンドエンジニア(Next.js / TypeScript)
プロジェクト: Giselle: AI App Builder Webアプリケーション開発
AI App Builder「Giselle」のWebアプリケーション開発を担当。
Next.js・TypeScriptを中心に、チーム機能、認証、課金、ワークフローデザイナー、UI/UX改善など
スタジオアプリの中核となる機能群を継続的に開発・改善。
対応したPR一覧: https://github.com/giselles-ai/giselle/pulls?q=is%3Apr+author%3Agentamura
主な実装・改善内容
- チーム管理・招待機能の設計・開発
Add team members list,Add team member role management,Add team member deletion,Enable OAuth invite flow for team join
- 認証およびアカウント設定関連の改善
feat: improve verify email error messaging,Add display name and email management to account settings page
- Stripe課金周りの強化
feat(billing): Implement last month usage charging on subscription cancellation,feat: Delete team members except earliest admin on subscription cancellation
- ワークフローデザイナーの安定化と機能拡張
feat: Implement node duplication UI and core logic,feat: implement vector store node duplication with settings preservation,feat: Prevent circular connections between nodes
- 状態管理・エラーハンドリング改善
refactor(flow): unify remove flow with Zustand store and add type-safe guard,Improve Supabase auth error resilience
- 外部連携機能の追加
feat: add GitHub Personal Access Token validation,feat: Validate Connection String in PostgreSQL Tools
- SEO/監視・品質向上対応
Add robots directives for studio app,Setup Sentry monitoring for runtime errors
成果
- チーム管理・課金・認証領域の機能を安定化し、主要プロダクトの継続的改善を推進
- Zustand導入・型安全化により、フロントエンドの保守性と拡張性を強化
- ワークフローデザイナーの操作性と堅牢性を改善
- Supabase・Stripeなどの連携領域を整理し、サービス信頼性を向上
技術スタック:
Next.js / TypeScript / Tailwind CSS / Zustand / Supabase / Stripe / PostgreSQL / GitHub Actions / Sentry / Vercel
プロジェクト: 「Giselle Blog」開発(https://giselles.ai/blog)
ブランドサイトに併設する技術ブログの構築を担当。
Contentlayer2とMDXによるCMSレス構成を採用し、エンジニアが直接記事を管理・配信できる仕組みを実装。
主な実装・改善内容
- Contentlayer2によるスキーマ設計・型安全な記事管理構築
- Remark/Rehypeプラグインの自作と拡張
- キーワードリンク注入、目次生成(ToC)を自動化
- Next.js Metadata APIを用いたSEO最適化
- Incremental Static Regeneration (ISR) + GitHub Actions連携で記事更新を自動反映
- CI統合によるContentlayer再生成・Lint自動チェック
成果
- CMSレスな運用を可能にし、エンジニアチームによる継続的な発信体制を構築
- SEO最適化機能を自動化し、記事更新コストを大幅削減
- ISR構成により、配信パフォーマンスと運用効率を両立
技術スタック:
Next.js 15 / TypeScript / Tailwind CSS / Contentlayer2 / MDX / Remark / Rehype / GitHub Actions / Vercel
■ 株式会社ツクルバ
- ウルカモ|中古不動産のソーシャルマーケット のフロントエンド領域を担当。
- 施策開発と並行し、Next.js12 から 14 へのアップグレードを実施。
- 利用技術 Next.js/TypeScript/Recoil/SWR/TailwindCSS/Storybook/ESLint/Firebaseauthentication/Vercel
- 利用技術
- Next.js / TypeScript / ReactHookForm / Zod / TailwindCSS / shadcn/ui / Vercel / LIQUID eKYC JS SDK
- 利用技術
- Frontend: React / React Router / ContextAPI / MaterialUI
- Backend: Node.js / pm2 / MongoDB / mongoose
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社ツクルバ | 2021 年 11 月〜2022 年 10 月 | 「ウルカモ」フロントエンド開発 |
| 株式会社ツクルバ | 2021 年 08 月〜2021 年 10 月 | 「cowcamo 売却の基礎知識」フロントエンド開発 |
| 株式会社ツクルバ | 2020 年 10 月〜2021 年 07 月 | 「cowcamo」Web アプリケーション開発 |
| 株式会社 QUMPOO | 2020 年 08 月〜2021 年 01 月 | HTML、CSS、jQuery コーディング |
| 株式会社ツクルバ | 2020 年 04 月 | co-ba.net リニューアル |
| 株式会社ツクルバ | 2020 年 01 月〜2020 年 03 月 | コワーキングスペース入退出アプリ |
| 株式会社 SEESAW | 2020 年 02 月〜2020 年 04 月 | HTML、CSS、jQuery コーディング |
■ 株式会社ツクルバ
ウルカモ|中古不動産のソーシャルマーケットのフロントエンド領域を担当。 Frontend1 名(gentamura)、Backend1 名、Design1 名、PdM2 名のチーム構成。 プロジェクト立ち上げからフロントエンドのリードエンジニアとして参画し、技術選定、設計、実装、テストを実施。開発期間 4 ヶ月を経て、2022 年 2 月に本リリース。その後、追加開発等も含めた運用・保守に従事。選定技術は Next.js/TypeScript/Recoil/SWR/TailwindCSS/Storybook/ESLint/Firebaseauthentication/Vercel 等。
cowcamo 売却の基礎知識を Next.js の StaticExports にて実装 選定技術は Next.js/TypeScript/TailwindCSS/Storybook/ESLint/Vercel/microCMS 等
Rails アプリケーション内で利用しているフロントエンド領域で以下を対応
- React アプリケーションに Redux 導入
- npm security alert のアップデート
- 独自 CMSEditor のバグ修正
- erb の Google Analytics Event を整理し、JS での制御を追加
- その他細々としたバグ修正・実装調整
- 大手上場企業の独自 CRM 上での HTML、CSS コーディングを実装
- 大手上場企業のイベントサイトをコーディング、日英切り替えを jQuery 実装
■ 株式会社ツクルバ
- WordPress のみの運用から、Gatsby.js + WordPress RESTAPI による運用に変更
- Next.js / TypeScript / CloudFunctionsforFirebase / CloudFirestore / FirebaseAuthentication / AkerunAPI / Pay.jp
- Flutter / FirebaseSDK / FirebaseAuthentication
- Meguro.es#25@Fringe81 にて TL 登壇
- 社内管理画面(SFA/CRM/CMS)のフロントエンドの開発リードを担当
- Ruby on Rails アップデートプロジェクトにおける、フロントエンド領域のリードを担当
- コワーキングスペース入退出アプリの開発リードを担当
- コーポレートサイトリニューアルプロジェクトの開発リードを担当(技術選定・関係部署折衝含む)
- cowcamo.jp における、Web アプリケーションの機能改修を担当
- co-ba.net の開発・保守を担当
- wayfarer で管理されていた routing を、RailsView にセットした data 属性で React の mount 判定する機能を実装
- モノリシックな Rails に複数の SPA が存在し、Rails の Routes と Frontend の wayfarer が重複していたため、front 側の routing を管理せずに React をマウントできるように実装した
- flumpt で管理されていた state を、ContextAPI を利用した state 管理に移管
- React に ContextAPI が実装されたタイミングで Redux に ContextAPI が実装されていなかったため、独自実装した•営業係数のダッシュボードに対して、D3.js を利用し、円グラフ・折れ線グラフ・棒グラフを実装
- Assetspipeline で管理されている JavaScript/CSS の調査
- gem 単独で assets を利用しているものはそのまま残す方針
- assetspipeline を経由必須の gem に関しては、スクラッチで JS 実装(select2 など)
- webpack によるフロントエンド機構の開発環境の整備
- browserify-rails、babelify を利用し、Assetspipeline を経由していた部分を、webpack のみで完結するように実装
- erb に埋め込まれている JavaScript の切り出し
- jQuery 利用部分の VanillaJS への置き換え
コワーキングスペース利用者の入退出時間を管理する Web アプリ
- Next.js / TypeScript / Cloud Functions for Firebase / Cloud Firestore / Firebase Authentication / Akerun API / Pay.jp
- WordPress + Heteml で運用されていたコーポレートサイトを以下スタックにリプレース
- ユーザ画面・管理画面を Google App Engine (standard)で 3 services で実装
- ユーザ向けフロントエンド(Go / Gin / HTMLtemplate / JavaScript / Sass / Flocss)
- 管理画面
- フロントエンド(Next.js / JavaScript)
- バックエンド(Node.js / Express / Firebase functions / Cloud datastore)
- Rails Controller / View / Spec の実装
- VanillaJS、jQuery での実装
- Docker compose にて WordPress / Nginx / MySQL のイメージを利用
- AWS Elastic Beanstalk に host し、Blue-Green Deployment にて運用
- カスタム Docker イメージは、 AWS ECR へホストして管理
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社 socialsolutions | 2016 年 04 月〜2018 年 03 月 | 「Child Care System + Pro」フロントエンド開発 |
| 株式会社クスール | 2017 年 04 月〜2017 年 06 月 | 「BAUS」フロントエンド開発 |
| 株式会社クスール | 2017 年 03 月 | JavaScript 研修補助講師 |
| 株式会社サイズ | 2016 年 06 月〜2016 年 10 月 | 「WebMeister5」フロントエンド開発 |
保育園 ICT 管理システム「Child Care System + Pro supported by NTT 東日本」 のフロントエンド開発業務(2016 年 04 月〜2018 年 03 月)
業務内容
- スタッフのシフト予定や実際の出退勤、園児の登園予定・実際の登退園に連動するデータを 1 画面で登録・閲覧可能な「-シフト作成」の開発方針策定、実装を担当
- フロントエンドで利用する API(PHP)の改修
- 開発環境整備の導入提案・運用を担当
開発方針
- クライアント要望により、jQuery + ES5 + Backbone.Events の構成にて実装
- SPA(SinglePageApplication)として画面を構成
- 役割によるディレクトリ分割(MVVM をベースとした独自構成)を実施 •Webpack を用いたモジュール管理を実施
開発内容
- JavaScript
- models:Ajax 通信と DB データの状態管理を実装
- views:templates への HTML 展開と DB データ表示、View の状態管理を実装
- templates:HTML を分割して構成
- DB 更新は、一貫して views でイベントを dispatch し、models にて受け取る構成を独自で実装
- シフト登録画面を Google カレンダーのようににグリッド構成し、ドラッグ&リリースで、データを登録する UI を実装
- 使用ライブラリ
- jQuery,jQueryUIdatepicker,Webpack,Backbone.js,moment.js
- PHP
- 初期ロード時に複数の API をシリアルで叩く構成になっていたため、API 側で初期ロードに必要なデータを合成し、リクエスト数を減らすよう改修
開発環境整備
- Git、Git-flow、Backlog を導入し、チケットでのワークフローを提案し、導入・運用を実行
■ 株式会社クスール
クリエイティブプラットフォーム「BAUS」のフロントエンド開発業務(2017 年 04 月〜2017 年 06 月)
業務内容
- Rails で構築されているプロジェクト内のフロントエンド実装を担当
開発内容
- JavaScript
- Slick をカスタマイズし、カルーセル、クロスカルーセルを実装
- スクロール量に合わせたコンテンツの表示・非表示切り替えを実装
- 使用ライブラリ
- jQuery,Slick,jQueryLazy
- Rails
- View の調整、部分テンプレートを利用した View の共通化を実施
UX/UI の実践スキルを学べるデザインスクール「Delight U for Students」 における JavaScript 講座の補助講師(2017 年 3 月)
業務内容
- DeNAとcshoolが主催のデザインスクールにて、JavaScript セクション(5 日間)の補助講師を担当
- デザイナー志望の受講者へプログラミングの基本からメモアプリの実装までの講義をフォローする補助講師として参加。
■ 株式会社サイズ
HTML5CMS「WebMeister5」 の JavaApplet から JavaScript への切替開発業務(2016 年 6 月-2016 年 10 月)
業務内容
- HTML5 対応 Web オーサリングツールにおける管理画面の UI 開発
開発方針
- クライアント開発のコードをベースに追加開発を実施
- SPA(SinglePageApplication)として画面を構成
- Require.js を用いたモジュール管理を実施
開発内容
- JavaScript
- ディレクトリ機能、ファイル表示画面でのソート機能を実装
- TinyMCE を利用した HTML 画面のリッチ編集機能を実装(ライブラリ拡張も含む)
- ドラッグ&ドロップによるアップロード機能、右クリックメニューを実装
- 使用ライブラリ
- jQuery,TinyMCE,require.js,moment.js,clipboard.js,pikaday.js
- CSS
- Sass を導入し、CSS を構造化
- RPG ゲームにおける戦闘画面の開発を担当
開発内容
- ActionScript3
- MVVM ベースの構造化
- ビジネスロジック設計・実装
- モーション設計・実装
- Away3D
- 戦闘画面の 2D/3D ハイブリッド画面を実装
その他開発
- Git、Git-flow の運用方針構築・導入・推進、Redmine 導入
- 受付アプリ開発(Objective-C、Swift)
- 旧コーポレートサイトの構築(ActionScript3、FlashProfessionalCC)
- 既存 PC ブラウザゲームのスマートフォン版更新開発(HTML5、CSS3、JavaScript、Handlebars.js、jQuery)
- 新プラットフォーム検討におけるデモアプリ作成(CoronaSDK by Lua、Cocos-x by JavaScript)
おてつだいを依頼したい人と働きたい人をオンライン上でマッチングするお手伝いマッチングサイト「Helply」の開発・運営業務内容
- 事業戦略、UI/UX 策定・開発、システム開発、サービス運用、経営管理全般
開発内容
- Ruby 2.0.0 / Ruby on Rails 3.2.11
- ユーザ新規登録 / ログイン / ログアウト / Facebook 認証 / 会員登録認証メール送信 / パスワードリセット / ユーザ一覧表示 / ユーザ詳細表示 / 仕事新規登録 / 仕事一覧リスト表示・ソート・フィルタ / 仕事一覧 GoogleMaps 表示 / 依頼した仕事一覧 / 受け付けた仕事一覧 / 決済機能 / SSL 通信 / 画像アップロード・編集 / コメント機能 / オファー機能 / レビュー機能 / メッセージ機能 / 通知機能
利用ライブラリ
- Devise / Omniauth / Twitter Bootstrap Rails / CarrierWave / Cloudinary / less rails / will paginate / WebPay / Heroku / PostgreSQL / SQLite3 / RapidSSL
研修講師
- iPhone アプリ開発研修講師(2013 年 10 月〜2013 年 11 月)
フロントエンド開発
- イベント管理アプリ「minakul」のタイムライン実装(2013 年 07 月〜2013 年 08 月)
- エンタメ関連プロモーションサイト(2013 年 07 月〜2013 年 08 月)
- Facebook アプリの画像編集機能(2013 年 07 月〜2013 年 08 月)
- NPO 法人の Wordpress テーマ開発(2013 年 07 月)
- ソーシャルゲームスマホ版 UI 実装(2013 年 02 月〜2013 年 04 月)
サーバサイド開発
- ものづくりレシピサイト API を Rails にて実装(2013 年 05 月〜2013 年 06 月)
- 支社営業の短期・中期目標を策定、また達成に向けた戦略を立案、実行補佐、進捗管理に従事
- 支社評価制度策定、短期・中期 KPI 目標策定
- 戦略進捗会議設計、運営(月 1 回)、執行役員向け報告資料作成、報告
- 支社体制の検証、人員配置策定、予算配布、予実差異管理、計数集計・管理・分析
- 営業支援システムの導入における要件定義・ベンダー折衝
業務本部 JCB インフォメーションセンターにて「JCB インフォメーションセンター」の現場管理者として従事センター規模
- オペレータ:40 名、SV:3 名、リーダー:6 名、入電数:平均 3 千件/日
- コールセンター管理(質疑応答・上席対応・呼量調整・スキル設定変更・応対品質・勤怠管理・計数管理)、オペレータの業務研修、「お客様の声/業務改善案」収集・策定・実施
- 社内ポータル構築・保守(HTML / CSS / JS)、電子マネー設定 Web マニュアル構築(業務改善提案銀賞授与)