はじめに
こんにちは！DXビジネス開発部の菅原、亀田です。当社ではReactとNext.jsを活用した開発を積極的に行っており、フロントエンド開発の重要な基盤技術として位置づけています。
3月21日(金)にOPTiM東京本社で開催された、第3回React Tokyo ミートアップにOPTiMから3名で参加しました。
当社エンジニアの高橋による「ClineにNext.jsのプロジェクト改善をお願いしてみた」というLTセッションも行われ、実際の開発現場でのAIツール活用に関する知見を共有させていただきました。
当社のプロダクト開発でもReactを採用し、特にNext.jsを用いたWebアプリケーション開発を進めている私たちにとって、最新のトレンドやベストプラクティスを学ぶ貴重な機会となりました。
本記事では、ミートアップの様子や、私たちが得た知見、そして当社の開発現場にも活かせそうな内容についてレポートします。
React Tokyoについて
React Tokyoは東京を中心にオンラインとオフラインの両方で活動するReactコミュニティで、オンラインではDiscordを通じた情報交換や交流の場を提供されています。 今回のReact Tokyo ミートアップは、React Tokyoコミュニティに参加している方々の親交を深め、Discord（オンライン）上でも活発な交流ができるような土壌作りを目的としたオフラインイベントになっています。
メイントーク
普段、Reactで開発をしていると、レンダリングの仕組みを意識する機会はあまり多くないかもしれません。しかし、Reactの内部でどのようにレンダリングが行われているのかを理解することで、パフォーマンスの最適化やエラーの原因解析がよりスムーズになる可能性があります。
今回のメイントークでは、Reactのレンダリングプロセスを3つの工程に分け、実際のコードを交えながら解説するセッションが行われました。
まず、JSXはBabelによって「React Element」と呼ばれるJavaScriptオブジェクトに変換されます。
次に、ReactはこのReact Elementをもとに「Fiber Tree」を構築します。これは、かつて「仮想DOM」と呼ばれていたものです。
最後に、構築されたFiber Treeを使って、Reactは実際のDOMとの差分を検出し、appendChild のようなDOM操作APIを用いて、必要な部分だけを効率的に更新します。
Reactといえば宣言的なコードが特徴ですが、内部では命令的な処理に変換され、具体的なDOM操作が行われている点がとても興味深く感じられました。コードや図を使って丁寧に内部処理が解説されており、Reactの仕組みをより深く理解する貴重な機会となりました。
グループワーク
参加者が8人ほどのグループを作ってディスカッションを行いました。テーマは「開発にAI活用してる？」です。OPTiMでもAIの活用が盛んに行われており、とてもホットな話題だと思いました。
早くAIが人間の生産性を超えてもらって50ドル程度で雇って働かせたい
AIに対して権限をどのくらい渡して良いかが課題となっている
今後AIに実装を任せて人間がレビューをするようになると、楽しい部分がAIに取られてしまう
新卒のAIの使い方（禁止するのはではなく、適切な使用方法を考える必要がある）
社内で使用するアプリをAIに作ってもらって業務効率を行なっている
ブラウザで様々な座標系を組み合わせるためのアルゴリズムをAIに聞く
テーマ以外にも興味深いお話ができました。
仮想DOMではDOMだと勘違いされるからFiberと呼ばれるようになったのか（予想の理由）
FiberはReact Nativeでも使用される共通の仕組みであり、NativeはDOMを使用していないから（本当の理由）
Web開発者にとっては仮想DOMという説明がわかりやすいので今でも使ってしまう
LT
View Transition API
DOM要素に対してアニメーションによる遷移を実現するためのAPIであるView Transition APIについて、サンプルを交えながら解説するセッションでした。
View Transition APIはブラウザ側が対応していれば標準で利用可能です。2025年3月の段階ではFirefox以外の主要なブラウザではサポートされているみたいです。また、最近ReactでもこのAPIを活用したViewTransitionコンポーネントとして取り込まれているため、そちらを使うことで簡単に実装に組み込めそうです。
LT内ではReactベースで簡単な使い方も説明されていました。遷移させたい要素をViewTransitionコンポーネントで囲み、アニメーションを定義したCSSクラスを追加するだけで簡単に要素に動きをつけることができていました。サンプルコードを見る限り、アニメーション開始時と終了時の状態(位置や角度、大きさなど)だけを定義しておけば、開始〜終了までの間はView Transition APIがいい感じにやってくれるのかなという印象でした。
また、onEnterやonExitなど「こういう場面でアニメーションをつけたい」という需要には大体対応できそうなのが嬉しいですね。
これまでフロントエンド実装の中で、あまり自分でアニメーションを付けることがなかったため、このような選択肢があることを知ることができ、参考になるセッションでした。個人的には是非ともFirefoxでも使えるようになってほしいと思います。
create-tsrouter-appで実現する次世代React SPA
speakerdeck.com create-react-app(CRA)が非推奨になったのは記憶に新しいと思います。そんなCRAの後継であるcreate-tsrouter-app(CTA)を使ったSPAアプリケーション構築を紹介するセッションでした。
CTAはCRAの使い勝手を維持しつつ、ViteとTanStack Routerで再構築されています。viteを使うことで高速なビルドを実現しており開発体験の高さが魅力に感じました。言語はTypeScript、ルーティングにはTanstack Routerを採用しており、最新の設定がされた状態ですぐに使い始めることができます。導入の障壁が低く、スピード感を持って開発ができそうです。
さらにCLIによるオプションが提供されておりコマンドを叩くだけで、例えばtailwindcssなどの導入が簡単に行えます。
Biomeのような最新のリンターツールにも対応されているということで、モダンな印象を受けました。
create-viteだけでは実現できなかった面倒な設定周りが自動で行われ、すぐに開発を始められる点はとても魅力的に感じました。アプリケーションの規模やチームメンバーによってはcreate-tsrouter-appを採用することでスムーズに開発が進められそうだと感じました。
ClineにNext.jsのプロジェクト改善をお願いしてみた
speakerdeck.com 当社エンジニアの高橋による本セッションでは、最近話題のAIアシスタントであるClineを用いて、既存のNext.jsプロジェクトの改善を試みる実践的な取り組みが紹介されました。Clineを活用することでプロダクトの「安い・早い・美味い」を実現できるのではないか、でもいきなり全部任せるのはリスクが高い・・・ということで、実際にどのぐらい活用できるのかを体験するべく、様々な検証が行われていました。
検証ではClineの設定ファイルを作成させるところから始まり、コンポーネント単位での改修、画面単位での改修と徐々に規模を大きくしていく形で検証されていました。結果としてはコンポーネント単位での改修やテスト作成などはうまくいき、画面単位など大きなコンテキストではなかなかうまくいかないという結論でした。範囲が大きくなると扱うべき情報も増えていくため、まだ全てを処理するのは難しそうですね。
最後には今回の検証で使用した金額も紹介されていたのですが、個人で試すには少し勇気のいる金額でした。とはいえ業務で実装したコンポーネントをリファクタリングしたいという気持ちもありますので、これから業務で使えるようになってくれたらありがたいなと思いました。
自由交流
おわりに
Reactの内部処理から最新機能、AIの活用までどれも学びがあり、とても楽しかったです！ 第3回の参加者は40人でしたが、次回の第4回は80人の過去最高規模での開催になります。この記事の公開時点ではすでに第4回の応募は終了していますが、Discordに参加して第5回に備えましょう！ discord.com
自由交流ではオプティム自慢のスマート米を参加者の皆様に提供させていただき、技術的な交流だけでなく、当社の事業についても知っていただく良い機会となりました。
今回のReact Tokyoへの参加を通じて、多くの新しい知識を得ることができました。今後もReact Tokyoのイベントに積極的に参加し、ReactやNext.jsの知見を深めていきたいと思います。
OPTiMでは、ReactやNext.jsを利用したアプリケーション開発しています。ご興味のある方は、ぜひ一度ご連絡ください。
