Next.js(React)でモバイルアプリ風のWebサイトを作りたい時に使用するUIライブラリを探していて、以下の3つを比較したのでご紹介。
- Onsen UI
- Framework7
- Ionic
Onsen UI
https://onsen.io/react/
私でも名前は聞いたことあるので多分有名なやつ。
公式でのTypescriptサポートはなさそうだけど、@types/react-onsenuiがあったので使う分には問題なさそう。
他の2つに比べてコンポーネントの数は少なめ。
Framework7
https://framework7.io/react/
これは知らなかった。
後述の比較表みてもわかるけど、バランスよく網羅されててオススメできそう。
ただし、Dialogなどの一時的なUIはコンポーネントではなく関数で用意されているので好みが分かれるかもしれない。
Ionic
https://ionicframework.com/docs/react
Cordovaでモバイルアプリ作るときに一緒に使うUIフレームワーク、という認識だったのだけどWeb向けReactでも使えるんですね。
過去にはNext.jsとIonicでビルドがコケるみたいな記事も見かけたけどどうか。
Next.jsでUIライブラリとして使う場合は、Ionic CLIは使わない。
比較表
| Onsen UI | Framework7 | Ionic | |
|---|---|---|---|
| version | 2.11.2 | 8.3.0 | 7.4.1 |
| Accordion | Accordion | IonAccordion | |
| Action Sheet | ActionSheet | Actions | IonActionSheet |
| Alert Dialog | AlertDialog | f7.dialog | IonAlert |
| Badge | (css support) | Badge | IonBadge |
| Breadcrumb | Breadcrumbs | IonBreadcrumbs | |
| Button | Button | Button | IonButton |
| Calendar / Datepicker | f7.calendar | IonDatetime | |
| Card | Card | Card | IonCard |
| Carousel | Carousel | swiper-container | |
| Chart | AreaChart, PieChart | ||
| Checkbox | Checkbox | Checkbox | IonCheckbox |
| Chip | Chip | IonChip | |
| Dialog | Dialog | f7.dialog | |
| Drawer | Splitter | Panel | IonMenu |
| Floating Action Button | Fab | Fab | IonFab |
| Grid | (css support) | IonGrid | |
| Icon | Icon | IonIcon | |
| List | List | List | IonList |
| Login Screen | LoginScreen | ||
| Message Bar | Messagebar | ||
| Modal | Modal | Popup | IonModal |
| Notification | f7.notification | ||
| Picker | f7.picker | IonPicker | |
| Popover | Popover | Popover | IonPopover |
| Progress Bar | ProgressBar | Progressbar | IonProgressBar |
| Progress Circle | ProgressCircular | Preloader | IonSpinner |
| Pull To Refresh | Page | IonRefresher | |
| Radio Button | Radio | Radio | IonRadio |
| Range Slider | Range | Range | IonRange |
| Reorder Item | List | IonReorder | |
| Search Bar / Search Input | SearchInput | Searchbar | IonSearchbar |
| Segment Control | Segment | Segmented | IonSegment |
| Skelton / Place Holder | SkeletonBlock | IonSkeletonText | |
| Select Input | Select | ListItem[smartSelect] | IonSelect |
| Stepper | Stepper | ||
| Switch | Switch | Toggle | IonToggle |
| Tab Bar | Tabbar | Tabs | IonTabs |
| Text Input | Input | Input | IonInput |
| Textarea | (css support) | TextEditor | IonTextarea |
| Toast | Toast | f7.toast | IonToast |
| Tool Bar | Toolbar | Toolbar, Navibar | IonToolbar |