Shuta Hirai

Shuta Hirai

職歴

一般社団法人フロントエンドカンファレンスアソシエーション

2026/07 〜

代表理事, Website: https://fec.or.jp/

フロントエンドカンファレンスを冠する、カンファレンスの運営や支援を目的とした法人です。

Next Experts (株式会社サイバーエージェント)

2024/12 〜

担当領域: クライアント・TypeScript

サイバーエージェントのDeveloper Experts制度におけるNext Expertsとして、サイバーエージェントグループへの技術支援や啓蒙活動を行っています。

また、対外活動としてカンファレンスへの登壇や企業スポンサー、Webにて執筆活動なども行っています。

Next Expertsになった経緯については、個人ブログのエントリをご覧ください。

CyberAgent group Infrastructure Unit (株式会社サイバーエージェント グループIT推進本部)

2023/08 〜

フルタイム, Website: https://it.cyberagent.group/team/ciu/

入社後1年半が経過し、WebフロントエンドのPlatform整備やイネーブリングのような業務にチャレンジしたく、社内転職制度でサイバーエージェントに帰任・グループIT推進本部に異動しました。

Cycloudというプライベートクラウドの、Webコンソールの開発に従事しています。

また、グループIT推進本部の一員として、スポーツ関連の事業部や化粧品関連の事業部、社内アプリ開発チームなどに対する、Web技術やTypeScriptを中心とした技術支援を行っています。

株式会社CAM (株式会社サイバーエージェント)

2022/04 〜 2023/07

フルタイム, Website: https://cam-inc.co.jp/

サイバーエージェント入社後、出向の形で子会社配属されました。

配属後半年間は、Fensi Platform 開発チームにて、Vironの開発者陣にメンターをしていただきながら、管理画面向けのOSS開発を行っていました。

半年経過後はプロダクト側のチームに変わり、エンタメ関連のファンサイトのWebフロントエンドの開発に従事していました。

立命館大学 情報理工学部 情報理工学科

2018/04 〜 2022/03

学士(工学)

画像・音メディアコース 卒業。

3年生で配属された音声言語研究室(山下研)にて、音声コーパス関連の研究 を行っていました。


学生時代に経験した、業務委託・インターンシップ

いくつかご紹介します。

tambourine.inc(Current Accenture Japan Ltd)

2019/05 〜 2021/12

インターンシップ(2019/05 〜 2019/06) → アルバイト(2019/06 〜 2021/12)

Website: https://newsroom.accenture.jp/jp/news/2021/release-20211119

SalesforceやHerokuの知識をインプットしながら、新規事業向けのIaaS(GCP, AWS)の検証やWebフロントエンド関連のPoC実装、新卒向けの技術研修を行っていました。

また、技術顧問の方からお声掛けいただき、フロントエンドカンファレンス関西2019のスタッフとして運営に関わりました。

tambourineのアクセンチュアへのジョインが決まったタイミングで退職しました。

WinTicket Inc.

2021/03 〜 2021/05

アルバイト

Website: https://www.winticket.co.jp/

CodemodとASTを用いた自動リファクタリングや、施策のPoC実装に取り組みました。

ElevenBack LLC

2019/10 〜 2022/03

業務委託

Website: https://elevenback.co.jp/

CEOにお声掛けいただき、デザインやエンジニアリングを学びつつ、フリーランス向けのサービスの開発に携わりました。

Relie Inc.

2020/08 〜 2022/03

業務委託

Website: https://re-lie.com/

AkinaiOne.inc

2020/03 〜 2022/03

業務委託

Website: https://akinaione.com/

pixiv inc.

2020/09

pixiv FACTORY, PIXIV SUMMER BOOT CAMP 2020

pixiv FACTORYにて、RailsフロントエンドとReactが混在するプロジェクトのリファクタや、新規機能追加を行いました。

DeNA Co., Ltd.

2020/08

1dayのチーム開発イベントにて、Webフロントエンドの実装を担当しました。

DMM.com LLC

2019/09

DMM GUILD 2019

GUILDインターンの2期生として、Webフロントエンド関連の技術的課題に対して、本部・石川支社の方々と連携して取り組みました。

コミュニティ活動

技術者向けコミュニティにおける登壇や主催です。

TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する

at フロントエンド・PHPカンファレンス北海道2026, 2026/06/06

プロポーザルを採択いただき、当日発表した資料です。

Slide: https://speakerdeck.com/shuta13/typescript-compiler-apitophp-parserwohuo-yong-si-typescripttophpdexing-wogong-you-suru

フロントエンドカンファレンス名古屋2026

at WINC AICHI, 2026/05/09

アドバイザー兼コアメンバーとして、企画・運営に関わりました。

Website: https://fec-nagoya-org.github.io/2026/

Event URL: https://fortee.jp/fec-nagoya-2026

ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する

at Frontend Conference Nagoya 2026 前夜祭!, 2026/05/08

FEC名古屋のリジェクトコンで発表したLTです。

Slide: https://speakerdeck.com/shuta13/burauzanotou-ji-de-du-miip-mitotou-ji-ruruapiwoli-jie-si-websabisunopahuomansuwozui-shi-hua-suru

うわっ...私のSwagger、古すぎ...?grpc-gateway向けのSwaggerと向き合う

at フロントエンドカンファレンス関西2025, 2025/11

フロントエンドカンファレンス関西2025の学生支援スポンサーイベントのLTです。

Slide: https://speakerdeck.com/shuta13/uwatu-dot-dot-dot-si-noswagger-gu-sugi-dot-dot-dot-grpc-gatewayxiang-kenoswaggertoxiang-kihe-u

ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する

at Vue Fes Japan 2025, 2025/10

Vue Fes Japan 2025のサイバーエージェントトラックでのスポンサーLTです。

Slide: https://speakerdeck.com/shuta13/vitetotypescriptnoproject-referencesde-da-gui-mo-monoreponouikatarogunoririsusaikuruwogao-su-hua-suru

フロントエンドカンファレンス東京2025

at Abema Towers, 2025/09/21

実行委員長として開催しました。400名が参加するカンファレンスとして、28名の方々にご登壇、11社にスポンサーとしてご支援をいただき、盛況のうちに終了しました。

Website: https://fec-tokyo.github.io/2025/

Event URL: https://fec-tokyo.connpass.com/event/352581/

歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善

at Browser and UI #3

Slide: https://speakerdeck.com/shuta13/li-dai-noweb-speed-hackathonnochu-ti-karakao-erudeguresinaipahuomansugai-shan

Event URL: https://browser-and-ui.connpass.com/event/362999/

CADC(CyberAgent Developer Conference) 2024

at CyberAgent, Inc. 2024/10

LP開発チームのテックリードとして、Webフロントエンドの開発に携わりました。

また、職域を超えてチームのマネジメントやLPとライブチャットのインフラ整備に携わりました。

Website: https://cadc.cyberagent.co.jp/2024

なぜクラウドサービスで Web コンソールを提供するのか

at Web Developer Conference 2024

Slide: https://speakerdeck.com/shuta13/nazekuraudosabisude-web-konsoruwoti-gong-surunoka

Event URL: https://web-study.connpass.com/event/321711

5分でわかるPreactのVDOMで作るWebエディタ

at めぐろLT #16

Slide: https://speakerdeck.com/shuta13/5fen-dewakarupreactnovdomdezuo-ruwebedeita

Event URL: https://meguro-lt.connpass.com/event/316885

TailwindCSSでUIライブラリを作る際のハマりどころ

at Meguro.css #10

Slide: https://speakerdeck.com/shuta13/tailwindcssdeuiraiburariwozuo-ruji-nohamaridokoro

Event URL: https://megurocss.connpass.com/event/316265/

Web Speed Hackathon 2024

at CyberAgent, Inc. 2024/03

バックエンドとCanvas関連の作問に関わりました。バックエンドにHonoを用いてAPIを書きつつ、ReactアプリケーションをSSRしました。Canvas関連では、WebGLを用いてCSSのobject-fit: coverのような効果を実装し、デチューニングを施しました。

Repository: https://github.com/CyberAgentHack/web-speed-hackathon-2024

Event URL: https://cyberagent.connpass.com/event/300386/

codemodとうまく付き合うには

at 新春LT大会, 2024/01

Slide: https://speakerdeck.com/shuta13/get-along-with-codemod

プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話

at Muddy Web #7, 2023/12

Slide: https://speakerdeck.com/cyberagentdevelopers/puraibetokuraudonokonsoruhua-mian-wonext-dot-jsnoapp-routerdehururipureisusitahua

Event URL: https://cyberagent.connpass.com/event/301089/

Meguro.es

Main organizer, 2023/11 〜

前任の fuya さんから引き継ぎ、主催を行っています。

Website: https://meguro.es/

Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化

at UIT Meetup vol.20, 2023/09

Slide: https://speakerdeck.com/shuta13/turborepo-code-generationniyoru-saibaezientogurupunohurontoendokai-fa-noxiao-lu-hua

Event URL: https://uit.connpass.com/event/291443

CADC 2023 LPにおけるライブ配信の裏側

at Momento meetup #3, 2023/07

Slide: https://speakerdeck.com/shuta13/cadc-2023-lpniokeruraibupei-xin-noli-ce-momento-meetup-number-3

Event URL: https://momentocommunity.connpass.com/event/288796/

CADC(CyberAgent Developer Conference) 2023 LP

at CyberAgent, Inc. 2023/06

https://cadc.cyberagent.co.jp/2023/ 

Web エディタ開発を支える技術

at Muddy Web #4, 2023/01

Slide: https://speakerdeck.com/shuta13/technologies-for-developing-editors

Event URL: https://cyberagent.connpass.com/event/270629/

React Deep Dive

at KC3 2021, 2021/09

Repository: https://github.com/shuta13/react-deep-dive

Event URL: https://kc3.me/study/297/

天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament

at tambourine inc. Meetup #4

Slide: https://speakerdeck.com/shuta13/world-static-site-hosting-tournament

Event URL: https://tambourine.connpass.com/event/161708/

Vue + TSXでもCSS in JSしたい話

at Kyoto.js 17, 2020/01

Slide: https://speakerdeck.com/shuta13/keyframes-of-vue-and-tsx-with-css-in-js

Event URL: https://kyotojs.connpass.com/event/154884/

OSS活動(コントリビューター)

開発者の間で広く用いられているOSSに対する貢献を行っています。

以下は本体にマージされ、リリースまで行われたPull Requestです。

Storybook

https://github.com/shuta13?tab=overview&from=2024-06-01&to=2024-06-06&org=storybookjs

webpack

https://github.com/shuta13?from=2022-12-01&to=2022-12-31&org=webpack&year_list=1

pmndrs

https://github.com/shuta13?tab=overview&from=2022-12-01&to=2022-12-31&org=pmndrs

https://github.com/shuta13?tab=overview&from=2021-12-01&to=2021-12-31&org=pmndrs

DefinitelyTyped

https://github.com/shuta13?tab=overview&from=2021-12-01&to=2021-12-31&org=DefinitelyTyped

https://github.com/shuta13?tab=overview&from=2021-12-01&to=2021-12-31&org=DefinitelyTyped

https://github.com/shuta13?tab=overview&from=2020-12-01&to=2020-12-31&org=DefinitelyTyped

https://github.com/shuta13?tab=overview&from=2019-12-01&to=2019-12-31&org=DefinitelyTyped

three-types

https://github.com/shuta13?tab=overview&from=2021-12-01&to=2021-12-31&org=three-types

mdn

https://github.com/shuta13?tab=overview&from=2021-12-01&to=2021-12-31&org=mdn

fastify

https://github.com/shuta13?tab=overview&from=2021-12-01&to=2021-12-31&org=fastify

OSS活動(コミッター)

自身が開発したOSSや、マージ権限をいただいてメンテナンスしていたOSSについてです。

moldable

at CyberAgent,Inc. Maintainer

https://github.com/CyberAgent/moldable

Node.jsとGoによるコード生成CLIです。サイバーエージェントグループのWeb開発に用いられています。

three-stdlib

Contributor・Maintainer

https://github.com/pmndrs/three-stdlib

three.js に含まれるヘルパー群 をpmndrsでメンテナンスしつつ、TSで書き直したプロジェクトです。

create-r3f-app

Contributor・Ex-maintainer

https://github.com/utsuboco/create-r3f-app

React Three Nextという、Next.jsとReact Three Fiberを組み合わせたスターターを利用するためのCLIです。

Utsubo株式会社のOSSになる以前、開発者と共にメンテナンスを行っていました。

Bento

at CAM, Inc. Ex-maintainer

https://github.com/cam-inc/bento

Slate.jsを拡張したエディタ向けのプラグインです。

株式会社CAMにて、設計・開発・メンテナンスを行っていました。

pde.js

at CAM, Inc. Ex-maintainer

https://github.com/cam-inc/pde.js

Preact の差分検出処理を Editor.js のプラグインとして移植したソフトウェアです。

株式会社CAMにて、設計・開発・メンテナンスを行っていました。

詳細はMuddy Webでの発表資料をご覧ください。

執筆活動

npm をセキュアな挙動にするために .npmrc に記述する最小設定

Cycloud Front End Tech Blog, 2026/04

https://zenn.dev/cycloud_blog/articles/5ce66daf4bd0cb

TypeScriptでCLIを作って学ぶAST

Think IT 連載, 2025/05 〜

https://thinkit.co.jp/series/11870

CADC 2024 LPの舞台裏

CyberAgent Developers Blog, 2024/12

https://developers.cyberagent.co.jp/blog/archives/50679/

CIUのWeb開発を支えるコード生成ツールをOSS化しました

CyberAgent Developers Blog, 2024/06

https://developers.cyberagent.co.jp/blog/archives/48009/

Hono app with Docker, Kubernetes

Hono Advent Calendar 2023, 2023/12

https://blog.did0.es/entries/c0e07acb-44f4-45f0-9539-b210a6d6163f

renderToStringとhydrateを作って学ぶReactのSSR・SSG

Zenn, 2023/07

https://zenn.dev/did0es/articles/b41d0de60934cc

CADC2023のコメント欄はMomento Web SDKを使って実現しました!実装コードも掲載あり!

CyberAgent Developers Blog, 2023/07

https://developers.cyberagent.co.jp/blog/archives/42887/

新卒エンジニアで毎月LT会を開催してみた

CAM Tech Blog, 2022/12

https://cam-inc.co.jp/p/techblog/731757550625621172

Preactの差分検出処理を用いたライブラリによる開発体験向上の取り組み

CAM Tech Blog, 2022/10

https://cam-inc.co.jp/p/techblog/710053497071993899

それSWRじゃなくてgetServerSidePropsでいいよねっていう場面の話

Zenn, 2022/04

https://zenn.dev/did0es/articles/cb8675f2b9da37

ポッドキャスト

司会担当やメンバーとしてお話したポッドキャストです。

JSConf JP 2025の気になるセッションを深ぼってみた

at Muddy Web Podcast #25, 2025/12

Spotify: https://creators.spotify.com/pod/profile/muddy-web/episodes/25-JSConf-JP-2025-e3cigjj

来年も開催決定! フロントエンドカンファレンス東京2025 振り返りと2026への野望

at Muddy Web Podcast #24, 2025/11

Spotify: https://creators.spotify.com/pod/profile/muddy-web/episodes/24--2025-2026-e3bj5tg

TSKaigi 2025に参加してみてのふりかえり

at Muddy Web Podcast #20, 2025/06

Spotify: https://creators.spotify.com/pod/profile/muddy-web/episodes/20-TSKaigi-2025-e33vma0

CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏

at Muddy Web #6, 2023/09

Slide: https://speakerdeck.com/shuta13/cyberagent-developer-conference-cadc-2023-lpkai-fa-nowu-tai-li

Event URL: https://cyberagent.connpass.com/event/294610/

新卒で1年目を振り返ってみた話

at Muddy Web Podcast #4, 2023/05

Spotify: https://open.spotify.com/episode/7qyI4jXhuIugKCurPzYeNT?si=1dA0zJ6yTBaKzNHEIaJTdQ

職務と職能

職務

ビジネスサイドやデザイナーなどの異職種と密に連携し、定義した要件とデザインを元に一気通貫で開発を行い、リリースとメンテナンスを行えます。

また、デザイナーが不在の状況でも、ある程度の品質のUIUXを提供できます。

4人規模のWebフロントエンドチームにて、テックリードの経験があります。

マネジメント経験はありませんが、EMやPdMとしてのキャリア設計をしており、マネージャーからの指導や書籍における体系的な知識を元にインプットを行っています。

関心のあるドメインは以下になりますが、他のドメインについても適宜キャッチアップしつつ開発できます。

  • 興行(アイドル系のエンターテインメント、サッカーなどのスポーツなど)
  • 不動産
  • 医療

職能

JavaScript関連の技術を用いた開発を得意とします。

また、流行り廃りや技術の潮流、事業に適した技術かどうかを考えつつ、開発者向けのPlatformの構築やイネーブリングで、組織の出力を最大化する仕組みづくりも得意とします。

Webフロントエンドをメインとしていますが、チームによってはバックエンドやネイティブアプリの開発も行えます。また、Node.jsとGoを用いたCLIの開発も得意とします。

以下の技術を用いて、チームのリーダーやメンバーとしてベストプラクティスを実践できます。

  • JavaScript
  • TypeScript
  • React
  • Next.js
  • HTML
  • CSS

以下の技術を用いて、チームのメンバーとして人並みに開発できます。

  • Go
  • Docker
  • Node.js(Express, Hono)
  • Vue.js(Nuxt.js)
  • React Native
  • Three.js
  • AWS
    • CloudFront
    • S3
    • Lambda
    • IAM
    • Amplify
    • EKS
    • EC2
    • Cognite
  • Google Cloud
    • Cloud Run
    • Artifact Registry
    • IAM
  • Cloudflare
    • Pages
    • Workers
  • CI
    • GitHub Actions
  • AI Agent
    • Claude Code
    • Codex

以下の技術について、基本的な知識を持っています。実務で触れた経験があります。

  • Kubernetes
  • CI
    • CircleCI
    • TravisCI
  • PHP
    • Laravel
    • Blade
  • Ruby
    • Ruby on Rails
    • Sinatra
    • ERB
  • Momento
    • Topics
    • Cache
  • GLSL(WebGL)

以下の技術の利用経験があります。趣味や大学の学部の授業で学んだ程度です。

  • RDB, SQL
    • MySQL
    • PostgreSQL
    • SQLite
  • KVS, NoSQL
    • MongoDB(MongoDB Atlas)
    • DynamoDB
    • Redis
  • Python
    • scikit-lern
    • tensorflow
  • C, C++
  • Java
    • Java Applet
  • Unity