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
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
110
MCPと認可まわりの話 / mcp_and_authorization
convto
2
340
OpenTelemetry の Log を使いこなそう
biwashi
5
1.2k
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.9k
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
230
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.2k
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
530
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2k
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
280
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
1
290
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
240
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Designing Experiences People Love
moore
142
24k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Optimizing for Happiness
mojombo
379
70k
Six Lessons from altMBA
skipperchong
28
3.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A Tale of Four Properties
chriscoyier
160
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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が結構使えるようになっ た