Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ionic/vueもβ版になったのでちゃんと触ってみた
Search
chan_kaku
April 27, 2019
Technology
0
670
ionic/vueもβ版になったのでちゃんと触ってみた
ionic/vueが2019年4月にβ版がリリースされたということでα版との違いなどを調べてみました
chan_kaku
April 27, 2019
Tweet
Share
More Decks by chan_kaku
See All by chan_kaku
JJGU CCC 2019 Springまとめ~Java歴1年なりの意見を添えて~
takumiz19
1
2.4k
Vueのライフサイクルを完全に理解
takumiz19
0
2k
Vueでネイティブアプリを作り倒す
takumiz19
1
1.6k
Other Decks in Technology
See All in Technology
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
180
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
130
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
220
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
35
16k
開発と脆弱性と脆弱性診断についての話
su3158
1
1k
結局QUICで通信は速くなるの?
kota_yata
9
7.5k
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
3
350
ECS モニタリング手法大整理
yendoooo
1
110
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
290
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
130
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
200
Backboneとしてのtimm2025
yu4u
3
1.2k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Become a Pro
speakerdeck
PRO
29
5.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Documentation Writing (for coders)
carmenintech
73
5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Site-Speed That Sticks
csswizardry
10
780
Code Review Best Practice
trishagee
70
19k
Music & Morning Musume
bryan
46
6.7k
Building Adaptive Systems
keathley
43
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Transcript
ionic/vueもβ版になったのでちゃんと触っ てみた 2019/04/27 Kyoto.js #16 chan_kaku
自己紹介 フリュー株式会社 サーバーサイドエンジニア Vue歴約1年(v-kansai運営) ライブ、フェス、ベース、お酒 特にビールが大好きだよ 仕事 趣味 Twitter @chan_kakuz
前回のKyoto.jsで、、、
https://speakerdeck.com/takumiz19/vuedeneiteibuapuriwozuo-ridao-su
前回もvue/ionicの話をしたが、、、
動機
動機 • VueConf USAでionic/vueのβ版について発表された • α版からどうなったのか気になった
β版でできるようになったこと • Vue Routerがついに • その他色々IonicのComponentsが使えるようになったっ ぽい(公式アナウンスはない)
β版でもできないこと • The shorthand v-model binding is currently not supported
a. 双方向バインディングのディレクティブであるv-modelが使えない • Stack navigation for deep transitions is under heavy development at this time. a. 次のページで解説 • ネイティブのAPIが使えない a. これはまだAngularでしか使えない
stack navigator 1 5 4 3 2 1 2 3
4 5 screenが積み重なっている感じ
まずはrouterを使ってみる
routerを使う vue cliで作ったプロジェクト にrouterを追加
ionic追加 import Vue from 'vue' import App from './App.vue' import
router from './router' import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); Vue.config.productionTip = false; new Vue({ router, render: h => h(App) }).$mount('#app') 追加 src/main.js
IonicVueRouterを追加 import Vue from 'vue' import Home from './views/Home.vue' import
{ IonicVueRouter } from '@ionic/vue'; Vue.use(IonicVueRouter); export default new IonicVueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }); 追加 VueRouterを使いつつ、Ionic のRouterAPIを 使うためのもの src/router.js
None
いろんなComponentで遊んでみる
ion-fab <ion-fab vertical="bottom" horizontal="end"> <ion-fab-button>Share</ion-fab-button> <ion-fab-list side="top"> <ion-fab-button> <ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button> <ion-fab-button> <ion-icon name="logo-twitter"></ion-icon> </ion-fab-button> <ion-fab-button> <ion-icon name="logo-youtube"></ion-icon> </ion-fab-button> </ion-fab-list> <ion-fab-list side="start"> <ion-fab-button> <ion-icon name="logo-vimeo"></ion-icon> </ion-fab-button> </ion-fab-list> </ion-fab>
None
ion-card <ion-card> <img src="../assets/profile.png"> <ion-card-header> <ion-card-subtitle>name</ion-card-subtitle> <ion-card-title>chankaku</ion-card-title> </ion-card-header> <ion-card-content> I
love beer. </ion-card-content> </ion-card>
ion-card
感想 • GooglePlay StoreでもPWAでアプリを配信できるよ うになったし、iOSも12.2でPWAのOAuthがちゃんと 使えるようになったので、PWAでいいのではと思った り • 今のところ(2019/04現在)はVueでちゃんとしたプロ ダクトとしてネイティブアプリを作るのは辛いイメージ
まとめ • IonicのRouterAPIを使うことができるようになった • Ionic/VueでもIonicのComponentが結構使えるようになっ た