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.7k
Other Decks in Technology
See All in Technology
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
320
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
AWSで始める実践Dagster入門
kitagawaz
1
700
いま注目のAIエージェントを作ってみよう
supermarimobros
0
340
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
450
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Writing Fast Ruby
sferik
628
62k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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が結構使えるようになっ た