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
950
コーディングがわからない
mikakane
0
120
Web制作現場のディレクションを支えるGitHub
mikakane
0
420
nuxt.js で plugins を作る
mikakane
0
670
Laravel Package Development
mikakane
16
5.6k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
1.9k
フロントエンドで作る理由
mikakane
1
1k
Firebase で作る Web アプリケーション
mikakane
1
130
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
670
Other Decks in Technology
See All in Technology
パフォーマンスを改善するには仕様変更が1番はやい
yamamotohiroya
12
4.6k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
0
1.1k
実録_マルチテナント環境でのGmailガイドライン対応
ryuichi1208
7
1.5k
App Runnerでパラメーターストアの値を使ってみた
miura55
0
230
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
120
Command-line interface tool design / PHPerKaigi 2024
k1low
4
1k
B+木入門:PHPで理解する データベースインデックスの仕組み/b-plus-tree-101
hanhan1978
5
2.7k
Combineを中心とした処理をSwift Concurrencyへ (これまでも調べた調査と向き合い)
fumiyasac0921
1
170
【OpsJAWS】EC2 のセキュリティの運用と監視について考えてみた件
hssh2_bin
4
590
ECS on FargateへのSeekable OCI導入レポート
iwamot
0
260
理想の組織も自分たちで作ろう! ―LayerXの「全員採用」を支える文化 / How to create our own ideal team
ar_tama
6
2.2k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
31
11k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
421
63k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
How to name files
jennybc
62
91k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Scaling GitHub
holman
456
140k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Writing Fast Ruby
sferik
619
59k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Six Lessons from altMBA
skipperchong
19
2.9k
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!