<p>サイボウズ フロントエンドエキスパートチームの 2022 年の取り組みを紹介します。</p>
<h2>プロダクトへの支援</h2>
<p>プロダクト支援として今年はおもに次の 2 つを行いました。</p>
<ul>
<li>kintone のフロントエンドリアーキテクチャ</li>
<li>サイボウズ製品の販売管理システムのフロントエンド</li>
</ul>
<p>これに加えて現在ほかプロダクトのリアーキテクチャを進めています。また、社内向け翻訳サービスのフロントエンド刷新なども行いました。</p>
<h3>kintone のフロントエンドリアーキテクチャ</h3>
<p>kintone のフロントエンドリアーキテクチャ（フロリア）はゆっくりと着実に置き換えが進められています。フロントエンドエキスパートチームのメンバーのアウトプットとして次のような記事を出しました。</p>
<ul>
<li><a href="https://blog.cybozu.io/entry/2022/03/18/100000">Playwright &#x26; Vite ではじめる脱レガシー向け軽量 Visual Regression Test</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/04/14/110000">kintone の内部を（こっそり）React に置き換えるチームがあるってホント？</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/08/29/110000">実装例から見る React のテストの書き方</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/08/31/110000">新卒で飛び込んだフロントエンド刷新プロジェクトが学びだらけだった話</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/11/14/120000">フロントエンドのテストコードを書くときに大切にしていること</a></li>
</ul>
<p>フロリアのアウトプットでは、記事の構成やレビューなどメンバーがアウトプットしやすいようにサポートする活動も行いました。</p>
<p>エンジニアブログを見てフロリアのことを認知して応募してくれる方もおり、アウトプットによる効果が出てきているように思います。</p>
<h3>サイボウズ製品販売管理システムのフロントエンドリアーキテクチャ</h3>
<p>kintone をはじめとした、サイボウズの製品をお客様が購入する際に使われる「販売管理システム」は、 kintone と同じく Closure で構築された歴史のあるサービスです。</p>
<p>今年はこの販売管理システムの 1 ページのリアーキテクチャが完了しリリースすることができました 🎉 このまま勢いをつけてリアーキテクチャ完了を目指したいと思います。</p>
<h2>Frontend Monthly の開催</h2>
<p>社外への発信として YouTube Live にて月に一回 Frontend Monthly を 生配信・録画で開催しています。今年も月に一回の開催を継続できました。視聴してくれた方、ゲストとして参加して頂いた方々ありがとうございます。</p>
<ul>
<li><a href="https://cybozu.connpass.com/event/236989/">Cybozu Frontend Monthly#19 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/239952/">Cybozu Frontend Monthly#20 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/241837/">Cybozu Frontend Monthly#21 (ゲスト：株式会社ログラス) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/246037/">Cybozu Frontend Monthly#22 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/248124/">Cybozu Frontend Monthly#23 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/250296/">Cybozu Frontend Monthly#24 (ゲスト：LAPRAS 株式会社) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/254325/">Cybozu Frontend Monthly#25 (ゲスト：株式会社 Yuimedi) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/256774/">Cybozu Frontend Monthly#26 (ゲスト：株式会社エイチーム) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/258919/">Cybozu Frontend Monthly#27 (ゲスト：株式会社ナレッジワーク) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/262716/">Cybozu Frontend Monthly#28 (ゲスト：サイボウズ Mantle チーム) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/265151/">Cybozu Frontend Monthly#29 JSConf JP 2022 Special - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/269123/">Cybozu Frontend Monthly Special 2022 - connpass</a></li>
</ul>
<p>おかげさまで開催回数が 30 回まできました。2023 年も継続して開催したいと思います。</p>
<h2>イベントへのスポンサー</h2>
<p>今年は<a href="https://vuefes.jp/2022/">Vue Fes Japan Online 2022</a>への協賛を行いました。</p>
<p>来年も引き続き、コミュニティや場を盛り上げていくのに少しでも協力できればと思います。</p>
<h2>おわりに</h2>
<p>2023 年も引き続き支援活動、発信を続けていきたいと思います。</p>
<p>フロントエンドエキスパートチームではサイボウズのフロントエンドを最高にするメンバーを募集しています。採用サイトからの応募やカジュアル面談などお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>


<p>フロントエンドエキスパートチームでは週に 1 回、最近のフロントエンド情報を見てワイワイする Cybozu Frontend Weekly というイベントを社内で開催しています。</p>
<p>今回は Cybozu Frontend Weekly で 6 月に話題に上がった記事をご紹介します。</p>
<h2>💬 Languages</h2>
<h3><a href="https://nodejs.org/en/blog/announcements/nodejs16-eol/">Bringing forward the End-of-Life Date for Node.js 16 | Node.js</a></h3>
<p>Node.js v16 の EOL が 当初の予定より 7 ヶ月早まり 2023/9/11 になるとのことです。OpenSSL 1.1.1 側の EOL にあわせるのが理由だそうです。</p>
<h2>📖 Framework, Library</h2>
<h3><a href="https://zenn.dev/mugi/articles/334f9556095a07">RedwoodJS を Ruby on Rails と比較してみる</a></h3>
<p>チームの<a href="https://twitter.com/mugi_uno">@mugi_uno</a> が書いた RedwoodJS と Ruby on Rails の比較記事。本人曰く、RedwoodRecord という ORM が Rails の ActiveRecord にかなり近い体験を提供してくれるので感動したらしいです。また、RedwoodJS は RedwoodJS を利用する企業に対してファンドを実施するなど市場拡大に対して精力的なようです。</p>
<h3><a href="https://github.com/eslint/rfcs/pull/91">feat: create "@eslint-community GitHub organization" RFC #91</a></h3>
<p>eslint-community org を作って ESLint に関係あるパッケージのメンテナンスをするという提案が進行しているようです。</p>
<h3><a href="https://tailwindcss.com/blog/2022-05-23-headless-ui-v1-6-tailwind-ui-team-management">Headless UI v1.6, Tailwind UI team management, Tailwind Play improvements, and more</a></h3>
<p>Tailwind CSS のチームが最近行った活動のまとめです。</p>
<ul>
<li>HeadlessUI の 1.6 リリース</li>
<li>VSCode の Tailwind CSS IntelliSense の拡張に Tailwind CSS language mode が追加</li>
<li>Tailwind CSS templates が発表予定</li>
</ul>
<h3><a href="https://github.com/lerna/lerna/releases/tag/v5.0.0"><code>lerna/lerna</code> v5.0.0 Release</a></h3>
<p>Lerna が Nx に委譲されてから初のアップデートです。内部処理が Nx に切り替わリました。</p>
<h3><a href="https://docs.google.com/presentation/d/1tPaimqwJEXinPYifwUvA4gLCI6SezZsViuJvieWGAug/edit">State of Vuenion</a></h3>
<p>Vue Amsterdam での Evan you の発表資料です。</p>
<p>Vue 2.7 の内容や、直近リリース予定の Vue 3.3 での変更内容、エコシステムの状況などに加え、Vue の将来向けに検討されている vue/vapor と呼ばれる新しいコンパイルの仕組みについてなどが紹介されています。</p>
<h3><a href="https://prettier.io/blog/2022/06/14/2.7.0.html">Prettier 2.7</a></h3>
<p><a href="https://twitter.com/PrettierCode/status/1536604535497854977">https://twitter.com/PrettierCode/status/1536604535497854977</a></p>
<p>Prettier 2.7 がリリースされました。
TypeScript 4.7 サポートに加え、高速化のための --cache オプションが追加されたそうです。
チェック高速化に寄与するとのことなので、ぜひ試していきましょう。</p>
<h3><a href="https://twitter.com/kevmodrome/status/1534275183334277121?s=20&#x26;t=Fm2pmMNFKzMqzQTiUtLQSw">Apple Music の新しいサイトで Svelte が採用された</a></h3>
<p><a href="https://bundlescanner.com/website/beta.music.apple.com%2Fus%2Fbrowse/all">https://bundlescanner.com/website/beta.music.apple.com%2Fus%2Fbrowse/all</a><br>
を見ると、Svelte が採用されているのがわかります。</p>
<h3><a href="https://storybook.js.org/blog/component-encyclopedia/">Component Encyclopedia のアップデート</a></h3>
<p>さまざまなプロダクトの Storybook コンポーネントを見れる Component Encyclopedia がアップデートされました。各コンポーネントの検索機能の追加などが追加されています。</p>
<p>fonts や token といった検索を利用することで、 Design token の参考にできたり、デザインシステムやコンポーネントの見せ方、Storybook の Addon 活用方法なども調べることができ、辞書的に活用できるそうです。</p>
<h3><a href="https://astro.build/blog/astro-1-release-update/">Astro 1.0 Release Update | Astro</a></h3>
<p>Astro v1.0.0 のリリースが 7 月下旬ごろになるそうです。パフォーマンス改善や Bugfix などにもう少し時間を費やすとのことです。</p>
<h2>🖥 Browsers</h2>
<h3><a href="https://web.dev/preload-scanner/">Don't fight the browser preload scanner</a></h3>
<p>重要なリソースの発見を遅らせるような処理は preload scanner と相性が悪く、かえってパフォーマンスが落ちることがあるので気をつけようねという記事です。</p>
<p>Frontend Weekly 内では、 preload scanner を邪魔しないためにも SSR のような事前に最適化が施されるような処置をした方が良いのかという議論も。SSR を実施したからといって(lazy load 等の)クライアント側の最適化手法をスキップできるわけではないため、必ずしも SSR をすれば解決できる課題ではないという話をしたりしていました。</p>
<h3><a href="https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/">News from WWDC22: WebKit Features in Safari 16 Beta</a></h3>
<p>Safari 16 Beta がきますという記事。Container Query や Web Push の実装や sub grid、flex box といったレイアウトのインスペクタが追加されるそうです。</p>
<h3><a href="https://deep-space.blue/web/2263">IE11 とさよならしたら全力で使える HTML/CSS まとめ【40 個以上】</a></h3>
<p>IE11 のサポートを考えなかった場合に使えるようになる HTML, CSS のまとめです。position: sticky や object-fit など、必須に近いものが紹介されているので抑えておくと良さそうです。</p>
<h2>📏 Web Standard</h2>
<h3><a href="https://www.mnot.net/blog/2022/06/06/http-core">A New Definition of HTTP</a></h3>
<p>HTTP 関連 RFC がどばっと公開されました。</p>
<ul>
<li>RFC 9110: HTTP Semantics</li>
<li>RFC 9111: HTTP Caching</li>
<li>RFC 9112: HTTP/1.1</li>
<li>RFC 9113: HTTP/2</li>
<li>RFC 9114: HTTP/3</li>
<li>RFC 9163: Expect-CT Extension for HTTP</li>
<li>RFC 9204: QPACK: Field Compression for HTTP/3</li>
<li>RFC 9205: Building Protocols with HTTP</li>
<li>RFC 9209: The Proxy-Status HTTP Response Header Field</li>
<li>RFC 9211: The Cache-Status HTTP Response Header Field</li>
<li>RFC 9213: Targeted HTTP Cache Control</li>
<li>RFC 9218: Extensible Prioritization Scheme for HTTP</li>
<li>RFC 9220: Bootstrapping WebSockets with HTTP/3</li>
<li>RFC 9230: Oblivious DNS over HTTPS</li>
</ul>
<p>各 RFC については<a href="https://blog.jxck.io/entries/2022-06-16/HTTP-RFCs.html">HTTP 関連 RFC が大量に出た話と 3 行まとめ</a>で概要が紹介されています。</p>
<p>なお、RFC 公開を祝い HTTP RFC Publication Study という、
複数人の方で内容のキャッチアップを行うイベントが行われ、その動画が YouTube 上にアーカイブとして残っています。
<a href="https://www.youtube.com/watch?v=_hfG0HCufbs">https://www.youtube.com/watch?v=_hfG0HCufbs</a></p>
<h3><a href="https://zenn.dev/jxck/books/cache-anatomia">Web 技術解体新書「第二章 Cache 解体新書」リリース</a></h3>
<p>Web における Caching の概念を <code>Cache-Control</code> だけでなく関連するあらゆる仕様の側面から解説した Zenn book がリリースされました。</p>
<h2>🎨 Design</h2>
<h3><a href="https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/">The Surprising Truth About Pixels and Accessibility</a></h3>
<p>px と rem/em どっち使う？という話。
フォントは rem 等を使って padding なんかは px でいいよね(場合による)、みたいな話でした。</p>
<p>px と rem のマッピングを良い感じにするために body のフォントサイズに 62.5% を設定するのは良くないよという話が印象的でした。
(1rem はあくまでユーザが読みやすい標準的なサイズにすべきという思想らしいです)</p>
<h3><a href="https://material.io/blog/roboto-flex">Roboto … But Make It Flex</a></h3>
<p>Google Fonts に Roboto Flex という新しい Variable Fonts が追加されました。</p>
<h3><a href="https://web.dev/building-a-button-component/">Building a button component</a></h3>
<p>ダークモード・ライトモードや a11y を意識したボタンコンポーネントの作り方の紹介です。<code>:is</code> を利用した <code>:hover</code>, <code>:focus</code> の一括設定や、 outline-offset を利用したフォーカス時のスタイル制御など、実際にすぐ現場で使えそうな例も多かったです。</p>
<h3><a href="https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/">Customizing Color Fonts on the Web</a></h3>
<p>Safari 15.4 から<code>@font-palette-values</code>がサポートされました。この記事では実際に<code>@font-palette-values</code>を使ってカラーフォントに定義されているパレットを指定する方法や、パレットの色を上書きする方法が紹介されています。</p>
<hr>
<p>nus3 が印象に残っているのは、<a href="https://web.dev/building-a-button-component/#interactive-focus-ring">フォーカスされているボタンのスタイリング</a>の話です。フォーカスされたボタンのインタラクティブなデザインをシンプルな CSS で実装できるのでおすすめです！</p>


<p>サイボウズ フロントエンドエキスパートチームの 2022 年上期（１月〜6 月）の取り組みを紹介します。</p>
<h2>プロダクトへの支援</h2>
<p>プロダクト支援としておもに次の 2 つを行いました。</p>
<ul>
<li>kintone のフロントエンドリアーキテクチャ</li>
<li>サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ</li>
</ul>
<p>これらの支援活動は現在（2022 年 7 月〜）も継続中です。</p>
<h3>kintone のフロントエンドリアーキテクチャ</h3>
<p>kintone のフロントエンドリアーキテクチャプロジェクト、通称フロリアへの支援を昨年から引き続いて行っています。メンバーはプロジェクトのチームに所属する形で支援活動をしています。</p>
<p>フロリアの詳細については次の記事を参照ください。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2021/07/20/170000" style="border: none;"></iframe></div></p>
<p>次の記事はメンバーによる活動のアウトプットです。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2022/03/18/100000" style="border: none;"></iframe></div></p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2022/04/14/110000" style="border: none;"></iframe></div></p>
<p>また、直接的な支援ではありませんが、フロリアプロジェクトでの社外アウトプット（社の技術ブログへの執筆）を支援する活動も行っています。</p>
<h3>サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ</h3>
<p>kintone をはじめとした、サイボウズの製品をお客様に購入していただくときに使われるサービスがあります。</p>
<p>販売管理システムは kintone と同じく Closure で構築された歴史のあるサービスです。このサービスに関しても、継続性の観点からフロントエンドの再構築を進めています。</p>
<h2>社内への情報共有と相談</h2>
<p>社内への Web フロントエンドの情報共有として Frontend Weekly を継続して開催しています。</p>
<p>また、チームの相談窓口に来たほかチームからの相談に対して調査や支援を行っています。</p>
<p>上期には次のような相談がありました。</p>
<ul>
<li>自社で提供している OSS ライブラリの特定フレームワークでの利用方法を説明したドキュメントのレビュー</li>
<li>Jest v28 へのアップデート方法</li>
<li>Dual Package の package を esbuild で利用する際のエラー</li>
<li>コンポーネントのスタイリング方法について教えてほしい</li>
</ul>
<h3>新人研修のコンテンツ作成と講義の実施</h3>
<p>社内向け新人研修のコンテンツとして「サイボウズの Web フロントエンドについて」というタイトルで研修資料を作成し、講義を行いました。</p>
<p>サイボウズ社内の各プロダクトの現状確認とこれから向かう先を、レガシーフロントエンドとモダンフロントエンドの差異を交えながら解説するといった内容になっています。</p>
<p>サイボウズの各プロダクトにはまだまだ課題がある状態ですので、現状を認識してもらったうえで未来に向けてどう解決していくかの足がかりにするとともに、やっていきを高められたかなと思います。</p>
<h3>社内で IE 卒業式を実施</h3>
<p>サイボウズは 2022/06/12 に IE 11 のサポートを終了しました。</p>
<p>公開イベントとして開催された<a href="https://web-study.connpass.com/event/250191/">IE 卒業式</a>の社内版として、チームを問わず社内から IE に関する LT をしてくれるメンバーを募集して LT 会を開催しました。</p>
<p>社内向けならではの IE の思い出話が聞けた有意義な会となりました。</p>
<h2>社外への発信</h2>
<h3>Frontend Monthly</h3>
<p>社外への発信として YouTube Live にて月イチで Frontend Monthly を 生配信・録画で開催しています。</p>
<ul>
<li><a href="https://cybozu.connpass.com/event/236989/">Cybozu Frontend Monthly#19 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/239952/">Cybozu Frontend Monthly#20 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/241837/">Cybozu Frontend Monthly#21 (ゲスト：株式会社ログラス) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/246037/">Cybozu Frontend Monthly#22 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/248124/">Cybozu Frontend Monthly#23 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/250296/">Cybozu Frontend Monthly#24 (ゲスト：LAPRAS 株式会社) - connpass</a></li>
</ul>
<p>ゲストとして参加して頂いた方々ありがとうございました。</p>
<h3>チームのブログ</h3>
<p>また、当ブログにてブラウザの更新情報や ECMAScript の最新動向などを発信しています。</p>
<ul>
<li><a href="https://cybozu.github.io/frontend-expert/posts/turborepo">workspace を使ったコマンドを最適化して実行する Turborepo について</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-firefox-96">CSS color-scheme サポート追加等 Firefox 96.0 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-97">Web Transport のサポートなど、Chrome 97 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2021-12">ECMAScript の最新動向 2021 年 12 月版</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/considerations-for-monorepo">フロントエンドのモノレポ構成はスケーリングの夢を見るか</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-98">COLRv1 font のサポートなど、Chrome 98 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2022-01">ECMAScript の最新動向 2022 年 01 月版</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/css-cascade-layers">主要ブラウザで使える！CSS Cascade Layers で新しい CSS 設計の手法を考える</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-99">CSS Cascasde Layers の追加など、Chrome 99 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-safari-15-4">Safari 15.4 リリースノートまとめ | dialog Element や lazy-loading, CSS Cascade Layers サポートなど</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-101">Chrome 101 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2022-03">ECMAScript の最新動向 2022 年 03 月版</a></li>
</ul>
<h2>探究活動</h2>
<p>フロントエンドエキスパートチームでは支援・発信・啓蒙のほかに探究も業務の一環として行っています。</p>
<p>今年の 4 月からは新たな取り組みとして「フロントエンドお触り会」を実施しています。</p>
<p>この会はメンバーが気になっている技術をワイワイ触ってみる集まりです。不定期に誰かが思い立った日に開催されます。</p>
<p>次のようなものについてワイワイと試していました。</p>
<ul>
<li>Remix</li>
<li>Playwright を使ったコンポーネントテスト</li>
<li>Rome</li>
</ul>
<p>下期はもう少し開催頻度を上げて、いろいろなものを触りたいです。</p>
<h2>おわりに</h2>
<p>2022 年下期も引き続き支援活動、発信を続けていきたいと思います。</p>
<p>フロントエンドエキスパートチームではサイボウズのフロントエンドを最高にするメンバーを募集しています。採用サイトからの応募やカジュアル面談などお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>


<p>この記事は<a href="https://adventar.org/calendars/6823">Cybozu Advent Calendar 2021</a>の 18 日目の記事です（業務なので前日に出してます 🍀）。</p>
<p>サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。</p>
<p>フロントエンドエキスパートチームの今年の取り組みを紹介します。</p>
<h2>フロントエンドエキスパートチームの立ち位置とミッション</h2>
<p>フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。</p>
<p>フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。</p>
<p>日々の活動は次の 4 つの内容を軸に行なっています。</p>
<ul>
<li>支援: プロダクトやチームへの支援</li>
<li>発信: Cybozu やメンバーのプレゼンス向上のための情報発信</li>
<li>啓蒙: 社内メンバーのフロントエンドの技術力向上のための啓蒙活動</li>
<li>探究: プロダクトの可能性を広げるための調査検証</li>
</ul>
<p>これら 4 つを軸に、<code>支援:5</code> <code>発信&#x26;啓蒙:2</code> <code>探究:3</code> の割合を目安にメンバー個々人が裁量を持って活動しています。</p>
<p>チームは今月で 4 歳 2 ヶ月になります。</p>
<h2>活動内容まとめ</h2>
<p>今年は大小さまざまな取り組みを行いました。次のリストはフロントエンドエキスパートチームが行なった今年の活動内容のざっくりとしたまとめです。これらの活動はチームで自発的に始めた取り組みと、相談きっかけで行なったものがあります。割合としては自発的なものが 9 割、相談きっかけが 1 割程度です。</p>
<ul>
<li>プロダクトのフロントエンドリアーキテクチャ支援</li>
<li>プロダクトのマイクロサービス化を検証</li>
<li>プロダクトのライブラリアップデート支援</li>
<li>プロダクトへのフロントエンドのテスト環境整備支援</li>
<li><a href="https://cybozu.github.io/frontend-monthly/">サイボウズフロントエンドマンスリー</a>の開催</li>
<li>登壇
<ul>
<li><a href="https://nodejs.connpass.com/event/221358/">Node 学園 37 時限目 オンライン</a></li>
<li><a href="https://web-study.connpass.com/event/213676/">tc39_study</a></li>
<li><a href="https://jsconf.jp/2021/">JSConf JP 2021</a></li>
</ul>
</li>
<li><a href="https://cybozu.connpass.com/event/212572/">Meetup の開催</a></li>
<li>OSS へのコントリビューション</li>
<li>社内向けフロントエンド研修の開催</li>
<li>フロントエンドウィークリーの開催（社内向け勉強会）</li>
<li>エンジニアインターンの開催</li>
<li><a href="https://blog.cybozu.io/search?q=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%82%AD%E3%82%B9%E3%83%91%E3%83%BC%E3%83%88">エンジニアブログへの記事投稿</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts">チームの web サイトへの記事投稿</a></li>
<li>デザインシステムの探究</li>
</ul>
<p>プロダクトの現状を見て、プロダクトや会社の今後の方向性などを加味した上で、取り組みの内容や注力する割合をコントロールしています。</p>
<p>その中からいくつかをピックアップして詳細を紹介します。</p>
<h2>プロダクトのフロントエンドリアーキテクチャをプロジェクト化するまで</h2>
<p>サイボウズでは現在、kinotne のフロントエンドのリアーキテクチャプロジェクトが進行中です。kintone の脱レガシーの取り組み自体は 2019 年ごろから開始されていましたが、1 つのプロジェクトとして動くようになったのは今年からです。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2021/07/20/170000" style="border: none;"></iframe></div></p>
<h3>少数チームでやれることに限界を感じた</h3>
<p>リアーキテクチャがプロジェクトになる前、kintone の脱レガシーはもともとフロントエンドエキスパートチームが主導・先行する形で調査検討を行っていました。Closure Tools というフレームワークに依存している現状に対して、脱 Closure Tools のロードマップを作成したり、Closure Tools を使い続けた場合の影響と今後の見通しについて社内各所に警鐘を鳴らすとともに、別のフレームワークへの置き換え方法についての PoC などを行なっていました。</p>
<ul>
<li><a href="https://blog.cybozu.io/entry/2020/04/07/110126">フロントエンドの開発体験向上と脱レガシー</a></li>
<li><a href="https://blog.cybozu.io/entry/about-clutz">Closure Library から TypeScript の型定義を生成する</a></li>
<li><a href="https://blog.cybozu.io/entry/2020/06/25/105457">styled-components の採用と既存資産を捨てた理由</a></li>
</ul>
<p>そこから kintone の開発メンバーの一部とともに少しずつ React への置き換えを進めるようになりましたが、リソース的にできる範囲とスピードに課題感を抱えており、このままでは 5 年かかっても完了しないのではないかという不安がありました。</p>
<p>この不安をどうやれば解消できるか、どうすればスピードアップできるかをチーム内で定期的に議論していろんな案を考えていました。</p>
<h3>プロダクトの課題を組織の課題にする</h3>
<p>kintone はサイボウズにとって大事なプロダクトで、そのプロダクトの内部の経年劣化は間違いなく組織にとっても課題です。10 年以上使い続けているフレームワークによる開発は限界に近づいてきていますが、この課題に対しての温度感がフロントエンドエキスパートとその他で大きな差がありました。</p>
<p>プロダクト側からすると新規機能の開発やバグ修正などの優先度が高くなりがちなので、脱レガシーにリソースを注力すると決めるのは難しいことだと理解はできます。また、プロダクトより上の層（サイボウズでは本部長などの経営に近い層）からするとゆっくりながらも進んでいるという事実からか、そこまで危機感は持っていないように感じられました。</p>
<p>そんな状況もあり、フロントエンドエキスパートチームとしては脱レガシーを組織の課題として、トップダウン的な動きで会社として注力する形でやっていきたいと考えました。しかしながらことはそう簡単ではなく、サイボウズは上長やマネージャーがいないという組織構造から、そういった大きな活動を起こすのに気力とコストを大いに必要としました。（現在この課題に対していろいろなトライを実施しており、解消に向かって進んでいます）</p>
<p>フロントエンドエキスパートチームからの問題提起を根気強く続けながら、プロダクトのメンバーや本部長を交えてどういったチーム構成でどうリリースまで持っていくかなどさまざまな議論を重ねました。その結果、リアーキテクチャプロジェクトとして発足するに至り、組織の課題として取り組める状況まで持っていくことができました。</p>
<h2>横断的な支援チームで難しいと感じるところ</h2>
<p>支援チームで活動していく上で何度か感じた難しいところがあります。それは、外側からの働きかけだけではやれることが多くないということです。外側からいくら熱心に働きかけても支援先のプロダクトなりチームなりが自分ごととして動いてくれない限りは、その場限りの活動になりがちで支援の効果も一時的なものになってしまいます。</p>
<p>こういった実感からフロントエンドエキスパートチームでは、短中期で支援先の内部に入って活動するという方法を取ることが多くなりました。その場限りの支援にならないように仕組みを整えたり、初期段階のブースター役としてがっちりプロダクトチームに寄り添そうような形で支援できるように心がけています。支援したい対象はいくつもありますが、焦らずに 1 つずつ集中して解決していくのが支援チームとしてうまく動いていくのには重要だと思います。</p>
<p>また、支援が一方的な押し付けにならないように、関わるメンバーにその支援活動の意味や意義を共感してもらうことに対して手を抜かないことも大事だと感じています。</p>
<h2>継続的な社内啓蒙と社外発信</h2>
<p>啓蒙・発信をチームの取り組みとして行なっています。社内勉強会として Frontend Weekly を、社外イベントとして Cybozu Frontend Monthly を継続して開催しています。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.github.io/frontend-expert/posts/frontendWeekly-And-Monthly" style="border: none;"></iframe></div></p>
<p>どちらも意識しているのは開催のコストを下げることです。司会を交代制にしたり、録画での開催を試したりと、常にコストを下げる工夫を行なっています。その結果、Frontend Weekly は 5 周年、Cybozu Frontend Monthly は 17 ヶ月連続で開催しています。</p>
<p>Cybozu Frontend Monthly は多くの人に視聴してもらえており、中途入社のきっかけになったり、学生への認知向上といった効果も出ています。これからも無理しない範囲で続けていければと思います。</p>
<h3>社外発信のコストと心理的障壁を減らす</h3>
<p>今年はフロントエンドエキスパートチームの web サイト(このサイト)を作成して、そこでの情報発信をはじめました。サイボウズの技術ブログは他にもありますが、あちらはプロダクトでの知見を共有する場という側面が強かったり、ちゃんとしたものをそこそこのボリュームで出さなければという意識が働くといった意見がチーム内で出たりと、若干のハードルを感じる場所になっています。</p>
<p>チームの web サイトであれば、フロントエンドの情報に偏っていても問題なく、プロダクトに依存しない内容を気軽に発信できる場所として機能すると考えました。</p>
<p>記事の執筆は一見コストが高そうですが、フロントエンドエキスパートチームではもともと社内 SNS(kintone)に web の最新情報などを共有する活動を行なっていました。この情報を外向けに少し整える手間さえかければアウトプットが行えるので、記事作成のコストが低めで継続が見込めます。</p>
<p>今年の 10 月にサイトを開設してから 3 ヶ月で記事を 10 本投稿できていることから、今の所うまくいっているように思います。</p>
<h2>おわりに</h2>
<p>2021 年はフロントエンドエキスパートチームとして存在感と価値を発揮できた年だと感じています。地道な草の根活動からプロジェクト化へこぎつけたり、継続的な発信が行えていたりと、エキスパートチームらしい働きができたのかなと思います。</p>
<p>フロントエンドエキスパートチームの活動はチームメンバーだけでなく、プロダクトチームなどの協力があってこその活動も多いです。来年も関係各所と連携を取りつつ、着々と成果が出せるように取り組んで行きたいと思います。</p>
<p>フロントエンドの横断的支援チーム、フロントエンドのリアーキテクチャなどに興味がある方はカジュアル面談、応募をお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-engineer-kintone.html" style="border: none;"></iframe></div></p>


FrontendExpert