Oat - 超軽量・ゼロ依存・セマンティックHTML・CSS・JSのUIライブラリ

 (oat.ink)
3 ポイント 投稿者 GN⁺ 2026-02-16 | 1件のコメント | WhatsAppで共有
  • HTMLとCSSベースの超軽量UIコンポーネントライブラリで、ビルド工程やフレームワーク依存が一切ない構成
  • 6KBのCSSと2.2KBのJS（圧縮・gzip基準）のみで構成されており、Webアプリケーションに必要な主要UI要素をすぐに利用可能
  • <button>、<input>、<dialog> などの セマンティックHTML要素を直接スタイリングし、クラスの使用を最小限に抑えてコードの汚染を減らす
  • アクセシビリティ（Accessibility） を考慮し、ARIAロールとキーボードナビゲーションを標準でサポート
  • 複雑なJSエコシステムの依存関係や過剰なエンジニアリングから離れ、シンプルで標準ベースの長期利用可能なUI構成を目指している

Oat 概要

  • Oatは HTML + CSSベースの超軽量セマンティックUIコンポーネントライブラリで、外部依存が一切ない
    • フレームワーク、ビルドツール、開発環境の設定が不要
    • 小さなCSSとJSファイルを含めるだけですぐに使用可能
  • 約 8KB（6KB CSS + 2.2KB JS） のサイズで、Webアプリケーションの基本UIを素早く構築できる
  • 主なコンポーネントとして Button、Card、Dialog、Table、Tabs、Tooltip、Toast、Sidebar などが含まれる

セマンティックHTMLとアクセシビリティ

  • セマンティックタグと属性をベースにスタイルが自動適用されるため、クラス指定なしでも一貫したデザインを維持
    • 例: <button>、<input>、<dialog> などの基本HTML要素に直接スタイルを適用
    • role="button" のようなセマンティック属性も自動認識
  • ARIAロール と キーボードナビゲーション をすべての構成要素でサポート
    • アクセシビリティ標準を徹底適用し、ユーザー体験を向上

ゼロ依存とシンプルさ

  • JSやCSSフレームワーク、ライブラリへの依存がない
    • Node.jsエコシステムの複雑さと不要な依存関係の問題を完全に排除
    • ビルドやパッケージ管理の工程なしにすぐ使える
  • 一部の動的コンポーネントは WebComponents で実装されており、最小限のJSのみを使用

カスタマイズとテーマ

  • CSS変数 により、テーマカラーやスタイルを簡単に調整可能
    • data-theme="dark" 属性を body に追加すると自動でダークテーマを適用
  • 全体的なデザインは shadcnの美学 の影響を受けている

制作背景

  • 既存の JavaScript UIフレームワークの過度な複雑さと依存性の問題 への不満から出発
    • Node.jsエコシステムの “dependency hell” や “lock-in” の問題を避けることが目的
  • シンプルで標準ベースの 長期的に維持可能なUIライブラリ を自ら使うために制作
  • 開発者はOatを通じて 不要なビルド工程なしですぐに使えるUI構成 を実装できる

関連記事

1件のコメント

 
GN⁺ 2026-02-16
Hacker Newsの意見

  • semantic HTML要素だけでWebアプリの適切な効果を出そうとする試みは素晴らしいと思う
    「classless CSS」パラダイムを志向している点も気に入っている。ただ、コンポーネントカタログを見ると、semantic要素と基本要素、dataタグとaria属性、そしてCSSクラスが入り混じっていて、一貫性に欠けるように見える
    それでも、aria属性に応じてCSSが反応してスタイリングされる点は印象的だ。Reactのような重いコンポーネントライブラリの代わりに、aria-firstアプローチで考える良い練習になりそうだ
    特に、このコンポーネントライブラリにネイティブなサイドバーが含まれているのが良い。大半のライブラリは再利用可能な小さなコンポーネントにしか注目しないが、これは aside > nav > ul 構造で main の横に自然に配置されていてすっきりしている

  • このサイトを見て驚いた。リンクをタップした瞬間にページが即座に読み込まれ、まるでムチのように速く感じた
    インターネットでこういう速さを忘れていたが、今ではWeb開発に挑戦してみたくなった

    • サイトを作るなら Astro を使ってみるのを勧める。読み込み速度が本当にすごい
    • ちなみに Hacker News も同じような速度感を示す良い例だ

  • このプロジェクトは、私が DaisyUI に期待していたシンプルさを実際に形にした感じだ
    ここに Datastar を組み合わせれば、Web標準に基づく強力な組み合わせになりそうだ。「エコシステム」よりも、本物のWeb技術に寄りかかるアプローチだ

  • fosiao/rclone-webui-oat は
    既存の重くてメンテナンスされていない rclone-webui-react を置き換えるもののようだ

  • フロントページにリンクされているブログ記事の方が、フレームワーク自体よりも興味深い議論を引き出しそうだ
    私は仕事で Angular と Next.js の両方を扱っているが、だんだんこの記事の視点に共感するようになってきた
    関連記事: JavaScript ecosystem is a hot mess

    • 良いリンクだ。2021年の記事だが、今でも有効な洞察が多い
      当時の議論: HNスレッド
    • このWebサイトは本当に気に入った。クリックから完全読み込みまで遅延が0秒だ
    • ちなみに2021年にも同じテーマがここで議論されていた

  • <aside> はサイドバーに常に適したsemantic要素というわけではない
    本文と間接的に関連するコンテンツに使うのが本来の目的だ。サイドバーがその定義に合うこともあるが、常にそうとは限らない

  • この手のsemanticなdrop-in CSSライブラリは本当にたくさんある。新しいプロジェクトを見るのは楽しい
    品質はさまざまだが、このサイトにはsemantic HTML向けの50以上のdrop-inスタイルシートがまとめられている
    リンク: Drop-in Minimal CSS集

    • なるほど、「drop in」ではなくそういう意味だったのか。ハイフン1つがこんなに重要だとは思わなかった :)
    • これはもっと注目されるべきだ。正直、元の記事よりも興味深い資料だ
    • とても気に入った。右矢印でスタイルシートを順番に切り替えて見られる
    • そのリストの中で、おすすめのスタイルシートがあるのか気になる

  • このプロジェクトは10年前のBootstrap初期バージョンを思い出させる
    今のBootstrapはかなり肥大化したが、あの頃のシンプルさを感じる
    参考: Bootstrap公式サイト

  • 古いブラウザでもテストしてくれているのはありがたい。本当に超ミニマルなライブラリだ
    スクリーンショット: 画像1, 画像2

    • 気になるのだが、普段から古いブラウザをメインブラウザとして使っている理由があるのか知りたい

  • 私もアプリで似たようなことを試したが、一部のsemantic/functionalタグは今でもブラウザで適切にサポートされていないと気づいた
    例えばSafariでdialogタグのshowModalを使うと、ページ全体のレイアウトを再計算するため、Chromiumより59倍遅い
    それでも、このアプローチ自体は依然として気に入っている