"今” IonicVueでTodoアプリを作ってみる/ "Now" create Todo app using Ionic Vue

Ionic/Vue推しなんですけどそういえばTodoアプリの一つも作ってないのは詐欺というもの。stable版でサポートされてなかったv-modelにもnext版は対応してるっていうし、ここはひとつ試してみようかな

Transcript

1. “今”Ionic/Vueで Todoアプリを作ってみる גࣜձࣾΏΊΈ Ռ෺Ϧϯ Ionic Meetup #14 Tokyo 2019/12/14
2. ͶΉ͍Ͱ͢
5. ຊ೔12/14೔
6. ͸͍ɻ
7. じこしょうかい • Ռ෺Ϧϯ • גࣜձࣾΏΊΈ • Vue͸͍͍ͧ • ࠷ۙIonic/Vue΋͍͍͍ͧͯ͠Δ
8. 余談：Ionicでyarnを使う方法
9. ʢωλूΊதʣ
13. Ionic/VueͰϓϩδΣΫτΛ࡞Δ • લճ΍ͬͨͷͰαΫοͱ
14. ਅͬനʂ
16. ॳݟࡴ͠
17. ࢲ͕࠷ޙʹ΍ͬͨͷ6/19
19. ͋ɺ͋Εɺ༧ఆ͕……
20. ͱΓ͋͑ͣ
21. ͜͜·Ͱ͸؆୯ɻ ΞΠίϯ଍͍ͨ͠
22. <ion-icon /> 動作せず
23. Web ComponentsͰ͸…ʁ
24. とりあえずcheckboxで代用 • ion-checkbox ͍͍ײ͡
25. とりあえず文字で代用
26. ࣍͸λεΫͷ௥Ճʂ
27. Modal？
28. I think Modal is…
29. 十分に幅があれば？ • ೲಘͷϞʔμϧʢIonic/React ͷConfluenceελʔλʔʣ • ڱ͍ͱը໘͍ͬͺ͍
30. でもないらしい
31. Web ComponentsͰ͸…ʁ
32. IonicVueではIonModalを書かない • this.$ionic.modalController.create() Ͱݺͼग़͠ • onDidDismiss() ͸ʁ • ී௨ʹυΩϡϝϯτಡΜͰ΋Θ͔ΒΜ……
33. 神記事発見！ ʢࢄʑ೰Μͩڍ͛۟άάͬͨʣ
34. 回答はこちら const modal = await this.$ionic.modalController .create({ component: Modal }); modal.present(); const { data } = await modal.onDidDismiss(); • create() ͕ Promise<HTMLModalElement> Λฦ͢ͷͰ await ͯ͠ฦΓ஋Λ߇͑Δ • ߇͑ͨ Element͔Β onDidDidsmiss()Λୟ͘ʂ
35. ͦΜͳΜ༗Γʁ
36. Ion-input に下線が引かれない
37. そんなstyleないよ？ ↑Vue React→
38. Web ComponentsͰ͸…ʁ
39. <ion-input>では v-modelが効かない • αϙʔτ͞ΕͨͷͰ͸ʁ • υΩϡϝϯτΛಡΉ → <ion-input-vue>, <ion-select-vue>… • ͳΜ͔μα͍Wrapperίϯϙʔωϯτͩ…
40. v-modelとは • [(ngModel)] Έ͍ͨͳ૒ํ޲όΠϯσΟϯά • v-bind=hogeͱ@change=hogeͷ γϣʔτϋϯυ • IonicͰ͸ ionChangeΠϕϯτ͕ඞཁ
41. IonInputVueとかの実装 • ionChange,ionInput ΠϕϯτͰ valueͰ͸ͳ͘object͕౉͞ΕΔͷͰɺ ड͚औͬͨ$event͔ΒvalueΛऔΓग़͢ • ͦͷଞionʙͳయܕతͳΠϕϯτ͸ ͦͷ··্Ґίϯϙʔωϯτʹ౤͛Δ • bind͸Vue͕উखʹ΍ͬͯ͘ΕΔ໛༷
42. μα͍͚Ͳ͠ΐ͏͕ͳ͍…ͷ͔ͳʁ
43. CapacitorのStorageはいい感じ • ಛʹ٧·Δ͜ͱ΋ͳ͘αΫοͱ • σʔλͷ௥Ճͱ࡟আ࣌ʹStorageʹอଘ • อଘ͞Εͨσʔλ͕͋Ε͹෮ݩɺ ͳ͚Ε͹αϯϓϧσʔλΛηοτ
44. ΊͰͨ͠ΊͰͨ͠
45. まとめ • Ionic/Vue͍͚Δ΍ΖʂͬͯࢥͬͨΒ Α͘Θ͔Βͳ͍᠘͕ҙ֎ͱ͋ΔʢWebComponentsͰ͸…ʁʣ • ਖ਼ࣜαϙʔτ͡Όͳ͍͔Β ґଘϥΠϒϥϦͷมԽʹ௥ैͯ͠ͳ͍ͷͭΒ͍ ʢ@ionic/core, @ionic/ioniconsͳͲʣ • Capacitor͸͍͍ײ͡
46. Ionic/Vue͸͍͍ͧʂ ʢຊ౰ʹʁʣ