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

はじめに

こんにちは、AI Shiftでフロントエンドエンジニアをしている安井です。
AI Shiftでは週に1回フロントエンドトーク（フロントエンドに関する情報共有会）を行なっています。今月も様々なジャンルの技術に関する話題があったので共有したいと思います。

🐹 <select>要素でスタイルがカスタマイズ可能に

2024/10時点では実験的な機能です。

これまでの<select>要素ではCSSを当てることができず、カスタマイズするのに苦労していました。ですが、実験的に<select>要素をカスタマイズする機能がChrome Canaryのv130以降で実装されているようです。

新しい動作を有効にするには、ページ内選択ボタンと選択ツールの両方で CSS appearance プロパティを使用します。オプトインするには、<select> 要素と ::picker(select) で appearance: base-select を設定します。

select,
::picker(select) {
  appearance: base-select;
}

https://developer.chrome.com/blog/rfc-customizable-select?hl=ja

🏃 shadcn/ui互換のReact Ariaコンポーネント「JollyUI」

shadcn/uiはRadix UIを元に作成されたUIライブラリですが、JollyUIはshadcn/uiのデザインを引き継ぎつつ、React Ariaのアクセシビリティ機能を活用したUIライブラリです。

shadcn/ui同様にTailwindCSSでのスタイリングができ、React Ariaの強みを活かすことでよりアクセシビリティの高いUI実装が期待できます。

https://www.jollyui.dev/

🐝 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 (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

export function App() {
  const query = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })

  return (
    <>
      <h1>Todos</h1>
      <React.Suspense fallback={<div>Loading...</div>}>
        <TodoList query={query} />
      </React.Suspense>
    </>
  )
}

https://github.com/TanStack/query/pull/7988

🛫 ECMAScript仕様の読み方に関するドキュメント

このドキュメントはJavaScript開発者向けにECMAScript仕様を効果的に読むためのガイドです。

ECMAScriptはJavaScriptの標準仕様であり、ECMAScriptの基本的な構造、特定の用語、表記の意味を丁寧に解説してくれているのでTC39のプロポーザルを読むなどの機会にも役に立つでしょう。

https://timothygu.me/es-howto/

🐳 Prisma TypedSQLで生のSQLクエリをType Safeに

PrismaのTypedSQLはPrisma ORMを利用して生のSQLクエリを型安全に実行できる機能です。この機能によりTypeScriptの型チェックを活用し、クエリの構文エラーや型の不一致をコンパイル時に検出することが可能になります。

これによりPrismaを扱う幅が広がり、より柔軟で安全なデータベース操作が実現できるようになりました。

https://www.prisma.io/blog/announcing-typedsql-make-your-raw-sql-queries-type-safe-with-prisma-orm

🎶 メディアプレーヤーを構築するためのUIコンポーネント 「Vidstack Player」

Vidstack Playerは、メディアプレーヤーの構築を容易にする豊富な宣言的コンポーネントを提供します。デフォルトのレイアウトを用意しているためすぐに使用できるUIを持ちながらも、高いカスタマイズ性を備えています。

また、Tailwind CSSを使用した具体的な例も提供されており、デザインの調整が簡単に行えます。これにより独自のメディアプレーヤーを柔軟に構築することが可能です。

https://www.vidstack.io/

🗒️ GCS がファイルシステムとして使えるように

詳しくは弊社のこちらのブログをご覧ください！

https://zenn.dev/aishift/articles/d1234e48d30b41

Google Cloud Next'24でGCSの新しい機能として「Hierarchical Namespace」が発表されました。

これまでGCSはオブジェクトストレージであってファイルシステムではありませんでしたが、Hierarchical Namespaceでは実際にファイルが階層構造を持って保存されます。

これによりフォルダ名の更新がアトミックに行えるためデータの整合性が保たれることや、フォルダの一覧取得が容易になるなどのメリットがあります。

2024/10でHierarchical Namespaceはプレビュー版のため、本番環境での利用はまだ不可です。

https://cloud.google.com/storage/docs/hns-overview?hl=ja#hns-limitations

☕️ Vitest Browser Mode

Vitestのテストをネイティブブラウザ環境で実行できるモードがあります。従来のjsdomなどを使用したテストはNode.js上でシミュレートされた環境で実行されており、実際のブラウザでテストが行われるわけではありません。

しかしフロントエンドの本番環境はブラウザで動作するため、テスト環境もブラウザで実行することでテストの信頼性を向上させることができます。さらに、localStorageなどのブラウザAPIをモックせずにテストすることが可能です。

2024/10ではExperimentalな機能になります。

https://vitest.dev/guide/browser/