今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。
<img src="/frontend-expert/image/turborepo/slack.png" alt="slackで気軽に触ってみる会を宣言してる" width="718" height="152.15061295971978" >
今回は<a href="https://vercel.com/blog/vercel-acquires-turborepo">去年の 12 月に Vercel に買収されたニュース</a>があった Turborepo を気軽に触ってみました。
個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。
<h2>概要</h2>
Turborepo はモノレポのためのビルドシステムで次のような特徴があります。
<ul>
<li>Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる</li>
<li>workspace 内のコマンドの依存関係をシンプルに設定してくれる</li>
<li>Turborepo で実行するコマンドがない package はスルーしてくれる(npm workspace の<code>--if-present</code>に相当)</li>
<li>ローカルキャッシュ、リモートキャッシュを生成・利用できる</li>
</ul>
<h3>サンプルで作ったモノレポ構成</h3>
今回は Yarn v1 の workspace を使ってます。 
<a href="https://github.com/nus3/p-turborepo/tree/main/yarn">https://github.com/nus3/p-turborepo/tree/main/yarn</a>
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">├── apps
│ └── nus3-a: Next.js
└── packages:
 ├── nus3-button2: Reactのコンポーネント + ViteのLibrary Modeでビルド
 ├── nus3-config: tsconfig + eslintのconfig
 └── nus3-ui: Reactのコンポーネント(ビルドせずに使う)</code></pre></div>
サンプルで作ったモノレポ内の package たちは次のような依存関係になっています。 
(色々試してたので適当な命名になってます。すんません)
<ul>
<li><code>nus3-a</code>は<code>nus3-ui</code>と<code>nus3-button2</code>に依存している</li>
<li><code>nus3-ui</code>は<code>nus3-button2</code>に依存している</li>
</ul>
<img src="/frontend-expert/image/turborepo/dependencies.png" alt="サンプルリポジトリの依存関係" width="577" height="314" >
<h3>使い方</h3>
<ol>
<li>使っているパッケージマネージャーで(Yarn, npm, pnpm)で workspace の設定</li>
<li><code>turbo</code>のインストール</li>
<li>package.json に<code>pipeline</code>の設定</li>
</ol>
<h4>1. 使っているパッケージマネージャーで(Yarn, npm, pnpm)で workspace の設定</h4>
workspace の設定については割愛します。各パッケージマネージャーのドキュメントをご覧ください。
<ul>
<li><a href="https://classic.yarnpkg.com/lang/en/docs/workspaces/">Yarn</a></li>
<li><a href="https://docs.npmjs.com/cli/v8/using-npm/workspaces">npm</a></li>
<li><a href="https://pnpm.io/workspaces">pnpm</a></li>
</ul>
<h4>2. <code>turbo</code>のインストール</h4>
<code>yarn add turbo -W --dev</code>で Turborepo を追加します。
<h4>3. package.json に<code>pipeline</code>の設定</h4>
<code>package.json</code>に<code>turbo.pipeline</code>を追加し、そこで<code>turbo run {command}</code>で実行する command の依存関係やキャッシュの設定をします。この<code>pipeline</code>で定義した command しか<code>turbo run {command}</code>では実行できません。
実際に定義したものが次の json になります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "turbo": {
 "pipeline": {
 "build": {
 "dependsOn": ["^build"],
 "outputs": ["dist/**", ".next/**"]
 },
 "test": {
 "dependsOn": ["build"]
 },
 "lint": {},
 "deploy": {
 "dependsOn": ["build", "test", "lint"]
 },
 }
 }
}
</code></pre></div>
<code>dependsOn</code>で依存関係を、<code>outputs</code>でキャッシュするものを指定します。
定義したコマンドを一つずつ見ていきましょう。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"dependsOn": ["^build"],
</code></pre></div>
dependOn に<code>^</code>を追加したコマンド(<code>^build</code>)を指定することで workspace 内の各 package の指定したコマンド(<code>build</code>)を package 間の依存関係を考慮した順番で実行してくれます。
実際に実行してみると、サンプルで作った各 package の依存関係を考慮した順番(<code>@nus3/example-button2</code> → <code>nus3-ui</code> → <code>nus3-a</code>)でビルドされていることがわかります。 
(※今回サンプルで作った構成では<code>nus3-ui</code>はビルドの必要がないですが、依存関係を考慮した順番を表すのにあえて build コマンドを追加しています)
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run build
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running build in 4 packages
@nus3/example-button2:build: cache miss, executing a161062b16a0be35
@nus3/example-button2:build: $ vite build &#x26;amp;&#x26;amp; tsc -p ./tsconfig.build.json
...
@nus3/example-button2:build: dist/nus3-example-button2.es.js 3.30 KiB / gzip: 1.39 KiB
nus3-ui:build: cache miss, executing b32d4fb848c8658f
nus3-ui:build: $ echo &#x26;#39;build nus3-ui&#x26;#39;
...
nus3-a:build: cache miss, executing a80d8842624981a8
nus3-a:build: $ next build
...

 Tasks: 3 successful, 3 total
Cached: 0 cached, 3 total
 Time: 5.702s</code></pre></div>
次の<code>outputs</code>はコマンドを実行した際に、<code>dist</code>と<code>.next</code>配下にあるファイル群をキャッシュする設定です。<code>node_modules/.cache/turbo</code>にキャッシュしたファイルが出力されます。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"outputs": ["dist/**", ".next/**"]
</code></pre></div>
先程の build コマンドをもう一度実行すると cache が使われ、前回より早く実行されているのがわかります。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run build
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running build in 4 packages
@nus3/example-button2:build: cache hit, replaying output a161062b16a0be35
...
nus3-ui:build: cache hit, replaying output b32d4fb848c8658f
...
nus3-a:build: cache hit, replaying output a80d8842624981a8
...

 Tasks: 3 successful, 3 total
Cached: 3 cached, 3 total
 Time: 221ms &#x26;gt;&#x26;gt;&#x26;gt; FULL TURBO

✨ Done in 0.57s.
</code></pre></div>
次のように何も指定しない場合、依存関係がないものとして認識され並列に実行されます
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"lint": {},
</code></pre></div>
次の deploy コマンドの<code>dependsOn</code>では pipeline で定義した<code>build</code>, <code>test</code>, <code>lint</code>(順不同)を実行し、終了した時点で workspace 内の各 package の<code>deploy</code>コマンドを実行します。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">"deploy": {
 "dependsOn": ["build", "test", "lint"]
},
</code></pre></div>
今回定義したものの場合、Turborepo は次のようなことを考慮しながら各々の package のコマンドを実行します。
<ul>
<li><code>build</code>: モノレポ内の各 package の依存関係を考慮しつつ build</li>
<li><code>test</code>: <code>pipeline</code>で定義した<code>build</code>が実行された後に実行</li>
<li><code>lint</code>: 他のコマンドの順番を気にせず、並列で実行</li>
</ul>
deploy コマンドを実行した結果が次になります。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">$ turbo run deploy
• Packages in scope: @nus3/example-button2, nus3-a, nus3-config, nus3-ui
• Running deploy in 4 packages
nus3-a:lint: $ next lint
@nus3/example-button2:build: $ vite build &#x26;amp;amp;&#x26;amp;amp; tsc -p ./tsconfig.build.json
...
nus3-ui:build: $ echo &#x26;#39;build nus3-ui&#x26;#39;
...
nus3-a:build: $ next build
...
nus3-a:test: $ echo &#x26;#39;test nus3-a&#x26;#39;
...
nus3-a:deploy: $ echo &#x26;#39;deploy nus3-a&#x26;#39;</code></pre></div>
実際に上記を考慮しつつ各 package のコマンドが実行された後に、最後に deploy コマンドが実行されているのがわかると思います。
また、今回はローカルキャッシュの話のみでしたが、Turborepo には<a href="https://turborepo.org/docs/features/remote-caching#vercel">Vercel</a>や<a href="https://turborepo.org/docs/features/remote-caching#custom-remote-caches">独自</a>にキャッシュを配置することで、同じハッシュのキャッシュがあった場合にそのキャッシュを使ってくれるリモートキャッシュといった機能も Beta で用意されています。
今のプロジェクトが Yarn や npm の workspace を使っているのであれば、Turborepo を試しに入れてみてもいいかもしれません。

<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/95.0/releasenotes/">https://www.mozilla.org/en-US/firefox/95.0/releasenotes/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95</a></li>
</ul>
Firefox 95 がリリースされました。
本アップデートでは RLBox という新しいコードサンドボックス機能が導入されて信頼できないコードに対する安全性が向上しました。
また、Firefox App から Slack.com の Huddle や Call 機能が利用できるようになったのは嬉しいですね。
<h2>New</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2021/12/webassembly-and-back-again-fine-grained-sandboxing-in-firefox-95/">RLBox</a>が全てのプラットフォームで有効になりました
<ul>
<li>信頼できないコードを WebAssembly を用いてネイティブコードへコンパイルすることで意図しない領域外へのメモリアクセスを防止する機能のようです</li>
<li><a href="https://hacks.mozilla.org/2021/12/webassembly-and-back-again-fine-grained-sandboxing-in-firefox-95/">mozilla hacks</a>によれば、従来のプロセスを分割する手法における非同期化のオーバーヘッドやメモリフットプリントの増加を懸念した手法だと記載されていました。</li>
</ul>
</li>
<li>Windows 10 及び Windows 11 において Firefox App を Microsoft Store からダウンロードできるようになりました</li>
<li>ブラウザクロームとツールバースクリーンショットがシンプルになりました</li>
<li>macOS において WindowsServer イベントの処理時の CPU 使用量が削減されました</li>
<li>macOS において主にフルスクリーン時のソフトウェアでコードされたビデオコンテンツの使用電力が削減されました</li>
<li>PiP のトグルボタンをビデオウィンドウの反対側にへ移動できるようになりました</li>
<li>Site Isolation が有効化されました。</li>
</ul>
<h2>Fixed</h2>
<ul>
<li>Firefox を起動した際、JAWS や ZoomText が Firefox をフォーカスするようになりました</li>
<li>VoiceOver が ARIA の switch ロールの状態を正しく報告するようになりました</li>
<li>macOS でコンテンツプロセスの起動速度が速くなりました</li>
<li>メモリアロケータが改善されました</li>
<li>JavaScript を先行してコンパイルするようになり、ページロード時のパフォーマンスが改善されました</li>
</ul>
<h2>Changed</h2>
<ul>
<li>Slack.com で Call や Huddles へアクセスできるように User Agent オーバーライドが追加されました</li>
</ul>
<h2>Developer</h2>
<h3>For web developers</h3>
<h4>HTML</h4>
<ul>
<li>グローバル属性 <code>inputmode</code> が全てのプラットフォームでサポートされるようになりました</li>
</ul>
<h4>CSS</h4>
<ul>
<li>Android 版 Firefox で cursor プロパティがサポートされました</li>
</ul>
<h4>APIs</h4>
<ul>
<li><code>Crypt.randomUUID()</code> 関数がサポートされました</li>
</ul>
<h4>Media, WebRTC, and Web Audio</h4>
<ul>
<li><code>SpeechSynthesisEvent.elapseTime</code> がミリ秒ではなく秒単位の経過時間を返すようになりました</li>
</ul>
<h4>WebDriver Conformance (Marionette)</h4>
<ul>
<li>Marionette が使用しているポートがプロファイルディレクトリにある <code>MarionetteActivePort</code> ファイルに書き込まれるようになりました</li>
<li><code>WebDriver:NewSession</code> が最初のタブのロードが完了するまで待機するようになりました</li>
</ul>
<h3>For add-on developers</h3>
<ul>
<li>browserSettings に <code>overrideContentColorScheme</code> が追加され、<code>.css.prefers-color-scheme.content.override</code> という環境設定を制御することでブラウザのテーマとは独立したページ単位の優先的な配色を設定する機能が追加されました</li>
</ul>
<h2>unresolved</h2>
<ul>
<li>Gmail のリンクをコマンドクリックしても新しいタブが開かない問題がありました
<ul>
<li>回避策: Gmail のリンクをコマンドキーを利用せずにクリックすると新しいタブが開きます</li>
</ul>
</li>
</ul>

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

この記事は、<a href="https://adventar.org/calendars/6823">Cybozu Advent Calendar 2021</a>の9日目の記事です。
<hr>
フロントエンドエキスパートチームでは、社内向けフロントエンド勉強会の「Frontend Weekly」と、社外向けフロントエンド情報発信イベントの「Cybozu Frontend Monthly」を運営しています。
この度、Frontend Weeklyが5周年、Cybozu Frontend Monthlyが1周年を迎えました🎉
今回はそれぞれの各勉強会の内容と継続して開催してきた所感について紹介します。
<h2>Frontend Weeklyとは？</h2>
Frontend Weeklyは社内の有志が週ごとにフロントエンドの情報を持ち寄り、共有し合う会です。
次のように社内の<a href="https://kintone.cybozu.co.jp/">kintone</a>上で情報が共有されています。
<img src="/frontend-expert/image/frontendWeekly-And-Monthly/frontendWeekly.png" alt="kintone上で情報が共有されている様子" width="718" height="640.4116638078901" >
各々が持ち寄った記事の他に、<a href="https://twitter.com/azu_re">azuさん</a>が運営している<a href="https://jser.info/">JSer.info</a>を読む時間を設けています。
Frontend Weeklyは、2016年3月にFrontend Weekly Lunchとしてスタートしました。その後、ランチの時間では社内メンバーの予定が合わなくなり、Frontend Weeklyとして毎週火曜日の夕方に開催されるようになりました。
上記のように開催形態が変わりつつも、2021年まで約5年間継続しています。
稀にゲスト招待も行っています。
<h2>社内勉強会を継続開催してみた感想とメリット</h2>
Frontend Weeklyは所属する組織・チームに関わらず、フロントエンドに興味ある社内メンバーが情報をキャッチアップできるきっかけの場になっています。ときには、社内の事情や歴史的経緯にも触れられ、情報に対する理解度が深まることもありました。
フロントエンドエキスパートチームは社内のフロントエンドを横断的に支援することが1つの役割になっています。この会を通して、チームと社内メンバーが繋がり、横断的な支援へのきっかけづくりになっています。
<h2>Cybozu Frontend Monthlyとは？</h2>
<img src="/frontend-expert/image/frontendWeekly-And-Monthly/cybozuFrontendMonthly-ogp.png" alt="Cybozu Frontend Monthlyのアイキャッチ画像" width="659" height="229" >
Cybozu Frontend Monthlyは、フロントエンドエキスパートチームが月末にフロントエンド情報を発信するオンラインイベントです。
*YouTubeの<a href="https://www.youtube.com/watch?v=gujWyAmtzys&#x26;list=PLPTndynQK4dxLZFEZgOZjt_zKG-0JWoWy">アーカイブ一覧</a>
コロナ禍によりフロントエンドエキスパートチームの社外発信が激減したことが、Cybozu Frontend Monthlyを開催するきっかけでした。
2020年7月に第1回目を開催し、2021年まで約1年間毎月開催することができています。
<h3>社外勉強会を継続開催してみた感想とメリット</h3>
Cybozu Frontend Monthlyはオンライン開催なので、オフラインでは獲得できないフロントエンドエキスパートチームの認知を得ることができました。実際に、コロナ禍の影響でオフラインでの関わりを作ることが難しかったインターン応募者の方達から「Cybozu Frontend Monthlyがきっかけでチームを知った」と声を聞くこともありました
また、フロントエンドエキスパートチームに中途入社するきっかけがCybozu Frontend Monthlyだったこともあります。
*<a href="https://nus3.com/fee-team/">サイボウズのフロントエンドエキスパートチームに入った話</a>
2021年の途中からは他社のゲストの方を招いて開催もしました。
社外のフロントエンドエンジニアと交流のきっかけになり、オンライン放送後の雑談会では、情報交換を行うことができました。
これまでに公開した動画の再生回数は平均約500回程度と、多くの方に観ていただくことができました。
<h2>勉強会を継続開催していくために工夫してきたこと</h2>
勉強会を開催してきた中で一番大事だったことは、「継続すること」でした。
社内勉強会の参加人数が少ないときは3人だったこともありますが、会を閉じずに開催することで、興味ある人が戻ってきました。継続していなければ、社内の場がなくなってしまい、機会がなくなるところでした。
継続開催するために、定期的に振り返りを行い、運営のコストを下げ、継続しやすい環境にする工夫をしてきました。
具体的には次のような改善がありました。
<ul>
<li>司会を運営メンバーでローテーションする</li>
<li>準備を運営メンバーで分担する</li>
<li>開催時間を参加者しやすい時間にする</li>
</ul>
また、サイボウズには社外発信などのイベントをサポートしてくれる<a href="https://blog.cybozu.io/entry/2020/12/24/110000">コネクト支援</a>チームがいます。このチームがCybozu Frontend Monthlyの配信周りをサポートしてくれたので、フロントエンドエキスパートチームはコンテンツ準備と当日オンライン上で話すことに集中することができました。
<h2>おわりに</h2>
<a href="https://jser.info/">JSer.info</a>、技術記事をアウトプットしてくれている方、Frontend WeeklyとCybozu Frontend Monthlyのゲストに参加してくれた方、視聴者の方、多くの方達のおかげで継続ができています。ありがとうございます！
これからも継続的に情報発信を続けていきます。

<a href="https://github.com/storybookjs/storybook/releases/tag/v6.4.0">Storybook の 6.4.0 がリリース</a>され、<code>Interactive stories</code>が新機能として追加されました。詳細は<a href="https://storybook.js.org/blog/interactive-stories-beta/">Storybook のブログ</a>でも記載されています。
<h2>概要</h2>
Interactive stories の Addon を追加すると、testing-library で定義した操作を Storybook 上で確認することができるようになります。
次の gif のようにユーザー操作に対するコンポーネントの状態を UI(Addon)からステップごとに確認できます。
<img src="/frontend-expert/image/storybook-interactive-stories/capture.gif" alt="Interactive addonを使った例" width="360" height="240" >
<h2>導入手順</h2>
<ol>
<li>パッケージを追加する</li>
<li>Storybook の<code>main.js</code>に設定を追加する</li>
<li>Interactive stories 用の story を<code>stories.tsx</code>に追加する</li>
</ol>
<h3>1. パッケージを追加する</h3>
Interactive addon を利用するには次のパッケージが必要です。 
(今回は React のコンポーネントを対象としています)
<ul>
<li>@storybook/addon-interactions</li>
<li>@storybook/react</li>
<li>@storybook/testing-library</li>
</ul>
次のコマンドを実行してインストールします。
<code>npm i -D @storybook/addon-interactions @storybook/react @storybook/testing-library</code>
今回試したバージョンは次になります。
<div class="remark-highlight"><pre class="language-json"><code class="language-json">{
 "devDependencies": {
 "@storybook/addon-interactions": "6.4.0",
 "@storybook/react": "6.4.0",
 "@storybook/testing-library": "0.0.7"
 }
}
</code></pre></div>
<h3>2. Storybook の<code>main.js</code>に設定を追加する</h3>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">module.exports = {
 stories: ["../src/components/**/**/*.stories.@(js|jsx|ts|tsx)"],
 addons: ["@storybook/addon-interactions"], // addonの追加
 features: {
 interactionsDebugger: true, // Interactive storiesをaddonで1ステップずつ確認できるようにするのに必要
 },
};
</code></pre></div>
<h3>3. Interactive stories 用の story を<code>stories.tsx</code>に追加する</h3>
例えば、次のサンプルコードでは Storybook 上にマウントされたコンポーネントに対して、<code>Add</code>のラベルがついたボタンを 4 回クリックした後に<code>Reset</code>のボタンをクリックする story を<code>@storybook/testing-library</code>を使って追加しています。
<div class="remark-highlight"><pre class="language-tsx"><code class="language-tsx">// Interactive storiesに関係ある部分しか記載してません
import { within, userEvent } from "@storybook/testing-library";

const Template: Story&#x3C;ExampleComponentProps> = (args) => (
 &#x3C;ExampleComponent {...args} />
);

export const Default = Template.bind({});
Default.play = async ({ canvasElement }) => {
 const canvas = within(canvasElement);
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Add" }));
 await userEvent.click(canvas.getByRole("button", { name: "Reset" }));
};
</code></pre></div>
<code>Default.play = async ({ canvasElement }) => {</code>は Storybook6.4 でサポートされる<a href="https://storybook.js.org/blog/component-story-format-3-0/">CSF3</a>の構文です。 
また、まだ v0.5 ですが Storybook から<a href="https://github.com/storybookjs/eslint-plugin-storybook">eslint-plugin</a>も提供されているので、併せて試してみても良さそうです。
Interactive stories の addon を追加した Storybook を GitHub Pages でホスティングしたので、実際に触ってみたい方は次のリンクへ。 
<a href="https://nus3.github.io/p-storybook/?path=/story/components-examplecomponent--default">https://nus3.github.io/p-storybook/?path=/story/components-examplecomponent--default</a>
Storybook 上で複雑な操作があるコンポーネントのデバッグや共有がしやすくなりそうですね。
<h2>参考リンク</h2>
<ul>
<li><a href="https://storybook.js.org/blog/interactive-stories-beta/">https://storybook.js.org/blog/interactive-stories-beta/</a></li>
<li><a href="https://storybook.js.org/blog/component-story-format-3-0/">https://storybook.js.org/blog/component-story-format-3-0/</a></li>
<li><a href="https://github.com/nus3/p-storybook">実際に実装したリポジトリ</a></li>
</ul>

Chrome 95 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-95/">https://developer.chrome.com/blog/new-in-chrome-95/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-95/">https://developer.chrome.com/blog/new-in-devtools-95/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-95/">https://developer.chrome.com/blog/deps-rems-95/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D95">https://www.chromestatus.com/features#milestone%3D95</a></li>
</ul>
<h2>Routing with URLPattern</h2>
<code>URLPattern</code>という機能が追加されました。現在は Chrome、Edge の 95 以上に対応しています。
他のブラウザや Node.js ではまだサポートされていない機能ですが、<a href="https://github.com/kenchris/urlpattern-polyfill">urlpattern-polyfill</a>で polyfill できます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const pattern = new URLPattern({ pathname: "/books/:id" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }

// 引数で渡せる全てのプロパティ
const p = new URLPattern({
 protocol: "http{s}?",
 username: ":username",
 password: ":password",
 hostname: ":subdomain.example.com",
 port: ":port(80|443)",
 pathname: "/:path",
 search: "*",
 hash: "*",
});
</code></pre></div>
詳細はこちら
<a href="https://web.dev/urlpattern/">https://web.dev/urlpattern/</a>
<h2>Picking colors with the Eye Dropper API</h2>
カラーを取得する Eye Dropper API が追加されました
詳細はこちらの記事で解説しています。
<a href="https://cybozu.github.io/frontend-expert/posts/eyedropper-api">Chrome 95 で追加された画面上の色を取得する EyeDropper API について</a>
<h2>PWA Summit</h2>
10 月 6~7 日に PWA Summit が開催されてました 
見逃した方はアーカイブが下記のリンクに残ってるので、そこから確認できます
<a href="https://pwasummit.org/">https://pwasummit.org/</a> 
<a href="https://www.youtube.com/channel/UC1j3gvdVISAEO1_2MwA5oQw/videos">https://www.youtube.com/channel/UC1j3gvdVISAEO1_2MwA5oQw/videos</a>
<h2>User-agent reduction origin trial</h2>
Origin Trial で実際に User-Agent の文字列が削減された後の挙動が試せます
参考:
<ul>
<li><a href="https://web.dev/user-agent-client-hints/">User-Agent Client Hints によるユーザーのプライバシーと開発者体験の改善</a></li>
<li><a href="https://developers-jp.googleblog.com/2021/09/chrome-user-agent.html">User-Agent Reduction origin trial(日本語訳)</a></li>
</ul>
<h2>And more!</h2>
<ul>
<li>Storage Foundation API を origin trial で試せます</li>
<li>WebAssembly で例外処理のサポートが提供され、例外がスローされたときにコードが中断できるようになります</li>
<li>Chrome 100 が来年きます。バージョンが 2 桁から 3 桁になるので、自分のコードに何らかの影響があるかどうかを確認するといいかもしれません</li>
</ul>
<h2>DevTools</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-95/">https://developer.chrome.com/ja/blog/new-in-devtools-95/</a>
<h2>Deprecations and removals in Chrome 95</h2>
Chrome 95 で非推奨になったもの、もしくは削除されたものです。
<h3>Support for URLs with non-IPv4 hostnames ending in numbers</h3>
有効な IPv4 アドレスではない、 <code>http://foo.127.1/</code> のような数字で終わる host name を持つ URL が拒否されるようになります。
社内のプレビュー環境などで IP アドレスをポストフィックスとして利用してたりする場合は影響がでているかもしれません。
<h3>WebAssembly cross-origin module sharing</h3>
cross-originでsame-siteな環境間でのWebAssemblyモジュールの共有が非推奨になりました
<a href="https://www.chromestatus.com/feature/5650158039597056">https://www.chromestatus.com/feature/5650158039597056</a>
合わせてこちらも参考にしてください 
<a href="https://developer.chrome.com/blog/wasm-module-sharing-restricted-to-same-origin/">Restricting Wasm module sharing to same-origin</a>
<h3>Deprecate U2F API (Cryptotoken)</h3>
U2F API が非推奨になり、Chrome 98 からはデフォルトで無効になります。
U2F とはなんぞやという人はこちらの記事が参考になります。
<a href="https://blog.jxck.io/entries/2018-05-15/webauthentication-api.html">Web Authentication API で FIDO U2F(YubiKey) 認証 | blog.jxck.io</a>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<blockquote>
<a href="https://www.chromestatus.com/features#milestone=95">https://www.chromestatus.com/features#milestone=95</a>
</blockquote>
<h3>Back-forward cache for same-site navigations on Android</h3>
Chrome 86 から origin trial で試せていた Android での戻る/進むのキャッシュが same-site で効くようになりました。 
<a href="https://www.chromestatus.com/feature/5694778600587264">https://www.chromestatus.com/feature/5694778600587264</a>
bfcache(Back/forward cache)については下記に詳細の説明が載っています。 
<a href="https://web.dev/bfcache/">https://web.dev/bfcache/</a>
<h3>CSS @counter-style rules in shadow trees</h3>
Shadow tree に対してカスタムの counter-style を定義することができるようになりました。 
<a href="https://www.chromestatus.com/feature/5716198446596096">https://www.chromestatus.com/feature/5716198446596096</a>
<code>@counter-style</code>については下記を参考ください
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@counter-style circled-alpha {
 system: fixed;
 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
 suffix: " ";
}

.items {
 list-style: circled-alpha;
}
</code></pre></div>
このスタイルを当てた list を作ると次のようなリストができます。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve</code></pre></div>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style#specifying_symbols_with_counter-style">https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style#specifying_symbols_with_counter-style</a>
<h3>Cookie size limits</h3>
Set-Cookie header、及び、document.cookie、CookieStore で設定される Cookie のサイズが制限されます。
具体的には Cookie の名前と値の合計が 4096 バイトまでになり、Cookie の各属性値は 1024 バイトに制限する必要があります。
<a href="https://www.chromestatus.com/feature/4946713618939904">https://www.chromestatus.com/feature/4946713618939904</a>
<h3>Logical properties for contain-intrinsic-size</h3>
contain-intrinsic-size を省略した次の表記が追加されます。
<ul>
<li>contain-intrinsic-{width,height}</li>
<li>contain-intrinsic-{inline,block}-size</li>
</ul>
<a href="https://www.chromestatus.com/feature/5709654999957504">https://www.chromestatus.com/feature/5709654999957504</a>
参考:
<a href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override</a>
<h3>contain-intrinsic-size</h3>
content-visibility で指定された要素の自然なサイズを制御するプロパティです。
次の実装は画面外の section のレンダリングをスキップする例です。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;style>
section {
 content-visibility: auto;
 contain-intrinsic-size: 0 500px;
}
&#x3C;/style>
</code></pre></div>
ビューポート外のコンテンツはレンダリングされなくなります。
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility">https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility</a>
<h3>New UA platform version source on Windows for User-Agent Client Hints</h3>
Windows の Sec-CH-UA-Platform-Version(User-Agent Client Hints)で返されるバージョンが Windows プラットフォームの違いを識別できるように更新されました。
<a href="https://www.chromestatus.com/feature/5080939765956608">https://www.chromestatus.com/feature/5080939765956608</a> 
<a href="https://github.com/WICG/ua-client-hints/issues/220#issuecomment-870858413">https://github.com/WICG/ua-client-hints/issues/220#issuecomment-870858413</a>
<h3>Note taking new note URL</h3>
Web Application Manifest が <code>note_taking</code> と <code>new_note_url</code> に対応しました。
Web Application 側から新しいメモを書きたい時にユーザーエージェントに読み込ませたい URL を指定できるようになります。
<a href="https://www.chromestatus.com/feature/5205972320518144">https://www.chromestatus.com/feature/5205972320518144</a> 
<a href="https://wicg.github.io/manifest-incubations/index.html#note_taking-member">https://wicg.github.io/manifest-incubations/index.html#note_taking-member</a>
<h3>Secure payment confirmation</h3>
WebAuthn を利用して、Web 上での支払い時の認証を強化することができるようになります。
<a href="https://www.chromestatus.com/feature/5702310124584960">https://www.chromestatus.com/feature/5702310124584960</a>
※ Payment Request API で簡単・高速な決済を実現する
<a href="https://developers.google.com/web/updates/2016/07/payment-request?hl=ja">https://developers.google.com/web/updates/2016/07/payment-request?hl=ja</a>
※ PaymentRequestAPI で secure-payment-confirmation を使った実装例
<a href="https://www.w3.org/TR/2021/WD-secure-payment-confirmation-20210831/#sctn-sample-authentication">https://www.w3.org/TR/2021/WD-secure-payment-confirmation-20210831/#sctn-sample-authentication</a>
<h3>droppedEntriesCount in PerformanceObserver callback</h3>
PerformanceObserver のコールバックに droppedEntriesCount が追加されます。
<a href="https://www.chromestatus.com/feature/5320666234486784">https://www.chromestatus.com/feature/5320666234486784</a>
PerformanceObserver 
<a href="https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver">https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver</a>
<h3>self.reportError()</h3>
キャッチされない例外をレポートする<code>self.reportError()</code>が追加されます。
<a href="https://www.chromestatus.com/feature/5634523220934656">https://www.chromestatus.com/feature/5634523220934656</a>
以下のコードを実行するとerrorはcatchで握り潰されずに<code>Uncaught Error: foo</code>になります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const addition = (a, b) => {
 if (a > 0) {
 self.reportError(new Error('foo'))
 }
 return a + b;
};
const count = (a, b, callback) => {
 try {
 callback(a, b)
 } catch (error) {
 console.log('bar')
 }
};

count(2, 3, addition)
</code></pre></div>
参考:
<ul>
<li><a href="https://html.spec.whatwg.org/#runtime-script-errors">https://html.spec.whatwg.org/#runtime-script-errors</a></li>
</ul>

先日 Safari 15 がリリースされました。
<a href="https://webkit.org/blog/11989/new-webkit-features-in-safari-15/">https://webkit.org/blog/11989/new-webkit-features-in-safari-15/</a>
影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。
<h2>HTML</h2>
<h3>theme-color</h3>
meta タグ上での <code>theme-color</code> のサポートが追加されました。
指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 <code>prefers-color-scheme</code> と併用することで、ダークモード/ライトモードに応じた色の指定もできます。
<a href="https://developer.apple.com/videos/play/wwdc2021/10029/">Design for Safari 15</a>
<h2>CSS</h2>
<h3><code>aspect-ratio</code> プロパティのサポート</h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">aspect-ratio - CSS: Cascading Style Sheets | MDN</a>
<h3><code>lab()</code> <code>lch()</code> <code>hwb()</code> シンタックスのサポート</h3>
<a href="https://www.w3.org/TR/css-color-4/">W3C Color Module Level 4</a>に沿った新しいカラーシンタックス <code>lab()</code> <code>lch()</code> <code>hwb()</code> が利用可能になりました。
<h3>list-style-type に設定可能な値が追加</h3>
li 要素など、リストアイテム要素のマーカーを指定するための <code>list-style-type</code> 新たに 12 個の値が設定可能になりました。
MDN のデモで値に応じた表示を確認することができます。
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#result_2">https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#result_2</a>
<h2>Web Inspector</h2>
CSS Grid に対応したオーバレイ表示が可能になりました。
<a href="https://webkit.org/blog/11588/introducing-css-grid-inspector/">https://webkit.org/blog/11588/introducing-css-grid-inspector/</a>
デバッグ用のブレークポイント周りなどにも改善が施されています。その他の変更点は WWDC2021 の発表動画に含まれます。
<a href="https://developer.apple.com/videos/play/wwdc2021/10031/">Discover Web Inspector improvements - WWDC21 - Videos - Apple Developer</a>
<h2>JavaScript and WebAssembly</h2>
Worker や ServiceWorker で ES6 Modules のサポートが追加されました。
また、JavaScript エンジンで次の機能がサポートされました。
<ul>
<li>top-level <code>await</code></li>
<li><code>Error.cause</code></li>
<li>プライベートクラスメソッド とアクセサ</li>
<li><code>BigInt64Array</code> および <code>BigUint64Array</code></li>
</ul>
WebAssembly では次のサポートが追加されました。
<ul>
<li>streaming compilation</li>
<li>bulk memory operations</li>
<li>reference types</li>
<li>non-trapping conversions from <code>float</code> to <code>int</code></li>
</ul>
<a href="https://github.com/WebAssembly/spec/tree/main/proposals">WebAssembly/spec - proposals</a>
<a href="https://developer.apple.com/videos/play/wwdc2021/10030">Develop advanced web content - WWDC21 - Videos - Apple Developer</a>
<h2>Web APIs</h2>
<h3>WebGL2 に対応</h3>
WebGL2 に対応し、かつ Apple の グラフィック API の Metal 上で動作するようになり、パフォーマンスが向上しました。
<h3>Web Share API Level 2 の実装</h3>
Web Share API Level 2 の実装により、Web ページからアプリへのファイル共有が可能になりました。
<a href="https://developer.apple.com/videos/play/wwdc2021/10030">Develop advanced web content - WWDC21 - Videos - Apple Developer</a>
<h2>Media</h2>
<ul>
<li>MediaSession API のサポートの追加</li>
</ul>
<a href="https://developer.apple.com/videos/play/wwdc2021/10189/">Coordinate media playback in Safari with Group Activities - WWDC21 - Videos - Apple Developer</a>
<h2>Security and Privacy</h2>
<h3>自動 HTTPS アップグレードのサポート</h3>
http と https の双方が利用可能なページの場合、自動で https を利用するようになります。
<h2>所感</h2>
<code>aspect-ratio</code> が 主要 4 ブラウザ(Chrome/Safari/Firefox/Edge)すべてで利用可能になりましたね。今後利用するケースが徐々に増えていきそうです。
余談ですが、<code>list-style-type</code> に <code>japanese-formal</code> を指定すると <code>壱・弐・参・四・伍…</code> になるのですね。カッコいいです。

2021年7月に行われた TC39 ミーティングで <a href="https://github.com/tc39/proposal-private-fields-in-in">Ergonomic brand checks for Private Fields</a> というプロポーザルが Stage 4 になりました。
このプロポーザルは、ES2022 に含まれる予定です。また、<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-rc/#private-field-presence-checks">TypeScript 4.5 にも含まれる予定です</a>。
この記事では、Ergonomic brand checks for Private Fields について解説します。
<h2>概要</h2>
Ergonomic brand checks for Private Fields は、<code>in</code> 演算子を使ったプライベートフィールドの有無の判定を可能にするプロポーザルです。
<h3>現在の <code>in</code> 演算子</h3>
<code>in</code> 演算子は、オブジェクトが特定の名前のプロパティを持っているかどうかを判定するための二項演算子です。
左辺にプロパティの名前、右辺にオブジェクトを受け取ります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const obj = { prop1: 1 };
console.log("prop1" in obj); // true
</code></pre></div>
<h3>新しい <code>in</code> 演算子</h3>
Ergonomic brand checks for Private Fields では、この <code>in</code> 演算子を拡張し、左辺に Private Identifier を取れるようになります。
Private Identifier は <code>#foo</code> のような形をした特別な識別子で、クラスのプライベートフィールドを表現するのに使われます。
たとえば、次のコードではクラス <code>Foo</code> は、<code>#prop1</code> というプライベートフィールドを持ちます。
このとき <code>#prop1</code> は Private Identifier です。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {
 #prop1;
}
</code></pre></div>
拡張された <code>in</code> 演算子では、次のようにしてオブジェクトにプライベートフィールドが含まれるかどうかをチェックできます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">#prop1 in obj
</code></pre></div>
しかし、プライベートフィールドはプライベートなので上記のコードはそのフィールドを持つクラスの中でのみ使うことができます。
つまり、次のようにクラスの外でプライベートフィールドに対して <code>in</code> を使うとエラーになります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {
 #prop1;
}
console.log(#prop1 in new Foo());
// Uncaught SyntaxError: Private field '#prop1' must be declared in an enclosing class
</code></pre></div>
しかし、次のようなコードはエラーになりません。メソッド <code>foo</code> はクラス <code>Foo</code> の中にあるので、Private Identifier である <code>#foo</code> を <code>in</code> 演算子の左辺として使うことができます。
そして、この <code>foo</code> の中で <code>this</code> は <code>Foo</code> のインスタンスであり、それには当然 <code>#prop1</code> というプライベートプロパティが存在するので、<code>#prop1 in this</code> の結果は <code>true</code> になります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {
 #prop1;
 foo() {
 return #prop1 in this;
 }
}
console.log(new Foo().foo()); // true
</code></pre></div>
<h2>モチベーション</h2>
存在しないプライベートフィールドにアクセスすると、実行時エラーが発生します。
その挙動と try / catch を組み合わせて、次のようにしてオブジェクトのクラスを判定できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {
 #brand;
 static isFoo(obj) {
 try {
 obj.#brand;
 return true;
 } catch {
 return false;
 }
 }
}
</code></pre></div>
<code>obj.#brand</code> にアクセスしたとき、<code>obj</code> が Foo のインスタンスでない場合、実行時エラーが発生し <code>catch</code> に入り <code>false</code> が返されます。
このようにして、あるオブジェクトが<code>Foo</code>のインスタンスであるかを検証するスタティックメソッドを作れます。
ですが、このパターンは冗長です。<code>in</code> 演算子を使えばもっと短く書けます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {
 #brand;
 static isFoo(obj) {
 return #brand in obj;
 }
}
</code></pre></div>
これが、このプロポーザルの主なモチベーションです。
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> 演算子</a>も基本的にはこの目的のために使えます。しかし <code>instanceof</code> 演算子はプロトタイプに依存するので、プロトタイプを書き換えることでその挙動を変更できます。
次の例では、 <code>obj</code> は <code>Foo</code> のインスタンスではありませんが、後からプロトタイプを書き換えているので <code>obj instanceof Foo</code> は <code>true</code> になっています。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">class Foo {}
const foo = new Foo();
const obj = {};
Object.setPrototypeOf(obj, foo);
console.log(obj instanceof Foo); // true
</code></pre></div>
また、<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance">Symbol.hasInstance</a> を使って <code>instanceof</code> の挙動を変更することも可能です。
なので、より安全にオブジェクトのもとになったクラスを検証したい場合は <code>in</code> 演算子を使うと良いでしょう。
<h2>参考リンク</h2>
<ul>
<li><a href="https://tc39.es/ecma262/#prod-RelationalExpression">https://tc39.es/ecma262/#prod-RelationalExpression</a></li>
<li><a href="https://tc39.es/ecma262/#prod-PrivateIdentifier">https://tc39.es/ecma262/#prod-PrivateIdentifier</a></li>
<li><a href="https://github.com/tc39/proposal-private-fields-in-in">https://github.com/tc39/proposal-private-fields-in-in</a></li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/in">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/in</a></li>
</ul>

Posts