Muddy Web #10 ~Special Edition~ 【ゲスト: pixiv】

イベント概要

Muddy WebはMuddy = 泥臭いとして、Webフロントエンドの開発現場における話やケーススタディなど泥臭さのある話をもとに学びを得ることを目的として開催しています。

現場で遭遇した具体的な体験を元に実際に明日から使えるかもしれないWebフロントエンド的な技術や知識を参加者の皆さまと共有し合うことを通して、フロントエンド開発の糧になれればと思います。

10回目となる今回は、pixivをゲストに迎えて開催します。

日時/場所について（ハイブリッド開催します！）

今回の Muddy Web はオンライン・オフライン同時開催いたします！

オフラインでご参加いただく場合は、セッション終了後に懇親会を予定しております。セッションでは話しきれなかった内容や、気になることなどぜひ一緒に語らいましょう！

• 開催日：2024年12月10日（火）19:00〜22:00
  ※オフライン参加の方はその後、任意で懇親会にご参加いただけます。
  ※懇親会のみの参加はできません。
  ※勉強会参加を目的とする方のみのご参加をお願いいたします。

• 形式：オフライン/オンライン
  ※オフライン：渋谷スクランブルスクエア 21階
  ※オンライン：YouTube Live 　　　　

• 参加費：無料
  ※オフライン参加の場合、交通費等は自己負担となります。

オフライン参加の申し込みについて

• 申し込み時に必要なアンケートはすべての項目をご回答ください
• アンケートにご回答が無い場合、確認のメールをお送りさせていただく場合があります
• 社会人の方は当日会場でお名刺を頂戴いたしますのでご持参ください
• 学生の方は当日会場で学生証を拝見させていただく場合がございます
• 懇親会のみの参加はできません

当日の進行について

• オフラインでご参加いただく場合 別途、入館方法をお送りいたしますので手順に沿ってご来社ください。
  ※当日、会場にてお名刺または学生証の提示をいただきます。

• オンラインでご参加いただく場合 非公開のYouTube Live視聴URLをお送りいたします。

登壇者・セッション詳細

Webpack to Rspack, Vite

日々のプロダクト開発において、ローカルやCIでのビルド速度は大きく開発体験に影響します。WINTICKETではWebpackをベースに構築されたビルド環境の改善に取り組んでおり、RspackやViteへの移行を進めています。本発表では、移行の効果やスムーズに移行するための道のりを詳しく紹介します。

どら

2021年新卒入社。 WINTICKET Web チームでリードを務めています。毎年スキー・スノボの季節を楽しみにしています。

GitHub : https://github.com/dora1998

X : https://x.com/d0ra1998

CyberAgent DevelopersBlog : https://developers.cyberagent.co.jp/blog/archives/author/dora/

ブラウザ単体でmp4書き出すまで

ピクシブのVRoid Hubチームは、ユーザーがアップロードした3Dモデルを撮影し、ブラウザー単体でMP4形式の動画を出力できる機能をリリースしました。

この新機能について、リリース前の意思決定プロセスから仕様調整と技術選択の裏側、さらに実装・テスト段階で直面した課題などを共有します。特に、クロスブラウザ対応やモバイルデバイスを含むWebGLコンテンツに適したWebCodecs/MediaRecorder APIの運用について詳しく解説します。

yue

2021年よりピクシブ所属。RustとTypeScriptが好きです。いつかネコと暮らしたいと思っています。

X: https://x.com/nerd_yue

GitHub: https://github.com/yue4u

Mastodon: https://null.ptr.fm/@yue

ジャンプTOONにおけるサイトマップ自動生成の裏側

SGEマンガ事業部では、2024年5月にジャンプTOONをリリースしました。 ジャンプTOONでは、オリジナル連載マンガや人気作品のタテカラー版を掲載しており、毎日4作品以上が更新されます。新しいコンテンツを検索エンジンのクローラーに逸早く伝えるためには、常に最新のサイトマップにしておくことが重要です。今回は、サイトマップの作成において気をつけることや自動生成の実装手法について詳しくお話しします。

浅原 昌大

2023年新卒入社。 SGEマンガ事業部に所属。好きな縦読みマンガは「フルボー 〜タッたら終わりの異世界無双〜」

X: https://x.com/assa1605

GitHub: https://github.com/assa1605

CyberAgent DevelopersBlog: https://developers.cyberagent.co.jp/blog/archives/author/asahara/

17年周年のWebアプリケーションにTanStack Queryを導入する

作品コミュニケーションサービスpixivは、先日17周年を迎えました。その間、ピクシブのエンジニアは、ユーザーに価値を届け続けるために、その時々に最適な形で実装をアップデートしてきました。しかし、フロントエンドを取り巻く環境は17年間で大きく変化して、当時最適であると判断した実装も今では負債と呼ばれることがあります。

今回は、その歴史を踏まえてpixivのフロントエンドがどのようにアップデートされているのか、TanStack Queryの導入という具体例とともにお話します。

さいと

2022年新卒入社。pixivのフロントエンドエンジニア。最近ポケモンカードにハマっている。

X: x.com/saitolume

GitHub: github.com/saitolume

タイムテーブル

注意事項（必ずご確認ください）

• 会場内では、写真や動画撮影が行われる予定のため会場内のお客さまが映り込む場合があります。 それらは、弊社媒体やSNSなどで掲載される場合がありますので、あらかじめご了承ください。

• イベントスタッフは、このイベントに関わる全員が気持ちよく過ごせるように考えています。参加者の皆さまも、ほかの方を不快にさせるような発言・行動は謹んでいただくようご了承のほどお願いいたします。またそのような行動を目にした方は、connpassの「イベントへのお問い合わせ」フォームからお知らせいただくか、会場スタッフにお伝えください。

• 講演の録画および録音は禁止しております。録画した動画、音声などを無断で公開した場合、著作権の侵害となる恐れがあります。

• ブログやSNS等で当イベントに関する発信を行う際は、公序良俗に反する内容のないよう、ご協力をお願いします。

• 悪天候等により、運営事務局の判断にてイベントを中止する場合があります。

• 運営の状況によりスケジュール、内容は変更となる場合があります。

• 当勉強会はセッション内容に興味のある方の参加をお願いしております。飲食のみ、勧誘、営業などを目的とした参加はご遠慮ください。なお、運営者が該当すると判断した方が見受けられた場合は、お帰りいただく場合がございますのでご了承ください。

• 参加目的が不適切だと判断される場合には、運営側で参加をキャンセルさせていただく場合がございます。

Code of Conduct

株式会社サイバーエージェントが主催する技術イベントには、以下のCode of Conductを適用しております。皆様が歓迎され、安心・安全なイベントとして楽しい時間を過ごせるよう、Code of Conductをぜひご一読いただき、ご協力いただけますよう、よろしくお願いいたします。

CA Tech Events - Code of Conduct

個人情報のお取り扱いについて

主催：株式会社サイバーエージェント

事前・事後アンケート、その他、当イベントを通じて取得した個人情報等の取扱いはプライバシーポリシーに従って取り扱います。

またイベント受付管理や各種ご案内（サービス・イベント・採用等）に利用させていただく場合があります。 ご同意の上、ご参加ください。

株式会社サイバーエージェント プライバシーポリシー：https://www.cyberagent.co.jp/privacy/

免責事項

• 本カンファレンス内において発生した一切の事故や怪我・病気などの責任を負いかねますことをあらかじめご了承ください。
• 貴重品の管理は各自でお願いいたします。万一盗難・紛失等の事故が発生しても、主催者は一切責任を負えません。
• 本カンファレンスから得られた情報により、何らかの損害を負った場合であっても、発表者並びに主催者は一切の責任を負いません。予めご了承ください。