JSConf JP 2022 公開資料・Twitterリンクまとめ

イベント

リンク集, JSConf JP

2022/11/26(土)で開催された JSConf JP 2022に関する、現時点での公開資料と Twitter アカウントリンクをまとめました。
よろしければご活用ください。

※2022/11/28追記
Zenn 版の方でねぎしさんからいただいたコメントを元に、各講演に時間指定をした YouTube リンクを追記しました。

はじめに#

JSConf JP

jsconf.jp is a JavaScript festival in Japan powered by Japan Node.js Association. This is the first event of jsconf in Japan. We would love to become a bridge between Japanese Web Developers and International Web Developers.

https://jsconf.jp favicon https://jsconf.jp
https://jsconf.jp OGP image

登壇者名は敬称略させていただいています。
Twitter アカウントについては、ご本人が当イベントで登壇されることに言及されている、スライドに記載など、確認できたものを記載しております。

リンクの間違い等ありましたらコメントいただけると助かります🙏

アーカイブ動画#

当イベントは、3つのトラックに分かれて講演が行われました。
その3つともアーカイブ動画が残っているので、後から見直すことができます。

JSConf.jp Room A

2022/11/26 open / Japan Node.js Association

https://youtu.be favicon https://youtu.be
https://youtu.be OGP image
JSConf.jp Room B

2022/11/26 Open / Japan Node.js Association / Room B

https://youtu.be favicon https://youtu.be
https://youtu.be OGP image
JSConf.jp Room C

2022/11/26 Open / Japan Node.js Association / Room C

https://youtu.be favicon https://youtu.be
https://youtu.be OGP image

講演一覧#

A 10:30-11:00 ブログ系プラットフォームを開発するときの Tips#

ブログサービスを開発するときの戦略とTips
https://catnose-jsconf2022.pages.dev favicon https://catnose-jsconf2022.pages.dev
https://catnose-jsconf2022.pages.dev OGP image

A 11:00-11:30 Optimizing Interaction to Next Paint(INP)#

関連

Optimize long tasks  |  Articles  |  web.dev

You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?

https://web.dev favicon https://web.dev
https://web.dev OGP image
Interaction to Next Paint (INP)  |  Articles  |  web.dev

This post introduces the Interaction to Next Paint (INP) metric and explains how it works, how to measure it, and offers suggestions on how to improve it.

https://web.dev favicon https://web.dev

B 11:00-11:30 フロントエンドエコシステムで効率化する組織開発#

フロントエンドエコシステムで効率化する組織開発

jsconf 2022

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

C 11:00-11:30 フロントエンド開発環境と Next.js への移行計画「ミイダス2.0」のご紹介 by ミイダス株式会社#

  • 登壇者：
    • 永留 友[ミイダス]
    • 堀端[ミイダス]
  • 動画

関連

ミイダスのフロントエンドをNext.jsに移行した背景と課題｜miidas_tech

ミイダスのフロントエンド開発では、これまでReactとReduxを中心に、プロダクトや開発組織フェーズとその変化に対応するため技術選定を進めてきました。 そして2021年からスタートしたNext.jsへの移行計画「ミイダス2.0」プロジェクトの全貌について、フロントエンド開発を担当した後藤と松村、李に話を聞きました。 移行した背景や課題、今後の展望についてご紹介します。 2021年のミイダスのフロントエンド開発環境については以下の記事をご覧ください。 https://note.com/miidas_tech/n/ndabbd910feb5#Xfspo – 自己紹介をお願いします。

https://note.com favicon https://note.com
https://note.com OGP image

A 11:30-12:00 オプショナルチェーンができるまで ～仕様と実装～#

オプショナルチェーンができるまで　〜仕様と実装〜

オプショナルチェーンができるまで 〜仕様と実装〜 Ross Kirsling ロス・カースリング

https://docs.google.com favicon https://docs.google.com
https://docs.google.com OGP image

B 11:30-12:00 宣言的 UI 時代のクライアントサイド DDD 大考察#

宣言的 UI 時代のクライアントサイド DDD 大考察 / Client-side DDD in the Age of Declarative UI

このスライドは、2022/11/26 に開催された「JSConf JP 2022」で発表したものです。 cf. https://jsconf.jp/2022/talk/client-side-ddd-in-the-age-of-declarative-ui-grand-considerations

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

C 11:30-12:00 Wasm 活用によるポータブルなライブラリの実現に向けた Helpfeel 社の取り組み by Helpfeel 株式会社#

Wasm活用によるポータブルなライブラリの実現に向けたHelpfeel社の取り組み - niboshi

Wasm活用によるポータブルなライブラリの実現に向けたHelpfeel社の取り組み.pdf https://drive.google.com/file/d/1E71U2EiZ63WyzQaG8-ZF0IPD1q-3rh29/view JSConf 2022での発表資料です https://youtu.be/ccysINf4qTE?t=5700 発表の様子

https://scrapbox.io favicon https://scrapbox.io
https://scrapbox.io OGP image

A 13:00-13:30 Hono - Ultrafast wen framework for Cloudflare Workers, Deno, Bun, and Node.js#

Hono - Ultrafast web framework for Cloudflare Workers, Deno, Bun, and Node.js

Yusuke Wada 2022.11.26 JSConf JP

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

B 13:00-13:30 Passkey and how works on Google ecosystem#

C 13:00-13:30 自然発生した実装パターンに、マイクロフロントエンドと名がつきました by dwango#

自然発生した実装パターンに、マイクロフロントエンドと名がつきました / JSConf JP 2022
https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

A 13:30-14:00 Reducing bugs in a React codebase#

  • 登壇者：Shyam Swaroop

B 13:30-14:00 Names, and other lies#

C 13:30-14:00 React Query 導入と実装ルールについて考える by 株式会社カオナビ#

JSConf JP 2022 introduce React Query
https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

A 14:15-14:45 About npm: support of Deno#

About `npm:` support of Deno

Deno の復習をしつつ、Deno に新しく入った `npm:` 機能の概要や、開発経緯の話をします。

https://kt3k.github.io favicon https://kt3k.github.io
https://kt3k.github.io OGP image

B 14:15-14:45 Creating Accessible Environments To Help Diverse Participation In Tech#

C 14:15-14:45 30分で挑戦！ Twilio を使った WebRTC ベースのビデオアプリケーション開発者体験とは？ by Twilio Inc#

30分で挑戦! Twilioを使ったWebRTCベースのビデオアプリケーション開発者体験とは？ | ドクセル

ドクセルはスライドやPDFをかんたんに共有できるサイトです

https://www.docswell.com favicon https://www.docswell.com
https://www.docswell.com OGP image

A 14:45-15:15 Secret Shortcuts of Loading Web Performance#

  • 登壇者：Nikola Mitrovic
  • 動画

関連

GitHub - nmitrovic-vega/loading-web-performance

Contribute to nmitrovic-vega/loading-web-performance development by creating an account on GitHub.

https://github.com favicon https://github.com
https://github.com OGP image

B 14:45-15:15 Svelte Runtime 101#

Svelte Runtime 101 (JSConf JP 2022)

これは、仮想DOMを使用しない宣言的UIフレームワークであるSvelteに関するセッションです。 今回は、Svelteコンポーネントがどのようなランタイムになるのかを解説します。このセッションを聞くことで、なぜSvelteランタイムが小さく高速なのかを理解できます。 https://jsconf.jp/2022/talk/svelte-runtime-101

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

C 14:45-15:15 サイボウズフロントエンドマンスリー JSConf.jp 特別編 by サイボウズ株式会社#

イベント情報

Cybozu Frontend Monthly #29

サイボウズのフロントエンドエキスパートチームが月イチでお届けするフロントエンド情報

https://cybozu.github.io favicon https://cybozu.github.io
https://cybozu.github.io OGP image

A 15:30-16:00 JSConfJP Panel Talk#

※元々予定していた登壇者の体調不良により雑談会。

B 15:30-16:00 Remixing Usability with Performance#

JSCONF 🇯🇵 - Remixing Usability with Performance

Remix is a framework revitalises web development by putting progressive enhancement in the front seat. It creates solutions that approximates developers to the platform. It uses Developer Experience as means to enforce web best practices and with that brought the term Optimistic UI back to our daily lives. Let's have a look at what features the Remix offers out-of-the-box to get developers creating high-quality web apps easily and deploying them anywhere that can run JavaScript.

https://slides.com favicon https://slides.com
https://slides.com OGP image

C 15:30-16:00 ハンズオン Native ESM by Wantedly#

Hands-on Native ESM @ JSConf JP 2022

See <a href="https://docs.google.com/presentation/d/1Fl45eSQJnzhh_wKy24ahuyl11aggmhPOvsz1796H4lc/edit">Original version on Google Slides</a> for copy-pasting and links. See <a href="https://github.com/wantedly/hands-on-native-esm-2022">Materials</a>

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image
  • 関連 - ハンズオンリポジトリ
GitHub - wantedly/hands-on-native-esm-2022: Hands-on Native ESM @ JSConf JP 2022

Hands-on Native ESM @ JSConf JP 2022. Contribute to wantedly/hands-on-native-esm-2022 development by creating an account on GitHub.

https://github.com favicon https://github.com
https://github.com OGP image

A 16:00-16:30 What is a Web-interoperable Runtime？#

B 16:00-16:30 Flawless flows - the psychology of harmonious teamwork#

  • 登壇者：Dora Makszy
  • 動画

C 16:00-16:30 Building Offline and Real-Time Applications - The Magic of CRDTs#

Figma

Created with Figma

https://www.figma.com favicon https://www.figma.com
https://www.figma.com OGP image

A 16:45-16:50 コロナ収束後もフルリモート運営を継続するミイダスの働き方 by ミイダス株式会社#

  • 登壇者：永留 友[ミイダス]
  • 動画

関連

コロナ収束後もフルリモート勤務を継続。ミイダス開発チームのリモートに関する取り組みをご紹介します！｜miidas_tech

ミイダスTech Officeです。 コロナ禍に入りあっという間に時間が経ち、フルリモートで働く人も珍しくない世の中になってきました。ミイダスでは2020年12月にコロナ収束後もフルリモート勤務を継続する組織運営に切り替えました。当時の意思決定や導入の様子、振り返りなどは是非以下の記事をご覧ください。 こちらの記事のリリースから半年しか経っていませんが、フルリモートでの働き方に関して現在も様子を見ながら改善を続け、色々なことが変わりました。様々なトライをしてきましたが、やはり未だに予想と違う反響をもらうことも多々あります。ミイダスTechOfficeが実際にやってみて、うまくいきそ

https://note.com favicon https://note.com
https://note.com OGP image

A 16:50-16:55 実装の引き出しを増やすための DOM Event テクニック by Helpfeel#

実装の引き出しを増やすためのDOM Eventテクニック

実装の引き出しを増やすためのDOM Eventテクニック 株式会社Helpfeel 1

https://docs.google.com favicon https://docs.google.com
https://docs.google.com OGP image

A 16:55-17:00 ドワンゴの方から来ました by dwango#

A 17:00-17:05 Safari の input でつまづいた話 by カオナビ株式会社#

  • 登壇者：Ikumi Otani[カオナビ]
  • 動画

A 17:05-17:10 Twilio JSConf JP 2022 Sponsor LT#

  • 登壇者：Daizen Ikehara[Twilio]
  • 動画

関連

Add Programmable Voice Participants to Video Rooms

Learn how to add Programmable Voice callers as participants in video rooms using the TwiML <Room> noun within the <Connect> verb. You can connect inbound calls to your Twilio phone number as well as outgoing calls from your Twilio phone number to video rooms.

https://www.twilio.com favicon https://www.twilio.com

A 17:15-17:20 フロントエンド刷新活動の紹介 by サイボウズ#

フロントエンド刷新活動の紹介
https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

A 17:20-17:25 Wantedly のフロントエンド領域の取り組みと課題 by Wantedly#

Wantedlyのフロントエンド領域の取り組みと課題

JSConf JP 2022 のスポンサー LT で発表したスライドです。 Wantedly のフロントエンドが抱える課題について、直近数年間の取り組みと今後に向けた方針などについて話しました。

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

A 17:40-17:50 JavaScript Testing Framework: Under the Hood#

JavaScript Testing Framework: Under the Hood(JSConfJP2022)

jsconfjp 2022 LT: https://jsconf.jp/2022/talk/javascript-testing-framework-under-the-hood demo: https://github.com/togami2864/jsconfjp2022-demo References: Building a JavaScript Testing Framework: https://cpojer.net/posts/building-a-javascript-testing-framework vitest: https://github.com/vitest-dev/vitest ava: https://github.com/avajs/ava jest: https://github.com/facebook/jest deno_std: https://github.com/denoland/deno_std/tree/main/testing

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

関連

Building a JavaScript Testing Framework

Learn the basics of building a JavaScript testing framework.

https://cpojer.net favicon https://cpojer.net
https://cpojer.net OGP image

デモリポジトリ

GitHub - togami2864/jsconfjp2022-demo

Contribute to togami2864/jsconfjp2022-demo development by creating an account on GitHub.

https://github.com favicon https://github.com
https://github.com OGP image

A 17:50-18:00 Small Tips to use Bun with WebSocket Server and WebAssembly Modules. / Bun と WebSocket Server とオマケの WebAssembly#

  • 登壇者：Masashi GANEKO[インフォコム株式会社]　@massie_g
  • 動画
Small Tips to use Bun with WebSocket Server and WebAssembly Modules

Bun と WebSocket Server とオマケのWebAssembly Slide for JSConf.JP 2022 LT

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

A 18:00-18:10 デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する#

デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する

JSConf JP 2022 https://jsconf.jp/2022/talk/pack-front-end-practices-into-the-design-system-and-redistribute Twitter https://twitter.com/__sakito__

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

A 18:10-18:20 React Fiber Architecture とレスポンス性の向上#

  • 登壇者：noyan[DMM]
  • 動画

A 18:20-18:30 ECMAScript 仕様書を誰でも読めるようにする技術を求めて#

ECMAScript仕様書を誰でも読めるようにする技術を求めて

ECMAScript仕様書を 誰でも読めるようにする 技術を求めて yebis0942 JSConf.jp 2022

https://docs.google.com favicon https://docs.google.com
https://docs.google.com OGP image

A 18:30-19:00 Web Runtime#

Web Runtime

JSConf.jp 2022 の Closing Keynote (typo 等修正版)です https://jsconf.jp/2022/talk/web-runtime 日本語で33分33秒くらいかけてお話ししました https://youtu.be/luiNGMM9ZGU?t=31269

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

その他#

Wantedly さんがブースに来られた方へ物理本を郵送プレゼントしていたハンドブック

Wantedly Engineering Handbook - Wantedly Engineering Handbook
https://docs.wantedly.dev favicon https://docs.wantedly.dev

昨年の開催時は、視聴参加しようとして忘れるという事態でしたが、今年も見事にやらかしました😇
やっぱり忘れないようリマインダーなり仕掛けていたほうがよいですね…。
（最後の方だけ、YouTube Live で見ていました）

今年も YouTube Live 分はアーカイブとして残していただいているようなので、また少しずつ見ていきます。