JSConfJP 2024
https://gyazo.com/d9a450822700367667220e6e50db2714
https://www.youtube.com/watch?v=ew1zmA7y9q8
https://www.youtube.com/watch?v=2BXwigWGjWQ
https://www.youtube.com/watch?v=E3yTtaGr7V8
https://www.youtube.com/watch?v=5Wt0r5vHOwQ
直近あったTC39 Meetingsで8年を経てStage4にあがった async await の議論が同時進行でそっちが優先
これがあることで勝ちがあるのか？
需要の可視化が困難だった
要約：Promise.tryはPromise不要なthen
仕様は7行でシンプル
類似するライブラリ
2024ではAbortControllerでPromiseをキャンセルできるようになっている
zero configはPoCのとき便利
Storybookはゼロコンフィグを謳ってる
目的を考えて天秤にする
恩恵を逆算する
Storybookを前提としたテストを考えるようになる
テストを分離して考えてみてはどうか？
composeStory
https://gyazo.com/a0221194ed19c3af259da4440e41d631
https://gyazo.com/73d75cf8cc9ab1f89908b0c49bf3c208
https://gyazo.com/468fc35f66e8721a1b9f89ad635bbf18
https://gyazo.com/c004608482771fa703a8fdcbac7076b0
https://gyazo.com/af0474df78a630c51797272150ce5c68
https://gyazo.com/a2204b186a4598baa7b872041ba879f3
https://gyazo.com/e1927ec351d4447b5c487afa754cf805
どこで切り替えても動くようにする
remix-hono-adapterがNode.jsでも動くようになった
なぜ依存を最小にするのか？
動機
プロダクトはフレームワークよりも長寿命
スマートフォンやChromeがない時代
近日くるメジャーバージョンアップ
React 19
React Router v7
フレームワークを切り替えたい
依存しすぎたのでそのままもってこれなかった
よりよい設計を考える
React初心者やらかしなコードが量産された
書き換えを決心する
依存関係を薄くする
見通しが悪くてコードの理解が大変
特にuseEffectが厄介だった
技術選定
依存しないライブラリ
SWR→TanStack Query
Recoil→Jotai
XState→自前実装
薄いフレームワーク
明示的なAPIは参照箇所を追える
規約自体がわるいことではない
レールを外すときにどうなるかを検討できる
設計
依存を最小にする考え方
一休レストランへの実践
hooksにできるかぎりロジックを書かない
コンポーネントは薄く書く
簡易的なDIコンテナをつくる
https://gyazo.com/de285e2c48057fa7d57a7861a77a4428
仮想DOMをやめてネイティブなDOM APIで操作する Intermediate representation（IR）
ポテンシャル
ブラウザ通話
ログインのストレスを減らす取り組み
Q SKIP
そもそもログイン作業
IDプロバイダにアクセス
ID/パスワード入力
144秒かかる
やめることはできない
安全性を捨てることはできない
あまり意識させない
利用者層としてWebに明るくない人がおおい
Conditional UI autocomplete
従来と違うものであることを強く意識させる
まだ使ってない人がいる
どう踏襲していったのか
パスキーログインはあきらかに違うものであることを提供する
うまくログインできなかった場合に問い合わせ対応でパスキー登録を促す
メールでパスキー宣伝する
パスワードマネージャーを使っているかどうかで遷移先を変える
モジュール解決をしているのはどこでやっている？
require
Folders as modulesはレガシー挙動
モジュール解決の話は仕様ではしてない（ホスト依存）
拡張子はかならず書く
import d ,{ n1, n2 } from "./some/module/"
偽物のようなESM
ESMで動いてるけどCJSみたいな動き
https://pbs.twimg.com/media/GdC_8XXasAAOsvH.jpg
import m from "foo.ts"は有用？
Native ESMを書くならOK
--allowImportingTsExtensions
対応するファイルをJSで書き出さない場合有用
あとはバンドラ次第
https://www.youtube.com/watch?v=MocPwUT4UTk
会社都合でチームをシャッフルさせられて会社の意向についていけずに多くの人が辞めた
機種変更したときにいちいちログインしなくても済むようにしたい しかし広まることはなかった
振り返りでアプリとブラウザとで特性が違うことに気付いた App: トップページが起点
Web: 検索から枝葉のところからやってくる
App: セッションが盗まれることはないのでログイン長い
Web: 色々と脆弱性が多いので短め
2要素認証などは安全性は高まるけど利便性は低くなる