<p>こんにちは! サイボウズ株式会社フロントエンドエンジニアの <a href="https://twitter.com/nissy_dev" target="_blank" rel="nofollow noopener noreferrer">nissy</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 という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。</p>
<p>今回は、2023/09/26 の 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="node-v20.6.0-(current)-%7C-node.js">
<a class="header-anchor-link" href="#node-v20.6.0-(current)-%7C-node.js" aria-hidden="true"></a> Node v20.6.0 (Current) | Node.js</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__541c8016d3624" src="https://embed.zenn.studio/card#zenn-embedded__541c8016d3624" data-content="https%3A%2F%2Fnodejs.org%2Fja%2Fblog%2Frelease%2Fv20.6.0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nodejs.org/ja/blog/release/v20.6.0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nodejs.org/ja/blog/release/v20.6.0</a></p>
<p>Node.js v20.6.0 のリリースブログです。<code>.env</code> ファイルのビルトインサポートや <code>import.meta.resolve</code> がフラグなしで利用可能になる等の更新が行われています。</p>
<h2 id="chakra%2C-panda-and-ark---what's-the-plan%3F">
<a class="header-anchor-link" href="#chakra%2C-panda-and-ark---what's-the-plan%3F" aria-hidden="true"></a> Chakra, Panda and Ark - What's the plan?</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7a65525a88d2f" src="https://embed.zenn.studio/card#zenn-embedded__7a65525a88d2f" data-content="https%3A%2F%2Fwww.adebayosegun.com%2Fblog%2Fchakra-panda-ark-whats-the-plan" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.adebayosegun.com/blog/chakra-panda-ark-whats-the-plan</a></p>
<p>Chakra UI と新しく開発している Panda CSS・Zag.js・Ark UI との関係性を整理しつつ、今後の開発の方向性などに関する多くの疑問点に答えている記事です。Chakra UI の v3 では、Next.js のサポートの改善、Panda CSS との連携の改善などを予定しています。</p>
<h2 id="%E3%81%AA%E3%82%93%E3%81%A7-bun-install-%E3%81%AF%E9%80%9F%E3%81%84%E3%81%AE%E3%81%8B%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%81%AA%E3%82%93%E3%81%A7-bun-install-%E3%81%AF%E9%80%9F%E3%81%84%E3%81%AE%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> なんで bun install は速いのか？</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__55016cf6f1533" src="https://embed.zenn.studio/card#zenn-embedded__55016cf6f1533" data-content="https%3A%2F%2Fzenn.dev%2Flaiso%2Fscraps%2F9a787a6888e228" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/laiso/scraps/9a787a6888e228" style="display:none" target="_blank">https://zenn.dev/laiso/scraps/9a787a6888e228</a></p>
<p><code>bun install</code> の速さについて調査しているスクラップです。キャッシュの扱いや lockfile を生成するための npm API へのアクセスなどが他のパッケージマネージャーとの速度差に繋がっているようです。</p>
<h2 id="v0-by-vercel-labs">
<a class="header-anchor-link" href="#v0-by-vercel-labs" aria-hidden="true"></a> v0 by Vercel Labs</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__70d046bf68df6" src="https://embed.zenn.studio/tweet#zenn-embedded__70d046bf68df6" data-content="https%3A%2F%2Fx.com%2Fvercel%2Fstatus%2F1702351846445080953%3Fs%3D20" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/vercel/status/1702351846445080953?s=20" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/vercel/status/1702351846445080953?s=20</a></p>
<p>Vercel がテキストのプロンプトから UI を生成するサービスを開発中です。現在は private alpha になっており、利用したい人は Waitlist に登録する必要があります。</p>
<p>サイトでは、実際に生成された UI の見た目と Tailwind CSS でスタイリングされた React コンポーネントや HTML のサンプルが確認できます。</p>
<h2 id="submit-your-proposals-for-interop-2024">
<a class="header-anchor-link" href="#submit-your-proposals-for-interop-2024" aria-hidden="true"></a> Submit your proposals for Interop 2024</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a0cd590a38c36" src="https://embed.zenn.studio/card#zenn-embedded__a0cd590a38c36" data-content="https%3A%2F%2Fweb.dev%2Finterop-2024-proposals%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://web.dev/interop-2024-proposals/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://web.dev/interop-2024-proposals/</a></p>
<p>Interop 2024 の提案を 9/14〜10/5 の期間で募集しています。ブラウザ間の互換性向上の取り組みを誰でも提案できるので、興味のある人は提案してみてはいかかでしょうか。</p>
<h2 id="next.js-conf">
<a class="header-anchor-link" href="#next.js-conf" aria-hidden="true"></a> Next.js Conf</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f3e4b647f383a" src="https://embed.zenn.studio/card#zenn-embedded__f3e4b647f383a" data-content="https%3A%2F%2Fnextjs.org%2Fconf" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs.org/conf" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/conf</a></p>
<p>今年の Next.js Conf は 10/26 に行われます！</p>
<h2 id="typescript5.2-%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F-using-declarations-and-explicit-resource-management-%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%A7%E6%B4%BB%E7%94%A8%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#typescript5.2-%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F-using-declarations-and-explicit-resource-management-%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%A7%E6%B4%BB%E7%94%A8%E3%81%99%E3%82%8B" aria-hidden="true"></a> TypeScript5.2 で追加された using Declarations and Explicit Resource Management をテストで活用する</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ce0c893a4a9fb" src="https://embed.zenn.studio/card#zenn-embedded__ce0c893a4a9fb" data-content="https%3A%2F%2Fblog.nnn.dev%2Fentry%2F2023%2F09%2F14%2F110000" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.nnn.dev/entry/2023/09/14/110000" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.nnn.dev/entry/2023/09/14/110000</a></p>
<p>テストコードの改善のために TypeScript5.2 で追加された Explicit Resource Management を利用している記事です。<code>afterEach</code> で書いていたテストの後処理を <code>Symbol.dispose</code> メソッドと using 宣言を使って実装することで、カプセル化などの恩恵が得られる例を紹介しています。</p>
<h2 id="webkit-features-in-safari-17.0">
<a class="header-anchor-link" href="#webkit-features-in-safari-17.0" aria-hidden="true"></a> WebKit Features in Safari 17.0</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__33ddd01c6be34" src="https://embed.zenn.studio/card#zenn-embedded__33ddd01c6be34" data-content="https%3A%2F%2Fwebkit.org%2Fblog%2F14445%2Fwebkit-features-in-safari-17-0%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://webkit.org/blog/14445/webkit-features-in-safari-17-0/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://webkit.org/blog/14445/webkit-features-in-safari-17-0/</a></p>
<p>Safari 17.0 に入った WebKit の新しい機能の紹介記事です。search 要素や popover API などが紹介されています。</p>
<h2 id="remix-v2">
<a class="header-anchor-link" href="#remix-v2" aria-hidden="true"></a> Remix v2</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__696513296869d" src="https://embed.zenn.studio/card#zenn-embedded__696513296869d" data-content="https%3A%2F%2Fremix.run%2Fblog%2Fremix-v2" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://remix.run/blog/remix-v2" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://remix.run/blog/remix-v2</a></p>
<p>Remix の v2 が公開されました。このブログでは v2 で入る機能を簡単に紹介しつつ、React Server Components に対する今後の対応方針について記述されています。</p>
<h2 id="typescript-origins%3A-the-documentary">
<a class="header-anchor-link" href="#typescript-origins%3A-the-documentary" aria-hidden="true"></a> TypeScript Origins: The Documentary</h2>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/U6s2pdxebSo" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=U6s2pdxebSo" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=U6s2pdxebSo</a></p>
<p>TypeScript に関するドキュメンタリー動画が公開されました！<a href="https://twitter.com/ahejlsberg" target="_blank" rel="nofollow noopener noreferrer">Anders Hejlsberg</a> さんを始めとした多くの関係者のインタビューによって構成されており、TypeScript が OSS としてどのように開発されていったのかがわかる内容になっています。</p>
<h2 id="did-the-react-team-forget-the-react-forget-compiler%3F">
<a class="header-anchor-link" href="#did-the-react-team-forget-the-react-forget-compiler%3F" aria-hidden="true"></a> Did the React team forget the React Forget compiler?</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__92b0159011f7c" src="https://embed.zenn.studio/card#zenn-embedded__92b0159011f7c" data-content="https%3A%2F%2Fwww.reddit.com%2Fr%2Freactjs%2Fcomments%2F16nnh4z%2Fcomment%2Fk1jbr4t%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.reddit.com/r/reactjs/comments/16nnh4z/comment/k1jbr4t/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.reddit.com/r/reactjs/comments/16nnh4z/comment/k1jbr4t/</a></p>
<p>React Forget の現状について、React コアチームの方からのコメントです。React Forget を設計する上での難しいポイントの１つとして、エイリアス解析を取り上げて解説しています。</p>
<h2 id="deno-vs.-bun-vs.-node.js%3A-a-feature-comparison">
<a class="header-anchor-link" href="#deno-vs.-bun-vs.-node.js%3A-a-feature-comparison" aria-hidden="true"></a> Deno vs. Bun vs. Node.js: A Feature Comparison</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__706cab1773a0c" src="https://embed.zenn.studio/card#zenn-embedded__706cab1773a0c" data-content="https%3A%2F%2Fdev.hexagon.56k.guru%2Fposts%2Fdeno-vs-bun-vs-node%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://dev.hexagon.56k.guru/posts/deno-vs-bun-vs-node/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://dev.hexagon.56k.guru/posts/deno-vs-bun-vs-node/</a></p>
<p>Deno、Bun、Node.js を比較をしている記事です。機能ごとのサポート状況がまとめられたテーブルが非常にわかりやすいです。</p>
<h2 id="deno-1.37%3A-modern-javascript-in-jupyter-notebooks">
<a class="header-anchor-link" href="#deno-1.37%3A-modern-javascript-in-jupyter-notebooks" aria-hidden="true"></a> Deno 1.37: Modern JavaScript in Jupyter Notebooks</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cb678c5376874" src="https://embed.zenn.studio/card#zenn-embedded__cb678c5376874" data-content="https%3A%2F%2Fdeno.com%2Fblog%2Fv1.37" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://deno.com/blog/v1.37" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://deno.com/blog/v1.37</a></p>
<p>Deno 1.37 がリリースされました。このリリースでは、jupyter notebook との連携や VSCode 拡張の改善などが行われています。</p>
<h2 id="introducing-web-sustainability-guidelines">
<a class="header-anchor-link" href="#introducing-web-sustainability-guidelines" aria-hidden="true"></a> Introducing Web Sustainability Guidelines</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8882a46713bd2" src="https://embed.zenn.studio/card#zenn-embedded__8882a46713bd2" data-content="https%3A%2F%2Fwww.w3.org%2Fblog%2F2023%2Fintroducing-web-sustainability-guidelines%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.w3.org/blog/2023/introducing-web-sustainability-guidelines/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.w3.org/blog/2023/introducing-web-sustainability-guidelines/</a></p>
<p>W3C で <a href="https://w3c.github.io/sustyweb/" target="_blank" rel="nofollow noopener noreferrer">Web Sustainability Guidelines</a> というレポートが公開されました。このレポートでは、Web サイトと製品をより持続可能にするための多くの推奨事項がまとめられています。</p>
<h2 id="cloudflare-fonts%3A-enhancing-website-font-privacy-and-speed">
<a class="header-anchor-link" href="#cloudflare-fonts%3A-enhancing-website-font-privacy-and-speed" aria-hidden="true"></a> Cloudflare Fonts: enhancing website font privacy and speed</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f6d5b96a61611" src="https://embed.zenn.studio/card#zenn-embedded__f6d5b96a61611" data-content="https%3A%2F%2Fblog.cloudflare.com%2Fcloudflare-fonts-enhancing-website-privacy-speed%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.cloudflare.com/cloudflare-fonts-enhancing-website-privacy-speed/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.cloudflare.com/cloudflare-fonts-enhancing-website-privacy-speed/</a></p>
<p>Couldflare が Cloudflare Fonts というサービスを公開しました。Cloudflare Fonts を使うと Google Fonts をサイト独自のドメインから簡単に読み込めるようになり、パフォーマンスやプライバシーでの改善が期待できます。</p>
<h2 id="state-of-html-2023-now-open!">
<a class="header-anchor-link" href="#state-of-html-2023-now-open!" aria-hidden="true"></a> State of HTML 2023 now open!</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__82e4bdf9673fc" src="https://embed.zenn.studio/card#zenn-embedded__82e4bdf9673fc" data-content="https%3A%2F%2Flea.verou.me%2Fblog%2F2023%2Fstate-of-html-2023%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://lea.verou.me/blog/2023/state-of-html-2023/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://lea.verou.me/blog/2023/state-of-html-2023/</a></p>
<p>State of JavaScript や State of CSS に続いて、今年は State of HTML も公開されたようです。HTML の知識の復習にもなると思うので、時間がある人は投票してみてはいかがでしょうか。</p>
<h2 id="budoux%3A-%E8%AA%AD%E3%81%BF%E3%82%84%E3%81%99%E3%81%84%E6%94%B9%E8%A1%8C%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E8%BB%BD%E9%87%8F%E3%81%AA%E5%88%86%E3%81%8B%E3%81%A1%E6%9B%B8%E3%81%8D%E5%99%A8">
<a class="header-anchor-link" href="#budoux%3A-%E8%AA%AD%E3%81%BF%E3%82%84%E3%81%99%E3%81%84%E6%94%B9%E8%A1%8C%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E8%BB%BD%E9%87%8F%E3%81%AA%E5%88%86%E3%81%8B%E3%81%A1%E6%9B%B8%E3%81%8D%E5%99%A8" aria-hidden="true"></a> BudouX: 読みやすい改行のための軽量な分かち書き器</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2c7b2cb094243" src="https://embed.zenn.studio/card#zenn-embedded__2c7b2cb094243" data-content="https%3A%2F%2Fdevelopers-jp.googleblog.com%2F2023%2F09%2Fbudoux-adobe.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developers-jp.googleblog.com/2023/09/budoux-adobe.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developers-jp.googleblog.com/2023/09/budoux-adobe.html</a></p>
<p>読みやすい改行を実現するための BudouX というライブラリの紹介記事です。Chrome 119 以降では、<code>lang="ja"</code> かつスタイルシートで <code>word-break: auto-phrase</code> と指定された要素は BudouX によって折り返されるようになります。</p>
<p>余談ですが、BudouX は Frontend Expert チームのブログにも使っています！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3e09ed212c565" src="https://embed.zenn.studio/card#zenn-embedded__3e09ed212c565" data-content="https%3A%2F%2Fgithub.com%2Fcybozu%2Ffrontend-expert%2Fpull%2F51" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/cybozu/frontend-expert/pull/51" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/cybozu/frontend-expert/pull/51</a></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>個人的には、TypeScript のドキュメンタリーが面白かったです。Web が普及することを常に見据えて、JavaScript のスーパセットであることに労力を惜しまなかったことが伝わってくる内容でした。TypeScript の OSS としての発展は、Microsoft 社内での OSS に対する認識を大きく変化させていたのも印象的でした。</p>
<p>サイボウズでは毎月、最終火曜日の 17 時から Frontend Monthly というイベントを YouTube Live で開催しています。その月のフロントエンド注目ニュースや、ゲストを呼んでの対談など、フロントエンドに関する発信をしていますので是非どうぞ！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e3cf25e37bda8" src="https://embed.zenn.studio/card#zenn-embedded__e3cf25e37bda8" data-content="https%3A%2F%2Fcybozu.github.io%2Ffrontend-monthly%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://cybozu.github.io/frontend-monthly/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://cybozu.github.io/frontend-monthly/</a></p>


TypeScript のドキュメンタリーの公開など : Cybozu Frontend Weekly (2023/09/26号)

TypeScript5.2 で追加された using Declarations and Explicit Resource Management をテストで活用する

Did the React team forget the React Forget compiler?

Deno vs. Bun vs. Node.js: A Feature Comparison

Deno 1.37: Modern JavaScript in Jupyter Notebooks

Introducing Web Sustainability Guidelines

Cloudflare Fonts: enhancing website font privacy and speed

BudouX: 読みやすい改行のための軽量な分かち書き器

Discussion