【雑記】プリミティブなコンポーネントとは？
1zushunモチベーション
どこかの記事で「プリミティブなコンポーネントは〜」という内容を見て「プリミティブってなんだっけ」と思った。Radix Premitivesを使っていてなんとなくプリミティブのニュアンスはわかっているが誰かに説明できるほど理解できていないためプリミティブに言及している記事とかがないか探していく
1zushun
premitive-componentsというライブラリがあって、そちらのdocsにプリミティブの定義があった
This is a library of 'primitive' components. I define primitive to meaning a component that returns a HTML tag, not a React component.
-> プリミティブとは、Reactコンポーネントではなく、HTMLタグを返すコンポーネントを意味する。
1zushun
Radix Primitives is a collection of extensible, unstyled, and accessible components made to serve as the building blocks of your application.
-> Radix Primitivesは、拡張可能で、スタイルがなく、アクセス可能なコンポーネントのコレクションで、アプリケーションの構成要素として使用できます。
1zushun
This library attempts to propose an ideal set of primitives around building React applications, regardless of Platform. In the future, this could be used as a shared interface among React and React Native components that don't use platform-specific APIs.
Reactアプリケーションを構築するための理想的なプリミティブのセットを提案しようとしている。が、この「プリミティブ」の意味を知りたいんだよなあと。
以下の記事でReact Premitivesについて触れていてプリミティブ = 小さなコンポーネントとして説明している
primitivesという名前はこの共通の必要最低限のものと言った意味で命名されているようです。
1zushunそもそもPrimitiveの意味は？
-> 原始的な、単純な、素朴な
1zushun
Primitive components - Components that are accessible but without styling, so you can personalise them anyway you want.
-> スタイリングなしでアクセスできるコンポーネントです。
These are more like skeletons without css. Basically providing you with HTML like elements but without any opinionated design language.]
-> これらはどちらかというと、CSSなしのスケルトンのようなものだ。 基本的にはHTMLのような要素を提供するが、デザイン言語としての意見はない。
フォーカス管理、キーボード・ナビゲーション、イベント・リスナー、アクセシビリティ属性、有効なマークアップ、スクリーン・リーダーのサポートなどのエッジケースに対応するのは大変なのでheadless librariesとしてRadix UI, Headless UI, React Ariaが人気があると触れている。
1zushun見てる
1zushunまとめ
プリミティブなコンポーネントとは？
コンテキストによって意味はまちまちだが「スタイリングされていないコンポーネント」「InputやButtonレベルのコンポーネント」という認識で良さそう。Premitive Components = Headless Components（ライブラリとしてRadix UI, Headless UI, React Ariaなどが提供されている）
もっと言及されている記事やエビデンスがあれば優しく教えていただけると🙏