React Conf 2019に参加した話

はじめに

PDTで10/23 - 10/25に開催されたReact Conf 2019に参加してきたので、その参加レポートです。

筆者の英語力が頼りないため、内容の正確性に保証はありません。また、人名はすべて敬称略です。

ここに書ききれなかった内容については、お会いしたときに酒の肴として聞いてください。

参加した経緯

  • CFP募集してたから応募した
  • 採択されなかったけど、おまけで抽選免除でチケット購入できる案内がきた
  • せっかくだし、自前でチケット買って行くことにした
  • なんやかんやで10/11のTSConfも行くことにした

どうしてこうなったんだろう🤔

ちなみに、時系列的にはUSに3週間弱滞在してたうちの第三部です。

第一部TSConf編と第二部Los Angeles編は近いうちに書きます。

参考リンク

conf.reactjs.org www.youtube.com www.youtube.com

まだ個別の動画は上がってないので、ライブストリーミングの動画です。

0日目

昼頃にホテルについたので、ホテルを散策しつつ、Slackで昼を食べるメンバーを募っていたのでそれに混ざって遅めのお昼を食べました。

この日は、前入りした参加者が夕方からRegistrationとWelcome Receptionということで、軽食をつまみつつ仲良くなるみたいいいな会がありました。裏では、Speaker Dinnerがあったようです。

Welcome Receptionでは、ブラジルから来たReactを今後使おうと考えてる人や、Gatsby, Inc.のメンバーとかMSのSharePointチームのメンバーと話したりしていました。

1日目トーク

Keynote

  • Reactの大事にしてきたこととこれから大事にしていくこと
  • React is a gateway technology
  • concurrent modeとsuspenseのintro
  • Keynoteと1日目のBuilding The New Facebook With React and Relayと2日目のData Fetching With Suspense In Relayはまとめて見たほうが良い
  • ポジショントークもあるとは思うがReact、日本ではむずいと言われて久しいのに真逆の話が出てくるの面白い

Building The New Facebook With React and Relay

  • FBのリニューアルの話
  • stylexによるcss削減がすごい 413kb -> 78kb
  • relayのstream defer module directiveがすごい
  • Frankに質問してみたところ、stylexはPHPとC++とその他いろいろで構築されたbuildシステムと密結合しているので、OSSにする予定はいまのところないらしい
  • RNのStyleSheetのAPIリスペクトなの？って聞いたらそうらしい
  • RNのStyleSheetと統合する予定ある？って聞いたら、ブラウザとスマホアプリでスタイリングの仕方が違うので、いまのところは考えてないらしい

How Our Team Is Using React Native to Save The World

  • OLIOでRNを使ってるよ話
  • RNWもやってる

Using hooks and codegen to bring the benefits of GraphQL to REST APIs

  • GraphQLのschemaからのコード生成をRESTでもやる話
  • 出てくるライブラリがユニークで面白い
  • ライブコーディング
  • TejasがめっちゃTypeScriptが好きなのが伝わってきて良かった
  • TejasにTSConf 2019に行ってきたよって話したら、行きたかったわと言っていた
  • KeynoteでAndersがTS 3.7の新機能の話してたよって言ったら、Optional Chaining!!!って叫び出したので、Nullish Coalescing!!!って応えといた
  • 世界中のTSerが待ち望んでいたことがよく分かった

Building a Custom React Renderer

  • 2018年のKeynoteを担当したSophieのトーク
  • スライドなし、すべてをライブコーディングする圧巻のトーク
  • ReactとReact DOMが分かれている理由が完全に理解できるので、ReactあるいはReact Nativeユーザーは見ることをオススメする
  • これを見て、キミだけのReact Rendererを作ろう！
  • VSCodeの挙動的にVSCodeVimを使ってるので、実質Vimmer（たぶん）

LTs

  • あとで追記

Is React Translated Yet?

  • Reactのドキュメント翻訳PJを主導してたNatのトーク
  • ドキュメント翻訳PJの裏側と過程
  • React teamとNatが何を重視して翻訳PJを進めていったかが聞けた
  • 唐突にVue JSの日本語ドキュメントの仕組みを説明するスライドが日本語のままで出てきたりどでかい文字で「日本語」とか出てきたりするので、目を丸くしていた
  • NatとDanのGitHubアカウントがAPIの叩き過ぎでsuspendされた話はめっちゃ笑った
  • ドキュメントの日本語翻訳にcontributeした人は必見

Building (And Re-Building) the Airbnb Design System

  • Airbnbのデザインシステムの過去現在未来
  • デザインシステムの構築の参考にどうぞ
  • 今までとこれからの対比が面白かった
  • Majaに次のデザインシステムもStorybookに公開する予定ある？と聞いたら、まだデザインシステムそのものを絶賛作り直し中だからわからんけど、ぜひしたいと言ってた
  • Taeに複数プラットフォームのデザインシステムってどうやってるん？って聞いたら、デザインシステム構築にデザインチームと各プラットフォームのエンジニアが入って、基礎から発展させる形でそれぞれのプラットフォーム向けのデザインシステムを構築してるらしい

Accessibility Is A marathon, Not A Sprint

  • どうやってa11yしていくか
  • 便利なツール

The State of React State in 2019

  • State Management、結局どうすりゃいいの話
  • そもそも状態管理って何を解決したいんだっけという話まで戻って、Fluxの話からRender Props、Redux、Hooksまでひとつながりの流れで説明してくれる
  • 状態管理ライブラリに悩んでるユーザーにオススメ

Let's Program Like It's 1999

  • 1日目最後のトーク
  • 1日目のトリなだけに、かなりエモかった
  • 1999年を思い返したい人は見たほうが良い
  • FBの内部とReactとJSXの歴史が窺い知れるトーク
  • PHPの偉大さがよく分かる

1日目アフターパーティ

プールサイドでディナーを食べつつ、色んな人と話をする感じでした。

その後、話を続ける人とボードゲームする人とカラオケする人に分かれて各々楽しんでいたようです。ボードゲームが壁に大量に積まれている様子は圧巻でした。

私は、ボードゲームを英語でやるのに不安しかなかったので、カラオケと話続けるらへんをうろうろしていました。

2日目トーク

React Developer Tooling

  • ReactのDX周りの話
  • Fast Refresh
  • React Dev Toolsのあれこれ
  • codemods
  • 新しいDev Toolsで何ができるかデモを見ると分かりやすい
  • Chrishtophと話したときに、Fast RefreshがReact本体より先にRNで使えるようになってびっくりしたという話をしたら、「私からDanにずっとお願いしてて、彼が見事にやってくれたからね！」っていう話が出てきた

Data Fetching With Suspense In Relay

  • FBのリニューアルでどうやってRelayを使ったか
  • 1日目のBuilding The New Facebook With React and Relayの中では概念説明にとどめていた、Relayに焦点を当てたトーク
  • deferとstream directiveはcoming soon

Automatic Visualization of the Frontend

  • コードの関係性の可視化の話
  • 色んなツールの話があって面白かった
  • データの見せ方のベストプラクティスは他の方面にも応用できると思うので、ぜひ

React Is Fiction

  • Reactでアプリを作るのを文筆になぞらえて説明する話
  • 「Reactは虚構」のタイトルからReactの批判でもするんかと🤔してたら、作り話の方だった
  • 有名な物書きの言葉や、実際の小説の一部（おそらく）を引用して、Reactのベストプラクティスを解説する
  • 良い感じにエモい

Progressive Web Animations

  • ウェブでモバイルアプリみたいなアニメーションをパフォーマンスを気にしつつ作る話
  • ウェブでアニメーションすることを考えてる人は必見
  • DanがTwitterで絶賛してた
  • event.preventDefault()にハマりどころがあるのとか全然知らんかった
  • デモの入れ方がうまくて、分かりやすい

LTs

  • あとで追記

Creating Games, Animations and Interactions with the Wick Editor: A UX Talk

  • Wick Editorというアニメーション作成アプリをどうやって作っていったかという話
  • コードではなくいかにユーザーからフィードバックをもらうかなどプロダクト作りの話
  • あらゆるプロダクトで参考になる部分が多いので、ぜひ

Building React-Select

  • React-Selectの話
  • OSSの楽しいところと辛いところが全部入っている
  • OSS作っている、あるいは使っている人はみんな見たほうが良い

Promoting Transparency in Government Spending with React

Wonder-driven Development: Using React to make a Spaceship

  • https://thoriumsim.comの話
  • 題材が宇宙船シミュレーターという時点でエモい
  • かなりガチで作り込まれていて、いいぞってなった

2日目トーク後

余ったTシャツを欲しい参加者に投げたり、全員で壇上に登って写真を撮ったりした後は完全に流れ解散でした。

5, 6割の人はすぐに帰ってました。

何グループかはアフターパーティとして、夜のラスベガスに繰り出したりしていたようです。私は、ラスベガスでシルク・ドゥ・ソレイユのOを見てきました。

雑感

いろいろな席でいろいろな人と話した感想とか知見とか反省点

  • FBのWebチームはリニューアルでSuspenceとConcurrentモードにかなり苦労したっぽい（だから、suspenceの安定化に時間がかかったらしい）
  • react-nativeもそうだけど、masterをドッグフーディングするFBすごい
  • react-nativeのreleaseマネジメントしてるCallstackのMikeに会って満足した
  • reactチームのManagerやってるChristophとも話せたので満足した
  • react-native-webのNicolausに直接話せたので満足した
  • react-native-domのVincentと写真を取れたので完全に満足した
  • NicolausとVincentの双方に質問したけど、react-native-webとreact-native-domの統合はいまのところ考えられてなさそう
  • 0日目にVim Conf 2018のTシャツを来てたのに、誰も「Are you Vimmer?」って声をかけられなかったので悲しい
  • 1日目はReact Conf Tシャツを着て、2日目はTSConf Tシャツを着ていたので、3日連続でConference Tシャツを着る実績を解除した
  • だいぶReactチームとFacebookの組織構造に詳しくなった
  • Sophie、Nat、Danに話しかけに行けばよかった（チャンスはあったが、チキった結果、逃した）
  • カンファレンスの運営スタッフは紫のTシャツを着ていたが、Reactチームのメンバーが誰も着ていなくて不思議に思い質問したら、運営スタッフはイベント会社の人でReactチームメンバーは当日運営はやってなかった（なので、Reactチームメンバーは普通の参加者として参加してた）
  • 感覚値だが、参加者はUS国内から6,7割、国外から3,4割程度っぽかった
  • 話した中では、国外はカナダ、オーストラリア、ブラジル、イギリスらへんが多かった
  • 日本から参加したってだけで、そこそこ会話になるので助かった
  • TSConfからはしごしてきた人はいなさそうだった
  • 最低限自分の仕事の内容と会社概要は説明できるようにしておいた方が良い（会社概要を説明するときに肝臓とか炎症とか単語が出てこなくて厳しかった）
  • 聞いた中では全額自費で来てるような酔狂な人はおらず、会社から全額補助が出てるかScholarship ticketで来てる人しかいなかった
  • 同じ会社、あるいは同じ団体から複数人来てるパターンがかなり多かった
  • チケット抽選が結構な倍率だったらしく、同僚が何人も応募したけど、自分含め2人ぐらいしか通らなかったというパターンもよく聞いた
  • カンファレンス会場のホテルが取れず、車で10分ぐらいのホテルに泊まっていた人ももいた
  • 「廊下での話」をチキっていたら、行った意味がほとんどないので頑張って話しかけたつもりだけど、それでももっと積極的に行けた気がする
  • USでは、金融系の会社、東海岸のスタートアップはほとんどReactらしく、日本と違って面白い
  • 1対1のコミュニケーションはほぼ問題なくいけるが、複数人の雑談に自然に混ざるのがめっちゃむずい（ほぼ相槌を打つマシーンになっていた）
  • リゾートホテル綺麗
  • React Conference、初参加の人がほとんどだった
  • 自費で行ったら、完全無欠に金欠になった

来年行きたい方へ

CFPを出すといいぞ

最後に

個人的に反省点はいろいろありますが、React ConferenceはReact CommunityとCore teamのメンバーが楽しく集まるお祭りで非常にためになったし面白かったし、伝手もできたしで大満足でした！

Thanks a lot for Speakers, React team, Attendees, Staffs and all others! It was awesome Conference!