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.9k
@ionic/vue で Web アプリを作ってみる
mikakane
February 23, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
1
1.3k
コーディングがわからない
mikakane
0
130
Web制作現場のディレクションを支えるGitHub
mikakane
0
560
nuxt.js で plugins を作る
mikakane
0
780
Laravel Package Development
mikakane
16
6.5k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2.1k
フロントエンドで作る理由
mikakane
1
1.3k
Firebase で作る Web アプリケーション
mikakane
1
160
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
700
Other Decks in Technology
See All in Technology
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
6.4k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
14k
北海道の人に知ってもらいたいGISスポット / gis-spot-in-hokkaido-2025
sakaik
0
190
Green Tea Garbage Collector の今
zchee
PRO
2
360
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
9
3.6k
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
200
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
830
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.6k
Streamlit は社内ツールだけじゃない!PoC の速さで実現する'商用品質'の分析 SaaS アーキテクチャ
kdash
3
1.1k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
120
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
130
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Designing for Performance
lara
610
69k
Faster Mobile Websites
deanohume
310
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Language of Interfaces
destraynor
162
25k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Invisible Side of Design
smashingmag
301
51k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
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!