<p>こんにちは、AI Shiftフロントエンドエンジニアの栗崎(<a href="https://twitter.com/KK_sep_TT" target="_blank" rel="nofollow noopener noreferrer">@KK_sep_TT</a>)です。<br>
AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。</p>
<p>先月の内容はこちらです！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7f04d04548124" src="https://embed.zenn.studio/card#zenn-embedded__7f04d04548124" data-content="https%3A%2F%2Fzenn.dev%2Faishift%2Farticles%2F4d5164470612cf" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/aishift/articles/4d5164470612cf" style="display:none" target="_blank">https://zenn.dev/aishift/articles/4d5164470612cf</a></p>
<h2 id="web%E3%80%81%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E4%B8%A1%E5%AF%BE%E5%BF%9C%E3%81%AEui%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-tamagui">
<a class="header-anchor-link" href="#web%E3%80%81%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E4%B8%A1%E5%AF%BE%E5%BF%9C%E3%81%AEui%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-tamagui" aria-hidden="true"></a> Web、ネイティブ両対応のUIフレームワーク Tamagui</h2>
<p>Web (React) と ネイティブ (React Native) の両方で動作する UI ライブラリです。<br>
React を使う開発でWeb、ネイティブ両方の開発を行う場面で重宝しそうです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1111b61e5e441" src="https://embed.zenn.studio/card#zenn-embedded__1111b61e5e441" data-content="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1326593766534421119" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.figma.com/community/file/1326593766534421119" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.figma.com/community/file/1326593766534421119</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8dad59c770112" src="https://embed.zenn.studio/card#zenn-embedded__8dad59c770112" data-content="https%3A%2F%2Fzenn.dev%2Fkazukix%2Farticles%2F4951b51ad8187a" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/kazukix/articles/4951b51ad8187a" style="display:none" target="_blank">https://zenn.dev/kazukix/articles/4951b51ad8187a</a></p>
<h2 id="signals-%E3%81%8Ctc39%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%B6%E3%83%AB%E3%81%AB%E6%8F%90%E5%87%BA%E3%81%95%E3%82%8C%E3%81%9F">
<a class="header-anchor-link" href="#signals-%E3%81%8Ctc39%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%B6%E3%83%AB%E3%81%AB%E6%8F%90%E5%87%BA%E3%81%95%E3%82%8C%E3%81%9F" aria-hidden="true"></a> signals がTC39プロポーザルに提出された</h2>
<p>solid.js, qwik など、最近様々なライブラリで実装されているsignalsですが、JS標準に取り込まれるかもしれません。<br>
この提案の背景として、</p>
<ol>
<li>リアクティブモデルをレンダリングビューから完全に切り離し、開発者が非UIコードを書き換えることなく異なるライブラリに乗り換えられるようにする</li>
<li>異なるライブラリで使用できる共有リアクティブモデルをJSで開発できるようにする</li>
</ol>
<p>ということが書かれています。</p>
<p>アプリ開発者が直接signalsを触るというよりは、主にライブラリ開発者が使用することを想定しているそうです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1f0f490767d14" src="https://embed.zenn.studio/card#zenn-embedded__1f0f490767d14" data-content="https%3A%2F%2Fgithub.com%2Ftc39%2Fproposal-signals%3Ftab%3Dreadme-ov-file" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/tc39/proposal-signals?tab=readme-ov-file" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/tc39/proposal-signals?tab=readme-ov-file</a></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%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%95%E3%82%A3%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%95%E3%83%A9%E3%82%B0%E6%A8%99%E6%BA%96%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%80%8Copenfeature-web-sdk-v1%E3%80%8D%E3%81%8C%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9">
<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%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%95%E3%82%A3%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%95%E3%83%A9%E3%82%B0%E6%A8%99%E6%BA%96%E5%8C%96%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%80%8Copenfeature-web-sdk-v1%E3%80%8D%E3%81%8C%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" aria-hidden="true"></a> フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース</h2>
<p>OpenFeature プロジェクトを進めるCloud Native Computing Foundation」（CNCF）が新たにWebアプリケーションのフロントエンド側におけるフィーチャーフラグの標準化を目指すソフトウェア「OpenFeature Web SDK v1」をリリースしました。<br>
低速なネットワークを考慮したキャッシング機能や、フラグ値が古くなったことをアプリケーションに通知するためのイベントやコールバックの仕組みが用意されており、フロントエンドに特化したものになっているそうです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0e4f3539dad95" src="https://embed.zenn.studio/card#zenn-embedded__0e4f3539dad95" data-content="https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F24%2Fopenfeature_web_sdk_v1cncf.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.publickey1.jp/blog/24/openfeature_web_sdk_v1cncf.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.publickey1.jp/blog/24/openfeature_web_sdk_v1cncf.html</a></p>
<h2 id="jsx-%E3%81%8C%E9%AB%98%E9%80%9F%E3%81%AB%E3%81%AA%E3%82%8B%E3%82%89%E3%81%97%E3%81%84">
<a class="header-anchor-link" href="#jsx-%E3%81%8C%E9%AB%98%E9%80%9F%E3%81%AB%E3%81%AA%E3%82%8B%E3%82%89%E3%81%97%E3%81%84" aria-hidden="true"></a> jsx が高速になるらしい</h2>
<p>React 19 から refの予約語をpropsから削除する必要がなくなり、ほとんどのケースでpropsが変更される心配がなくなりました。そこでpropsのcloneの必要もなくなり高速化が実現しました。React 19 ではこの他にも様々な高速化があるので楽しみです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a8eef1735d0bd" src="https://embed.zenn.studio/card#zenn-embedded__a8eef1735d0bd" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fpull%2F28768" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/facebook/react/pull/28768" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/pull/28768</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__87e4ac428a76e" src="https://embed.zenn.studio/card#zenn-embedded__87e4ac428a76e" data-content="https%3A%2F%2Fspeakerdeck.com%2Fyossydev%2Ffast-jsx-dont-clone-props-object-number-28768" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/yossydev/fast-jsx-dont-clone-props-object-number-28768" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/yossydev/fast-jsx-dont-clone-props-object-number-28768</a></p>
<h2 id="vercel%EF%BC%88v0%E3%81%AA%E3%81%A9%E8%87%AA%E8%BA%AB%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%EF%BC%89%E3%81%8C%E3%82%A8%E3%83%83%E3%82%B8%EF%BC%88vercel-edge-functions%EF%BC%89%E3%81%A7%E3%81%AEssr%E3%82%92%E3%82%84%E3%82%81%E3%81%9F">
<a class="header-anchor-link" href="#vercel%EF%BC%88v0%E3%81%AA%E3%81%A9%E8%87%AA%E8%BA%AB%E3%81%AE%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%EF%BC%89%E3%81%8C%E3%82%A8%E3%83%83%E3%82%B8%EF%BC%88vercel-edge-functions%EF%BC%89%E3%81%A7%E3%81%AEssr%E3%82%92%E3%82%84%E3%82%81%E3%81%9F" aria-hidden="true"></a> Vercel（v0など自身のサービス）がエッジ（Vercel Edge Functions）でのSSRをやめた</h2>
<p>Edgeがdatabaseから遠く、データ取得に時間がかかってしまったことが主な原因だそうです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__4e9ec4c3291ca" src="https://embed.zenn.studio/tweet#zenn-embedded__4e9ec4c3291ca" data-content="https%3A%2F%2Ftwitter.com%2Fleeerob%2Fstatus%2F1780705942734331983" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/leeerob/status/1780705942734331983" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/leeerob/status/1780705942734331983</a></p>
<h2 id="figma%E3%81%8B%E3%82%89react-component-%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Cquest-ai%E3%80%8D">
<a class="header-anchor-link" href="#figma%E3%81%8B%E3%82%89react-component-%E3%82%92%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%80%8Cquest-ai%E3%80%8D" aria-hidden="true"></a> FigmaからReact component を自動生成するサービス「QUEST AI」</h2>
<p>拡張性の高いReactコンポーネントを素早く、簡単に生成できることが強みらしいです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e0ffaa530b4cf" src="https://embed.zenn.studio/card#zenn-embedded__e0ffaa530b4cf" data-content="https%3A%2F%2Fwww.quest.ai%2Fstartups" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.quest.ai/startups" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.quest.ai/startups</a></p>
<h2 id="figma-code-connect">
<a class="header-anchor-link" href="#figma-code-connect" aria-hidden="true"></a> Figma Code Connect</h2>
<p>実際のコード上のコンポーネントとFigma上のデザイン・システムを接続することができます。<br>
今はベータ版でReactとSwiftUIをサポートしています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__c22a02d896768" src="https://embed.zenn.studio/tweet#zenn-embedded__c22a02d896768" data-content="https%3A%2F%2Ftwitter.com%2Ffigma%2Fstatus%2F1780269027912479046" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/figma/status/1780269027912479046" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/figma/status/1780269027912479046</a></p>
<h2 id="react-%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#react-%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB" aria-hidden="true"></a> React のルール</h2>
<p>React を書く上で守るべきルールについてまとめてあります。特にコンポーネントとフックを純粋に保つためのルールが丁寧に書かれています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__40dc50c413d22" src="https://embed.zenn.studio/card#zenn-embedded__40dc50c413d22" data-content="https%3A%2F%2Fja.react.dev%2Freference%2Frules" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ja.react.dev/reference/rules" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ja.react.dev/reference/rules</a></p>
<h2 id="next.js-14.2-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#next.js-14.2-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" aria-hidden="true"></a> Next.js 14.2 リリース</h2>
<p>Turbopack の local でのパフォーマンス向上、build, cacheのパフォーマンス向上、hydration error message の改善などが含まれています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e8ec16d4340b4" src="https://embed.zenn.studio/card#zenn-embedded__e8ec16d4340b4" data-content="https%3A%2F%2Fnextjs.org%2Fblog%2Fnext-14-2" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://nextjs.org/blog/next-14-2" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://nextjs.org/blog/next-14-2</a></p>


AI Shift フロントエンドトーク 2024-04

Web、ネイティブ両対応のUIフレームワーク Tamagui

signals がTC39プロポーザルに提出された

フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース

Vercel（v0など自身のサービス）がエッジ（Vercel Edge Functions）でのSSRをやめた

Discussion