<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>こんにちは、AI Shiftフロントエンドエンジニアの栗崎 (<a href="https://x.com/KK_sep_TT" target="_blank" rel="nofollow noopener noreferrer">@KK_sep_TT</a>) です。<br>
AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。</p>
<h1 id="react-internal-deep-dive">
<a class="header-anchor-link" href="#react-internal-deep-dive" aria-hidden="true"></a> React Internal Deep Dive</h1>
<p><a href="https://x.com/JSer_ZANP" target="_blank" rel="nofollow noopener noreferrer">jser</a>さんがReactの内部の仕組みをまとめてくれています。<br>
今現在32のセクションがあり、デモや解説動画を使いながら分かりやすく深い内容についてまとめてくれています。Reactの内部を読み解く上でとても参考になりそうです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0a1ec7a49886f" src="https://embed.zenn.studio/card#zenn-embedded__0a1ec7a49886f" data-content="https%3A%2F%2Fjser.dev%2Fseries%2Freact-source-code-walkthrough%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://jser.dev/series/react-source-code-walkthrough/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://jser.dev/series/react-source-code-walkthrough/</a></p>
<h1 id="javascript-set-%E3%81%AE-%E9%9B%86%E5%90%88%E6%BC%94%E7%AE%97%E3%81%8C%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB">
<a class="header-anchor-link" href="#javascript-set-%E3%81%AE-%E9%9B%86%E5%90%88%E6%BC%94%E7%AE%97%E3%81%8C%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" aria-hidden="true"></a> Javascript Set の 集合演算がブラウザで実行できるように</h1>
<p>Javascript の <code>Set</code> オブジェクトの集合演算のメソッドが主要ブラウザでサポートされました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b17afeef4372b" src="https://embed.zenn.studio/card#zenn-embedded__b17afeef4372b" data-content="https%3A%2F%2Fweb.dev%2Fblog%2Fset-methods%3Fhl%3Den" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://web.dev/blog/set-methods?hl=en" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://web.dev/blog/set-methods?hl=en</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__98ca74475c212" src="https://embed.zenn.studio/card#zenn-embedded__98ca74475c212" data-content="https%3A%2F%2Fqiita.com%2Frana_kualu%2Fitems%2F444cbac3a2ca26152d7a" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/rana_kualu/items/444cbac3a2ca26152d7a" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/rana_kualu/items/444cbac3a2ca26152d7a</a></p>
<h1 id="tob-saas-%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3">
<a class="header-anchor-link" href="#tob-saas-%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" aria-hidden="true"></a> toB SaaS のインフラアーキテクチャ</h1>
<p>10社の toB SaaS サービスのインフラアーキテクチャが紹介されています。現在のアーキテクチャの背景と今後の改善方針について書かれており、とても参考になります。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6ec1ec8ee2e5b" src="https://embed.zenn.studio/card#zenn-embedded__6ec1ec8ee2e5b" data-content="https%3A%2F%2Ffindy-tools.io%2Farticles%2Farchitecture-to-b%2F14" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://findy-tools.io/articles/architecture-to-b/14" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://findy-tools.io/articles/architecture-to-b/14</a></p>
<h1 id="state-of-react-2023-%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#state-of-react-2023-%E5%85%AC%E9%96%8B" aria-hidden="true"></a> State of React 2023 公開</h1>
<p>Reactに興味を持つ世界中のエンジニアが回答したアンケートの結果をまとめた「State of React 2023」が公開されました。ReactのライブラリやHookの使用率などが見れます。<br>
ロゴに日本語で「リアクト」と書かれているのはなんでなんでしょう？👀</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0fc549f39d544" src="https://embed.zenn.studio/card#zenn-embedded__0fc549f39d544" data-content="https%3A%2F%2F2023.stateofreact.com%2Fen-US" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://2023.stateofreact.com/en-US" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://2023.stateofreact.com/en-US</a></p>
<h1 id="tanstack-form-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E9%96%93%E8%BF%91">
<a class="header-anchor-link" href="#tanstack-form-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E9%96%93%E8%BF%91" aria-hidden="true"></a> TanStack Form リリース間近</h1>
<p>TanStack 系列から新しいFormライブラリがリリースされます。TanStack Form については以下の記事にまとめていますので、気になる方はご覧ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__e6addb0f529de" src="https://embed.zenn.studio/tweet#zenn-embedded__e6addb0f529de" data-content="https%3A%2F%2Fx.com%2Fcrutchcorn%2Fstatus%2F1809484377488752901" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/crutchcorn/status/1809484377488752901" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/crutchcorn/status/1809484377488752901</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__281ca582e887e" src="https://embed.zenn.studio/card#zenn-embedded__281ca582e887e" data-content="https%3A%2F%2Fzenn.dev%2Faishift%2Farticles%2F592a9a82f8bc8a" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/aishift/articles/592a9a82f8bc8a" style="display:none" target="_blank">https://zenn.dev/aishift/articles/592a9a82f8bc8a</a></p>
<h1 id="react-flow-v12-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#react-flow-v12-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" aria-hidden="true"></a> React Flow v12 リリース</h1>
<p>フローチャートライブラリのReact Flow のv12がリリースされました。v12ではサーバーサイドレンダリング、コンピューティングフロー、ダークモードの新機能が追加されました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1f0837a3725cf" src="https://embed.zenn.studio/card#zenn-embedded__1f0837a3725cf" data-content="https%3A%2F%2Freactflow.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://reactflow.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://reactflow.dev/</a></p>
<h1 id="cloudflare-zaras-%E3%81%8C-x%2C-instagram%E3%81%AB%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#cloudflare-zaras-%E3%81%8C-x%2C-instagram%E3%81%AB%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> Cloudflare Zaras が X, Instagramに対応</h1>
<p>HTMLに埋め込まれたブラウザ側で実行されるスクリプトをCloudflareのエッジ上で実行し、ページレンダリング速度を上げる <a href="https://developers.cloudflare.com/zaraz/" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Zaras</a>がX(旧twitter), instagram の埋め込みに対応しました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__df73c9d0ce80f" src="https://embed.zenn.studio/card#zenn-embedded__df73c9d0ce80f" data-content="https%3A%2F%2Fblog.cloudflare.com%2Fzaraz-supports-server-side-rendering-of-embeds" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.cloudflare.com/zaraz-supports-server-side-rendering-of-embeds" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.cloudflare.com/zaraz-supports-server-side-rendering-of-embeds</a></p>
<h1 id="node.js-%E3%81%A7-ts%E3%81%8C%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB">
<a class="header-anchor-link" href="#node.js-%E3%81%A7-ts%E3%81%8C%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB" aria-hidden="true"></a> Node.js で TSが実行できるように</h1>
<p>Node.js に TypeScript を直接実行できるようにする試験的なオプションの実装がマージされました。すでに nightly version にて使用可能になっています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__540a1728e312a" src="https://embed.zenn.studio/card#zenn-embedded__540a1728e312a" data-content="https%3A%2F%2Fgithub.com%2Fnodejs%2Fnode%2Fpull%2F53725" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/nodejs/node/pull/53725" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/nodejs/node/pull/53725</a></p>
<h1 id="%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E6%88%A6%E7%95%A5%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81-by-vercel">
<a class="header-anchor-link" href="#%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E6%88%A6%E7%95%A5%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81-by-vercel" aria-hidden="true"></a> レンダリング戦略のまとめ by Vercel</h1>
<p>Vercel が SSG, SSR, CSR, ISR, PPR 各レンダリング戦略の使用例とトレードオフを網羅的にまとめてくれています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fb9e44e1cfbf6" src="https://embed.zenn.studio/card#zenn-embedded__fb9e44e1cfbf6" data-content="https%3A%2F%2Fvercel.com%2Fblog%2Fhow-to-choose-the-best-rendering-strategy-for-your-app" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app</a></p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p>AI Shiftではエンジニアの採用に力を入れています！<br>
少しでも興味を持っていただけましたら、カジュアル面談でお話しませんか？<br>
（オンライン・19時以降の面談も可能です！）</p>
<p>【面談フォームはこちら】</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__36f89532d9221" src="https://embed.zenn.studio/card#zenn-embedded__36f89532d9221" data-content="https%3A%2F%2Fhrmos.co%2Fpages%2Fcyberagent-group%2Fjobs%2F1826557091831955459" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://hrmos.co/pages/cyberagent-group/jobs/1826557091831955459" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://hrmos.co/pages/cyberagent-group/jobs/1826557091831955459</a></p>


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

Javascript Set の 集合演算がブラウザで実行できるように

toB SaaS のインフラアーキテクチャ

Cloudflare Zaras が X, Instagramに対応

Node.js で TSが実行できるように

レンダリング戦略のまとめ by Vercel

Discussion