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

69b4dadef85efe143ac825b62d36ed7c?s=47 果物リン
December 14, 2019

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

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

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

December 14, 2019
Tweet

Transcript

  1. “今”Ionic/Vueで Todoアプリを作ってみる גࣜձࣾΏΊΈ Ռ෺Ϧϯ Ionic Meetup #14 Tokyo 2019/12/14

  2. ͶΉ͍Ͱ͢

  3. None
  4. None
  5. ຊ೔12/14೔

  6. ͸͍ɻ

  7. じこしょうかい • Ռ෺Ϧϯ • גࣜձࣾΏΊΈ • Vue͸͍͍ͧ • ࠷ۙIonic/Vue΋͍͍͍ͧͯ͠Δ

  8. 余談:Ionicでyarnを使う方法

  9. ʢωλूΊதʣ

  10. None
  11. None
  12. None
  13. Ionic/VueͰϓϩδΣΫτΛ࡞Δ • લճ΍ͬͨͷͰαΫοͱ

  14. ਅͬനʂ

  15. None
  16. ॳݟࡴ͠

  17. ࢲ͕࠷ޙʹ΍ͬͨͷ6/19

  18. None
  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͸͍͍ͧʂ ʢຊ౰ʹʁʣ