<p data-line="0" class="code-line">こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの <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" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="4" class="code-line">サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。</p>
<p data-line="6" class="code-line">今回は、2025 年 1 月 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" data-line="8" class="code-line">
<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="blog%3A-doubleclickjacking%3A-a-new-era-of-ui-redressing" data-line="10" class="code-line">
<a class="header-anchor-link" href="#blog%3A-doubleclickjacking%3A-a-new-era-of-ui-redressing" aria-hidden="true"></a> Blog: DoubleClickjacking: A New Era of UI Redressing</h2>
<p data-line="12" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3f1f355780426" src="https://embed.zenn.studio/card#zenn-embedded__3f1f355780426" data-content="https%3A%2F%2Fwww.paulosyibelo.com%2F2024%2F12%2Fdoubleclickjacking-what.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.paulosyibelo.com/2024/12/doubleclickjacking-what.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.paulosyibelo.com/2024/12/doubleclickjacking-what.html</a></p>
<p data-line="14" class="code-line">悪意のあるページによるダブルクリックを利用した攻撃手法に関しての解説です。</p>
<h2 id="5-tips-to-effectively-optimize-inp-in-react" data-line="16" class="code-line">
<a class="header-anchor-link" href="#5-tips-to-effectively-optimize-inp-in-react" aria-hidden="true"></a> 5 tips to effectively optimize INP in React</h2>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f1bb953f49628" src="https://embed.zenn.studio/card#zenn-embedded__f1bb953f49628" data-content="https%3A%2F%2Fcalendar.perfplanet.com%2F2024%2F5-tips-to-effectively-optimize-inp-in-react%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://calendar.perfplanet.com/2024/5-tips-to-effectively-optimize-inp-in-react/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://calendar.perfplanet.com/2024/5-tips-to-effectively-optimize-inp-in-react/</a></p>
<p data-line="20" class="code-line">React で INP を改善するための tips です。DOM サイズの削減が推奨されており、計測方法についても紹介されています。<br>
また、Suspense の利用や useEffect 利用時の注意事項などについても触れられています。</p>
<h2 id="css-wish-list-2025" data-line="23" class="code-line">
<a class="header-anchor-link" href="#css-wish-list-2025" aria-hidden="true"></a> CSS Wish List 2025</h2>
<p data-line="25" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fe8f246057c6c" src="https://embed.zenn.studio/card#zenn-embedded__fe8f246057c6c" data-content="https%3A%2F%2Fmeyerweb.com%2Feric%2Fthoughts%2F2025%2F01%2F08%2Fcss-wish-list-2025%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://meyerweb.com/eric/thoughts/2025/01/08/css-wish-list-2025/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://meyerweb.com/eric/thoughts/2025/01/08/css-wish-list-2025/</a></p>
<p data-line="27" class="code-line">Eric Mayer が 2025 年の CSS に期待する機能について解説したページです。2023 年にも同様の記事が公開されており、含まれていた多くの機能が実際に利用可能となりました。<br>
2025 年版では、句読点のぶら下がりをコントロールする Hanging punctuation や、Masonry layout などが挙げられています。</p>
<h2 id="firefox-134.0-%E3%81%8A%E3%82%88%E3%81%B3-135.0a1-nightly" data-line="30" class="code-line">
<a class="header-anchor-link" href="#firefox-134.0-%E3%81%8A%E3%82%88%E3%81%B3-135.0a1-nightly" aria-hidden="true"></a> Firefox 134.0 および 135.0a1 Nightly</h2>
<p data-line="32" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__78a2feef2c902" src="https://embed.zenn.studio/card#zenn-embedded__78a2feef2c902" data-content="https%3A%2F%2Fwww.mozilla.org%2Fen-US%2Ffirefox%2F134.0%2Freleasenotes%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.mozilla.org/en-US/firefox/134.0/releasenotes/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.mozilla.org/en-US/firefox/134.0/releasenotes/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e1590ccee92a9" src="https://embed.zenn.studio/card#zenn-embedded__e1590ccee92a9" data-content="https%3A%2F%2Fwww.mozilla.org%2Fen-US%2Ffirefox%2F135.0a1%2Freleasenotes%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.mozilla.org/en-US/firefox/135.0a1/releasenotes/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.mozilla.org/en-US/firefox/135.0a1/releasenotes/</a></p>
<p data-line="35" class="code-line">Firefox 134.0 がリリースされました。<code>RegExp.escape()</code> や <code>Promise.try()</code> のサポートなどが含まれます。<br>
また、135.0a1 Nightly では Temporal も実装されており、<code>javascript.options.experimental.temporal</code> フラグを有効化することで試せます。</p>
<h2 id="new-front-end-features-for-designers-in-2025-%E2%80%94-smashing-magazine" data-line="38" class="code-line">
<a class="header-anchor-link" href="#new-front-end-features-for-designers-in-2025-%E2%80%94-smashing-magazine" aria-hidden="true"></a> New Front-End Features For Designers In 2025 — Smashing Magazine</h2>
<p data-line="40" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8ff8fc1694ab3" src="https://embed.zenn.studio/card#zenn-embedded__8ff8fc1694ab3" data-content="https%3A%2F%2Fwww.smashingmagazine.com%2F2024%2F12%2Fnew-front-end-features-for-designers-in-2025" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025</a></p>
<p data-line="42" class="code-line">ここ数年で新たに利用可能となった HTML および CSS の機能のまとめです。<br>
anchor-positioning, Container Queries, <code>&lt;dialog&gt;</code> といった機能に触れられています。</p>
<h2 id="mdn-2024-content-projects-%7C-mdn-blog" data-line="45" class="code-line">
<a class="header-anchor-link" href="#mdn-2024-content-projects-%7C-mdn-blog" aria-hidden="true"></a> MDN 2024 content projects | MDN Blog</h2>
<p data-line="47" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3f06175e8cad4" src="https://embed.zenn.studio/card#zenn-embedded__3f06175e8cad4" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fblog%2Fmdn-2024-content-projects%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.mozilla.org/en-US/blog/mdn-2024-content-projects/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/blog/mdn-2024-content-projects/</a></p>
<p data-line="49" class="code-line">MDN が、HTTP, MathML, Web Manifest のドキュメントに絞り、2024 年 7 月から 12 月にかけてコンテンツを刷新したとのことです。</p>
<h2 id="what-is-an-input-method-editor%3F" data-line="51" class="code-line">
<a class="header-anchor-link" href="#what-is-an-input-method-editor%3F" aria-hidden="true"></a> What is an Input Method Editor?</h2>
<p data-line="53" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d4533cc95b1fe" src="https://embed.zenn.studio/card#zenn-embedded__d4533cc95b1fe" data-content="https%3A%2F%2Fgarai.ca%2Fwhat_is_ime%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://garai.ca/what_is_ime/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://garai.ca/what_is_ime/</a></p>
<p data-line="55" class="code-line">文字入力に使われる IME の基本的な概念や API に関しての解説記事です。</p>
<h2 id="announcing-supporters-of-chromium-based-browsers" data-line="57" class="code-line">
<a class="header-anchor-link" href="#announcing-supporters-of-chromium-based-browsers" aria-hidden="true"></a> Announcing Supporters of Chromium-based Browsers</h2>
<p data-line="59" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8451e2de0979a" src="https://embed.zenn.studio/card#zenn-embedded__8451e2de0979a" data-content="https%3A%2F%2Fblog.chromium.org%2F2025%2F01%2Fannouncing-supporters-of-chromium-based.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.chromium.org/2025/01/announcing-supporters-of-chromium-based.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.chromium.org/2025/01/announcing-supporters-of-chromium-based.html</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1203748403056" src="https://embed.zenn.studio/card#zenn-embedded__1203748403056" data-content="https%3A%2F%2Fwww.linuxfoundation.org%2Fsupporters-of-chromium-based-browsers" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.linuxfoundation.org/supporters-of-chromium-based-browsers" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.linuxfoundation.org/supporters-of-chromium-based-browsers</a></p>
<p data-line="62" class="code-line">Google と The Linux Foundation がパートナーシップを締結しました。<br>
また、Chromium エコシステムの発展を目指す「The Supporters of Chromium-Based Browsers」も同時にアナウンスされました。</p>
<h2 id="goodbye-wintercg%2C-welcome-wintertc" data-line="65" class="code-line">
<a class="header-anchor-link" href="#goodbye-wintercg%2C-welcome-wintertc" aria-hidden="true"></a> Goodbye WinterCG, welcome WinterTC</h2>
<p data-line="67" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__abce107b399a1" src="https://embed.zenn.studio/card#zenn-embedded__abce107b399a1" data-content="https%3A%2F%2Fdeno.com%2Fblog%2Fwintertc" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://deno.com/blog/wintertc" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://deno.com/blog/wintertc</a></p>
<p data-line="69" class="code-line">JS ランタイムの相互運用性を推進するコミュニティグループであった WinterCG が Ecma International に移行し、新たに WinterTC という名称となりました。<br>
これにより、標準規格の発行も可能となります。</p>
<h2 id="standard-schema%2Fstandard-schema" data-line="72" class="code-line">
<a class="header-anchor-link" href="#standard-schema%2Fstandard-schema" aria-hidden="true"></a> standard-schema/standard-schema</h2>
<p data-line="74" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1285b9569102c" src="https://embed.zenn.studio/card#zenn-embedded__1285b9569102c" data-content="https%3A%2F%2Fgithub.com%2Fstandard-schema%2Fstandard-schema" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/standard-schema/standard-schema" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/standard-schema/standard-schema</a></p>
<p data-line="76" class="code-line">zod や valibot などに代表されるスキーマライブラリなどの標準インタフェースを定義した仕様です。<br>
tRPC や TanStack Router など、すでに一部のライブラリはこの仕様に則っているようです。</p>
<h2 id="2024-javascript-rising-stars" data-line="79" class="code-line">
<a class="header-anchor-link" href="#2024-javascript-rising-stars" aria-hidden="true"></a> 2024 JavaScript Rising Stars</h2>
<p data-line="81" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__40b1adf3f4b0f" src="https://embed.zenn.studio/card#zenn-embedded__40b1adf3f4b0f" data-content="https%3A%2F%2Frisingstars.js.org%2F2024%2Fen" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://risingstars.js.org/2024/en" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://risingstars.js.org/2024/en</a></p>
<p data-line="83" class="code-line">2024 年に GitHub での Star 数の増加が大きかった JavaScript 関連リポジトリです。<br>
shadcn/ui が 2 年連続で 1 位となりました。また、Back-end/Full-Stack 部門で Hono が 2 位となっています。</p>
<h2 id="updates-to-the-customizable-select-api" data-line="86" class="code-line">
<a class="header-anchor-link" href="#updates-to-the-customizable-select-api" aria-hidden="true"></a> Updates to the customizable select API</h2>
<p data-line="88" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3d20fade298ee" src="https://embed.zenn.studio/card#zenn-embedded__3d20fade298ee" data-content="https%3A%2F%2Funa.im%2Fselect-updates%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://una.im/select-updates/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://una.im/select-updates/</a></p>
<p data-line="90" class="code-line">2024/9 に出された<a href="https://developer.chrome.com/blog/rfc-customizable-select?hl=ja" target="_blank" rel="nofollow noopener noreferrer">RFC</a>からの差分をまとめた、「Customizable Select Element」のアップデート記事です。<br>
主に要素・擬似要素名の変更や、ベーススタイルの変更などがピックアップされています。<br>
Customizable Select Element は、複数の関連する技術から構成されており、それらは現在も仕様策定中となっています。</p>
<h2 id="%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D" data-line="94" class="code-line">
<a class="header-anchor-link" href="#%E3%81%82%E3%81%A8%E3%81%8C%E3%81%8D" aria-hidden="true"></a> あとがき</h2>
<p data-line="96" class="code-line">2024 JavaScript Rising Stars で Hono が急上昇していましたね！自分も応援してます！</p>


WinterCG の WinterTC への移行など : Cybozu Frontend Weekly (2025-1-14号)

Blog: DoubleClickjacking: A New Era of UI Redressing

5 tips to effectively optimize INP in React

New Front-End Features For Designers In 2025 — Smashing Magazine

Announcing Supporters of Chromium-based Browsers

Discussion