<p>こんにちは！サイボウズ株式会社フロントエンドエンジニアの<a href="https://x.com/k1tikurisu" target="_blank" rel="nofollow noopener noreferrer">daiki（@k1tikurisu）</a>です。</p>
<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>サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。</p>
<p>今回は、2024/07/09の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>
<h3 id="react-%26-codemod-announcement">
<a class="header-anchor-link" href="#react-%26-codemod-announcement" aria-hidden="true"></a> React &amp; Codemod Announcement</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d579a4d33dfbe" src="https://embed.zenn.studio/card#zenn-embedded__d579a4d33dfbe" data-content="https%3A%2F%2Fcodemod.com%2Fblog%2Freact-announcement" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://codemod.com/blog/react-announcement" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://codemod.com/blog/react-announcement</a></p>
<p>React 19への移行を支援するツール（codemod）が公開されました。例えば、次の移行作業を自動化してくれます。</p>
<ul>
<li>
<code>Context.Provider</code>を<code>Context</code>に置き換え</li>
<li>
<code>forwardRef</code>の削除</li>
<li>
<code>useContext</code>を<code>use</code>に置き換え</li>
</ul>
<h3 id="next-cache-toolbar">
<a class="header-anchor-link" href="#next-cache-toolbar" aria-hidden="true"></a> next-cache-toolbar</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b581dc0ac5e7" src="https://embed.zenn.studio/card#zenn-embedded__b581dc0ac5e7" data-content="https%3A%2F%2Fgithub.com%2FKajSzy%2Fnext-cache-toolbar%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/KajSzy/next-cache-toolbar/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/KajSzy/next-cache-toolbar/</a></p>
<p>Next.jsの<a href="https://nextjs.org/docs/app/building-your-application/caching#data-cache" target="_blank" rel="nofollow noopener noreferrer">Data Cache</a>の中身を視覚的に見れるツールです。</p>
<h3 id="diving-deep-into-array-index-positions">
<a class="header-anchor-link" href="#diving-deep-into-array-index-positions" aria-hidden="true"></a> Diving Deep into Array Index Positions</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c9185f53c02fb" src="https://embed.zenn.studio/card#zenn-embedded__c9185f53c02fb" data-content="https%3A%2F%2Fwww.kirupa.com%2Fjavascript%2Fdeep_dive_array_index_positions.htm" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.kirupa.com/javascript/deep_dive_array_index_positions.htm" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.kirupa.com/javascript/deep_dive_array_index_positions.htm</a></p>
<p>配列のインデックス位置についての考察記事です。</p>
<p>配列に不正なインデックス値を入れるとオブジェクトのキーのように扱われるため、配列操作は正確に行うことが大切であると結論づけています。</p>
<h3 id="vercel%E3%81%8Cppr%E3%82%92node%E3%83%A9%E3%83%B3%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AB%E3%81%97%E3%81%9F%E4%BB%B6%E3%81%8B%E3%82%89web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%A8%E3%82%A8%E3%83%83%E3%82%B8%E3%81%AE%E5%8B%95%E5%90%91%E3%81%AB%E8%BF%AB%E3%82%8B">
<a class="header-anchor-link" href="#vercel%E3%81%8Cppr%E3%82%92node%E3%83%A9%E3%83%B3%E3%82%BF%E3%82%A4%E3%83%A0%E3%81%AB%E3%81%97%E3%81%9F%E4%BB%B6%E3%81%8B%E3%82%89web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%A8%E3%82%A8%E3%83%83%E3%82%B8%E3%81%AE%E5%8B%95%E5%90%91%E3%81%AB%E8%BF%AB%E3%82%8B" aria-hidden="true"></a> VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c61b5b7505cca" src="https://embed.zenn.studio/card#zenn-embedded__c61b5b7505cca" data-content="https%3A%2F%2Fzenn.dev%2Fsumiren%2Farticles%2F7886f5079cced0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/sumiren/articles/7886f5079cced0" style="display:none" target="_blank">https://zenn.dev/sumiren/articles/7886f5079cced0</a></p>
<p>Xで話題になった、Lee Robinsonの<a href="https://twitter.com/leeerob/status/1780705942734331983" target="_blank" rel="nofollow noopener noreferrer">ポスト</a>について、その背景と本当にNode.jsランタイムの方が速くなるのかなど、議論ベースでまとめてくださっている記事です。</p>
<h3 id="nuxt-2-end-of-life-(eol)">
<a class="header-anchor-link" href="#nuxt-2-end-of-life-(eol)" aria-hidden="true"></a> Nuxt 2 End-of-Life (EOL)</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6f9fbcc1397ea" src="https://embed.zenn.studio/card#zenn-embedded__6f9fbcc1397ea" data-content="https%3A%2F%2Fnuxt.com%2Fblog%2Fnuxt2-eol" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nuxt.com/blog/nuxt2-eol" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nuxt.com/blog/nuxt2-eol</a></p>
<p>Nuxt2がEOLになることが発表されました。EOL後もNuxt2を使うユーザのために、HeroDevsからNever-Ending Support (NES)が提供されています。</p>
<h3 id="chrome-127-beta">
<a class="header-anchor-link" href="#chrome-127-beta" aria-hidden="true"></a> Chrome 127 beta</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e1ba86907c6bf" src="https://embed.zenn.studio/card#zenn-embedded__e1ba86907c6bf" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fchrome-127-beta" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/blog/chrome-127-beta" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/chrome-127-beta</a></p>
<p>Chrome 127のbeta版が公開されました。CSSのフォントサイズ調整（<code>font-size-adjust</code>）など、盛りだくさんな内容になっています。</p>
<h3 id="an-origin-trial-for-a-new-html-%3Cpermission%3E-element">
<a class="header-anchor-link" href="#an-origin-trial-for-a-new-html-%3Cpermission%3E-element" aria-hidden="true"></a> An origin trial for a new HTML <code>&lt;permission&gt;</code> element</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7d4bb9e6dd893" src="https://embed.zenn.studio/card#zenn-embedded__7d4bb9e6dd893" data-content="https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fpermission-element-origin-trial" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.chrome.com/blog/permission-element-origin-trial" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.chrome.com/blog/permission-element-origin-trial</a></p>
<p>Permission Prompt（Chromeだと左上から出てくる、xxを許可しますか？のやつ）を、permission要素を使って制御できるようにする機能が試験運用されています。CSSでスタイリングも可能で、今後標準化される予定です。</p>
<h3 id="state-of-javascript-2023">
<a class="header-anchor-link" href="#state-of-javascript-2023" aria-hidden="true"></a> State of JavaScript 2023</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1312f31fc7041" src="https://embed.zenn.studio/card#zenn-embedded__1312f31fc7041" data-content="https%3A%2F%2F2023.stateofjs.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://2023.stateofjs.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://2023.stateofjs.com/</a></p>
<p>State of JavaScript 2023が公開されました。JavaScript技術の人気度や使用状況の変化がグラフで可視化されています。</p>
<h3 id="react-19-%E3%81%A7%E5%A4%89%E3%82%8F%E3%82%8B%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E5%91%A8%E3%82%8A%E3%81%AE%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#react-19-%E3%81%A7%E5%A4%89%E3%82%8F%E3%82%8B%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E5%91%A8%E3%82%8A%E3%81%AE%E6%8A%80%E8%A1%93" aria-hidden="true"></a> React 19 で変わるアクセシビリティ周りの技術</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d2ec51796a595" src="https://embed.zenn.studio/card#zenn-embedded__d2ec51796a595" data-content="https%3A%2F%2Ftech.smarthr.jp%2Fentry%2F2024%2F06%2F20%2F161810" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tech.smarthr.jp/entry/2024/06/20/161810" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tech.smarthr.jp/entry/2024/06/20/161810</a></p>
<p>React19で新しく加わる機能がa11yにどういう影響を与えるかを考察した記事です。</p>
<h3 id="%E4%BB%8A%E5%BE%8C%E3%81%AEnext.js%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AE%E6%96%B9%E9%87%9D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AEnext.js%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AE%E6%96%B9%E9%87%9D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> 今後のNext.jsのキャッシュの方針について</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__7d730d791b9fa" src="https://embed.zenn.studio/tweet#zenn-embedded__7d730d791b9fa" data-content="https%3A%2F%2Fx.com%2Fleeerob%2Fstatus%2F1803824227704877236" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/leeerob/status/1803824227704877236" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/leeerob/status/1803824227704877236</a></p>
<p>今後のNext.jsのキャッシュの方針をまとめたポストです。Next.js 15では、fetchリクエストはデフォルトでキャッシュされなくなりました。</p>
<h3 id="%E3%80%90%E5%B0%8F%E3%83%8D%E3%82%BF%E3%80%91react%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E3%83%AD%E3%82%B4%E3%82%92%E5%8F%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B%E3%81%A8%E3%83%AD%E3%82%B4%E3%81%8C%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%E3%81%AA%E3%81%A3%E3%81%9F">
<a class="header-anchor-link" href="#%E3%80%90%E5%B0%8F%E3%83%8D%E3%82%BF%E3%80%91react%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E3%83%AD%E3%82%B4%E3%82%92%E5%8F%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B%E3%81%A8%E3%83%AD%E3%82%B4%E3%81%8C%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%E3%81%AA%E3%81%A3%E3%81%9F" aria-hidden="true"></a> 【小ネタ】Reactのドキュメントのロゴを右クリックするとロゴがダウンロードできるようになった</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3b747d29d6edf" src="https://embed.zenn.studio/card#zenn-embedded__3b747d29d6edf" data-content="https%3A%2F%2Fgithub.com%2Freactjs%2Freact.dev%2Fpull%2F6986" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/reactjs/react.dev/pull/6986" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/reactjs/react.dev/pull/6986</a></p>
<p>ドキュメントの左上にあるロゴを右クリックすると、ロゴをダウンロードできるようになりました。</p>
<h3 id="polyfill-supply-chain-attack-hits-100k%2B-sites">
<a class="header-anchor-link" href="#polyfill-supply-chain-attack-hits-100k%2B-sites" aria-hidden="true"></a> Polyfill supply chain attack hits 100K+ sites</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1bf7f2bbe143c" src="https://embed.zenn.studio/card#zenn-embedded__1bf7f2bbe143c" data-content="https%3A%2F%2Fsansec.io%2Fresearch%2Fpolyfill-supply-chain-attack" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://sansec.io/research/polyfill-supply-chain-attack" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://sansec.io/research/polyfill-supply-chain-attack</a></p>
<p>Polyfill.ioにマルウェアが混入され、10万以上のサイトに影響を与えました。Polyfill.ioはブラウザ互換性の問題を解決するためのJavaScriptライブラリで、代わりとなるフォークライブラリがCloudflareから提供されています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ce9b03dc31381" src="https://embed.zenn.studio/card#zenn-embedded__ce9b03dc31381" data-content="https%3A%2F%2Fblog.cloudflare.com%2Fpolyfill-io-now-available-on-cdnjs-reduce-your-supply-chain-risk" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.cloudflare.com/polyfill-io-now-available-on-cdnjs-reduce-your-supply-chain-risk" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.cloudflare.com/polyfill-io-now-available-on-cdnjs-reduce-your-supply-chain-risk</a></p>
<h3 id="sustaining-digital-certificate-security---entrust-certificate-distrust">
<a class="header-anchor-link" href="#sustaining-digital-certificate-security---entrust-certificate-distrust" aria-hidden="true"></a> Sustaining Digital Certificate Security - Entrust Certificate Distrust</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a96d7ef803ca3" src="https://embed.zenn.studio/card#zenn-embedded__a96d7ef803ca3" data-content="https%3A%2F%2Fsecurity.googleblog.com%2F2024%2F06%2Fsustaining-digital-certificate-security.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://security.googleblog.com/2024/06/sustaining-digital-certificate-security.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://security.googleblog.com/2024/06/sustaining-digital-certificate-security.html</a></p>
<p>Entrustの証明書を使ったサービスは11月以降Chromeで開けなくなります。<code>--test-crs-constraints</code>フラグで事前に挙動をシミュレートすることができます。</p>
<h3 id="%E6%96%B0%E3%81%97%E3%81%84%E3%83%90%E3%83%B3%E3%83%89%E3%83%A9%E3%83%BCmaco">
<a class="header-anchor-link" href="#%E6%96%B0%E3%81%97%E3%81%84%E3%83%90%E3%83%B3%E3%83%89%E3%83%A9%E3%83%BCmaco" aria-hidden="true"></a> 新しいバンドラーMaco</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d28de56af7573" src="https://embed.zenn.studio/card#zenn-embedded__d28de56af7573" data-content="https%3A%2F%2Fgithub.com%2Fumijs%2Fmako" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/umijs/mako" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/umijs/mako</a></p>
<p>Rustベースのバンドラーで、非常に高速だそうです。</p>
<h3 id="%E6%96%B0%E3%81%97%E3%81%84%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3ladybird">
<a class="header-anchor-link" href="#%E6%96%B0%E3%81%97%E3%81%84%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3ladybird" aria-hidden="true"></a> 新しいブラウザエンジンLadybird</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8414c1ffe8cf5" src="https://embed.zenn.studio/card#zenn-embedded__8414c1ffe8cf5" data-content="https%3A%2F%2Fladybird.org%2F%23about" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ladybird.org/#about" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ladybird.org/#about</a></p>
<p>元々はSerenityOS専用だったものが、ブラウザエンジンとして切り離されたようです。</p>
<p>次のJxckさんの記事でも紹介されています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__bda965d660d45" src="https://embed.zenn.studio/card#zenn-embedded__bda965d660d45" data-content="https%3A%2F%2Fblog.jxck.io%2Fentries%2F2024-07-05%2Fwhy-are-new-browsers-required.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.jxck.io/entries/2024-07-05/why-are-new-browsers-required.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.jxck.io/entries/2024-07-05/why-are-new-browsers-required.html</a></p>
<h3 id="new-to-the-web-platform-in-june">
<a class="header-anchor-link" href="#new-to-the-web-platform-in-june" aria-hidden="true"></a> New to the web platform in June</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cc89afea682e6" src="https://embed.zenn.studio/card#zenn-embedded__cc89afea682e6" data-content="https%3A%2F%2Fweb.dev%2Fblog%2Fweb-platform-06-2024%3Fhl%3Den" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://web.dev/blog/web-platform-06-2024?hl=en" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://web.dev/blog/web-platform-06-2024?hl=en</a></p>
<p>6月にWebブラウザに追加された、安定版またはベータ版の機能を紹介する記事です。Firefox 127とChrome 126が安定版になりました。</p>
<h3 id="jsconf-jp-2024">
<a class="header-anchor-link" href="#jsconf-jp-2024" aria-hidden="true"></a> JSConf JP 2024</h3>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a4019daa42de6" src="https://embed.zenn.studio/card#zenn-embedded__a4019daa42de6" data-content="https%3A%2F%2Fjsconf.jp%2F2024%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://jsconf.jp/2024/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://jsconf.jp/2024/</a></p>
<p>JSConf JP 2024のCFP募集がはじまりました。</p>
<h2 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> あとがき</h2>
<p>個人的には、State of JavaScript 2023の<a href="https://2023.stateofjs.com/en-US/usage/#top_js_pain_points" target="_blank" rel="nofollow noopener noreferrer">JavaScript Pain Points</a>でJavaScript周りのきついポイントが紹介されていて面白かったです。</p>


Chrome 127 betaの公開など: Cybozu Frontend Weekly (2024-07-09号)

VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る

An origin trial for a new HTML <permission> element

React 19 で変わるアクセシビリティ周りの技術

今後のNext.jsのキャッシュの方針について

【小ネタ】Reactのドキュメントのロゴを右クリックするとロゴがダウンロードできるようになった

Polyfill supply chain attack hits 100K+ sites

Sustaining Digital Certificate Security - Entrust Certificate Distrust

新しいブラウザエンジンLadybird

Discussion