フロントエンド刷新 4年間の軌跡

by nus3

Embed

Start on current slide

Slide 1

Slide 1 text

フロントエンド刷新 4年間の軌跡 2026/03/17 LayerX Web Frontend Night

Slide 2

Slide 2 text

nus3（なすさん）

Slide 3

Slide 3 text

今日のテーマは Retrospective Decision 技術的な意思決定が今どうなってるのかを、ふりかえる会

Slide 4

Slide 4 text

ヘイシャ、kintoneでは 2021年末から本格的にフロントエンドの刷新に  取組んでいる

Slide 5

Slide 5 text

フロントエンド刷新を始めてぼちぼち4年はやい..はやいでヤンス

Slide 6

Slide 6 text

この取組に参加していた  ひとりとして

Slide 7

Slide 7 text

kintoneのフロントエンド刷新をふりかえる

Slide 8

Slide 8 text

フロントエンド刷新について

Slide 9

Slide 9 text

フロントエンド刷新について 1チームのみで局所的に行なっていたフロントエンド  刷新を2021年末にプロジェクト化フロントエンドリアーキテクトプロジェクト通称フロリアプロジェクト初期は20人ぐらいが選任で  本格的にフロントエンド刷新を進める合わせてデザインシステムの構築も始まる時を同じくしてnus3がサイボウズに入社

Slide 10

Slide 10 text

フロリアについてプロジェクトメンバーの有志によって作られたフロリアのロゴ

Slide 11

Slide 11 text

フロリアが目指したもの kintoneのフロントエンドを持続可能な状態品質を保ったまま開発を加速し、スケールしやすい  フロントエンド基盤を作る

Slide 12

Slide 12 text

具体的には全てのページをClosureからReact へフロントエンドを巨大なモノリスから  領域（チーム）ごとに分割

Slide 13

Slide 13 text

巨大なコードベースを領域ごとに分割同一リポジトリ内のfrontendディレクトリ配下に  領域（チーム）単位ごとのディレクトリそれぞれの単位でmonorepoを構成

Slide 14

Slide 14 text

フロリアで取り組んだことがどうなったかをれとろすぺくてぃぶしていくカットしていくぅ

Slide 15

Slide 15 text

いくつかの領域で刷新が進む https://jp.kintone.help/k/ja/update/main/2023-02 https://jp.kintone.help/k/ja/update/main/2023-02 https://jp.kintone.help/k/ja/update/main/2023-05 既存仕様を変えないことで、リリースノートに載せずにClosure→Reactに刷新した領域もある

Slide 16

Slide 16 text

フロントエンド刷新の進捗は画面数ベースでいうとリリースしたものが50% 進行中のものが20% 未着手のものが30% 進行中、未着手の画面に関しては刷新後の移行難易度も  踏まえると、いくつか壁は残っている

Slide 17

Slide 17 text

フロリアはどうなったのか

Slide 18

Slide 18 text

プロジェクトからkintone開発全体へ現在では、フロリアでの事例をkintone開発全体へ広げ、  残りの領域の刷新を完了させることを目指しているフロリアに参加していたメンバーが、各開発チームに入り  そのチームの一員となって、フロントエンド刷新を進めるこの体制になったことで、フロリアプロジェクトは終了

Slide 19

Slide 19 text

フロントエンド刷新の nus3のふりかえり主観でヤンス

Slide 20

Slide 20 text

スケールしやすいフロントエンド基盤に領域（チーム）ごとにフロントエンドを分割することで  影響範囲が明確になった認知不可、学習コストは下がったチームに入ってからすぐ開発できるように横断的な支援もやりやすくなったチームごとにオーナーシップを持った技術選定  ライブラリのアップデートが可能に最初は3つだったチームのディレクトリは9つに

Slide 21

Slide 21 text

チーム間のフロントエンド連携良い点 privateなnpmパッケージ iframeでの提供例) ダッシュボード画面で、別領域のウィジェット表示チームの資産（ロジックやUIコンポーネント）は  自チームで管理課題点要件によっては、チーム内のディレクトリに  別チームが実装を追加するケースも

Slide 22

Slide 22 text

現状のmonorepo構成の良い点チーム間で共通で使いたいものを、  npmパッケージとして切りやすい monorepo自体はチーム単位で独立  しているので、他チームの影響を受けない

Slide 23

Slide 23 text

現状のmonorepo構成のこれから npmパッケージとして切りやすいが故に明確なオーナー決めないまま、npmパッケージとして  共通化することで、うまく運用できていないケースも安易な共通化を生みやすいそもそも共通化をするかどうかは各チームの判断に  委ねられている横断で重複を許容すべきか、共通化すべきかの  基準を決めきれてはいない

Slide 24

Slide 24 text

現状のmonorepo構成のこれからチーム体制の変更に合わせた仕組みが整えられていない team-bがteam-xとteam-yに分裂  した時どうする？

Slide 25

Slide 25 text

現状のmonorepo構成のこれから個々のチームでの開発には問題ないが、全チームの  依存関係の解決とビルドを一気にやると時間がかかる

Slide 26

Slide 26 text

現状のmonorepo構成のこれからディレクトリ名はチーム名でよかったのか？オーナーはコード上ではっきりとわかるが領域名の方が変更頻度は低くないか？

Slide 27

Slide 27 text

フロントエンド刷新全体を通して

Slide 28

Slide 28 text

フロントエンド刷新全体を通してプロジェクトとして覚悟を持って進めることで、  結果としてkintone開発全体で進める体制に広がった社内全体が刷新するという同じ方向を向けたデザインシステムの成長によって、kintoneに求められる  デザインやアクセシビリティの品質を保った上で  新しい画面の開発速度はぐんと上がったフロントエンドが好きな新しいメンバー、既存のメンバーの両方がイキイキと活躍できる場が増えた 

Slide 29

Slide 29 text

フロントエンド刷新全体を通して刷新をプロジェクトとして本格的にはじめて、  4年というのは長いただ、kintoneの規模で、新機能開発と共に着実に  進められているとも思ってる完了するために、もう一踏ん張りする必要があるフロントエンド刷新が終わって、ようやくスタートラインよ  って最近Bossにも言われたらしいでヤンス

Slide 30

Slide 30 text

さいごに

Slide 31

Slide 31 text

このフロントエンド刷新は、尊敬する先人たちが作り、  切り拓いてきたことです自分は、その内容に共感し、乗っかり、  ただ踊り続けてただけの人ですフロントエンド刷新完了まで、いいところまできたと思っているのでもうちっとだけ続くんじゃ、してます

Slide 32

Slide 32 text

付録当時の資料や、聞いた話を興じてまとめてしまったスライドたちフロントエンド刷新に至るまでをnus3視点でまとめてるでヤンス

Slide 33

Slide 33 text

kintoneについて

Slide 34

Slide 34 text

kintoneについて 2011年11月に提供開始 https://cybozu.co.jp/company/history/ nus3は、まだ1x歳の時の話だったらしいでヤンス

Slide 35

Slide 35 text

kintoneについて国内外40,000社以上に導入オフィシャルパートナーは500社以上連携サービスは400以上 https://www.docswell.com/s/cybozu-tech/5LV7G7-kintone-product-engineer-information#p11 https://cybozu.dev/ja/kintone/getting-started/what-is-kintone-customize/

Slide 36

Slide 36 text

kintoneのフロントエンドについてここら辺の話は社内の伝聞の伝聞の伝聞でヤンス。もはや言い伝え

Slide 37

Slide 37 text

※kintone開発初期の2010年頃、会場にいる人たちは何をしていたのか聞こうとしていたスライド 2010年って、みなさんは何してました？ nus3は北海道という最北の地で農業・畜産・キノコの勉強してたらしいでヤンス

Slide 38

Slide 38 text

https://website-archive.mozilla.org/www.mozilla.org/firefox_releasenotes/en-us/firefox/3.6/releasenotes/ Firefoxはv3.6 (今はv148) kintoneを開発当初おそらく2010年には開発を開始していたはず.. 2010年の主要ブラウザのバージョンは https://en.wikipedia.org/wiki/Internet_Explorer_version_history IEは2009年にv8（今はサポート終了） https://chromereleases.googleblog.com/2010/01/stable-channel-update_25.html Chromeはv4 （今はv145） Safariはv5（今はv26、v26の前はv18） https://www.apple.com/jp/newsroom/2010/06/07Apple-Releases-Safari-5/

Slide 39

Slide 39 text

kintoneのフロントエンドについて現在の主要なブラウザのバージョンが軒並み1桁台だった  2010年 kintoneでは大規模になるフロントエンドを見据えて  Google Closure Tools を採用

Slide 40

Slide 40 text

Google Closure Toolsとは Googleが提供するJavaScriptツール群 Closure Library（UIライブラリ）は  当時、Googleが開発する大規模プロダクトに採用 https://www.slideshare.net/slideshow/latest-closurecompiler/35613158

Slide 41

Slide 41 text

Google Closure Toolsとは Closure Compiler: コンパイラー（minify） Closure Library : UIライブラリ IEなどブラウザ間の挙動の差異をカバーモジュールシステム Closure Linter JSDocによる型チェック Closure Templates: テンプレートエンジン Closure Stylesheets SassのようなCSSの拡張

Slide 42

Slide 42 text

おそらく順調に続いていたフロントエンド開発だったが、 2015年あたりから徐々に変化が...

Slide 43

Slide 43 text

2015年あたりのフロントエンド UIライブラリとしてReactやVue altJSとしてTypeScript バンドラーとしてwebpack などが徐々に台頭するように 2010年と比べ、npmを中心とするエコシステムが発達 nus3が社会人1年目で畑で土掘ってた時代らしいでヤンス

Slide 44

Slide 44 text

kintone内で高まる刷新の機運 2010年当初は画期的だったClosure Toolsもフロントエンドの大きな変化に合わせて、  フロントエンド刷新の機運がkintone内で高まるコンポーネントを用いた宣言的UI開発との乖離 Closure Toolsの採用事例の少なさ Closure Toolsのアップデートコストの増加

Slide 45

Slide 45 text

kintone内で高まる刷新の機運このままClosure Toolsを使い続けることが  人材の採用、学習コスト、メンテナンス性からも  継続したプロダクト開発を妨げそう

Slide 46

Slide 46 text

Closure→Reactの草の根活動も https://www.slideshare.net/slideshow/google-closure-toolsreact/52541839

Slide 47

Slide 47 text

2019年に1チームが特定領域を Closure → Reactへフロントエンド刷新が開始

Slide 48

Slide 48 text

フロントエンド刷新は始まったんだけども...

Slide 49

Slide 49 text

苦戦するフロントエンド刷新 2021年にはJSはおよそ50万行程度あるぐらいの規模長年続いた開発で、既存実装を把握しつつ行う刷新は  1チームではなかなか進まず Closure→Reactへは、並行して  影響範囲が大きい、技術的に難易度が高いものの  検討も必要 https://cybozu.dev/ja/kintone/getting-started/what-is-kintone-customize/

Slide 50

Slide 50 text

どげんかせんといかん明星チャルメラ宮崎辛麺、辛いけど美味しいでヤンス

Slide 51

Slide 51 text

2021年末に局所的に行なっていたフロントエンド刷新をプロジェクト化ここから冒頭のフロントエンド刷新のスライドに話がつながるでヤンス

Slide 52

Slide 52 text

フロリアについてフロリアがどのような思いで作られたかは、こちらのスライドもぜひ見てください https://speakerdeck.com/koba04/kintonehurontoentoshua-xin-niyorumofalserisukarafalsetuo-que-tosofalsexian-nimu-zhi-suwei-lai

Slide 53

Slide 53 text

Closure Libraryはメンテナンスモードに以下内容を抜粋 Closure Libraryが公開されて14年当初はIE8が登場したばかりで  多くのブラウザ間の挙動の際を  Closure Libraryが吸収していた当時は画期的だったが今では時代遅れに依存関係にはCJS・ESM TypeScriptによる型システムブラウザ間の挙動差異も大幅に抑制 the world has moved on and we believe it no longer needs Closure Library. https://github.com/google/closure-library/issues/1214