Shuta Hirai

Career

TypeScript Next Experts (CyberAgent, Inc.)

2024/12 〜

https://blog.did0.es/entries/1608709b-0da6-80f1-91df-c97272e11bf1

CyberAgent group Infrastructure Unit (CyberAgent, Inc.)

https://it.cyberagent.group/team/ciu/

2023/08 〜

フルタイム

CAM, Inc. (CyberAgent, Inc.)

https://cam-inc.co.jp/

2022/04 〜 2023/07

フルタイム

Ritsumeikan University

2018/04 〜 2022/03

学士（工学）

情報理工学部情報理工学科画像・音メディアコース音声言語研究室（山下研）で音声コーパス関連の研究に従事

tambourine.inc(Accenture Song)

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

2019/05 〜 2021/12

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

WinTicket Inc.

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

2021/03 〜 2021/05

アルバイト

ElevenBack LLC

https://elevenback.co.jp/

2019/10 〜 2022/03

業務委託

Relie Inc.

https://re-lie.com/

2020/08 〜 2022/03

業務委託

AkinaiOne.inc

https://akinaione.com/

2020/03 〜 2022/03

業務委託

その他インターンシップ

pixiv inc.

2020/09

pixiv FACTORY, PIXIV SUMMER BOOT CAMP 2020

DeNA Co., Ltd.

2020/08

DMM.com LLC

2019/09

DMM GUILD 2019

Open-Source(Contributor)

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

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

Open-Source(Maintainer, Ex-maintainer)

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 に含まれるヘルパー群を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

株式会社CAMにて、Webエディタ開発向けのOSSの初期設計・開発・メンテナンスを行っていました。Slate.jsを拡張したプラグインです。

pde.js

at CAM, Inc. Ex-maintainer

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

株式会社CAMにて、Webエディタ開発向けのOSSの初期設計・開発・メンテナンスを行っていました。Preact の差分検出処理を Editor.js のプラグインとして移植したソフトウェアです。詳細はMuddy Webでの発表資料をご覧ください。

Community activities

CADC(CyberAgent Developer Conference) 2024 LP

at CyberAgent, Inc. 2024/10

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

テックリードとして、チームのマネジメントやLPとライブチャットのインフラ整備、LPの実装に携わりました。

なぜクラウドサービスで 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

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

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

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

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 〜

https://meguro.es/

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

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/

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/

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

at Muddy Web Podcast #4, 2023/05

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

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/

And more

Written articles

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

And more

Skills

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

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

TypeScript(JavaScript)
HTML
React
Next.js
Express, Hono

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

CSS
Go
Fastify
Three.js
React Native
Vue.js(Nuxt.js)

以下の技術について、基本的な知識を持っています。

Docker
PHP(Laravel)
Ruby(Ruby on Rails, Sinatra)
Google Cloud(Cloud Run, Cloud Build)
AWS(CloudFront, S3, Lambda, Cognite, IAM, Amplify, CodeBuild)
Cloudflare(Pages, Workers)
MongoDB(MongoDB Atlas)
Momento(Topics, Cache)
GitHub Actions, CircleCI, TravisCI
GLSL
Sqlite

趣味レベルで以下の技術を利用しています。

Kubernetes
Unity(C#)
Python
C, C++
MySQL
PostgreSQL
Java