<h2 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> はじめに</h2>
<p>こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの <a href="https://twitter.com/nakajmg" target="_blank" rel="nofollow noopener noreferrer">じまぐ</a> です。</p>
<p>サイボウズでは毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。</p>
<p>今回は、2023/06/13 の Frontend Weekly で取り上げた記事や話題を紹介します。</p>
<h2 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> 取り上げた記事・話題</h2>
<h2 id="astro%E3%81%8C%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#astro%E3%81%8C%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B" aria-hidden="true"></a> Astroがドキュメントサイト作成のためのテンプレートを公開</h2>
<p>Astroでドキュメントサイトを作成するためのテンプレートであるStarlightが公開されました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cc2bcf1435539" src="https://embed.zenn.studio/card#zenn-embedded__cc2bcf1435539" data-content="https%3A%2F%2Fstarlight.astro.build%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://starlight.astro.build/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://starlight.astro.build/</a></p>
<p>Starlightのサイト自体もStarlightを使って作られています。StarlightのドキュメントにはWebサイトが環境へ与える影響などについて触れられているのが特徴的です。</p>
<h2 id="astro-2.6%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#astro-2.6%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" aria-hidden="true"></a> Astro 2.6リリース</h2>
<p>Astroの2.6がリリースされました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5ba1e7fdf9e29" src="https://embed.zenn.studio/card#zenn-embedded__5ba1e7fdf9e29" data-content="https%3A%2F%2Fastro.build%2Fblog%2Fastro-260%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://astro.build/blog/astro-260/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://astro.build/blog/astro-260/</a></p>
<p>Middlewareが追加されたり、hybridモードがstableになりました。静的なサイトだけでなく、動的なサイトでもAstroが活躍できそうな機能がそろってきています。</p>
<h2 id="ezno%E3%81%8Coxc%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB">
<a class="header-anchor-link" href="#ezno%E3%81%8Coxc%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" aria-hidden="true"></a> EznoがOxcで使えるように</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__762349c35255f" src="https://embed.zenn.studio/tweet#zenn-embedded__762349c35255f" data-content="https%3A%2F%2Ftwitter.com%2Fazu_re%2Fstatus%2F1666673296212099073" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/azu_re/status/1666673296212099073" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/azu_re/status/1666673296212099073</a></p>
<p>Rustで書かれた型チェッカーであるEznoが <a href="https://github.com/Boshen/oxc" target="_blank" rel="nofollow noopener noreferrer">Oxc</a> で使えるようになりました。OxcはJavaScript/TypeScriptのlinter・formatter・minifierなどを担おうとしているツール群です。</p>
<h2 id="jsconf-jp-2023%E3%81%8C-11%2F19%E3%81%AB%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E9%96%8B%E5%82%AC%E4%BA%88%E5%AE%9A">
<a class="header-anchor-link" href="#jsconf-jp-2023%E3%81%8C-11%2F19%E3%81%AB%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E9%96%8B%E5%82%AC%E4%BA%88%E5%AE%9A" aria-hidden="true"></a> JSConf JP 2023が 11/19にオフラインで開催予定</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__559172f027942" src="https://embed.zenn.studio/card#zenn-embedded__559172f027942" data-content="https%3A%2F%2Fjsconf.jp%2F2023%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://jsconf.jp/2023/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://jsconf.jp/2023/</a></p>
<p>JSConf JP 2023が11/19に九段下でオフラインで開催されます。</p>
<p>CfPの募集もオープンしています。</p>
<h2 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%AA%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88%E3%81%AE%E8%A9%B1-%EF%BC%88zozo-tech-meetup%E7%99%BA%E8%A1%A8%E8%B3%87%E6%96%99%E3%82%88%E3%82%8A%EF%BC%89">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%AA%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88%E3%81%AE%E8%A9%B1-%EF%BC%88zozo-tech-meetup%E7%99%BA%E8%A1%A8%E8%B3%87%E6%96%99%E3%82%88%E3%82%8A%EF%BC%89" aria-hidden="true"></a> フロントエンドリアーキテクトの話 （ZOZO Tech Meetup発表資料より）</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e6219b8b2762e" src="https://embed.zenn.studio/card#zenn-embedded__e6219b8b2762e" data-content="https%3A%2F%2Fspeakerdeck.com%2Fyosuke_furukawa%2Fhurontoendoriakitekutonohua" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/yosuke_furukawa/hurontoendoriakitekutonohua" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/yosuke_furukawa/hurontoendoriakitekutonohua</a></p>
<p><a href="https://twitter.com/yosuke_furukawa" target="_blank" rel="nofollow noopener noreferrer">@yosuke_furukawa</a>氏による「<a href="https://zozotech-inc.connpass.com/event/283986/" target="_blank" rel="nofollow noopener noreferrer">ZOZO Tech Meetup</a>」での発表資料です。</p>
<p>フロントエンドのリアーキテクトについて、組織の技術継承や取りうるアプローチのメリットデメリットなどを紹介しています。</p>
<h2 id="state-of-node.js-performance-2023">
<a class="header-anchor-link" href="#state-of-node.js-performance-2023" aria-hidden="true"></a> State of Node.js Performance 2023</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__af4c9e39f85d4" src="https://embed.zenn.studio/card#zenn-embedded__af4c9e39f85d4" data-content="https%3A%2F%2Fblog.rafaelgss.dev%2Fstate-of-nodejs-performance-2023" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.rafaelgss.dev/state-of-nodejs-performance-2023" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.rafaelgss.dev/state-of-nodejs-performance-2023</a></p>
<p>Node.js のv16・v18・v20 のベンチマークを比較した記事です。v20 ではいくつかのリグレッションが見つかっていますが、以前のバージョンと比較するとおおむねパフォーマンスが向上しているようです。</p>
<h2 id="safari-17-beta-%E3%81%AB%E5%85%A5%E3%82%8B%E6%A9%9F%E8%83%BD%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#safari-17-beta-%E3%81%AB%E5%85%A5%E3%82%8B%E6%A9%9F%E8%83%BD%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> Safari 17 beta に入る機能のまとめ</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2528a6d88b0fe" src="https://embed.zenn.studio/card#zenn-embedded__2528a6d88b0fe" data-content="https%3A%2F%2Fwebkit.org%2Fblog%2F14205%2Fnews-from-wwdc23-webkit-features-in-safari-17-beta%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/</a></p>
<p>WebサイトをmacのDockに追加する機能や、CSSやJS APIの追加など盛りだくさんの内容になっています。</p>
<p><a href="https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes" target="_blank" rel="nofollow noopener noreferrer">リリースノート</a>も合わせて参照するとよさそうです。</p>
<h2 id="webassembly%E3%81%AEpolyfill">
<a class="header-anchor-link" href="#webassembly%E3%81%AEpolyfill" aria-hidden="true"></a> WebAssemblyのPolyfill</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e00276d4cc161" src="https://embed.zenn.studio/card#zenn-embedded__e00276d4cc161" data-content="https%3A%2F%2Fgithub.com%2Fevanw%2Fpolywasm" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/evanw/polywasm" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/evanw/polywasm</a></p>
<p>このPolyfillのユースケースとしては、iOS や macOS の Lockdown モード環境等での動作や、 WebAssembly のランタイムに手を加えたい場合などがあるようです。</p>
<h2 id="docker%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%82%92web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E5%AE%9F%E8%A1%8C%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B-container2wasm-0.3-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#docker%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%82%92web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E5%AE%9F%E8%A1%8C%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B-container2wasm-0.3-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" aria-hidden="true"></a> DockerコンテナをWebブラウザで実行可能にする container2wasm 0.3 リリース</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a7dd98c5ee54c" src="https://embed.zenn.studio/card#zenn-embedded__a7dd98c5ee54c" data-content="https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F23%2Fdockerwebassemblywebcontainer2wasm03.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.publickey1.jp/blog/23/dockerwebassemblywebcontainer2wasm03.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.publickey1.jp/blog/23/dockerwebassemblywebcontainer2wasm03.html</a></p>
<p>DockerイメージをWASMに変換し、Webブラウザ上で動かせるようになる<a href="https://github.com/ktock/container2wasm" target="_blank" rel="nofollow noopener noreferrer">container2wasm</a>の0.3がリリースされました。<a href="https://ktock.github.io/container2wasm-demo/" target="_blank" rel="nofollow noopener noreferrer">デモページ</a>では実際にブラウザ上でNode.jsなどの動作が試せます。</p>
<h2 id="%E3%83%A2%E3%83%80%E3%83%B3css%E3%82%92%E3%81%B5%E3%82%93%E3%81%A0%E3%82%93%E3%81%AB%E4%BD%BF%E3%81%A3%E3%81%A6-button%2Fcard%2Fpagination%2Fnavigation-%E3%82%92%E4%BD%9C%E3%82%8B%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">
<a class="header-anchor-link" href="#%E3%83%A2%E3%83%80%E3%83%B3css%E3%82%92%E3%81%B5%E3%82%93%E3%81%A0%E3%82%93%E3%81%AB%E4%BD%BF%E3%81%A3%E3%81%A6-button%2Fcard%2Fpagination%2Fnavigation-%E3%82%92%E4%BD%9C%E3%82%8B%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" aria-hidden="true"></a> モダンCSSをふんだんに使って button/card/pagination/navigation を作るサンプル</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__737caa6946cf7" src="https://embed.zenn.studio/card#zenn-embedded__737caa6946cf7" data-content="https%3A%2F%2Fmoderncss.dev%2Fmodern-css-for-dynamic-component-based-architecture%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/</a></p>
<p>モダンなCSSを利用してコンポーネントを作るサンプル集です。頻出するUIのパターンを、具体的なコードを見ながら学べます。</p>
<h2 id="%E8%87%AA%E5%8B%95%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E3%81%AEchrome%E3%81%AE%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%81%8C%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%94%E3%81%A8%E3%81%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB">
<a class="header-anchor-link" href="#%E8%87%AA%E5%8B%95%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E3%81%AEchrome%E3%81%AE%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%81%8C%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%94%E3%81%A8%E3%81%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" aria-hidden="true"></a> 自動テスト用のChromeのバイナリがバージョンごとにダウンロードできるように</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f462384186c14" src="https://embed.zenn.studio/card#zenn-embedded__f462384186c14" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fchrome-for-testing%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/blog/chrome-for-testing/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/chrome-for-testing/</a></p>
<p>開発者がテスト用に使うためのChromeをバージョン指定してダウンロードできるようになりました。これまでよりも安定して自動テストの環境構築や実行が行えるようになりそうです。</p>
<p>次のようなコマンドを実行することで特定のバージョンをダウンロードできます。</p>
<div class="code-block-container"><pre><code>npx @puppeteer/browsers install chrome@116.0.5793.0
</code></pre></div><h2 id="watch-out-for-layout-shifts-with-%E2%80%98ch%E2%80%99-units">
<a class="header-anchor-link" href="#watch-out-for-layout-shifts-with-%E2%80%98ch%E2%80%99-units" aria-hidden="true"></a> Watch Out for Layout Shifts with ‘ch’ Units</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__17c33721bbcd7" src="https://embed.zenn.studio/card#zenn-embedded__17c33721bbcd7" data-content="https%3A%2F%2Fcloudfour.com%2Fthinks%2Fwatch-out-for-layout-shifts-with-ch-units%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://cloudfour.com/thinks/watch-out-for-layout-shifts-with-ch-units/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://cloudfour.com/thinks/watch-out-for-layout-shifts-with-ch-units/</a></p>
<p>CSSの単位として <code>ch</code> を使った場合に起こりうるレイアウトシフトの紹介と、修正の仕方を紹介する記事です。<br>
幅の異なるフォントを切り替えて使っている場合などには注意が必要です。</p>
<h2 id="webperf-snippets-%E2%80%93-nextra">
<a class="header-anchor-link" href="#webperf-snippets-%E2%80%93-nextra" aria-hidden="true"></a> WebPerf Snippets – Nextra</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__687bb317b59b4" src="https://embed.zenn.studio/card#zenn-embedded__687bb317b59b4" data-content="https%3A%2F%2Fwebperf-snippets.nucliweb.net%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://webperf-snippets.nucliweb.net/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://webperf-snippets.nucliweb.net/</a></p>
<p>パフォーマンス関連のデータを取得するスニペットのまとめです。</p>


Astro 2.6リリースなど : Cybozu Frontend Weekly (2023-06-13号)

Astroがドキュメントサイト作成のためのテンプレートを公開

JSConf JP 2023が 11/19にオフラインで開催予定

フロントエンドリアーキテクトの話 （ZOZO Tech Meetup発表資料より）

Safari 17 beta に入る機能のまとめ

DockerコンテナをWebブラウザで実行可能にする container2wasm 0.3 リリース

モダンCSSをふんだんに使って button/card/pagination/navigation を作るサンプル

自動テスト用のChromeのバイナリがバージョンごとにダウンロードできるように

Watch Out for Layout Shifts with ‘ch’ Units

Discussion