Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter : @_mikakane エンジニア / 技術顧問

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

chatbox.inc Start Project $ vue create vue-ionic-app cli ツールを利用してプロジェクトを開始 開発サーバや lint の設定もセットアップ済み

Slide 5

Slide 5 text

chatbox.inc Vue Component
{{message}}
export default { ... } AngularJS 風の HTML 記法 .vue 拡張子による SFC 整理されてシンプルな JS API Scoped CSS

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

chatbox.inc 無謀なチャレンジ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

chatbox.inc route import { IonicVueRouter } from '@modus/ionic-vue' const router = new IonicVueRouter({ routes: [ // ... ], }) export default router ionic の Router を読み込み URL と Vue Component を紐づけ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

chatbox.inc components {{title}} 各種 ion component が使える

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

chatbox.inc Controller export default { methods: { async detail(){ // ... const alert = await this.$ionic.alertController.create(options) alert.present() } } } this.$ionic で 各種 controller にアクセス alert や loading, toast など

Slide 21

Slide 21 text

chatbox.inc trouble #1 Token ion-input で v-model が動作しない :value と @input で動作させる

Slide 22

Slide 22 text

chatbox.inc trouble #2 export default { mounted(){ setTimeout(async ()=>{ const loader = await this.$ionic.loadingController.create({...}) loader.present() },0) }, } mounted hook の中で controller の挙動がおかしい $nextTick ではなく setTimeout で解決可

Slide 23

Slide 23 text

chatbox.inc @ionic/vue worked ! α version でも意外と色々いける! シンプルな アプリ作成にはとても便利 Capacitor を使ったビルドは未検証 …

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

chatbox.inc Enjoy Vue.js !

Slide 26

Slide 26 text

chatbox.inc Thanks!