2023/11/19

JSConf JP 2023 公開資料・Xアカウントリンクまとめ

イベント

リンク集, JSConf JP

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

はじめに#

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

登壇者名は敬称略させていただいています。

x アカウントについては、以下のように確認できたものを記載しております。

JSConf JP 公式サイトに記載がある
JSConf JP 公式サイトに記載のプロフィールと一致している
当イベントで登壇されることに言及されている
スライドに記載されている

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

Zenn 版ではスライド埋め込みをしているので、そちらの方がさっと見やすいかもです。

アーカイブ#

本イベントは YouTube で配信されていましたが、執筆時点ではトラック A の動画が非公開になっていました。
アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへのリンクのみ記載にしておきます。

jsconfjp

作成した動画を友だち、家族、世界中の人たちと共有

https://www.youtube.com

講演一覧#

A 10:45-11:15 There and back again: A Journey of a JavaScript feature.#

登壇者：Yulia Startsev　@codehag

A 11:25-11:55 Web Internals: Mastering the JavaScript Engine#

登壇者：Anirudh Sharma　@bot_Anirudh

B 11:25-11:55 Deep dive into Biome#

登壇者：Daiki Nishikawa[サイボウズ]　@nissy_dev

Deep dive into Biome in JSConf 2023

The video included in the slides can be accessed here https://web.archive.org/web/20230328125908/https://rome.tools/blog/2022/11/08/rome-10/

https://speakerdeck.com

C 11:25-11:55 LLM全盛時代の開発プラクティス#

登壇者：山下裕一[フライル]　@baseballyama_

(JSConf JP 2023) LLM (大規模言語モデル) 全盛時代の開発プラクティス

このPDFは「LLM全盛時代の開発プラクティス」というタイトルの資料で、baseballyama氏によって作成されました。内容は主に大規模言語モデル（LLM）を活用した開発プラクティスに関するものです。主な内容は以下の通りです： 1. **GitHub Copilotについて**: - Copilotの利用が増え、コード提案を受け入れてから精査する流れが一般的になった。 - インターネット接続がないと利用できないことが難点。 - Copilotは開いているファイルを参考にしてコードを提案し、統一されていないコードは提案の精度を低下させる。 2. **AIツールによる効率化**: - AIレビューツールとFigma to Codeツールについて議論。 - AIレビューツールは一般的なアドバイスに留まり、具体的な自社ルールに基づいたレビューが求められる。 - Figma to Codeでは、自社のデザインシステムに基づいたUIコンポーネントの生成が理想だが、現実では汎用的なコンポーネントが生成される傾向にある。 3. **AIツールの活用法**: - 現実の業務において、AIツールは自社特有のコンテキストを理解する必要があるが、これを達成しているツールは少ない。 - AIは新人のように扱うと理解しやすく、プロセスとデータを明確に教える必要がある。 - レビューワークフローを言語化し、AIツールに適用して、不足している情報を補う。 4. **LLMの実装と結果**: - コーディングルールに基づき、GitHubのプルリクエスト（PR）に対して指摘や改善案を提案する。 - 正しい指摘がある一方で誤った指摘もあり、コーディング規約を日々確認する副次効果がある。 - Vue 3コンポーネントの実装では、Figmaとの往復が減り、作業時間が大幅に短縮された。 5. **実装前のプロセス**: - 作業プロセスと必要なデータを言語化し、単純で工数の大きいプロセスを特定する。 - 静的検査で自動化できない場合は、GitHub Copilotなどの既存ツールで対処し、必要に応じてLLMを活用する。 6. **サービスの成長と将来的な展望**: - OpenAIを中心としたLLMを使用したサービスの成長が著しい。 - 既存製品の活用と、将来的に解決される問題に対しては自作を控えるバランスが必要。 7. **プログラミング実装例**: - Chat GPTに対して具体的な指示と必要なデータを提供し、期待値との差異を確認する。 - 指示とデータを修正し、プログラムを実装して運用を開始する。 - 具体的なコーディング規約違反の例を挙げ、その理由を詳述する。この資料は、AIツールやLLMを活用した開発プラクティスに関する具体的なケーススタディと実装例を提供しており、現代のソフトウェア開発におけるAIの活用方法についての洞察を提供しています。 --- このスライド「LLM全盛時代の開発プラクティス」は、特にAIと大規模言語モデル（LLM）を現代のソフトウェア開発プロセスに統合する方法に関心がある方にとって非常に有用です。以下の点でその有用性が特に際立っています： 1. **現実的なAIツールの評価**: - GitHub Copilotや他のAIレビューツール、Figma to Codeのようなツールの実践的な使用例とその限界についての詳細な分析を提供します。これは、これらのツールを日々の開発プロセスに統合しようと考えている開発者にとって役立つ情報です。 2. **実装の具体例と指針**: - AIを効果的に活用するための具体的なステップと考慮事項を提供し、それによってAIの導入を検討する際の実用的なロードマップを提供します。 3. **プロセスの最適化**: - AIツールの適切な使用による作業時間の削減や効率化の具体例を示しており、これは開発時間とリソースの割り当てについて考える際に非常に有用です。 4. **将来の展望と調整**: - AIとLLMの急速な進化に伴う、既存のツールの選択とカスタムツール開発の間のバランスについての洞察を提供します。これは長期的な戦略計画において重要な考慮事項です。 5. **実際のコード例と実装**: - 実際のコーディング規約違反の例とそれを解決するためのAIの使用例を含めており、具体的な事例を通じて理解を深めるのに役立ちます。

https://speakerdeck.com

A 13:00-13:30 Machine learning with Javascript using Tensorflow.JS#

登壇者：Aileen Villanueva Lecuona　@aileenvl

B 13:00-13:30 Build and Publish in 2023#

登壇者：mizchi[プレイド]　@mizchi

https://jsconfjp-slide.pages.dev/

https://jsconfjp-slide.pages.dev

C 13:00-13:30 Micro frontends in Action!#

登壇者：Peter Eijgermans　@EijgermansPeter

A 13:30-14:00 Game Development with JavaScript#

登壇者：Christoph Nakazawa　@cpojer

Beautiful Minimalist React & MDX Presentations. Contribute to nkzw-tech/remdx development by creating an account on GitHub.

https://github.com

B 13:30-14:00 フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記#

登壇者：wakamsha[マネーフォワード]　@wakamsha

フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記

2023年1月から9月にかけて弊社 BtoB web アプリケーションのリアーキテクチャリングプロジェクトにフロントエンドのシステムアーキテクトとして参画し、技術選定から開発メンバーのスキルトランスファー（育成）、果ては包括的な開発プロセスの改善までと幅広く支援してきました（2023年11月現在も進行中）。そこでの奮闘で得た学びと新たに浮き彫りとなった課題についてご紹介します。

https://speakerdeck.com

関連

ESLint を使って JSDoc / TSDoc の記述を必須化する

https://zenn.dev

C 13:30-14:00 TypeScriptで型定義を信頼しすぎず「信頼境界線」を設置した話#

登壇者：Himenon[ハイヤールー]　@himenoglyph

TypeScriptで型定義を信頼しすぎず「信頼境界線」を設置した話 | ドクセル

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

https://www.docswell.com

A 14:10-14:40 Beyond the Web of Today#

登壇者：Kenneth Rohde Christiansen[Intel]　@kennethrohde

B 14:10-14:40 Next.js App Router クライアントキャッシュの仕組み#

登壇者：akfm_sato[リクルート]　@akfm_sato

https://main--remarkable-figolla-a694f0.netlify.app/1

https://main--remarkable-figolla-a694f0.netlify.app

関連

Next.js App Router 遷移の仕組みと実装

https://zenn.dev

C 14:10-14:40 Building Text Containers in Canvas :)#

登壇者：Aakansha Doshi[Excalidraw]　@aakansha1216

A 14:40-15:10 Trusted Types: DOM XSS Proteciton at Scale#

登壇者：Kian Jamali[Google]　@KianJamali

B 14:40-15:10 Next.js App Router でのMPAフロントエンド刷新#

登壇者：Hajime Mugishima[サイボウズ]　@mugi_uno

Next.js App Router での MPA フロントエンド刷新

JSConf JP 2023

https://speakerdeck.com

C 14:40-15:10 Mastering Cryptography Fundamentals with Node’s crypto module#

登壇者：Yonatan Mevorach[Wix]　@cowchimp

D 14:40-15:10 パスワードレス認証がもたらすユーザー体験の向上と考慮点 by Okta Japan株式会社#

登壇者：池原大然[Okta Japan]　@Neri78

Try the Web Authentication demo to register a credential and login with biometrics. WebAuthn spec enables public key-based credentials for securely authenticating users using hardware authenticators.

https://webauthn.me

A 15:30-16:00 Static Analysis: Shockingly Awesome! ⚡️#

登壇者：Josh Goldberg　@JoshuaKGoldberg

Microsoft

https://onedrive.live.com

B 15:30-16:00 書いたJavaScriptがそのままブラウザで動く未来へ#

登壇者：Sosuke Suzuki[Ubie]　@__sosukesuzuki

（スライドでなくスピーカーノート）

「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート

2023年11月19日開催された JSConf JP 2023 で発表した「書いたJavaScriptがそのままブラウザで動く未来へ」のスピーカーノートです（スライドに対した情報がないので、スピーカーノートをそのまま公開します）。

https://speakerdeck.com

C 15:30-16:00 Hono v3 and v4#

登壇者：Yusuke Wada[Cloudflare]　@yusukebe

Hono v3 and v4

JSConf JP Nov 19, 2023. Yusuke Wada

https://speakerdeck.com

D 15:30-16:00 ChatGPTっぽいUIを実現する技術 by 株式会社Helpfeel#

登壇者：Yudai Nishiyama[Helpfeel]

A 16:00-16:30 Unleash Your Product’s Potential: A Beginner’s Guide to Growth Engineering#

登壇者：Jon Zhang

B 16:00-16:30 Bunがメジャーリリースされたけど、本当にBunはNode.jsに取って代るほどすごいのか？をAWS Lambdaで検証してみた#

登壇者：鈴木正樹[DeNA]　@makky12

Bun がメジャーリリースされたけど、本当にBun はNode.js に取って代わるのか？をAWS Lambda で検証してみた

2023/11/19(日) に開催された、JSConf JP における私のセッション「Bun がメジャーリリースされたけど、本当にBun はNode.js に取って代わるのか？をAWS Lambda で検証してみた」の発表資料になります。 #jsconfjp https://jsconf.jp/2023/

https://speakerdeck.com

C 16:00-16:30 ゲーム「webページ崩し」の仕組み〜あなたの知らないDOMスクリプティングの世界〜#

登壇者：canalun (Kanaru Sato)[Tech Touch]　@i_am_canalun

JSConf2023_vf_en_public

TEARING DOWN 'BRICK-BREAK-ANYWHERE' JOURNEY INTO THE UNCHARTED TERRITORIES OF DOM SCRIPTING

https://docs.google.com

webページ崩しを遊べるデモサイト

Brick-Block-Anywhere Demo

https://canalun-company-2.deno.dev

D 16:00-16:30 Kotlinで書かれたGraphQLサーバーをNode.jsでモジュラモノリス化している話 by ユビー株式会社#

登壇者：外村和仁[Ubie]　@hokaccha

Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話

https://speakerdeck.com

A 16:40-17:10 Let’s expand reality#

登壇者：Vasilika Klimova　@Lik04ka

B 16:40-17:10 PrivacySandboxAPIを使ったブラウザ上での広告オークションについて#

登壇者：Koji Ota[サイバーエージェント]　@k_ota_1990

PrivacySandboxAPIを使ったブラウザ上での広告オークション

多くのブラウザで廃止されつつある3rd party cookieが担っていたユースケースを実現するためにPrivacySandboxというAPI群が実装されています。中でもweb広告のユースケースを実現するために、webブラウザ上で広告オーディションを実行するProtectedAudienceAPIという仕様があります。ブラウザ上での広告オークションの実行はユーザーのPrivacy情報を漏らさないようにauction workletという特殊な環境で実行されますが、auction workletの制約に加えてユーザーのWeb閲覧を妨げない高速なオークションロジックの実行も求められます。本発表ではauction workletが持つ制約のポイントや、auction worklet環境下で開発/テストを行い、高速にオークションを実行するための方法について説明いたします。筆者は2022年から株式会社サイバーエージェント(CyberAgent)にてProtectedAudienceAPIを含めたPrivacySandboxの検証を行なっており、PrivacySandboxAPIの議論を行なっているWICGへフィードバックやIssueを提出したり、tech blogにてPrivacySandboxの記事を執筆したりしています。

https://speakerdeck.com

C 16:40-17:10 Visually experience the beauty of mathematics with p5.js#

登壇者：kkeeth[ゆめみ]　@kuwahara_jsri

Visually experience the beauty of mathematics with p5.js

https://speakerdeck.com

D 16:40-17:10 Storybook駆動開発 UI開発の再現性と効率化 by 株式会社カオナビ#

登壇者：木下博貴[カオナビ]　@kinocoboy2

JSConfjp2023 Storybook駆動開発の再現性と効率化

#jsconfjp #jsconfjp_d

https://speakerdeck.com

A 17:10-17:40 React Server Components: The Back-end Killer?#

登壇者：Ankur Datta[Prisma]　@ankur_datta_007

B 17:10-17:40 Intlの今までとこれから#

登壇者：Ryusei Sajiki[サイボウズ]　@sajikix

Intlの今までとこれから

JSConf JP 2023 : 2023/11/19 - https://jsconf.jp/2023/talk/ryusei-sajiki-1/

https://speakerdeck.com

C 17:10-17:40 Practical guide to building accessible forms in React#

登壇者：Kateryna Porshnieva　@krambertech

D 17:10-17:40 デザインシステム仕切り直し by ウォンテッドリー株式会社#

登壇者：原剛士[Wantedly]　@chloe463

デザインシステム仕切り直し

JSConf JP 2023 のスポンサーセッションで発表した、ウォンテッドリーのデザインシステムについての取り組み・失敗についてのスライドです。

https://speakerdeck.com

【JSConf JP 2023】スポンサートークとしてデザインシステム仕切り直しの話をしました | Wantedly, Inc.

こんにちは！ウォンテッドリーでエンジニア採用を担当している竹内みずきです。本日はリクルート様の九段下オフィスにてJSConf JP 2023に協賛し、オフライン参加致しました。過去2年間はオンラ...

https://www.wantedly.com

A 17:50-18:50 スポンサートーク#

Engineering Handbook by ウォンテッドリー株式会社#

登壇者：原剛士[Wantedly]　@chloe463

https://docs.wantedly.dev

n万行を抱える巨大SPAをGraphQL化していく話 by Chatwork株式会社#

登壇者：須田幹大[Chatwork]

新卒一年目で学んだリモートワークでの仕事の進め方 by 株式会社カオナビ#

登壇者：石塚航基[カオナビ]

登壇者：Hatuki Tosa[プレイド]　@tosa_now

Forkwell by 株式会社grooves#

登壇者：しもおか[grooves]　@moshimoshi_yuki

(TokyoDev) by TokyoDev#

登壇者：Paul McMahon[TokyoDev]　@pwim

HireRoo by 株式会社ハイヤールー#

登壇者：高柴慶人　@yoshi_takashiba

ドワンゴの教育事業の今を知ってもらいに来た by 株式会社ドワンゴ#

登壇者：berlysia[ドワンゴ]　@berlysia

株式会社Helpfeel開発部の紹介 by 株式会社Helpfeel#

登壇者：Pasta-K[Helpfeel]　@pastak

Auth0 by Okata by Okta Japan株式会社#

登壇者：池原大然[Okta Japan]　@Neri78

A 19:00-19:10 Second System Syndrome - the tale of power-assert#

登壇者：和田卓人　@t_wada

Second-System Syndrome: A tale of power-assert

Second-System Syndrome: A tale of power-assert #jsconfjp https://jsconf.jp/2023/

https://speakerdeck.com

新しい power-assert：

@power-assert/esm

power-assert esm loader. Latest version: 0.1.0, last published: 5 days ago. Start using @power-assert/esm in your project by running `npm i @power-assert/esm`. There are no other projects in the npm registry using @power-assert/esm.

https://www.npmjs.com

swc-plugin-power-assert

power-assert SWC plugin. Latest version: 0.1.1, last published: 2 days ago. Start using swc-plugin-power-assert in your project by running `npm i swc-plugin-power-assert`. There are no other projects in the npm registry using swc-plugin-power-assert.

https://www.npmjs.com

A 19:10-19:20 Hope is postponed disappointment#

登壇者：Luca Mugnaini[楽天]　@luca_mug

A 19:20-19:30 The Past and Future of Kuma UI#

登壇者：poteboy[THECOO]　@poteboy

Kuma UIのこれまでとこれから

Discover the journey of how someone with no prior OSS experience built this zero-runtime UI component library, the story behind its creation, its evolution, and the future vision for Kuma UI.

https://speakerdeck.com

A 19:30-19:40 JavaScript なしで動作するモダンなコードの書き方#

登壇者：azukiazusa　@azukiazusa9

JavaScript なしで動作するモダンなコードの書き方

Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HTML のフォームとして振る舞うことでアプリケーションの機能を変わらず提供できます。 React Server Component はサーバー側で HTML に変換されるため、クライアントに JavaScript のコードが配信されることはありません。React Server Component では useState() を使用できないといった制約がありますので、我々開発者は React Server Component の利点を十分に発揮するために、JavaScript を用いた状態管理を行う範囲を狭めることが求められています。このトークでは、CSS の :has() セレクターや、Popover API といった、従来は JavaScript を用いなければ提供できなかった機能を代替する方法を紹介します。

https://speakerdeck.com

Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。

https://azukiazusa.dev

登壇者：やまのく　@yamanoku

画面遷移のアクセシビリティ課題を解決しうる Navigation API への期待

画面遷移のアクセシビリティ課題を解決しうるNavigation APIへの期待 JSConfJP 2023 | 2023-11-19 1

https://docs.google.com

今年はオフライン開催だったので配信はないのかなと思っていたのですが、当日に配信があることを知ったので急遽オンライン参加してました。

今年も気になる講演いっぱいでしたね。
実体験を伴う知見が得られる機会は、とても貴重だ…。
（個人的には、ブロック崩しの裏側の話が終始遊び心が感じられて特に楽しかったです😁）

気になった講演は、資料を読み返して理解を深めていこうと思いますー。

はじめに#

アーカイブ#

講演一覧#

A 10:45-11:15 There and back again: A Journey of a JavaScript feature.#

A 11:25-11:55 Web Internals: Mastering the JavaScript Engine#

B 11:25-11:55 Deep dive into Biome#

C 11:25-11:55 LLM全盛時代の開発プラクティス#

A 13:00-13:30 Machine learning with Javascript using Tensorflow.JS#

B 13:00-13:30 Build and Publish in 2023#

C 13:00-13:30 Micro frontends in Action!#

A 13:30-14:00 Game Development with JavaScript#

B 13:30-14:00 フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記#

C 13:30-14:00 TypeScriptで型定義を信頼しすぎず「信頼境界線」を設置した話#

A 14:10-14:40 Beyond the Web of Today#

B 14:10-14:40 Next.js App Router クライアントキャッシュの仕組み#

C 14:10-14:40 Building Text Containers in Canvas :)#

A 14:40-15:10 Trusted Types: DOM XSS Proteciton at Scale#

B 14:40-15:10 Next.js App Router でのMPAフロントエンド刷新#

C 14:40-15:10 Mastering Cryptography Fundamentals with Node’s crypto module#

D 14:40-15:10 パスワードレス認証がもたらすユーザー体験の向上と考慮点 by Okta Japan株式会社#

A 15:30-16:00 Static Analysis: Shockingly Awesome! ⚡️#

B 15:30-16:00 書いたJavaScriptがそのままブラウザで動く未来へ#

C 15:30-16:00 Hono v3 and v4#

D 15:30-16:00 ChatGPTっぽいUIを実現する技術 by 株式会社Helpfeel#

A 16:00-16:30 Unleash Your Product’s Potential: A Beginner’s Guide to Growth Engineering#

B 16:00-16:30 Bunがメジャーリリースされたけど、本当にBunはNode.jsに取って代るほどすごいのか？をAWS Lambdaで検証してみた#

C 16:00-16:30 ゲーム「webページ崩し」の仕組み〜あなたの知らないDOMスクリプティングの世界〜#

D 16:00-16:30 Kotlinで書かれたGraphQLサーバーをNode.jsでモジュラモノリス化している話 by ユビー株式会社#

A 16:40-17:10 Let’s expand reality#

B 16:40-17:10 PrivacySandboxAPIを使ったブラウザ上での広告オークションについて#

C 16:40-17:10 Visually experience the beauty of mathematics with p5.js#

D 16:40-17:10 Storybook駆動開発 UI開発の再現性と効率化 by 株式会社カオナビ#

A 17:10-17:40 React Server Components: The Back-end Killer?#

B 17:10-17:40 Intlの今までとこれから#

C 17:10-17:40 Practical guide to building accessible forms in React#

D 17:10-17:40 デザインシステム仕切り直し by ウォンテッドリー株式会社#

A 17:50-18:50 スポンサートーク#

Engineering Handbook by ウォンテッドリー株式会社#

n万行を抱える巨大SPAをGraphQL化していく話 by Chatwork株式会社#

新卒一年目で学んだリモートワークでの仕事の進め方 by 株式会社カオナビ#

PLAID JSConf Sponsor LT by 株式会社プレイド#

Forkwell by 株式会社grooves#

(TokyoDev) by TokyoDev#

HireRoo by 株式会社ハイヤールー#

ドワンゴの教育事業の今を知ってもらいに来た by 株式会社ドワンゴ#

株式会社Helpfeel開発部の紹介 by 株式会社Helpfeel#

Auth0 by Okata by Okta Japan株式会社#

A 19:00-19:10 Second System Syndrome - the tale of power-assert#

A 19:10-19:20 Hope is postponed disappointment#

A 19:20-19:30 The Past and Future of Kuma UI#

A 19:30-19:40 JavaScript なしで動作するモダンなコードの書き方#

A 19:40-19:50 画面遷移のアクセシビリティ課題を解決しうる Navigation API への期待#