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 で Web アプリを作ってみる
Search
mikakane
February 23, 2019
Technology
0
2.8k
@ionic/vue で Web アプリを作ってみる
mikakane
February 23, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
1
1.2k
コーディングがわからない
mikakane
0
120
Web制作現場のディレクションを支えるGitHub
mikakane
0
490
nuxt.js で plugins を作る
mikakane
0
740
Laravel Package Development
mikakane
16
6.1k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2k
フロントエンドで作る理由
mikakane
1
1.1k
Firebase で作る Web アプリケーション
mikakane
1
140
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
680
Other Decks in Technology
See All in Technology
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
460
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
610
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
10分でわかるfreeeのQA
freee
1
3.4k
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
Thoughts on Productivity
jonyablonski
67
4.3k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Building Adaptive Systems
keathley
38
2.2k
The Language of Interfaces
destraynor
154
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
RailsConf 2023
tenderlove
29
880
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
YesSQL, Process and Tooling at Scale
rocio
167
14k
Transcript
chatbox.inc 後藤 知宏 @ionic/vue で Webアプリを作ってみる
chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :
@_mikakane エンジニア / 技術顧問
chatbox.inc Vue.js ナウでヤングな JS フレームワーク 原宿を中心に熱狂的なムーブメント
chatbox.inc Start Project $ vue create vue-ionic-app cli ツールを利用してプロジェクトを開始 開発サーバや
lint の設定もセットアップ済み
chatbox.inc Vue Component <template> <section> <div v-if="message"> {{message}} </div> </section>
</template> <script> export default { ... } </script> <style scoped> </style> AngularJS 風の HTML 記法 .vue 拡張子による SFC 整理されてシンプルな JS API Scoped CSS
chatbox.inc Vue Router const router = new VueRouter({ routes: [
{ path: '/, component: () => import('@/views/Home.vue'), meta: { guestAccessible: true } }, { path: '/repos', component: () => import('@/views/Repos.vue') }, // ... ], }) URL と Vue Component を紐づけ Route にメタプロパティを付与
chatbox.inc Vuex Store import Vue from 'vue' import Vuex from
'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { ... } mutations: { ... }, actions: { ... } }) state を書き換える mutations 共有のデータストアとして機能する state 非同期に変更を処理する actions
chatbox.inc Vue.js Progressive Framework Vue.js + Community Library 用途に応じて柔軟な構成を選択できる、ミニマム+リッチなJSフ レームワークの選択肢
chatbox.inc @ionic/vue ionic が Vue.js をサポート ionic のコンポーネントが Vue.js で使える
chatbox.inc @modus/ionic-vue This project has been contributed to the Ionic
core and can be used as @ionic/vue. https://github.com/ModusCreateOrg/ionic-vue
chatbox.inc Code with Kitchen Shink ModusCreateOrg/ionic-vue-examples
chatbox.inc @ionic/vue でなにか作ってみよう! TODAY’S THEME!
chatbox.inc 無謀なチャレンジ
chatbox.inc chatbox-inc/gh-prune http://gh-prune.netlify.com
chatbox.inc main.js import Vue from 'vue' import Ionic from '@modus/ionic-vue'
import App from './App.vue' import '@ionic/core/css/core.css' import '@ionic/core/css/ionic.bundle.css' import '@/assets/scss/common.scss' Vue.use(Ionic) new Vue({ render: h => h(App), }).$mount('#app') ionic の CSS を読み込み Ionic を use
chatbox.inc route import { IonicVueRouter } from '@modus/ionic-vue' const router
= new IonicVueRouter({ routes: [ // ... ], }) export default router ionic の Router を読み込み URL と Vue Component を紐づけ
chatbox.inc App.vue <template> <ion-app id="app"> <ion-vue-router /> </ion-app> </template> ion-app
要素の中に ion-vue-router を記述 VueRouter と同じ記述でルートの処理ができる
chatbox.inc components <template> <ion-page class="ion-page" main> <ion-header> <ion-toolbar> <ion-title>{{title}}</ion-title> </ion-toolbar>
</ion-header> <ion-content class="ion-content" padding> <slot /> </ion-content> <ion-footer> <div class="footer-text">crafted by chatbox</div> </ion-footer> </ion-page> </template> 各種 ion component が使える
chatbox.inc ion component は Shadow DOM Vue の検証機能にもヒットしない
chatbox.inc Controller export default { methods: { async detail(){ //
... const alert = await this.$ionic.alertController.create(options) alert.present() } } } this.$ionic で 各種 controller にアクセス alert や loading, toast など
chatbox.inc trouble #1 <template> <ion-item> <ion-label position="stacked">Token</ion-label> <ion-input :value="form.token" @input="input"/>
</ion-item> </template> ion-input で v-model が動作しない :value と @input で動作させる
chatbox.inc trouble #2 export default { mounted(){ setTimeout(async ()=>{ const
loader = await this.$ionic.loadingController.create({...}) loader.present() },0) }, } mounted hook の中で controller の挙動がおかしい $nextTick ではなく setTimeout で解決可
chatbox.inc @ionic/vue worked ! α version でも意外と色々いける! シンプルな アプリ作成にはとても便利 Capacitor
を使ったビルドは未検証 …
chatbox.inc Why Vue.js ? プレーンな HTML と ES Style の
JS モダンなフロント開発の知識が乏しいメンバでも プロジェクトに参加しやすい 豊富な Vue.js ライブラリはそのまま利用可能 通常の Vue.js 開発とほとんど変わりなく利用できる Nuxt.js での利用は Router 周りが微妙っぽい IonicVueRouter が何をしているかの調査が必要 (Nuxt.js で Router をまるっと差し替えるのが厳しそう…?)
chatbox.inc Enjoy Vue.js !
chatbox.inc Thanks!