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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ͶΉ͍Ͱ͢

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ຊ೔12/14೔

Slide 6

Slide 6 text

͸͍ɻ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

余談：Ionicでyarnを使う方法

Slide 9

Slide 9 text

ʢωλूΊதʣ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Ionic/VueͰϓϩδΣΫτΛ࡞Δ • લճ΍ͬͨͷͰαΫοͱ

Slide 14

Slide 14 text

ਅͬനʂ

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ॳݟࡴ͠

Slide 17

Slide 17 text

ࢲ͕࠷ޙʹ΍ͬͨͷ6/19

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

͋ɺ͋Εɺ༧ఆ͕……

Slide 20

Slide 20 text

ͱΓ͋͑ͣ

Slide 21

Slide 21 text

͜͜·Ͱ͸؆୯ɻ ΞΠίϯ଍͍ͨ͠

Slide 22

Slide 22 text

動作せず

Slide 23

Slide 23 text

Web ComponentsͰ͸…ʁ

Slide 24

Slide 24 text

とりあえずcheckboxで代用 • ion-checkbox ͍͍ײ͡

Slide 25

Slide 25 text

とりあえず文字で代用

Slide 26

Slide 26 text

࣍͸λεΫͷ௥Ճʂ

Slide 27

Slide 27 text

Modal？

Slide 28

Slide 28 text

I think Modal is…

Slide 29

Slide 29 text

十分に幅があれば？ • ೲಘͷϞʔμϧʢIonic/React ͷConﬂuenceελʔλʔʣ • ڱ͍ͱը໘͍ͬͺ͍

Slide 30

Slide 30 text

でもないらしい

Slide 31

Slide 31 text

Web ComponentsͰ͸…ʁ

Slide 32

Slide 32 text

IonicVueではIonModalを書かない • this.$ionic.modalController.create() Ͱݺͼग़͠ • onDidDismiss() ͸ʁ • ී௨ʹυΩϡϝϯτಡΜͰ΋Θ͔ΒΜ……

Slide 33

Slide 33 text

神記事発見！ ʢࢄʑ೰Μͩڍ͛۟άάͬͨʣ

Slide 34

Slide 34 text

回答はこちら const modal = await this.$ionic.modalController .create({ component: Modal }); modal.present(); const { data } = await modal.onDidDismiss(); • create() ͕ Promise Λฦ͢ͷͰ await ͯ͠ฦΓ஋Λ߇͑Δ • ߇͑ͨ Element͔Β onDidDidsmiss()Λୟ͘ʂ

Slide 35

Slide 35 text

ͦΜͳΜ༗Γʁ

Slide 36

Slide 36 text

Ion-input に下線が引かれない

Slide 37

Slide 37 text

そんなstyleないよ？ ↑Vue React→

Slide 38

Slide 38 text

Web ComponentsͰ͸…ʁ

Slide 39

Slide 39 text

では v-modelが効かない • αϙʔτ͞ΕͨͷͰ͸ʁ • υΩϡϝϯτΛಡΉ → , … • ͳΜ͔μα͍Wrapperίϯϙʔωϯτͩ…

Slide 40

Slide 40 text

v-modelとは • [(ngModel)] Έ͍ͨͳ૒ํ޲όΠϯσΟϯά • v-bind=hogeͱ@change=hogeͷ γϣʔτϋϯυ • IonicͰ͸ ionChangeΠϕϯτ͕ඞཁ

Slide 41

Slide 41 text

IonInputVueとかの実装 • ionChange,ionInput ΠϕϯτͰ valueͰ͸ͳ͘object͕౉͞ΕΔͷͰɺ ड͚औͬͨ$event͔ΒvalueΛऔΓग़͢ • ͦͷଞionʙͳయܕతͳΠϕϯτ͸ ͦͷ··্Ґίϯϙʔωϯτʹ౤͛Δ • bind͸Vue͕উखʹ΍ͬͯ͘ΕΔ໛༷

Slide 42

Slide 42 text

μα͍͚Ͳ͠ΐ͏͕ͳ͍…ͷ͔ͳʁ

Slide 43

Slide 43 text

CapacitorのStorageはいい感じ • ಛʹ٧·Δ͜ͱ΋ͳ͘αΫοͱ • σʔλͷ௥Ճͱ࡟আ࣌ʹStorageʹอଘ • อଘ͞Εͨσʔλ͕͋Ε͹෮ݩɺ ͳ͚Ε͹αϯϓϧσʔλΛηοτ

Slide 44

Slide 44 text

ΊͰͨ͠ΊͰͨ͠

Slide 45

Slide 45 text

まとめ • Ionic/Vue͍͚Δ΍ΖʂͬͯࢥͬͨΒ Α͘Θ͔Βͳ͍᠘͕ҙ֎ͱ͋ΔʢWebComponentsͰ͸…ʁʣ • ਖ਼ࣜαϙʔτ͡Όͳ͍͔Β ґଘϥΠϒϥϦͷมԽʹ௥ैͯ͠ͳ͍ͷͭΒ͍ ʢ@ionic/core, @ionic/ioniconsͳͲʣ • Capacitor͸͍͍ײ͡

Slide 46

Slide 46 text

Ionic/Vue͸͍͍ͧʂ ʢຊ౰ʹʁʣ