( )

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

イベント

リンク集, JSConf JP

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

はじめに#

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

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

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

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

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

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

更新履歴
2023/11/20…スライド追加：12:30 ReactメインのチームにNext.jsを導入した道のり
2023/12/03…スピーカーノートの記事版追加：B 15:30-16:00 書いたJavaScriptがそのままブラウザで動く未来へ

アーカイブ#

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

jsconfjp

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

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

講演一覧#

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#

  • 登壇者：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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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

(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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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 favicon https://jsconfjp-slide.pages.dev

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

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

  • 登壇者：Christoph Nakazawa　@cpojer

関連（これで資料を作っている）

GitHub - nkzw-tech/remdx: Beautiful Minimalist React & MDX Presentations

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

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

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

  • 登壇者：wakamsha[マネーフォワード]　@wakamsha
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記

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

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

関連

ESLint を使って JSDoc / TSDoc の記述を必須化する
https://zenn.dev favicon https://zenn.dev
https://zenn.dev OGP image

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

TypeScriptで型定義を信頼しすぎず「信頼境界線」を設置した話 | ドクセル

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

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

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

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 favicon https://main--remarkable-figolla-a694f0.netlify.app

関連

Next.js App Router 遷移の仕組みと実装
https://zenn.dev favicon https://zenn.dev
https://zenn.dev OGP image

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フロントエンド刷新#

  • 登壇者：Hajime Mugishima[サイボウズ]　@mugi_uno
Next.js App Router での MPA フロントエンド刷新

JSConf JP 2023

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

関連：

サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ

DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の…

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

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

関連

Web Authentication (WebAuthn) Credential and Login Demo

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 favicon https://webauthn.me
https://webauthn.me OGP image

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

Microsoft
https://onedrive.live.com favicon https://onedrive.live.com

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

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

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

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

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

スピーカーノートの記事版

JSConf JP 2023「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
https://zenn.dev favicon https://zenn.dev
https://zenn.dev OGP image

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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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

JSConf2023_vf_en_public

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

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

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

Brick-Block-Anywhere Demo
https://canalun-company-2.deno.dev favicon 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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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

Visually experience the beauty of mathematics with p5.js
https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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

  • 登壇者：木下 博貴[カオナビ]　@kinocoboy2
JSConfjp2023 Storybook駆動開発の再現性と効率化

#jsconfjp #jsconfjp_d

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

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

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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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

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

  • 登壇者：原 剛士[Wantedly]　@chloe463
デザインシステム仕切り直し

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

https://speakerdeck.com favicon https://speakerdeck.com
https://speakerdeck.com OGP image
【JSConf JP 2023】スポンサートークとしてデザインシステム仕切り直しの話をしました | Wantedly Engineer Blog

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

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

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

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

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

関連

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

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

  • 登壇者：須田幹大[Chatwork]

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

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

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

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

Forkwell by 株式会社grooves#

(TokyoDev) by TokyoDev#

  • 登壇者：Paul McMahon[TokyoDev]　@pwim

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

ドワンゴの教育事業の今を知ってもらいに来た 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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

新しい power-assert：

@power-assert/esm

power-assert esm loader. Latest version: 0.1.0, last published: 3 months 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 favicon https://www.npmjs.com
https://www.npmjs.com OGP image
swc-plugin-power-assert

power-assert SWC plugin. Latest version: 0.2.0, last published: 7 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 favicon https://www.npmjs.com
https://www.npmjs.com OGP image

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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

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

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 favicon https://speakerdeck.com
https://speakerdeck.com OGP image

関連

JavaScript なしでインタラクションを追加する Invokers

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

https://azukiazusa.dev favicon https://azukiazusa.dev
https://azukiazusa.dev OGP image

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

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

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

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

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

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

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