こんにちは。サービス開発部の日暮です。 2023年7月某日、弊社Slackに突如こんなメッセージが流れてきました。

新卒2年目でReactの経験も浅いけど行かせてもらえるかな？と思いつつも、応募してみました。 するとなんと、行かせてもらえることになりました！ ということで、11月13日にニューヨークで開催されたReact Summitに現地参加してきました。 今回はその参加レポートをお届けします。

React Summitとは？

Git Nationという団体が主催する、最も規模の大きいReactのカンファレンスです。

Reactのコアチームメンバーや業界のリーダーによる最新のトレンド、技術的な深掘り、UI/UXなど幅広いテーマでセッションが開催されます。

会場はリバティーサイエンスセンターという科学館で行われ、メインセッションルームは日本では中々見ないプラネタリウムを使った資料投影となっていました。

印象に残ったセッション

セッションは後日Git NationのYouTubeチャンネルにて公開されます

Javascript Optional: Modern React Applications That Work Without JS

現在世に出回っているReactで構成されたwebアプリケーションのほとんどが、JavaScriptが有効でない環境では動作しないということに焦点を当てた発表でした。

React Server ComponentsやNext.jsのServer Actionsなどが出てきたことにより、データフェッチや変更をサーバーサイド側で行うことができるようになりました。 これにより、クライアントサイドのjavaScriptの必要性を再評価する必要があるということでした。

具体的にはECサイトを例にあげての説明でした。 例えばカートに商品を追加する機能を作る場合ローカルストレージを使うのではなく、セッションを使ってサーバーサイド側でカートの情報を保持することで、JavaScriptが無効な環境でもカートに商品を追加することができるということを挙げていました。 また、フォームの送信もJavaScriptで行うのではなく、HTMLのformタグ、buttonタグを使って行うことでJavaScriptへの依存を減らせる一例として挙げていました。 その他にも、HTMLとCSSのみでモーダルやポップオーバーを実装する方法などを紹介していました。

JavaScriptを無効にしてのトラフィックはは全体の0.2%程度ですが、JavaScriptに依存している箇所を減らすことでwebパフォーマンスの指標の一つであるTTI(Time to Interactive)の改善にもつながるとのことでした。 JavaScriptのフレームワークやライブラリに頼る前に基本に立ち返ってHTML、CSSだけで実現できること、JavaScriptを使わなければ実現できないことをしっかりと把握しておくことの大切さを強調していました。

私はまだまだジュニアのエンジニアで、React/Next.jsでのプロダクト開発を始めたのもここ3ヶ月のことなので、一旦HTMLとCSSの基礎を学び直してみる必要があるのかなとセッションを聞いて思いました。 「え、これJavaScriptなしでできるの！？」となることが意外とあるかもしれません。

Forget Bad Code, Focus on the System

登壇者は良いコードと悪いコードにこだわるのではなく、システム全体のアーキテクチャに目を向けるべきだと主張していました。 例えば「関心の分離」に関しては以下のようなことを述べていました。 「10年前にjsxがローンチされ、当時はHTMLとJavaScriptを混ぜていることに対して正気か？という声があったものの現在では広く受け入れられていること、CSS in JSでも同様であったことから、技術的な側面よりも、ビジネスドメイン別に関心の分離を行うべきである。」

また、ソフトウェア開発におけるアーキテクチャの複雑さが、開発者の生産性やソフトウェアの品質にどのように影響するかという研究結果を紹介していました。 研究によると、複雑性の高いアーキテクチャのプロジェクトでは、開発者の生産性が50%低下し、バグの発生率が3倍高くなり、離職率が高くなるみたいです。

悪いコードに関しては小さなモジュールに閉じ込めてしまい、それにアクセスするためのインターフェースを綺麗にすることで、利用者が内部の複雑性に影響されないようにしましょうとのことでした。 このようにアーキテクチャがいかに理解しやすく、管理しやすいかが非常に重要であるということを強調していました。

私が担当しているプロダクトではAtomic Designを採用しています。 「どこまでがMoleculeでどこまでがOrganismなのか」といったような議論が発生するというデメリットはあるのですが、コンポーネントの親子関係が明確な点やディレクトリの切り方が明確な点などから、理解も管理もしやすいと感じています。 このセッションを聞いて、設計にかける時間が必然的に増えるAtomic Designを採用した弊プロダクトはいい選択だったのかもと思いました。

全体の感想

Reactに関する話だけではなかった

ReactやReactベースのフレームワークに関するセッションばかりなのかなと思っていましたが、そうでもなかったです。 私が紹介した2つのセッションもそうですが、ソフトウェア開発一般論的なセッションも多く、何から何までチンプンカンプンとはならなかったので少し自信になりました。 他にもAI、Web3に関するセッションもありましたし、キャリアやワークライフバランスについてのセッションもありました。 後日セッションの録画が公開されるので、興味のある方はぜひご覧ください。

事前に色々なフレームワークやライブラリに触れておくとより楽しめる

Reactに関するカンファレンスなので、AstroやRedwoodJSなどのReactベースのフレームワークのコントリビューターが登壇していました。 登壇者の発表後は質問ルームにて、登壇者と直接コミュニケーションを取ることができます。 自分が業務で使っているライブラリやフレームワークのフレームワークのコントリビューターが登壇するとも限らないので、日頃からいろいろなものに触れておくと思いつく質問が増えると思います。

現地参加してみて

現地参加する一番のメリットは、他の参加者との交流ができることだと思います。 学生時代に集中的に英語の学習をしていた時期から4年経過していたので、英語力にはあまり自信がありませんでした。 しかし、私の拙い英語でも、頑張って意図を汲み取ろうとしてくれたり、質問を聞き取れなかったりしたときには、わかりやすい言い回しに変えてくれたりしてくれました。 よほど英語力に自信がある人でないと自分から話しかけにいくのはハードルが高いと思いますが、やはり海外の人はエンジニアであってもフレンドリーで話しかけてくれる人が多かったです。

カンファレンス後のアフターパーティーは現地のレトロゲームが遊べるバーで開催されました。