ハクソク

世界を動かす技術を、日本語で。

オート – 超軽量、セマンティック、ゼロ依存のHTML UIコンポーネントライブラリ

99日前原文(oat.ink)

概要

Oat は、 超軽量 かつ 依存関係ゼロ のHTML＋CSS UIコンポーネントライブラリ。 約8KB （CSS 6KB、JS 2.2KB、min+gzip）で、 フレームワークやビルド不要。 セマンティックタグ や属性を直接スタイリングし、 クラス不要。 WebComponents による動的要素も最小限。 長期的に安定利用 できる、 シンプル かつ 標準準拠 な設計。

Oat: 超軽量セマンティックUIコンポーネントライブラリ

  • HTML＋CSS ベースの UIコンポーネントライブラリ
  • 依存関係ゼロ、他のJS/CSSフレームワーク不要
  • CSS 6KB、 JS 2.2KB （minified＋gzip時）という極小サイズ
  • フレームワーク、ビルド、開発環境構築不要
  • CSSファイルとJSファイル を読み込むだけの簡単導入
  • セマンティックなHTMLタグ や 属性 に直接スタイル適用
    • 例：<button>、<input>、<dialog>、role="button"など
  • クラス名付与不要、 マークアップのクラス汚染防止
  • セマンティックHTML と ARIAロール を多用・強制
  • キーボードナビゲーション 完全対応
  • WebComponents による動的コンポーネントも一部採用
    • JavaScript は最小限
  • CSS変数 によるテーマカスタマイズが容易
    • data-theme="dark"をbodyに指定するだけで ダークテーマ 利用可能
  • shadcn aesthetic の影響を受けたデザイン

なぜOatなのか

  • 既存のUIライブラリやフレームワーク の 複雑さ・肥大化 ・ 依存地獄 への強い不満
  • Node.jsエコシステム による ロックイン や 破壊的変更 からの解放
  • バニラCSS/JS のみで構成されるため 長期運用が可能
  • シンプル・最小限・標準準拠 を徹底した設計思想
  • 自分自身のプロジェクト で長期利用できるUIライブラリを目指す
  • 同様の悩み を持つ開発者への共有目的

主な特徴まとめ

  • 完全スタンドアロン、 外部依存ゼロ
  • セマンティックHTML ＋ ARIA 強制
  • クラス不要、 クリーンなマークアップ
  • テーマ切り替え ・カスタマイズ容易
  • 最小限のJS、 WebComponents 対応
  • 現代的かつシンプルなデザイン
  • 長期利用に最適 なUI基盤

Hackerたちの意見

いい仕事だね！PicoCSSは時々ちょっとミニマリストすぎる感じがする。このデザインは軽量さと機能性のバランスが良さそう。

5日前に作られたリポジトリで、GitHubで2000スター、npmで週400回ダウンロードされてる。Hacker Newsのフロントページには変なコメントがいっぱい。最近はモデレーションが不足してるね。

└

HNもLLMに荒らされてるのが悲しい。人々は本当に恥知らずだね。HNは、自分が作ったものを投稿したり宣伝したりできる数少ない場所の一つだったのに、それを利用されるだけになってしまった。

└

著者はインド最大のオンライン証券会社ZerodhaのCTOなんだって。どうでもいいけど、ただの観察ね。

└

結論を急ぎすぎだよ。著者はインド最大のオンライン証券会社のCTOだけど、もっと重要なのは、質の高いオープンソースソフトウェアをたくさん作ってるってこと。彼のウェブサイトやブログも素晴らしいよ。このライブラリがもっと注目されるべきかどうかは個人の好みだけど、スパムとは全然違うからね。私は彼らとは関係ないけど、彼らの仕事は好きだよ。

フロントページにリンクされてるモチベーションのブログ記事[1]の方が、フレームワーク自体よりも面白い議論を生むかも。仕事でAngularとNext.jsを扱ってる身としては、この視点にますます共感するようになってきたよ。[1]: https://nadh.in/blog/javascript-ecosystem-software-developme...

└

前回（2021年）：https://news.ycombinator.com/item?id=28892933

リリース前に古いブラウザでテストしてくれてありがとう。これは本当に超ミニマルなライブラリだね - https://ibb.co/DDGmLYdg, https://ibb.co/h1WQG3GK

10年前のBootstrap[1]を思い出すな。あの頃はもっとスリムだったけど、今はかなり膨れちゃったね。1. https://getbootstrap.com/

これに似たセマンティックなドロップインCSSライブラリがたくさんあるよね。新しいのが出るのを見るのが好き。クオリティはバラバラだけど、このサイトにはセマンティックHTMLを書く人向けに50以上のドロップインスタイルシートが紹介されてるよ: https://dohliam.github.io/dropin-minimal-css/

これ、DaisyUIから期待してたシンプルさがあって、実際には得られなかったものだね。これをDatastarと組み合わせるのは、実際のウェブ標準に基づいた超強力な組み合わせになりそうだ。

共有してくれてありがとう！でも、ほとんどのウェブサイトに必要なナビゲーション/メニューコンポーネントも追加してほしいな。

なんでUIコンポーネントライブラリにはいつもアコーディオンがあるのに（自分で5分で作れるし、めったに必要ないのに）、日付ピッカーやカレンダーコンポーネントがいつも抜けてるの？（これはほぼすべての法人ウェブフォームに必要で、作るのにかなりの労力がかかるのに）。

└

ごめん、謝らなきゃ。左のメニューの「フォーム要素」の下に隠れてたね。著者たちに拍手を送るよ！

次は：Oath Oatly Ooaut Oaar