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.6k
@ionic/vue で Web アプリを作ってみる
mikakane
February 23, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
0
1k
コーディングがわからない
mikakane
0
120
Web制作現場のディレクションを支えるGitHub
mikakane
0
430
nuxt.js で plugins を作る
mikakane
0
690
Laravel Package Development
mikakane
16
5.7k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2k
フロントエンドで作る理由
mikakane
1
1.1k
Firebase で作る Web アプリケーション
mikakane
1
130
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
670
Other Decks in Technology
See All in Technology
成長をサポートするピープルマネジメントのやり方
sioncojp
8
950
Cloud Service Mesh に触れ合う
phaya72
1
160
On Your Data を超えていく!
hirotomotaguchi
2
750
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
460
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
880
Cracking the KubeCon CfP
inductor
2
270
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
140
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
700
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
本当のAWS基礎
toru_kubota
1
620
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
Featured
See All Featured
Scaling GitHub
holman
457
140k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Facilitating Awesome Meetings
lara
43
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
What the flash - Photography Introduction
edds
64
11k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Teambox: Starting and Learning
jrom
128
8.4k
Building Adaptive Systems
keathley
32
1.9k
Become a Pro
speakerdeck
PRO
12
4.6k
A designer walks into a library…
pauljervisheath
201
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
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!