<p>寒くなったり暑くなったりして大変ですね。体調にお気をつけて。<br>
自分が今週見たフロントエンド記事のまとめ。</p>
<h2 id="react-testing-library%E3%81%ABrenderhook%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%80%81react-hooks-testing-library%E3%81%8C%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%81%B8">
<a class="header-anchor-link" href="#react-testing-library%E3%81%ABrenderhook%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%80%81react-hooks-testing-library%E3%81%8C%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%81%B8" aria-hidden="true"></a> react-testing-libraryにrenderHookの追加、react-hooks-testing-libraryが非推奨へ</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__09063efce6a5d" src="https://embed.zenn.studio/card#zenn-embedded__09063efce6a5d" data-content="https%3A%2F%2Fgithub.com%2Ftesting-library%2Freact-testing-library%2Freleases%2Ftag%2Fv13.1.0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/testing-library/react-testing-library/releases/tag/v13.1.0" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/testing-library/react-testing-library/releases/tag/v13.1.0</a></p>
<p>react-testing-library v13.1で<code>renderHook</code>が追加された。<br>
これにより、react-hooks-testing-libraryの大部分の機能がカバーされるので、react-hooks-testing-libraryを非推奨としてアーカイブする予定とのこと。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__98f5a368452b3" src="https://embed.zenn.studio/card#zenn-embedded__98f5a368452b3" data-content="https%3A%2F%2Fgithub.com%2Ftesting-library%2Freact-testing-library%2Fpull%2F991%23issuecomment-1100374235" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/testing-library/react-testing-library/pull/991#issuecomment-1100374235" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/testing-library/react-testing-library/pull/991#issuecomment-1100374235</a></p>
<h2 id="rfc%3A-new-bundler-in-gatsby">
<a class="header-anchor-link" href="#rfc%3A-new-bundler-in-gatsby" aria-hidden="true"></a> RFC: New Bundler in Gatsby</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d7ecb48c3ec38" src="https://embed.zenn.studio/card#zenn-embedded__d7ecb48c3ec38" data-content="https%3A%2F%2Fgithub.com%2Fgatsbyjs%2Fgatsby%2Fdiscussions%2F35357" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/gatsbyjs/gatsby/discussions/35357" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/gatsbyjs/gatsby/discussions/35357</a></p>
<p>Gatsbyがwebpack以外のバンドラーを模索中とのこと。<br>
さまざまなバンドラーのベンチマークをしている<a href="https://github.com/j0sh77/bundler-benchmarking/blob/main/results/with-styles.md" target="_blank" rel="nofollow noopener noreferrer">bundler-benchmarking</a>も紹介されていて気になるところ。</p>
<h2 id="storybook-lazy-compilation-for-webpack">
<a class="header-anchor-link" href="#storybook-lazy-compilation-for-webpack" aria-hidden="true"></a> Storybook Lazy Compilation for Webpack</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a7b8c5d143eb1" src="https://embed.zenn.studio/card#zenn-embedded__a7b8c5d143eb1" data-content="https%3A%2F%2Fstorybook.js.org%2Fblog%2Fstorybook-lazy-compilation-for-webpack%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/</a></p>
<p>コアな部分をコンパイルしてStorybookの表示を早くし、Story表示時に該当Storyをコンパイルして表示するlazy compilationの機能紹介。<br>
自分のプロジェクトで試したところ、3~4倍起動が早くなった。</p>
<h2 id="kintone%E3%81%AE%E5%86%85%E9%83%A8%E3%82%92%EF%BC%88%E3%81%93%E3%81%A3%E3%81%9D%E3%82%8A%EF%BC%89react%E3%81%AB%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%8B%E3%83%81%E3%83%BC%E3%83%A0%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A3%E3%81%A6%E3%83%9B%E3%83%B3%E3%83%88%EF%BC%9F">
<a class="header-anchor-link" href="#kintone%E3%81%AE%E5%86%85%E9%83%A8%E3%82%92%EF%BC%88%E3%81%93%E3%81%A3%E3%81%9D%E3%82%8A%EF%BC%89react%E3%81%AB%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%8B%E3%83%81%E3%83%BC%E3%83%A0%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A3%E3%81%A6%E3%83%9B%E3%83%B3%E3%83%88%EF%BC%9F" aria-hidden="true"></a> kintoneの内部を（こっそり）Reactに置き換えるチームがあるってホント？</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7165920263b6b" src="https://embed.zenn.studio/card#zenn-embedded__7165920263b6b" data-content="https%3A%2F%2Fblog.cybozu.io%2Fentry%2F2022%2F04%2F14%2F110000" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.cybozu.io/entry/2022/04/14/110000" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.cybozu.io/entry/2022/04/14/110000</a></p>
<p>大規模なサービスをReact化しているチームの紹介。</p>
<h2 id="lexical">
<a class="header-anchor-link" href="#lexical" aria-hidden="true"></a> Lexical</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f2a20848fe69d" src="https://embed.zenn.studio/card#zenn-embedded__f2a20848fe69d" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Flexical" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/facebook/lexical" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/lexical</a></p>
<p>Metaが公開したテキストエディタのOSS。<br>
Core部分は独自のDOM Reconcilerが存在し、React非依存になっており、<code>@lexical/react</code>を使用してReactで使用できるぽい。</p>
<p>Meta社内はdraft-jsからlexicalに全面移行しているとのこと。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ac50105f2f979" src="https://embed.zenn.studio/card#zenn-embedded__ac50105f2f979" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Fdraft-js%2Fissues%2F3091" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/facebook/draft-js/issues/3091" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/draft-js/issues/3091</a></p>
<h2 id="storybook-connect">
<a class="header-anchor-link" href="#storybook-connect" aria-hidden="true"></a> Storybook Connect</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d3d3db1a43d8b" src="https://embed.zenn.studio/card#zenn-embedded__d3d3db1a43d8b" data-content="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F1056265616080331589%2FStorybook-Connect" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect</a></p>
<p>FigmaとStorybookを繋ぐFigma plugin</p>
<h2 id="building-a-dialog-component">
<a class="header-anchor-link" href="#building-a-dialog-component" aria-hidden="true"></a> Building a dialog component</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__50ffc45ef861d" src="https://embed.zenn.studio/card#zenn-embedded__50ffc45ef861d" data-content="https%3A%2F%2Fweb.dev%2Fbuilding-a-dialog-component" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://web.dev/building-a-dialog-component" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://web.dev/building-a-dialog-component</a></p>
<p><code>&lt;dialog&gt;</code>の基本から、ダークモードや属性によるスタイルの変更などの解説。</p>


Weekly Frontend News 2022年4月3週目/react-testing-libraryにrenderHookが追加、など

react-testing-libraryにrenderHookの追加、react-hooks-testing-libraryが非推奨へ

kintoneの内部を（こっそり）Reactに置き換えるチームがあるってホント？

Discussion