【ITニュース解説】Quiet UI: My Creative Outlet

このニュース記事は、ある開発者が自身の創造性を追求するために「Quiet UI」というコンポーネントライブラリを開発した物語を伝えている。著者は以前から「Shoelace」というオープンソースプロジェクトを立ち上げ、その成功を経て「Web Awesome」というプロジェクトに携わっている人物だ。Web Awesomeは現在、大規模なチームによって開発が進められ、今年10月に公開が予定されている。

Web Awesomeの忙しい開発の中で、著者は純粋な楽しさのために何かを創りたいという個人的な欲求を抱いた。Web Awesomeでは新しいWeb APIの導入に時間的な制約があり、またデザイン面は専門のデザイナーが主導しているため、著者が自身のデザインアイデアを試す機会が限られていた。著者はコンポーネント実装のスキルには自信があったが、デザインも手掛けたいという思いがあったのだ。特にElementInternals、Custom States、Popover APIといった最先端のWeb機能は、当時のブラウザではまだ広くサポートされておらず、Web Awesomeには組み込めなかったため、個人的なプロジェクトで試してみたいと考えていた。

このような背景から、著者は制約にとらわれず、自身のアイデアや意見を自由に試せる場としてQuiet UIの開発を始めた。まずボタンやテキストフィールド、スピナーといった基本的なコンポーネントを開発し、その過程でElementInternalsなどの新しいWeb APIの動作を深く理解した。初期のShoelaceでは不可能だったカスタム要素と制約検証機能の連携に感動を覚えたという。スピナーの実装では、SVGを使うなど新しい表現方法も積極的に試された。この段階ではまだプロジェクト名もなく、実験的なコンポーネントがフォルダ内に集められているだけだった。

次に、カラーパレットの探求に注力した。著者はcolor-mix()関数とOKLAB/OKLCH色空間に興味を持ち、純粋なCSSでカラーパレットを生成する実験を行った。過去にHSL色空間でカラーパレット生成に失敗した経験から、知覚的に均一なOKLAB/OKLCH色空間の優位性を実感したという。Shoelace開発の経験を活かし、単一の中間色からプライマリ、ニュートラル、破壊的、建設的といった主要なカラーパレットを純粋なCSSで生成する仕組みを構築した。これらの色を「デザイントークン」としてコンポーネントに適用することで、統一されたデザインとテーマ機能を実現した。この過程で、制約があることがかえって一貫性を生み出し、コンポーネントライブラリにおいて一貫性が極めて重要であることを再認識した。

その後も、ジョイスティックやスライドtoロックなど、多様なコンポーネントが開発され、プロジェクトは着実に成長していった。基本的なコンポーネントも追加され、ライブラリとしての完成度が高められた。新しいコンポーネントを追加するたびに既存のコンポーネントも改善され、細部の調整が繰り返された。プロジェクトに名前を付ける段階になり、「UI」を含む単語を検索した結果、「Quiet」という言葉がUIライブラリ名として使われていないこと、シンプルさ、そしてドメインが取得可能だったことから「Quiet UI」と命名された。

最近のIT業界ではAIの話題が避けて通れない状況であり、著者はAI技術から取り残されないようにQuiet UIをAI実験の場として活用した。Claude、Grok、ChatGPTなどの大規模言語モデル（LLM）の効果的な利用法を学ぶことができたという。著者はコンポーネントのコード生成をAIに完全に任せるのではなく、まず自身でAPIを設計し、その設計と期待される動作を詳細なプロンプトとしてAIに与えた。また、自身の作成したコード例を提供することで、AIが適切なコードスタイルに従うよう誘導し、生成されたコードは常に注意深くレビューされた。このAI活用により、特定のコンポーネントの開発速度が大幅に向上した。例えば、以前は数日かかったコンポーネントが、AIの助けを借りて数時間で完成したという。著者は、この開発速度の向上は、ライブラリのモジュール性の高さと、コンポーネントのAPI設計に対する自身の豊富な経験が大きく影響していると分析している。しかし、大規模で複雑なコードベースにおいてAIが同様の性能を発揮できるかについては、まだ懐疑的な見方を示している。

Quiet UIは、著者の個人的な創造の場であり、Web Awesomeと競合するものではない。むしろ、Web Awesomeよりもシンプルな設計になっており、新しいアイデアや実験的な機能の「テストベッド」としての役割を果たしている。実際、Popover、Slider、Intersection Observerなど、Quiet UIで開発されたコンポーネントのいくつかは、Web Awesomeに採用され、より成熟した形で導入されている。今後もファイル入力やトースト機能などがWeb Awesomeに組み込まれる予定だ。Quiet UIのコンポーネントがWeb Awesomeに採用されるかどうかは、Web Awesomeチーム全体での議論と合意によって決定される。Quiet UIは著者の個人的なプロジェクトであるため、Web Awesomeの堅牢なテーマシステムとは直接連携しないコンポーネントも含まれている。

Quiet UIはオープンソースライセンスではなく、「ソースアベイラブル」として公開されている。これは非商用利用であれば誰でもコードを学び、利用できるが、プロジェクトがフォークされてWeb Awesomeと競合することを防ぐための意図的な選択だ。商用アプリケーションでの利用を希望するユーザーには商用ライセンスが提供されている。著者はQuiet UIに価値があると感じており、多くの人に使ってほしいと考えている。しかし、Quiet UIは著者の個人的な創作活動の産物であり、Web Awesomeのような大規模で専門チームが支えるプロジェクトとは性質が異なる。Web Awesomeは安定性と成功を保証するチームがいる一方で、Quiet UIは著者が個人的に新しいアイデアを試したり、学びを深めたりするための場所なのである。