Helpfeelの3プロダクトを支えるReact
https://gyazo.com/ce0729fbfc358dbdf92888ec43fd978f
自己紹介
松村 祐貴
社内ではniboshiと呼ばれていますniboshi.icon
Helpfeel(プロダクト)のプロダクトマネージャー
2021年入社
この資料で2021年以前に言及するものは人伝に聞いたり社内ドキュメントを読んだものです
Vueはまったくわかりません
株式会社Helfpeel
3つのプロダクトを開発している会社です
Gyazo
Scrapbox
Helpfeel
Gyazo
https://gyazo.com/a67d40743ae5bf102cd3d6cc76eb575d
情報を知識にするメディアキャプチャー
↑のロゴはGyazoでキャプチャしたロゴですniboshi.icon
Scrapbox
https://gyazo.com/0a3b1b72df828cce1f9170cc816f9ac3
知識を磨き上げるアイディエーションツール
今見ているこのスライドもScrapboxで作っていますniboshi.icon
Helpfeel
https://gyazo.com/b28a4d970be9fdf7fe833446798b5b6f
知識を届けるエンタープライズサーチ
HelpfeelのヘルプサイトもHelpfeelでできていますniboshi.icon
https://nota.gyazo.com/75a5790d4ab2bbe28e59441a45f285d4
全プロダクトでReactを使っています
Helpfeel社のこれまでのReact事情
GyazoとReact
Gyazoのリリースは2007年
当然、この時点ではまだReactは存在しなかった
https://nota.gyazo.com/953c527150229fffd9b9554d06048802
jQueryUI→Angularと変遷を経て、2015年にはじめてReactのコードが入った
Why React?
Why React?
魂が震えたから
2017年ごろの状況
ScrapboxとReact
Scrapboxは最初からReact
ScrapboxとReact(正史)
Scrapboxは最初からReact
いや、私が入社した時点では、実はエディタの中身だけ完全にjQueryでした/shokai/shokai.icon
エディタ以外のnavbarとか設定画面とかはReact
なんとniboshi.icon/akiroom/akix.icon
2015年12月〜2016年6月の間はエディタがjQuery
https://nota.gyazo.com/35f7a646aa29bef3818c637d27f9b94f
エディタ上にインタラクティブなUIを置こうとするとぜんぶjQueryで書くしか無かった
/shokai/shokai.iconが5月に入社
jQueryでバリバリエディタを実装
https://nota.gyazo.com/72fdf82e069b5057b987a84d6dc297e5https://nota.gyazo.com/49bc1a9cb6cb89d7ed7ac1e4ecbfa079
さすが限界を感じ、完全React化したくなる
2016年6月に完全React化
失敗
カーソルの縦棒やテキスト選択範囲を描画する為に、テキストを先に描画して、DOM APIで座標情報を取得しなければならない
コンポーネントのstateに描画済みの別コンポーネントのDOM上の情報が必要
成功
コンポーネントの描画を2回まわす技を開発
HelpfeelとReact
最初からReact
https://nota.gyazo.com/83c12fa09ab350ae8b0037cc783283c2
それ以前はCoffeeScript+JSXで書かれていた
メッセージパッシングによる状態管理フレームワークみたいなのを自作して使っている
ReactのContextに依存していないので、複数のrootが存在しても動く
Helpfeel社の最近のReact事情
最近のGyazo
Providerによるデータ注入
アプリケーション全体で利用するデータ(GyazoにおいてはUserやImage)はProviderで注入されるようになっている
productionとテスト時でそれぞれ適切なデータを注入できて便利
最近のHelpfeel
最初は/rakusai/rakusai.iconが一人で作っていたHelpfeelもおかげさまでいろんな企業で利用いただけるようになり、開発メンバーも増えてきた
課題感
顧客向けの管理画面はMUIを使っていた
シュッと管理画面を作るという細かい調整が難しい
UIデザインも、これまでエンジニアがやっていた
これからメンバーが増えると、人によって細かいスタイリングに差が出てしまったりしそう
半年ほど前にReactもバリバリ書ける凄腕デザイナーの方がjoinしてくれた
社内React UIコンポーネントを整備して、エンジニアのデザインスキルに(あまり)依存せずクオリティの高いUIを提供できるように準備中
Helpfeel社の今後のReact事情
Gyazo, Scrapboxについてはインタビューし忘れていた時間の関係上省略してHelpfeelだけ
今後のHelpfeel
これまでのHelpfeel社のエンジニアはデザイン、フロント、バックエンドを全部やるフルスタックエンジニアが多かった
というか人数も少なかったのでそうならざるを得なかった
今後、Helpfeel開発チームの規模を急速に拡大する予定
これに伴い、開発フローも色々変えていく必要を感じている
変えていく必要がありそうな例
サーバー側のAPI変更にクライアント側で追従するケース
今は一人のエンジニアがサーバもクライアントもまとめて更新してしまうことが多い
これからフロントとバックエンドで分担する可能性を考えると、APIのスキーマ定義が欲しくなる
yamlのメンテは大変
React Server Actions
サーバ側の関数をクライアントから透過的に呼び出せる機能
直接呼び出せるので中間スキーマが不要
一見、Next.jsのようなフレームーワークレベルでの機能に思えるが、React自体に実装されている Server Actions are now in React Canary, ready for frameworks and libraries to adopt! Server Actions are functions created alongside your components that run on the server for tasks like data mutations
https://nota.gyazo.com/ee0f42d96e47c740a3e915bbe19fb1cf
まとめ
Helpfeel社は全プロダクトでReactを活用中！
Gyazoのドロー機能やScrapboxのエディタの様な複雑な機能も、ReactだとCOOLに書けるぞ！
Server Actionsの様な開発体験を劇的に変えそうな機能も控えていて激アツ！
みんなもいますぐReactを書こう！！！！！