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
150
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
700
Other Decks in Technology
See All in Technology
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
980
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
450
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
200
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Six Lessons from altMBA
skipperchong
28
4k
Scaling GitHub
holman
463
140k
Fireside Chat
paigeccino
39
3.6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf 2023
tenderlove
30
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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!