# JS Nation と React Summit に参加してきた

写真：https://photos.app.goo.gl/mWXiBXHnhq8ddcwg6

## イントロ

6/1 ~ 6/2 にオランダのアムステルダムで開催された [JSNation](https://jsnation.com/) と [React Summit](https://reactsummit.com/) に参加してきました！この記事では、セッションの内容をメインに初めての海外カンファレンス参加の感想を書きたいと思います。

ちなみに参加のきっかけとしては、最近 core contirbutor になった Rome のメンバーの一人が JSNation で登壇するとのことで、その方とリアルで話してみたいというところが大きかったです。

## JSNation (6/1)

### APIs are Evolving. Again.

話の導入は、今までのざっくりとしたアプリケーションのアーキテクチャの振り返り。

Java や PHP ベースのモノリスアプリケーションから、Rails の誕生によって REST API ベースのサービスが普及した。このようなアプリケーションの発展と並行して、開発者体験についても改善が進んでいった。Rails アプリケーションだと、Heroku での git push によってデプロイが行われる体験は画期的だった。

このような改善は、フロントエンドでも起きていて、最近だと Vercel + Next.js の開発が主流になっている。一方で、バックエンドは？

現代だとマイクロサービスや分散システムでの開発が主流だが、マイクロサービス自体は複雑で、ログやトレーシングなど開発体験が良くないことがよくある。

そこで、JavaScriot で開発体験の良いバックエンド開発を提供するプラットホームとして、自身が開発する [plaformatic.dev](https://platformatic.dev/) を紹介していた。plaformatic dev は、Composer、Runtime、Taxnomy の３つの機能が特徴になっている。カンファレンス当日に [$3.5 M の資金調達も発表していた](https://techcrunch.com/2023/06/01/backend-development-platform-platformatic-raises-3-5m/)。

参考：https://papilio.platformatic.dev/launch

### Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch

独自の print 関数や setTimeout 関数を実装してみながら、JS Runtime を理解する発表だった。

JS Runtime で利用できる API の多くは、C++ で書かれたものをバインディング (ブリッジ) しているというざっくりとした処理の流れを説明し、実際のコードの解説をしていた。コードは、C++ で v8 の API を使いながら独自の print 関数や setTimeout 関数を実装したものになっていた。

登壇者は、[node.js v0.0.1 のコード](https://github.com/nodejs/node/tree/v0.0.1)を参考にしたらしい。確かにかなりコードがシンプルで理解するには良さそう。

この登壇内容の元の話は、https://www.youtube.com/watch?v=aR_zxqoeBpQ の動画に対応している。

### The Good, The Bad, and The Web Components

Web Components の機能を紹介しながら良いところ・悪いところを紹介する発表だった。登壇者は [11ty](https://www.11ty.dev/) に関わっている人で、[WebC](https://github.com/11ty/webc) というフレームワークを作るくらいには頑張っている。

話の流れは、design system などが基点となって Web Components は注目を集めているよというイントロから、custom elements、shadow dom、declarative shadow dom、 SSR などの話を展開していた。

概ね内容は自分の理解と近く、良い点だと CSS も含めたカプセル化やUIライブラリ非依存など、悪い点だと layout shift が起きるなどの話をしていた。

ちなみに、各フレームワークの Web Components の対応状況を解説しているサイトがある。(初めて知った)

参考: https://custom-elements-everywhere.com/

### The Core of Turbopack Explained (Live Coding)

Turbo Engine の core がやっている処理、特にモジュールグラフのキャッシュの登録や revalidation 周りを JS でライブコーディングしていく発表だった。

実装自体は、Map でモジュールグラフの計算処理をキャッシュさせるといういかにもなやつだった。ただ、コードの全体像の詳しい説明はなかった & キャッシュのロジックがすごい速さで実装されていくので、ついていくのが大変だった。さすが Webpack の Author という感じ。

### Rome, a Modern Toolchain!

Rome の人にはいくつか質問した。

- 会社はどうなっているの？
- 抜けたから本当にわからない...。連絡もとってない。
- 12 月に給与が払われなくなったのもかなり突然だったらしい。
- 寄付やマネタイズするつもりはある？
- ライセンスが会社にあるので、Open Collective などをやるのは難しい
- 個人の GitHub Sponsor はやっている
- 今 Astro にいるけど、どうやって時間を捻出している？
- OSS として自分のフリータイムを捻出してやっている。
- Rust がめちゃ好きだから続いている。
- 次のロードマップ、今のコアメンバーの人数だと大変そうだけど、どうやっていく？
- 自分は時間がかかってもいいからやっていくつもり
- あとはコアメンバーを増やすための活動 (登壇、Twitterでの発信など) もしていきたい

### Accessible Component System Through Customization

コンポーネントライブラリを作成する上での Tips について紹介している発表だった。

アクセシビリティに関しては、ダイアログやツールチップを例にあげてどのような点に注意するのかを説明していた。カスタマイズに関しては、Props の拡張やコンポーネントの組み合わせでのカスタマイズを紹介していた。(Props を追加しすぎるとデザインシステムの意味がなくなってしまうから気をつけてねとかも) そのほかでは、Storybook を利用したコンポーネントカタログやアクセシビリティガイドラインの作成も重要だと述べていた。

まとめスライドも、社内の UI ライブラリを使っている身としてはすごい共感できる内容だった。

(TODO: 後で画像はる、画像撮り忘れてたので Youtube から持ってくる)

### AI and Web Development: Hype or Reality

ChatGPT や Copilot などの AI ツールを Web 開発に活用する方法についての発表だった。

開発時に使う観点では、ダミーデータやテストケース生成、エラーやコードの内容の説明に使えると紹介していた。Web アプリに組み込む観点では、長文テキストの要約やベクトル検索に応用できる例を紹介していた。

発表の最後の方には、AI によって自分たちの仕事はなくなるの？というおなじみに質問になり、それに対して次のスライドに答えているのが印象的だった。

### Open Source Awards

カンファレンスの主催者の団体が、Open Source Awards というものをやっていたらしくのその表彰が行われた。 どういう投票が行われたのかがよくわかっていないが、「Breakthrough of Year」 には Astro が、「The most exciting use of Technology」 には Web Containers、「Productivity Booster」には Pretty TypeScript Errors など見たことある顔ぶれが選ばれていた。

参考：https://osawards.com/

## React Summit (6/2)

### Reactivity: There and Back Again

TODO: 動画を見て追記する

Signal に代表される最近の reactive なプログラミングの再流行について、過去を振り返りながら説明している発表だった。

jQuery 時代の無秩序な mutable な状態操作から、２つの状態操作の流れができていた。１つは react 方面で、redux / immer などの関数型プログラミングの影響を受けた immutable な状態操作が流行った。もう１つは、Vue 方面で、Mobx などに組み込まれている observable と呼ばれる mutable な状態操作が流行った。しかし、最近だとその２つを組み合わせたものに近い signal が流行り始めている。

この技術の流行のサイクルを「everything old is new again」や「Dogma kills innovation」という言葉で締めていたのが良かった。

### Improving Developer Happiness with AI

登壇者が GitHub の人で、GitHub Copilot について紹介していた発表だった。

まずは、Github が独自におこなった Copilot が開発生産性にどう影響するのかという研究の紹介をしていた。開発生産性を図るフレームワークに SPACE というものがあって、これに基づいた定量的な調査を実施している。

ブログ：https://github.blog/2022-09-07-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/

次に、Copilot chat のデモをしながらスタイリングやテストケース、ドキュメントの作成などのユースケースの紹介をした。デモではいいところだけじゃなくて、悪いところも紹介していて、例えば100%正確な返答が返ってこないことなどを挙げていた。

Copilot はコードを書く負担を減らし、よりエンジニアリングにフォーカスするツールとして一般的になることを期待していると発表では締めていた。

質問では「セキュリティ面にまだ懸念があり、それに対する対応は何かありますか？」みたいな質問もあって、海外も同じ感じなんだなと思ったりした。

### Debugging JS

プログラミングのデバッグのやり方を丁寧に解説したあと、デバッグのツールとしての　replay.io を紹介している発表だった。

デバッグのやり方の原則は次の通り。

- 問題を理解する
- 問題を再現する
- 問題の原因を考える
- 原因を改修するための最善の解決策を考える
- 修正する
- 言語化して PR やコミットメッセージにドキュメントを残す

デバッグはプログラミングやる上では必要になる一方で、あまりやり方を習わないと思うので、この発表は初心者にぜひ見てもらいたいと思った。こういう原則は、難しい問題になればなるほど大切なんだけど、難しい問題になるほどできなくなりがち。「デバッグはコート書くより2倍難しい」という言葉を紹介していて、確かになーとなった。

> Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

発表の後半には、[replay.io](https://www.replay.io/) を使ったアプリケーションのデバッグのデモをやっていた。操作をレコーディングして、アプリケーションの任意の状態でデバッグしたりできるのは画期的。コラボレーションもできるらしく、初心者向けにはかなり良さそう。

### Principles for Scaling Frontend Application Development

TODO: 後で動画見て追記する

Google、Vercel での経験をもとにしたフロントエンド開発をスケールさせるためのベストプラクティスの発表だった。

スケールさせるためには、次の６つのキーポイントがある。

1: 障壁を取り除く →
2: コードを削除しやすくする　→
3: マイグレーションは徐々にやる →
4: 常に改善する
5:
6: システムから複雑性を排除する

### You Can’t Use Hooks Conditionally… or Can You?

最近提案された `use` が conditional に呼び出せるという内容をきっかけにして、conditioal に呼べる hooks と呼べない hooks がなぜあるのかを解説した発表だった。

`use` 以外には、`useContext` も実は conditional に呼べる。（Linterではエラーになるが）

参考：https://twitter.com/acdlite/status/1581401077915975680?s=20

useState に関しては、保持する state をfiber のコンポーネントツリーのノードにアサインしている。一方で、useContext の場合は setState のような更新用関数を持たないためかコンポーネントツリーにはアサインせずに、ツリーと別でデータを管理している。この違いが、conditional に呼べるか呼べないかの違いにつながっているらしい。

### Next.js Metamorphosis

Vercel CEO による Next.js の pages ディレクトリのコードを app ディレクトリのコードに置き換えるライブコーディング。ライブコーディングでは、データ取得のコードとコンポーネントのコードのコロケーションをとても強調していた。

会場でも日本で多くの人が心配している Next.js の pages ディレクトリのサポートの話があったんだけど、 数年単位でサポートはするとのこと。あとは、Facebook 内部でも Next.js のアプリケーションがたくさんあってマイグレーションが大変だから、自動化できないか模索しているところらしい。(本当にいけるの...？)

### Discussions

午後の時間では、有名なエンジニアをよんでディスカッションをやっていたのは面白かった。一般の人も入りやすいように 10 名くらいで話す感じ。少し疲れたのもあり、午後は少しのぞいてみたけど、マイクがなくて声が聞き取りづらいのもあって自分のリスニング力ではあまり理解できなかった。。。（英語頑張ります）

## その他雑記

### 東京 ⇔ アムステルダム の移動

今回は、行きも帰りもトランジットありで行くことになった。あとは、往復で航空会社が違うのもかなり特殊だと思う。(普通は一緒にすると安くなるので)

行き：羽田→ミュンヘン→スキポール (フライト時間：14時間 + 1.5時間)
帰り：スキポール→ヘルシンキ→羽田 (フライト時間：14時間 + 2.5時間)

オランダ航空の直行便が週２回しか出ていなかったりで、カンファレンスの日程にうまく合う便がなかったためこのようになった。ここら辺は、航空便に日程を合わせるくらいが良いと感じた。

ちなみに実際にこれで移動したが、14時間のフライト後は結構しんどかった。。。翌日をカンファレンス日にしていると、時差ボケもあって結構大変だと思う。

### アムステルダム

なんか空港に着いた時から、初めての香りがした。ドイツは、ヘルシンンキやニュージーランドと変わらなかった気がするんだけど、アムステルダムはなんか特殊。甘ったるい匂いがする。そして、都市部に行くともっと変な匂いになっていって、自分は４時間くらい歩くのが限界だった。(気持ち悪くなった)

空港から都市部までは国営の電車で 15 分でいける。市内は地下鉄やトラムがあるのでそれで移動すれば良さそうだけど、夜はあまり治安が良くないらしい。実際一駅分のったんだけど、お金を乞う人に声をかけられた。(他の乗客にもいろいろ声かけてたので、簡単にあしらうことはできたがあんまり経験はしたくない。。。)

気候としては、日が出てないと肌寒くて寒暖差が一日でもかなりある感じがした。あとはサマータイムなので、朝5時くらいから夜の10時くらいまでは明るい。

### カンファレンス

多分、日本人一人もいなかった。会場は、朝ごはんも昼ごはんも出るし、屋台のチケットももらえたので、３食何も準備しなくても食べれる。しかもホテルの朝ご飯より美味しい。

自分の英語は、もう少し頑張りましょうという感じだった。聞き取れる人は半分くらいはわかる、聞き取れない人はほぼわからないといった感じだった。聞き取れる人、聞き取れない人は半分半分くらい。スライドがあるので、全く聞き取れない人でもなんとか理解できる場合も多いが。。。

Rome の人とも話したけど、話している内容が半分くらいはわかる感じなのでたくさん会話するのは厳しかった。(参加前からわかっていて覚悟はできていたけど。。。) とてもいい人だったのもあって実際に体感するとそれなりに悔しい。。。スピーキングも結構聞き返されていたので、距離を近づけるにはもっと喋れないといけないと思いました。

面白かったのは、やはり技術ネタは世界共通だということ。Flash 時代の UI の画像がスライドに出てきて、知っている人〜って聞いていた時は盛り上がっていた。(海外でもインターネット老人会みたいなネタありそう) あとは、`create-next-app` みたいな対話型でテンプレートリポジトリを作るデモにおいて `use TypeScript : no` で進めると、会場で No~~ って声があがったのも面白かった。

カンファレンスの内容としては、sokra さんの発表みたいにかなり技術的に深い話をすることもあるけど、全体的に見ると JS Conf と同じくらいのレベル感だったと個人的には思った。海外だから特別レベルが高い・知らない話が多いとかはなくて、当たり前だけど誰が発表するかによって内容が大きく変わる感じがした。