はじめに
こんにちは、AI Shiftフロントエンドエンジニアの安井(@ytaisei_)です。
AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。
📈 shadcn/uiがchartに対応予定！
shadcn/uiといえば、Radix UIとTailwind CSS を利用して作成した、再利用可能なコンポーネントを提供してくれるライブラリです。今回はそのshadcn/uiにchartのコンポーネントが追加予定であるというニュースがありました！
また、chartを構築するためのライブラリとしては内部にrechartsを採用しているとのことです。記事執筆時点（2024/06/28）ではまだ追加されていませんが、今後の開発に期待です。
🛫 React Compilerをオプトインで段階的に対応できる
React Compilerを使用することにより、今までuseMemoやuseCallback, React.memoなどでメモ化して不要な再レンダリングを防いでいたところを、良しなに最適化してくれます。
もちろん積極的に採用していきたいところですが、一気にアプリケーション全体にReact Compilerを適用させるのは危険に思います。そこでReact Compilerをオプトインに設定することで、"use memo"を指定したコンポーネントに対して段階的に適用させることができるようです。
🗒️ JavaScriptで様々なアルゴリズムを実装したレポジトリを発見
javascript-algorithmsというJSでさまざまなアルゴリズムを実装したレポジトリがありました！
また、それぞれのアルゴリズムに対して視覚的に詳細な解説がされており、とても勉強になります。
🎶 優れたアニメーションを実現するために - Great Animations
この記事では優れたアニメーションを実現するためのTipsを以下7つの観点から紹介してくれています。
- Great animations feel natural
- Great animations are fast
- Great animations have a purpose
- Great animations are performant
- Great animations are interruptible
- Great animations are accessible
- Great animations feel right
上記全ての観点に対して検証環境を用意してくれているので、良いアニメーションを体感しながら学びを得ることができます。どれも納得感のあるポイントでした！
🐹 mitosisでコンポーネントを複数フレームワークに対応させる
Mitosisは、JSXで書かれたコンポーネントをAngular、React、Qwik、Vue、Svelte、Solid、React Nativeなどのフレームワークに対応したコンポーネントに変換するツールです。
Mitosisを使用することで、以下のことが可能になります：
- 複数のフレームワークにわたって一貫したデザインシステムを維持する
- Figmaからコードにデザインシステムを同期し、複数のフレームワークにわたってnpmに公開する
- ネイティブフレームワークコードにコンパイルすることで、Webコンポーネントの落とし穴を回避する
🏃 axiosにfetch adapterが追加！
v1.7.0からaxiosのadapterにfetchが追加されました！
const fetchAxios = axios.create({
adapter: 'fetch'
});
const { data } = fetchAxios.get(url);
最後に
AI Shiftではエンジニアの採用に力を入れています！
少しでも興味を持っていただけましたら、カジュアル面談でお話しませんか？
（オンライン・19時以降の面談も可能です！）
【面談フォームはこちら】
Discussion