@ionic/vue で Web アプリを作ってみる

Transcript

1. chatbox.inc 後藤 知宏 @ionic/vue で Webアプリを作ってみる

2. chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :

   @_mikakane エンジニア / 技術顧問

3. chatbox.inc Vue.js ナウでヤングな JS フレームワーク 原宿を中心に熱狂的なムーブメント

4. chatbox.inc Start Project $ vue create vue-ionic-app cli ツールを利用してプロジェクトを開始 開発サーバや

   lint の設定もセットアップ済み

5. 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

6. 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 にメタプロパティを付与

7. 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

8. chatbox.inc Vue.js Progressive Framework Vue.js + Community Library 用途に応じて柔軟な構成を選択できる、ミニマム＋リッチなJSフ レームワークの選択肢

9. chatbox.inc @ionic/vue ionic が Vue.js をサポート ionic のコンポーネントが Vue.js で使える

10. 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

11. chatbox.inc Code with Kitchen Shink ModusCreateOrg/ionic-vue-examples

12. chatbox.inc @ionic/vue でなにか作ってみよう！ TODAY’S THEME!

13. chatbox.inc 無謀なチャレンジ

14. chatbox.inc chatbox-inc/gh-prune http://gh-prune.netlify.com

15. 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

16. chatbox.inc route import { IonicVueRouter } from '@modus/ionic-vue' const router

    = new IonicVueRouter({ routes: [ // ... ], }) export default router ionic の Router を読み込み URL と Vue Component を紐づけ

17. chatbox.inc App.vue <template> <ion-app id="app"> <ion-vue-router /> </ion-app> </template> ion-app

    要素の中に ion-vue-router を記述 VueRouter と同じ記述でルートの処理ができる

18. 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 が使える

19. chatbox.inc ion component は Shadow DOM Vue の検証機能にもヒットしない

20. chatbox.inc Controller export default { methods: { async detail(){ //

    ... const alert = await this.$ionic.alertController.create(options) alert.present() } } } this.$ionic で 各種 controller にアクセス alert や loading, toast など

21. 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 で動作させる

22. chatbox.inc trouble #2 export default { mounted(){ setTimeout(async ()=>{ const

    loader = await this.$ionic.loadingController.create({...}) loader.present() },0) }, } mounted hook の中で controller の挙動がおかしい $nextTick ではなく setTimeout で解決可

23. chatbox.inc @ionic/vue worked ! α version でも意外と色々いける！ シンプルな アプリ作成にはとても便利 Capacitor

    を使ったビルドは未検証 …

24. chatbox.inc Why Vue.js ? プレーンな HTML と ES Style の

    JS モダンなフロント開発の知識が乏しいメンバでも プロジェクトに参加しやすい 豊富な Vue.js ライブラリはそのまま利用可能 通常の Vue.js 開発とほとんど変わりなく利用できる Nuxt.js での利用は Router 周りが微妙っぽい IonicVueRouter が何をしているかの調査が必要 （Nuxt.js で Router をまるっと差し替えるのが厳しそう…？）

25. chatbox.inc Enjoy Vue.js !

26. chatbox.inc Thanks!