MH4GF / Hirotaka Miyagi / 宮城広隆

Summary

フロントエンド／バックエンドからインフラ、PdM、マーケティングまでを一気通貫で担うプロダクトエンジニアです。
2018 年にスポットワークサービス「タイミー」に第一号社員として参画し、機能開発・SRE・新規事業 PjM をリードしました。法務チームと連携して 特許取得の QR コード勤怠システム を実装し、シリーズ C 調達期には TVCM 流入にも耐えるインフラ基盤を構築しました。
その後フリーランスとして複数スタートアップを支援し、React ＋ GraphQL による UI 刷新、Rails モノリスのモダン化、AWS／Terraform でのインフラ 0→1 を推進。2022 年に ROUTE06 へ加わり、商取引 DX プラットフォームのフロントエンドアーキテクチャをリードしたのち、現在は OSS のビジュアルデベロップメントプラットフォーム「Liam」シリーズをプロダクトマネージャー兼テックリードとして企画・開発しています。第一弾 Liam ERD はリリース 3 か月で GitHub で 3,700 スターを獲得。
高速な学習と HRT（謙虚・尊敬・信頼）を軸に、プロダクトとチームの成長を両輪で加速させてきました。

こちらも合わせてご覧ください。

• 好む振る舞い

Technical Skills

• TypeScript, React, Next.js, Vite, Tailwind CSS, Storybook, ProseMirror, reg-suit, Apollo Client
• Ruby, Rails, Rspec, RuboCop, graphql-ruby
• Go, Gorm, gplgen
• Terraform, AWS Fargate, ALB, RDS, S3, CloudFront, CloudWatch, Route53, VPC, Amplify, Cognito
• GitHub Actions, CircleCI, Sentry, Datadog, Redash, Slack, Figma, Notion, Google Workspace, Slack, Zoom, Google Meet
• Cursor, Cline, Claude Code, Devin AI

Public Speaking & Publications

OSS Contribution

• biomejs/biome
  • docs(website): fix italic text for ja docs by MH4GF · Pull Request #1272 · biomejs/biome
  • $5 a month Sponsor
• vitejs/vite
  • https://github.com/vitejs/docs-ja/pulls?q=is%3Apr+is%3Aclosed+author%3AMH4GF
  • $5 a month Sponsor
• langgenius/dify
  • fix(RetrievalConfig): Fix score threshold assignment for zero value by MH4GF · Pull Request #7865 · langgenius/dify
  • fix(RunOnce): change to form submission instead of onKeyDown and onClick by MH4GF · Pull Request #8460 · langgenius/dify
• Code-Hex/graphql-codegen-typescript-validation-schema
  • feat: minimal implementation to support valibot by MH4GF · Pull Request #667 · Code-Hex/graphql-codegen-typescript-validation-schema
• sverweij/dependency-cruiser
  • feature(plugin): add alternative implementation for mermaid.js reporter plugin by MH4GF · Pull Request #599 · sverweij/dependency-cruiser
• prosemirror
  • add serializer option to set custom regexp for escaping by MH4GF · Pull Request #68 · ProseMirror/prosemirror-markdown
  • declare Builders type for builders() by MH4GF · Pull Request #9 · ProseMirror/prosemirror-test-builder
  • Fix types for cellSelection by MH4GF · Pull Request #160 · ProseMirror/prosemirror-tables
  • フォーラムでのバグ報告や知見共有
  • ガイドを和訳し公開: https://zenn.dev/mh4gf/articles/d25ef1ff30b5a6

Work Experience

株式会社 ROUTE06 ― Liam 事業部 (2024.02–現在) Product Manager / Tech Lead

プロダクトビルダー向け OSS ツール群「Liam」を 0→1 で企画。第一弾 「Liam ERD」 を公開。フルサイクルチーム（Eng 5 / Designer 1）をリード

• 主な責務:
  • プロダクト企画、ロードマップ策定、アーキテクチャ設計、初期マーケティング戦略立案
  • チーム組成・2 名のピープルマネジメント、AI ネイティブな開発プロセス設計
• 技術スタック / キーワード: TypeScript, Next.js (App Router), React Flow, WebAssembly, Supabase, LangChain, Langfuse, Devin AI, Cline
• Introducing Liam ERD

株式会社タイミー(2022/4~2022/10)

業務委託として開発プラットフォームチームに所属し、Rails/Next.js での GraphQL の導入・初期設計・各種オンボーディングを担当しました。

Rails+Next.js で GraphQL を導入する時に考えたこと - Timee Product Team Blog

株式会社ビットジャーニー（2021/9〜現在）

業務委託として https://kibe.la/ の開発チームに参画し、フロントエンドをメインにフルサイクルに開発を進行しました。

ProseMirror を利用したリッチテキストエディタの開発

• ProseMirror の木構造 ⇄DOM⇄markdown text の相互変換により、リッチテキストエディタで記入したテキストを即座に markdown に変換させる
  • ユーザーフレンドリーなテーブル記法の入力 UI の実装
    • https://blog.kibe.la/entry/rich-text-editor-beta-table
  • 列・行・セルの選択や追加、削除などを直感的に行えるように
  • DOM を効率的にレンダリングするためのキャッシュアルゴリズムの実装

フルサイクルな機能開発

• DB 設計・Rails の MVC 設計・GraphQL インターフェース・React コンポーネント・Redash/GA4 での分析までを一貫して担当
• GitHub Actions の導入と開発プロセス中のトイルの自動化

リリース 7 年が経過する Rails + React アプリケーションのモダン化

• Sass の@import 非推奨による sassc-rails から cssbundling-rails への移行
• webpack.config.js の最適化
• Sass → CSS in JS への移行のための技術選定
• jQuery からの安全な脱却ロードマップの策定・進行（進行中）、ES5 を上げていくためのリスク評価、古い polyfill の削除等

株式会社リゾートワークス（2020/12〜現在)

ワーケーションを通じて働く人の“創造性“を刺激する福利厚生サブスクリプションサービス  ResortWorx  で、インフラ/バックエンドエンジニアを担当しました。

インフラ構築の 0→1 に伴う技術選定と構築

プロダクトローンチ初期に求められる最低限の構成で、ランニングコストの抑制とエンジニアがキャッチアップできるようなドキュメンテーションを心がけました。

• Nuxt.js + Rails API の利用者向け Web アプリケーションと、Rails SSR による管理画面のホスティング
• Route53 → ALB → ECS / RDS の一般的な Rails のホスティング
• GitHub Actions による CD 環境、 SSM を利用した ssh(rails c 等）実行環境
• CloudWatch によるロギングとアラート、AWS Chatbot による Slack 通知
• S3 + CloudFront による SPA のホスティング、GitHub Actions による CD, workflow dispatch を利用したブランチ指定のデプロイ
  • のちに Nuxt の SSR も必要になったため Vercel へ移行
• 上記の AWS リソースを terraform で IaC 化、draw.io + VSCode によるアーキテクチャ図の記載、その他オペレーションをドキュメント化

チケットベースでのチーム開発

• Rails, Nuxt での機能追加
• CloudWatch Logs Insights で可視化・検索ができるよう Rails のログの JSON 化

企画 LP サイトの構築

• Nuxt.js(composition API), Tailwind CSS, Vercel による 0→1 を一人で担当
• デザイナーと Figma 上で会話しながら背中合わせで進行
• Lighthouse の点数をほぼ 100 点に

株式会社タイミー（2018/07〜2021/09）

サービスローンチの 1 ヶ月前にジョイン、初期は 1 人サーバーサイドとして Rails をメインに、プロダクト/会社の成長とともに幅広い業務を担当しました。

PjM/PdM/バックエンドエンジニア (2020/08〜2021/04)

当時の課題

会社の成長に伴いガバナンスを強めていく必要性があり、プロダクト「タイミー」における社内オペレーション改善や、コーポレートエンジニアリングの領域で開発を進行しました。

メンバー構成

プロジェクトの開発メンバーとしては 2 名で、関係部署にヒアリングしながら遊軍のように活動しました。

• 自身： プロジェクトマネジメント/ 要件定義/ Rails や Go での実装
• チームメンバー: 元 iOS エンジニア（Rails はビギナー)/ 要件定義/ Rails や Go での実装
• 関わる部署： 経理財務、 CS

やったこと

ヒアリングや SaaS の選定、スケジューリングや開発着手、リリースまで一気通貫で担当しました。（NDA レベルの業務が多く少しぼかしています）

• CRM ツール HubSpot の API 連携
• 経理・財務業務 SaaS との API 連携
• 内部統制に伴う各種機能開発の進行（職務権限規定に沿った権限管理・与信・反社チェックなど）
• 社内業務のオペレーション改善
• Mac にインストールし deamon で常駐起動するソフトウェアを Go で開発
  • 主に非機能要件であるリリースパイプラインの設計を担当 死活監視、バイナリのセルフアップデート機構、リトライ制御など
• チームメンバーに Rails を指導 コードレビューやキャッチアップのための順序立てたタスク振りなど

新規事業 PjM/バックエンドエンジニア/フロントエンドエンジニア (2021/04〜2021/08)

メンバー構成

• 開発チーム： iOS 担当 1 名、 デザイナー 1 名、 Web フロントエンド&バックエンド API2 名
• 関わった部署： 経営, Sales, CS, 経理

役割

• プロジェクトマネジメント・技術選定・設計・実装（Rails, Vue.js)を担当
• チームのエンジニアは それぞれ iOS と Rails に強いメンバーとのプロジェクトだったため、それぞれの強みを活かしてもらいつつ取りこぼしがないよう拾う立ち回りに努めた
• Biz サイドとの折衝、サポートや経理とのオペレーション構築など
• エンジニアリングとしてはコアドメインのモデリングや Stripe を利用した決済周りの設計実装を主に担当した

技術選定・初期設計

• Vue.js/vue-router を使った SPA の実装
• 一般的な Rails の環境構築（annotate/rails-erd/bullet/rspec/rubocop)
• 監視/ロギング/CI/CD の導入（Datadog, Sentry, lograge を利用したログの JSON 化、 CircleCI)
• 商品情報登録・在庫管理・注文・決済履歴などのドメインの境界を意識したモデリング
• Rails プロジェクトでの行動指針決め
  • 原則テストコードを書く、書けないなら書けるよう責務を分割する
  • トランザクションやロックなど SQL を適切に書く
  • シンプル・ミニマルに

決済機能の要件定義・技術選定・Stripe API の実装/運用

新規事業の決済機能として Stripe を導入する上で考えたこと全て - Timee Product Team Blog

スキーマ駆動開発の導入・運用

Rails + RSpec + OpenAPI3 + Committee でスキーマ駆動開発を運用する Tips - Timee Product Team Blog

SRE (2021/01〜2021/04)

当時の課題

プロダクトの成長は進みテレビ CM を打つことになり、現状のスケールしない EC2 によるインフラでは耐えられないだろう、という課題がありました。ただひたすらこなしていた開発業務についてもメンバーが増えスクラムを回せるようになり、組織化が進んで自身の属人性は剥がれてきていました。運よくシニアレベルの SRE の方が採用できたこともあり、その方と主に SRE チームを立ち上げ AWS のアーキテクチャから作り変えるプロジェクトを始め、キャッチアップしつつインフラの移行を進めていきました。

やったこと(公開情報)

Production で Rails6 マルチ DB 対応を小さく始める

GitHub - MH4GF/ecr-lifecycle: Delete more than specified number of images, and protect if dependent on ECS task

Redash を Fargate, Datadog, Terraform で構築/運用する - Timee Product Team Blog

バックエンドエンジニア (2018/07〜2020/01)

サービスローンチの 1 ヶ月前にジョイン、初期は 1 人サーバーサイドとして保守運用を担当 Rails をメインに、プロダクト/会社の成長とともに幅広い業務を担当しました。

メンバー構成

• リリース前： iOS…5 人、 サーバーサイド 4 人
• リリース後〜半年程度： iOS…2 人、 サーバーサイド 1 人、 技術顧問数人
  • 徐々にメンバーは増えていきました

役割

スタートアップのシード期なので、通常の機能開発や運用はもちろん、経営・CS・経理・営業チームからの要望対応も全てバックログに載せただひたすらにこなしていました。

やったこと

• 0→1 の開発・0→1 後のサービスの保守運用・負債解消
• RSpec, Rubocop, OpenAPI3 の導入
• Ruby/Rails のバージョンアップ業
• API のバージョニング、Serializer のスキーマ分割
• サービス固有の強いドメインを持つ機能の設計、実装

免許・資格

• 普通自動車免許