【React製】UIデザインの「定番」を詰め込んだコンポーネントライブラリ『Performative-UI』を公開しました

React開発の現場でよく使われるデザインパターンを網羅したコンポーネントライブラリ『Performative-UI』をリリースしました！皆さんの開発効率アップに役立てていただけると嬉しいです。

（基本的には）パロディライブラリなのに、どれもめちゃくちゃプロっぽく見えるね。

究極の意識高い系アピールって、あえてブラウザのデフォルト設定だけで、装飾を一切しないことだよね。シリーズAで何十億ドルも調達してるのに、シフトキーを押すのが面倒で小文字しか使わないみたいな。

シンプルで要点がまとまったサイトを作った時、パフォーマンス重視のUI要素が入ってないからという理由で、真面目に受け取ってもらえなかった経験が何度もあるよ。

YouTuberが動画でしつこくチャンネル登録を促すことに対して視聴者が文句を言うのと似てるよね。あれは、統計的に数字が伸びるからやってるだけなんだ。

使いたい人のためにGitHubリンクを貼っておくね（自分も使う予定）：
https://github.com/vorpus/performativeUI (https://github.com/vorpus/performativeUI)

「TokenStream – Server-sent events (SSE) は2008年のHTML5仕様で追加されたけど、2025年まで使われてこなかった」

1997年にチャンク転送エンコーディングが出たのを覚えてるよ。あの頃から、今みんながLLMで目にするようなテキストやHTMLチャンクのストリーミングは簡単にできたはずなんだけどね。

自分は1997年にそれを使ってWebベースのTelnetクライアントを作ったし、後にはWeb用のテキストMOOやチャットも作った。どっちもフレームセットを使って、下の画面に送信行、上側にサーバーサイドで発生したイベントが随時表示されてスクロールするようにしてたよ。

それ以前にも悪用できるものはあったけど、安定性は低かったかな。

それにしても、誰も使わなかった技術の筆頭だよね……。

お決まりのパターンっていうのはわかるし、自分がおじさんなだけかもしれないけど、Claudeが自分より100倍速くこういうUIを吐き出してくれるのには今でも感動するよ。そもそもAIがなかったら、自分じゃこのレベルのUIすら作れなかっただろうしね。(˶ˆᗜˆ˵)

面白いうえに作り込みが凄すぎて最高。素晴らしい仕事だね！

正直なところ、このコンポーネントのいくつかは本番環境でも使いたい気分だよ（特にアスキーアートが素晴らしすぎる）。

面白いのは、ここに載ってるテクニックがかつては上級フロントエンドエンジニアやパブリッシャーにしかできない技術とされていたことだよね。かつてのスキルの象徴が今や風刺の対象になっているのを見ると、「ハイレベル」って呼ばれるものは結局のところ他人にできないことに過ぎないんだなと考えさせられる。個人的にはアスキーアートのアニメーションなんてどう実装するか考えたことすらなかったよ。

ノードがアニメーションする背景は、2017年から2018年のICOブーム時代、トークン販売サイトにおける必須装備だったよね https://vorpus.github.io/performativeUI/#/components/node-gr... (https://vorpus.github.io/performativeUI/#/components/node-graph)

ドキュメントをスクロールした時に、なんであのウザいポップオーバーが勝手に出てこないのかがわからないな。IntersectionObserverがもっと必要だよね。コンポーネントのprops名が「selfArmTrigger」みたいになってたら満点なんだけどな。