OSS探訪ページ内ナビ
概要
Onsen UIは、Web Componentsを基盤にPWAやhybrid mobile app向けUIを構築するframeworkです。coreはframework agnosticで、iOS風のflat designとAndroid向けMaterial designを同じcomponent群から扱い、React・Vue・Angular向けbindingも提供します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
Web Componentsでmobile向けUI componentを組み立てる
toolbar、page、list、buttonなどのcustom elementとCSS componentを使い、HTML/JavaScriptからmobile applicationらしいnavigationやUIを構築できます。
出典：[2]
platform別styleとframework bindingを選択する
iOS向けflat designとAndroid向けMaterial designを含み、platformに応じたauto stylingを利用できます。core単体に加えてReact・Vue・Angular向けbinding packageも案内されています。
出典：[2]
向いている用途
Cordova系hybrid appやPWAでmobile UIを共通化したい場合に向く
Web技術でiOS/Android双方へUIを提供するhybrid app、PWA、既存のOnsen UI資産を保守するprojectで利用しやすい構成です。
出典：[2]
導入前の確認
対象browser・mobile OS条件が古い記述を含むため実機検証する
READMEのsupport表にはAndroid 4.4.4+、iOS 9+など長期にわたる互換範囲が記載されています。現行browserやWebViewでの実際の挙動は採用時に実機・target runtimeで確認してください。
出典：[2]
参考にした公式資料
- [1]OnsenUI/OnsenUI repository(2026-09-30)
- [2]Onsen UI README(2026-09-30)
- [3]onsenui package metadata(2026-09-30)
- [4]Onsen UI core Apache-2.0 license(2026-09-30)
- [5]Onsen UI 2.12.8 GitHub release(2026-09-30)
編集部からの補足
Web Components中心のcoreをframework非依存で使える一方、歴史の長いprojectなので、新規採用ではtarget WebViewと利用versionの実機確認が重要です。core packageのライセンスはApache-2.0です。
3ステップで試す
- 1
Onsen UI coreを追加
公式READMEのnpm手順でframework-agnosticなcore packageをprojectへ追加します。
npm install onsenui - 2
JavaScriptとCSSを読み込む
Web Components本体とcore/component styleをentry pointから読み込みます。
import 'onsenui'; import 'onsenui/css/onsenui.css'; import 'onsenui/css/onsen-css-components.css'; - 3
Onsen UI componentを配置
custom elementをHTMLへ追加し、target browser/WebViewでiOS/Material styleとcomponent動作を確認します。
<ons-page><ons-toolbar><div class="center">Demo</div></ons-toolbar><ons-button>Tap me</ons-button></ons-page>
成長
成長の推移 · 直近30日
8,856 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 0
- Open PR
- 12
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- onsen-ui
- cordova
- react
- angular
- monaca
- hybrid-apps
- javascript
- webcomponents
- customelements
- vue
- material
- android
- Stars
- 8,856
- Forks
- 993
- Watchers
- 291
- Open Issues
- 2
- Contributors
- 104
- 所有者種別
- Organization
- 主要言語
- JavaScript
- ライセンス
- Apache-2.0
- リポジトリ最終更新
- 2026/06/17
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Storybook91,174 Stars
共通タグ 3件 · 共通カテゴリ 1件
UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop
TypeScript - Tauri111,467 Stars
共通タグ 2件 · 共通カテゴリ 2件
web frontendとRust native layerをsystem WebView上のdesktop/mobile appへまとめる
Rust - Redux61,488 Stars
共通タグ 2件 · 共通カテゴリ 2件
共有状態の更新経路をStore・Action・Reducerで明示し、現代的な実装はToolkitへ寄せる
TypeScript - Zustand58,774 Stars
共通タグ 2件 · 共通カテゴリ 2件
Reactの状態をproviderなしのhook storeで管理し、selectorで必要な部分だけ購読する
TypeScript - TanStack Query50,383 Stars
共通タグ 2件 · 共通カテゴリ 2件
remote/server stateのfetch・cache・refetch・mutationをUI frameworkから分離して管理するasync state library
TypeScript - React250,821 Stars
共通タグ 2件 · 共通カテゴリ 1件 · 同じ言語
コンポーネントを組み合わせてWeb・ネイティブUIを構築するJavaScriptライブラリ
JavaScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。