はじめに
こんにちは、AI Shiftでフロントエンドエンジニアをしている安井です。
AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。
🐹 <select>要素でスタイルがカスタマイズ可能に
これまでの<select>要素ではCSSを当てることができず、カスタマイズするのに苦労していました。ですが、実験的に<select>要素をカスタマイズする機能がChrome Canaryのv130以降で実装されているようです。
新しい動作を有効にするには、ページ内選択ボタンと選択ツールの両方で CSS appearance プロパティを使用します。オプトインするには、<select> 要素と ::picker(select) で appearance: base-select を設定します。
select<span class="token punctuation">,
::picker(select)</span> {
appearance: base-select;
}
🏃 shadcn/ui互換のReact Ariaコンポーネント「JollyUI」
shadcn/uiはRadix UIを元に作成されたUIライブラリですが、JollyUIはshadcn/uiのデザインを引き継ぎつつ、React Ariaのアクセシビリティ機能を活用したUIライブラリです。
shadcn/ui同様にTailwindCSSでのスタイリングができ、React Ariaの強みを活かすことでよりアクセシビリティの高いUI実装が期待できます。
🐝 TanStack QueryでReact.useがサポートされる
React 19から<Suspense>で包まれた複数のコンポーネントのレンダリングが直列にレンダリングされるということで話題になりました。その場合、リクエストも同じく直列で実行されwaterfallの問題が発生してしまいます。
その解決策の一つとしてTanStack QueryではReact.useと組み合わせることにより、このパフォーマンスの問題に対応しているようです。
function TodoList({ query }: { query: UseQueryResult<Todo[]> }) {
const data = React.use(query.promise)
return (
<span class="token tag"><span class="token punctuation"><ul</span>></span><span class="token plain-text">
</span>{data.map((todo) => (
<span class="token tag"><span class="token punctuation"><li</span> key<span class="token script-punctuation punctuation">={todo.id}</span>></span>{todo.title}<span class="token tag"><span class="token punctuation"></li</span>></span>
))}<span class="token plain-text">
</span><span class="token tag"><span class="token punctuation"></ul</span>></span>
)
}
export function App() {
const query = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
return (
<span class="token tag"><span class="token punctuation"><</span>></span><span class="token plain-text">
</span><span class="token tag"><span class="token punctuation"><h1</span>></span>Todos<span class="token tag"><span class="token punctuation"></h1</span>></span><span class="token plain-text">
</span><span class="token tag"><span class="token punctuation"><React.Suspense</span> fallback<span class="token script-punctuation punctuation">={<span class="token tag"><span class="token punctuation"><div</span>></span>Loading...<span class="token tag"><span class="token punctuation"></div</span>></span>}</span>></span><span class="token plain-text">
</span><span class="token tag"><span class="token punctuation"><TodoList</span> query<span class="token script-punctuation punctuation">={query}</span> /></span><span class="token plain-text">
</span><span class="token tag"><span class="token punctuation"></React.Suspense</span>></span><span class="token plain-text">
</span><span class="token tag"><span class="token punctuation"></</span>></span>
)
}
🛫 ECMAScript仕様の読み方に関するドキュメント
このドキュメントはJavaScript開発者向けにECMAScript仕様を効果的に読むためのガイドです。
ECMAScriptはJavaScriptの標準仕様であり、ECMAScriptの基本的な構造、特定の用語、表記の意味を丁寧に解説してくれているのでTC39のプロポーザルを読むなどの機会にも役に立つでしょう。
🐳 Prisma TypedSQLで生のSQLクエリをType Safeに
PrismaのTypedSQLはPrisma ORMを利用して生のSQLクエリを型安全に実行できる機能です。この機能によりTypeScriptの型チェックを活用し、クエリの構文エラーや型の不一致をコンパイル時に検出することが可能になります。
これによりPrismaを扱う幅が広がり、より柔軟で安全なデータベース操作が実現できるようになりました。
🎶 メディアプレーヤーを構築するためのUIコンポーネント 「Vidstack Player」
Vidstack Playerは、メディアプレーヤーの構築を容易にする豊富な宣言的コンポーネントを提供します。デフォルトのレイアウトを用意しているためすぐに使用できるUIを持ちながらも、高いカスタマイズ性を備えています。
また、Tailwind CSSを使用した具体的な例も提供されており、デザインの調整が簡単に行えます。これにより独自のメディアプレーヤーを柔軟に構築することが可能です。
🗒️ GCS がファイルシステムとして使えるように
詳しくは弊社のこちらのブログをご覧ください！
Google Cloud Next'24でGCSの新しい機能として「Hierarchical Namespace」が発表されました。
これまでGCSはオブジェクトストレージであってファイルシステムではありませんでしたが、Hierarchical Namespaceでは実際にファイルが階層構造を持って保存されます。
これによりフォルダ名の更新がアトミックに行えるためデータの整合性が保たれることや、フォルダの一覧取得が容易になるなどのメリットがあります。
☕️ Vitest Browser Mode
Vitestのテストをネイティブブラウザ環境で実行できるモードがあります。従来のjsdomなどを使用したテストはNode.js上でシミュレートされた環境で実行されており、実際のブラウザでテストが行われるわけではありません。
しかしフロントエンドの本番環境はブラウザで動作するため、テスト環境もブラウザで実行することでテストの信頼性を向上させることができます。さらに、localStorageなどのブラウザAPIをモックせずにテストすることが可能です。