<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" 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="1" class="code-line">こんにちは、AI Shiftフロントエンドエンジニアの安井(<a href="https://twitter.com/ytaisei_" target="_blank" rel="nofollow noopener noreferrer">@ytaisei_</a>)です。<br>
AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。</p>
<h1 id="%F0%9F%93%88-shadcn%2Fui%E3%81%8Cchart%E3%81%AB%E5%AF%BE%E5%BF%9C%E4%BA%88%E5%AE%9A%EF%BC%81" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%93%88-shadcn%2Fui%E3%81%8Cchart%E3%81%AB%E5%AF%BE%E5%BF%9C%E4%BA%88%E5%AE%9A%EF%BC%81" aria-hidden="true"></a> 📈 shadcn/uiがchartに対応予定！</h1>
<p data-line="6" class="code-line">shadcn/uiといえば、Radix UIとTailwind CSS を利用して作成した、再利用可能なコンポーネントを提供してくれるライブラリです。今回はその<strong>shadcn/uiにchartのコンポーネントが追加予定</strong>であるというニュースがありました！</p>
<p data-line="8" class="code-line">また、chartを構築するためのライブラリとしては内部に<strong>rechartsを採用している</strong>とのことです。記事執筆時点（2024/06/28）ではまだ追加されていませんが、今後の開発に期待です。</p>
<p data-line="10" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__1548b11b23535" src="https://embed.zenn.studio/tweet#zenn-embedded__1548b11b23535" data-content="https%3A%2F%2Fx.com%2Fshadcn%2Fstatus%2F1795920488797188525" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/shadcn/status/1795920488797188525" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/shadcn/status/1795920488797188525</a></p>
<h1 id="%F0%9F%9B%AB-react-compiler%E3%82%92%E3%82%AA%E3%83%97%E3%83%88%E3%82%A4%E3%83%B3%E3%81%A7%E6%AE%B5%E9%9A%8E%E7%9A%84%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%A7%E3%81%8D%E3%82%8B" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%9B%AB-react-compiler%E3%82%92%E3%82%AA%E3%83%97%E3%83%88%E3%82%A4%E3%83%B3%E3%81%A7%E6%AE%B5%E9%9A%8E%E7%9A%84%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%A7%E3%81%8D%E3%82%8B" aria-hidden="true"></a> 🛫 React Compilerをオプトインで段階的に対応できる</h1>
<p data-line="14" class="code-line">React Compilerを使用することにより、<strong>今まで<code>useMemo</code>や<code>useCallback</code>, <code>React.memo</code>などでメモ化して不要な再レンダリングを防いでいたところを、良しなに最適化してくれます。</strong></p>
<p data-line="16" class="code-line">もちろん積極的に採用していきたいところですが、一気にアプリケーション全体にReact Compilerを適用させるのは危険に思います。そこでReact Compilerをオプトインに設定することで、<code>"use memo"</code>を指定したコンポーネントに対して<strong>段階的に適用させることができる</strong>ようです。</p>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5115268b47bf5" src="https://embed.zenn.studio/card#zenn-embedded__5115268b47bf5" data-content="https%3A%2F%2Fblog.s2n.tech%2Farticles%2Freact-compiler-on-18" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.s2n.tech/articles/react-compiler-on-18" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.s2n.tech/articles/react-compiler-on-18</a></p>
<h1 id="%F0%9F%97%92%EF%B8%8F-javascript%E3%81%A7%E6%A7%98%E3%80%85%E3%81%AA%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E3%83%AC%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%92%E7%99%BA%E8%A6%8B" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%97%92%EF%B8%8F-javascript%E3%81%A7%E6%A7%98%E3%80%85%E3%81%AA%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E3%83%AC%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%92%E7%99%BA%E8%A6%8B" aria-hidden="true"></a> 🗒️ JavaScriptで様々なアルゴリズムを実装したレポジトリを発見</h1>
<p data-line="22" class="code-line">javascript-algorithmsという<strong>JSでさまざまなアルゴリズムを実装した</strong>レポジトリがありました！</p>
<p data-line="24" class="code-line">また、それぞれのアルゴリズムに対して視覚的に詳細な解説がされており、とても勉強になります。</p>
<p data-line="26" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/80f87bb152cf-20240629.png" class="md-img" loading="lazy"></p>
<p data-line="28" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a4758dc05070d" src="https://embed.zenn.studio/card#zenn-embedded__a4758dc05070d" data-content="https%3A%2F%2Fgithub.com%2Ftrekhleb%2Fjavascript-algorithms%2Ftree%2Fmaster" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/trekhleb/javascript-algorithms/tree/master" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/trekhleb/javascript-algorithms/tree/master</a></p>
<h1 id="%F0%9F%8E%B6-%E5%84%AA%E3%82%8C%E3%81%9F%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB---great-animations" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%8E%B6-%E5%84%AA%E3%82%8C%E3%81%9F%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB---great-animations" aria-hidden="true"></a> 🎶 優れたアニメーションを実現するために - Great Animations</h1>
<p data-line="32" class="code-line">この記事では優れたアニメーションを実現するためのTipsを以下7つの観点から紹介してくれています。</p>
<ul data-line="34" class="code-line">
<li data-line="34" class="code-line">Great animations <strong>feel natural</strong>
</li>
<li data-line="35" class="code-line">Great animations are <strong>fast</strong>
</li>
<li data-line="36" class="code-line">Great animations <strong>have a purpose</strong>
</li>
<li data-line="37" class="code-line">Great animations are <strong>performant</strong>
</li>
<li data-line="38" class="code-line">Great animations are <strong>interruptible</strong>
</li>
<li data-line="39" class="code-line">Great animations are <strong>accessible</strong>
</li>
<li data-line="40" class="code-line">Great animations <strong>feel right</strong>
</li>
</ul>
<p data-line="42" class="code-line">上記全ての観点に対して検証環境を用意してくれているので、良いアニメーションを体感しながら学びを得ることができます。どれも納得感のあるポイントでした！</p>
<p data-line="45" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3ecae5f07dda-20240629.png" class="md-img" loading="lazy"></p>
<p data-line="47" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6d71f3302245c" src="https://embed.zenn.studio/card#zenn-embedded__6d71f3302245c" data-content="https%3A%2F%2Femilkowal.ski%2Fui%2Fgreat-animations" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://emilkowal.ski/ui/great-animations" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://emilkowal.ski/ui/great-animations</a></p>
<h1 id="%F0%9F%90%B9-mitosis%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%A4%87%E6%95%B0%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%95%E3%81%9B%E3%82%8B" data-line="50" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%90%B9-mitosis%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%A4%87%E6%95%B0%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> 🐹 mitosisでコンポーネントを複数フレームワークに対応させる</h1>
<p data-line="52" class="code-line">Mitosisは、JSXで書かれたコンポーネントを<strong>Angular、React、Qwik、Vue、Svelte、Solid、React Nativeなどのフレームワークに対応したコンポーネントに変換する</strong>ツールです。</p>
<p data-line="54" class="code-line">Mitosisを使用することで、以下のことが可能になります：</p>
<ul data-line="56" class="code-line">
<li data-line="56" class="code-line">複数のフレームワークにわたって<strong>一貫したデザインシステムを維持</strong>する</li>
<li data-line="57" class="code-line">
<strong>Figmaからコードにデザインシステムを同期</strong>し、複数のフレームワークにわたってnpmに公開する</li>
<li data-line="58" class="code-line">ネイティブフレームワークコードにコンパイルすることで、Webコンポーネントの落とし穴を回避する</li>
</ul>
<p data-line="61" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ae8da4cf137d4" src="https://embed.zenn.studio/card#zenn-embedded__ae8da4cf137d4" data-content="https%3A%2F%2Fmitosis.builder.io%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://mitosis.builder.io/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://mitosis.builder.io/</a></p>
<h1 id="%F0%9F%8F%83-axios%E3%81%ABfetch-adapter%E3%81%8C%E8%BF%BD%E5%8A%A0%EF%BC%81" data-line="63" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%8F%83-axios%E3%81%ABfetch-adapter%E3%81%8C%E8%BF%BD%E5%8A%A0%EF%BC%81" aria-hidden="true"></a> 🏃 axiosにfetch adapterが追加！</h1>
<p data-line="65" class="code-line">v1.7.0からaxiosのadapterに<code>fetch</code>が追加されました！</p>
<div class="code-block-container"><pre class="language-ts"><code class="language-ts code-line" data-line="67"><span class="token keyword">const</span> fetchAxios <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  adapter<span class="token operator">:</span> <span class="token string">'fetch'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> fetchAxios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="76" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e95914554a44f" src="https://embed.zenn.studio/card#zenn-embedded__e95914554a44f" data-content="https%3A%2F%2Fgithub.com%2Faxios%2Faxios%2Fpull%2F6371" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/axios/axios/pull/6371" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/axios/axios/pull/6371</a></p>
<p data-line="78" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8381ff88aad98" src="https://embed.zenn.studio/card#zenn-embedded__8381ff88aad98" data-content="https%3A%2F%2Fgithub.com%2Faxios%2Faxios%3Ftab%3Dreadme-ov-file%23-fetch-adapter" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/axios/axios?tab=readme-ov-file#-fetch-adapter" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/axios/axios?tab=readme-ov-file#-fetch-adapter</a></p>


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

🛫 React Compilerをオプトインで段階的に対応できる

🗒️ JavaScriptで様々なアルゴリズムを実装したレポジトリを発見

🎶 優れたアニメーションを実現するために - Great Animations

🐹 mitosisでコンポーネントを複数フレームワークに対応させる

Discussion