<p>こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの <a href="https://twitter.com/mugi_uno" target="_blank" rel="nofollow noopener noreferrer">@mugi_uno</a> です。</p>
<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。</p>
<p>今回は、2023/02/14 の Frontend Weekly で取り上げた記事や話題を紹介します。</p>
<h1 id="%E5%8F%96%E3%82%8A%E4%B8%8A%E3%81%92%E3%81%9F%E8%A8%98%E4%BA%8B%E3%83%BB%E8%A9%B1%E9%A1%8C">
<a class="header-anchor-link" href="#%E5%8F%96%E3%82%8A%E4%B8%8A%E3%81%92%E3%81%9F%E8%A8%98%E4%BA%8B%E3%83%BB%E8%A9%B1%E9%A1%8C" aria-hidden="true"></a> 取り上げた記事・話題</h1>
<h2 id="vercel-meetup-%230-with-ceo">
<a class="header-anchor-link" href="#vercel-meetup-%230-with-ceo" aria-hidden="true"></a> Vercel Meetup #0 with CEO</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d0bb7c6e5876c" src="https://embed.zenn.studio/card#zenn-embedded__d0bb7c6e5876c" data-content="https%3A%2F%2Fvercel.connpass.com%2Fevent%2F274772%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vercel.connpass.com/event/274772/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vercel.connpass.com/event/274772/</a></p>
<p>Vercel User Community によるオフライン meetup が開催されます。オンライン視聴も可能なようです。</p>
<p>Vercel CEO の Guillermo Rauch 氏が来日・参加されるとのことで、なかなかに貴重な機会になりそうです。</p>
<h2 id="vue-fes-japan-2023-%E3%82%92%E4%B8%80%E7%B7%92%E3%81%AB%E4%BD%9C%E3%82%8A%E4%B8%8A%E3%81%92%E3%82%8B%E3%82%B3%E3%82%A2%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95%E3%82%92%E5%8B%9F%E9%9B%86%E3%81%97%E3%81%BE%E3%81%99%EF%BC%81">
<a class="header-anchor-link" href="#vue-fes-japan-2023-%E3%82%92%E4%B8%80%E7%B7%92%E3%81%AB%E4%BD%9C%E3%82%8A%E4%B8%8A%E3%81%92%E3%82%8B%E3%82%B3%E3%82%A2%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95%E3%82%92%E5%8B%9F%E9%9B%86%E3%81%97%E3%81%BE%E3%81%99%EF%BC%81" aria-hidden="true"></a> Vue Fes Japan 2023 を一緒に作り上げるコアスタッフを募集します！</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ea40b8d0c542c" src="https://embed.zenn.studio/card#zenn-embedded__ea40b8d0c542c" data-content="https%3A%2F%2Fnote.com%2F448jp%2Fn%2Fnc7d8b591d557" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://note.com/448jp/n/nc7d8b591d557" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://note.com/448jp/n/nc7d8b591d557</a></p>
<p>Vue.js の国内カンファレンスである Vue Fes Japan 2023 について、オフライン開催を予定している旨と、コアスタッフの募集についてのお知らせです。</p>
<p>イベント自体は 2023/10/28(土) の開催とのことです。</p>
<p>社内では「オフラインでのイベント・カンファレンスでのスタッフ経験は、人との繋がりを持つきっかけにもなって良いですよ！」という話もしていました。</p>
<h2 id="a-business-case-for-sveltekit">
<a class="header-anchor-link" href="#a-business-case-for-sveltekit" aria-hidden="true"></a> A Business Case for SvelteKit</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7448ea9d6666c" src="https://embed.zenn.studio/card#zenn-embedded__7448ea9d6666c" data-content="https%3A%2F%2Felliscs.hashnode.dev%2Fa-business-case-for-sveltekit" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://elliscs.hashnode.dev/a-business-case-for-sveltekit" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://elliscs.hashnode.dev/a-business-case-for-sveltekit</a></p>
<p>Meteor.js を使ったフルスタックなアプリケーションを SvelteKit に移行した事例紹介記事です。</p>
<p>アプリケーションの成長と共に Meteor.js でのビルド時間がかかるようになり、すでに他プロジェクトで利用していた SvelteKit への移行について何を検討したのかと、実際にどうやって導入したのかが説明されています。事前検証には大きく時間を費やしたようですが、実作業は 2.2 週間で終わり、結果としてビルド時間が 1/30、開発時の起動も 1/20 に短縮されたそうです。また、パフォーマンスでの向上も見られたとのことでした。</p>
<p>技術的な話だけではなく、SvelteKit への移行に踏み切るにあたり、ビジネス上どういったインパクトがあるかを KPI として設定したことなどにも触れられてます。</p>
<h2 id="%E3%80%8Ci'm-joining-vercel!-i'm-a-longtime-admirer-of-the-people-and-their-work.-i-can't-wait-to-get-started.%E3%80%8D">
<a class="header-anchor-link" href="#%E3%80%8Ci'm-joining-vercel!-i'm-a-longtime-admirer-of-the-people-and-their-work.-i-can't-wait-to-get-started.%E3%80%8D" aria-hidden="true"></a> 「I'm joining Vercel! I'm a longtime admirer of the people and their work. I can't wait to get started.」</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__09ad872f4b34f" src="https://embed.zenn.studio/tweet#zenn-embedded__09ad872f4b34f" data-content="https%3A%2F%2Ftwitter.com%2Facdlite%2Fstatus%2F1623353741750546439" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/acdlite/status/1623353741750546439" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/acdlite/status/1623353741750546439</a></p>
<p>React.js のコアチームメンバーである Andrew Clark 氏 (<a href="https://twitter.com/acdlite" target="_blank" rel="nofollow noopener noreferrer">@acdlite</a>) が、Vercel に入社したとのことです。</p>
<p>引き続き OSS を通じて React チームには所属し、60%は従来通りの作業をしつつ、残りの 40%で Next.js など Vercel に関する作業に取り組むとのことです。</p>
<p>社内からは、「Meta 社と Vercel 社の関係性はどういう感じなんだろう？」という疑問が出ていました。</p>
<h2 id="%E3%83%A4%E3%83%95%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E5%85%B1%E9%80%9A%E9%85%8D%E4%BF%A1%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#%E3%83%A4%E3%83%95%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E5%85%B1%E9%80%9A%E9%85%8D%E4%BF%A1%E6%8A%80%E8%A1%93" aria-hidden="true"></a> ヤフーショッピングのフロントエンドを支える共通配信技術</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7c2dda0391128" src="https://embed.zenn.studio/card#zenn-embedded__7c2dda0391128" data-content="https%3A%2F%2Ftechblog.yahoo.co.jp%2Fentry%2F2023020830411464%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://techblog.yahoo.co.jp/entry/2023020830411464/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://techblog.yahoo.co.jp/entry/2023020830411464/</a></p>
<p>ヤフーショッピングにおける、共通 UI 配信システム「Ptah」が誕生するまでの経緯と、具体的な実装まで踏み込んだ記事です。マイクロフロントエンドを採用し、かつ Custom Elements で React を Wrap して実現したとのことです。サイボウズ社内でも<a href="https://blog.cybozu.io/entry/2022/12/21/110000" target="_blank" rel="nofollow noopener noreferrer">マイクロフロントエンドを実践</a>しており、レイアウトシフトなど、同じような課題感に納得する声が挙がっていました。</p>
<h2 id="react.js%3A-the-documentary">
<a class="header-anchor-link" href="#react.js%3A-the-documentary" aria-hidden="true"></a> React.js: The Documentary</h2>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/8pDqJVdNa44" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=8pDqJVdNa44" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=8pDqJVdNa44</a></p>
<p>React.js 公式による、React.js のドキュメンタリームービーが公開されました。誕生の経緯や辿ってきた歴史などを、メンテナなど内部のメンバーの心情を交えつつ追いかけることができます。</p>
<p>動画内では React 登場時には JSX に対して利用者から強く拒否感を持たれていたことにも言及しており、社内でも当時を振り返った話題になりました。</p>
<h2 id="what's-new-in-lighthouse-10">
<a class="header-anchor-link" href="#what's-new-in-lighthouse-10" aria-hidden="true"></a> What's new in Lighthouse 10</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cd583371b0a9" src="https://embed.zenn.studio/card#zenn-embedded__cd583371b0a9" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fen%2Fblog%2Flighthouse-10-0%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/en/blog/lighthouse-10-0/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/en/blog/lighthouse-10-0/</a></p>
<p>Web サイトのパフォーマンス計測ツールである Lighthouse の新しいバージョンである Lighthouse 10 に関しての記事です。Google Chrome では 112 以降で利用可能となる予定とのことです。</p>
<p>大きい変更点として、スコアの基準から TTI(Time To Interactive)が外され、代わりに CLS(Cumulative Layout Shift)のウェイトが大きくなります。</p>
<p>TTI はアクティブなネットワークの数などに大きく影響を受けてしまい、実際にページのコンテンツが読み込まれているかの指標としては最適ではなくなったようです。<br>
アイランドアーキテクチャなどの登場により、コンテンツの配信・描画方法が変化しているのも影響しているかもしれません。</p>
<p>他にも、ブラウザの戻る・進む操作が適切にキャッシュから表示できるかや、ペースト操作の抑制が含まれていないかなども監査対象になりました。</p>
<h2 id="shadcn%2Fui">
<a class="header-anchor-link" href="#shadcn%2Fui" aria-hidden="true"></a> shadcn/ui</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__efc614bd674a8" src="https://embed.zenn.studio/card#zenn-embedded__efc614bd674a8" data-content="https%3A%2F%2Fgithub.com%2Fshadcn%2Fui" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/shadcn/ui" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/shadcn/ui</a></p>
<p>ヘッドレスな UI コンポーネントライブラリである <a href="https://www.radix-ui.com/" target="_blank" rel="nofollow noopener noreferrer">Radix</a> と TailwindCSS を組み合わせたコンポーネント集です。</p>
<p>パッケージなどで配布されているわけではなく、コードサンプルとして公開されています。</p>
<p>頻繁に登場しそうなコンポーネントは一通り網羅されており、役立つケースは実際にありそうです。</p>
<p>ただ、利用する場合には Radix と TailwindCSS の更新にどの程度追従されていくのかは注意が必要かもしれない、との声もありました。</p>
<h2 id="stc-%3A-roadmap-to-the-alpha">
<a class="header-anchor-link" href="#stc-%3A-roadmap-to-the-alpha" aria-hidden="true"></a> stc : Roadmap to the alpha</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d0bcabe4453ab" src="https://embed.zenn.studio/card#zenn-embedded__d0bcabe4453ab" data-content="https%3A%2F%2Fstc.dudy.dev%2Fdocs%2Froadmap" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://stc.dudy.dev/docs/roadmap" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://stc.dudy.dev/docs/roadmap</a></p>
<p>Rust で開発中の TypeScript タイプチェッカーである stc のロードマップが公開されました。</p>
<p>「型の推論が正しく行われる」「誤検知 (false-positive）がない」「正しく型定義をロードできる」の３点が達成された時点で α 版の language server を公開する予定とのことです。</p>
<h2 id="design-patterns-in-typescript">
<a class="header-anchor-link" href="#design-patterns-in-typescript" aria-hidden="true"></a> Design Patterns in TypeScript</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__efee39a12932e" src="https://embed.zenn.studio/card#zenn-embedded__efee39a12932e" data-content="https%3A%2F%2Frefactoring.guru%2Fdesign-patterns%2Ftypescript" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://refactoring.guru/design-patterns/typescript" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://refactoring.guru/design-patterns/typescript</a></p>
<p>TypeScript でのデザインパターンのサンプル集です。</p>
<p>Factory、Builder、Singleton など、それぞれのパターンの概要がイラストつきで説明されており、かつ TypeScript でどのように実装すればよいかのコードサンプルが公開されています。</p>
<h2 id="core-js-%3A-so%2C-what's-next%3F">
<a class="header-anchor-link" href="#core-js-%3A-so%2C-what's-next%3F" aria-hidden="true"></a> core-js : So, what's next?</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__a2033b3aa36dd" src="https://embed.zenn.studio/github#zenn-embedded__a2033b3aa36dd" data-content="https%3A%2F%2Fgithub.com%2Fzloirock%2Fcore-js%2Fblob%2F65e806202f68e751016d76a27b9a6bef89d2bf16%2Fdocs%2F2023-02-14-so-whats-next.md" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/zloirock/core-js/blob/65e806202f68e751016d76a27b9a6bef89d2bf16/docs/2023-02-14-so-whats-next.md" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/zloirock/core-js/blob/65e806202f68e751016d76a27b9a6bef89d2bf16/docs/2023-02-14-so-whats-next.md</a></p>
<p>大企業を含め非常に多くのサービスで利用されている core-js のメンテナである zloirock 氏の考えを記したページです。</p>
<p>OSS を少しでも使ったことがある方であれば、ぜひ一度ご自身で目を通すことを推奨します。</p>
<p>（なお、サイボウズは 2021 年から <a href="https://opencollective.com/cybozu" target="_blank" rel="nofollow noopener noreferrer">core-js を支援</a>させて頂いています。）</p>
<h2 id="bringing-javascript-to-webassembly-for-shopify-functions">
<a class="header-anchor-link" href="#bringing-javascript-to-webassembly-for-shopify-functions" aria-hidden="true"></a> Bringing Javascript to WebAssembly for Shopify Functions</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a19e3dd8e6333" src="https://embed.zenn.studio/card#zenn-embedded__a19e3dd8e6333" data-content="https%3A%2F%2Fshopify.engineering%2Fjavascript-in-webassembly-for-shopify-functions" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://shopify.engineering/javascript-in-webassembly-for-shopify-functions" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://shopify.engineering/javascript-in-webassembly-for-shopify-functions</a></p>
<p>Rust を用いて Shopify のバックエンドロジックをカスタマイズするための Shopify Functions が、新たに JavaScript をサポートするようです。<br>
この記事では、既存 Shopify Functions の動作環境における安全性を損なわずに JavaScript を取り込むための JavaScript ランタイム Javy やその設計意図について深掘りされています。</p>
<h2 id="improved-type-safety-in-storybook-7">
<a class="header-anchor-link" href="#improved-type-safety-in-storybook-7" aria-hidden="true"></a> Improved type safety in Storybook 7</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__706feee7e5d3c" src="https://embed.zenn.studio/card#zenn-embedded__706feee7e5d3c" data-content="https%3A%2F%2Fstorybook.js.org%2Fblog%2Fimproved-type-safety-in-storybook-7%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://storybook.js.org/blog/improved-type-safety-in-storybook-7/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://storybook.js.org/blog/improved-type-safety-in-storybook-7/</a></p>
<p>Storybook における新しい記法である CSF 3.0 と TypeScript 4.9 で追加された <code>satisfies</code> オペレータを組合わせることで、Storybook 上での Props の指定漏れを検知したり、別の Story の <code>play()</code> 関数を呼び出した際に未定義エラーになることを回避できたりすることを紹介する記事です。</p>
<p><code>as</code> との違いで混乱されることもある <code>satisfies</code> ですが、ユースケースとしてわかりやすい事例でした。</p>
<h1 id="%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D">
<a class="header-anchor-link" href="#%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D" aria-hidden="true"></a> あとがき</h1>
<p>個人的には、core-js の記事に心を持っていかれた回でした。</p>
<p>企業規模に問わず OSS には大変お世話になっていますので、自分たちのできることを考えていきたいですね。</p>


React.jsのドキュメンタリー動画公開など : Cybozu Frontend Weekly (2023-02-14号)

Vue Fes Japan 2023 を一緒に作り上げるコアスタッフを募集します！

「I'm joining Vercel! I'm a longtime admirer of the people and their work. I can't wait to get started.」

ヤフーショッピングのフロントエンドを支える共通配信技術

Discussion