あの素晴らしい猫の本

by mi

Slide 1

Slide 1 text

͋ͷૉ੖Β͍͠ೣͷຊ 2018/07/12 (ɾωɾ) @mi

Slide 2

Slide 2 text

୭ʁ

Slide 3

Slide 3 text

mi ϑϩϯτΤϯυΤϯδχΞ 5XJUUFSNJ@VQUP גࣜձࣾ:"."1 ૿ຊඒཬ

Slide 4

Slide 4 text

෱Ԭݝࡏॅ ϑϩϯτΤϯυΤϯδχΞ ࠓ೥ଔۀ༧ఆ ίʔσΟϯά͕޷͖͗ͯ͢8FC6*σβΠφʔ͔Β  δϣϒνΣϯδʂ ೑೑͏ͲΜ͕େ޷͖  ͏ͪͷݘ͕Ұ൪ՄѪ͍ ͲΜͳਓʁ

Slide 5

Slide 5 text

೑೑͏ͲΜʂ ࠷ۙɺതଟͷι΢ϧϑʔυʹঢ֨ͨ͠Β͍͠

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ͲΕ͘Β͍޷͖?

Slide 8

Slide 8 text

#ٕज़ॻయ4 ຊॻ͍ͨ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

ຊ ʹࡌͤͪΌ͏ఔ େ޷͖

Slide 11

Slide 11 text

໊ࢗަ׵ ͠·͠ΐ͏

Slide 12

Slide 12 text

ࠓ೔࿩͢͜ͱ ͋ͷૉ੖Β͍͠Vue.jsͷ ೣͷຊΛ͝঺հ͠·͢ʂ

Slide 13

Slide 13 text

Έͳ͞Μ͸

Slide 14

Slide 14 text

஌͍ͬͯΔͩΖ͏͔

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

஌ͬͯΔਓʁ

Slide 17

Slide 17 text

@mio ͞Μ 2018/05/29 ൃചࡁ

Slide 18

Slide 18 text

εΰΠͱ͜Ζ - ίϯϐϡʔλຊɺϥϯΩϯά1Ґ֫ಘ - ൃץ͔Β1ϱ݄଍ΒͣͰAmazon΍ָఱͳͲͷ  ωοτγϣοϓͰࡏݿ੾ΕʢരചΕʣ - جૅ͔ΒֶͿVue.jsຊΛ࢖ͬͨษڧձ͕͋Δ - ࣾ಺ݚम༻ʹຊ԰ͷࡏݿΛऽࢄΒ͢ਓ͕ଓग़ Πϯλʔωοτ

Slide 19

Slide 19 text

΍͹͍ɻ

Slide 20

Slide 20 text

͜ͷຊΛಡΉલͷࢲ

Slide 21

Slide 21 text

͑ʙɻ7VFKTͷຊʁ ΋͏େମ෼͔Δ͠ॻ͚Δ͔Β ಡ·ͳͯ͘ΠΠϤʙ Ͳ͏ͤ஌ͬͯΔࣄͷ෮शʹ ͔͠ͳΒͳ͍͠ʙ ࣗତམ

Slide 22

Slide 22 text

͜ͷຊΛಡΈऴΘͬͨ ޙͷࢲ

Slide 23

Slide 23 text

஌Βͳ͍͜ͱΊͬͪΌ͋ͬͨʂʂ υοάΠϠʔՕॴ΋ͨ͠ ͳΜͱͳ͘ཧղ͍ͯͨ͠෦෼΋ ͜ͷຊΛಡΜͰɺ಄ͷதͰ៉ྷ ʹ੔ཧ͞Εͨʂʂ ෼͔Γ΍͍͢จষͱਤɺ͔Θ͍ ͍ೣͷΠϥετͰ៉ྷʹ·ͱΊ ΒΕ͍ͯΔͷͰɺॳֶऀ΍ೖ໳ ॻʹ࠷దɻ ීஈ͔Β7VFKTΨϦΨϦॻ͍ͯ ͍Δਓʹ΋Φεεϝɻ

Slide 24

Slide 24 text

஌Βͳ͍͜ͱΊͬͪΌ͋ͬͨʂʂ υοάΠϠʔՕॴ΋ͨ͠ ͳΜͱͳ͘ཧղ͍ͯͨ͠෦෼΋ ͜ͷຊΛಡΜͰɺ಄ͷதͰ៉ྷ ʹ੔ཧ͞Εͨʂʂ ෼͔Γ΍͍͢จষͱਤɺ͔Θ͍ ͍ೣͷΠϥετͰ៉ྷʹ·ͱΊ ΒΕ͍ͯΔͷͰɺॳֶऀ΍ೖ໳ ॻʹ࠷దɻ ීஈ͔Β7VFKTΨϦΨϦॻ͍ͯ ͍Δਓʹ΋Φεεϝɻ ᷓΕΔఔͷײ૝ ※εςϚ͡Όͳ͍Αʂ

Slide 25

Slide 25 text

ຊͷ಺༰Λ؆୯ʹ঺հ ※࡞ऀ͞Μɺग़൛ࣾ͞Μɺ૒ํྃঝࡁ

Slide 26

Slide 26 text

ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 01 ͦͷ

Slide 27

Slide 27 text

ෳ਺ଐੑͷσʔλ όΠϯσΟϯά

Slide 28

Slide 28 text

ෳ਺ଐੑͷσʔλόΠϯσΟϯά dataʹఆٛ͞ΕͨେྔͷϓϩύςΟΛimgλάʹ ͦΕͧΕόΠϯυ͠Α͏ͱ͢Δͱ….

Slide 29

Slide 29 text

dataʹఆٛ͞ΕͨେྔͷϓϩύςΟΛimgλάʹ ͦΕͧΕόΠϯυ͠Α͏ͱ͢Δͱ…. ෳ਺ଐੑͷσʔλόΠϯσΟϯά ͜͏ͳΔʂ

Slide 30

Slide 30 text

dataʹఆٛ͞ΕͨେྔͷϓϩύςΟΛimgλάʹ ͦΕͧΕόΠϯυ͠Α͏ͱ͢Δͱ…. อक͕ਏ͍ / मਖ਼͕େม ෳ਺ଐੑͷσʔλόΠϯσΟϯά

Slide 31

Slide 31 text

v-bindσΟϨΫςΟϒͷҾ਺෦෼Λলུͯ͠ɺ ΦϒδΣΫτΛ౉͢ͱҰׅόΠϯυͰ͖Δʂ ෳ਺ଐੑͷσʔλόΠϯσΟϯά

Slide 32

Slide 32 text

v-bindσΟϨΫςΟϒͷҾ਺෦෼Λলུͯ͠ɺ ΦϒδΣΫτΛ౉͢ͱҰׅόΠϯυͰ͖Δʂ ҰׅόΠϯυ ෳ਺ଐੑͷσʔλόΠϯσΟϯά

Slide 33

Slide 33 text

Ҿ਺෦෼Λ࣋ͬͨv-bindΛซ༻͢Ε͹ɺಛఆͷଐ ੑ஋ͷΈʹมߋΛՃ͑Δ͜ͱ΋Մೳɻʢ߹Θٕͤ idଐੑͷΈมߋΛՃ͑Δྫ ෳ਺ଐੑͷσʔλόΠϯσΟϯά

Slide 34

Slide 34 text

Ҿ਺෦෼Λ࣋ͬͨv-bindΛซ༻͢Ε͹ɺಛఆͷଐ ੑ஋ͷΈʹมߋΛՃ͑Δ͜ͱ΋Մೳɻʢ߹Θٕͤ idଐੑͷΈมߋΛՃ͑Δྫ ศར ෳ਺ଐੑͷσʔλόΠϯσΟϯά

Slide 35

Slide 35 text

ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 02 ͦͷ

Slide 36

Slide 36 text

v-if ͱ v-for ͷ ߹Θٕͤ

Slide 37

Slide 37 text

v-ifͱv-forͷ߹Θٕͤ ܁Γฦ͠Λ͍ͯ͠Δཁૉʹ௚઀ v-if Λ෇༩͢Δ ͜ͱͰɺཁૉࣗମͷඳըΛૢ࡞Ͱ͖Δɻ 1. v-for͕࣮ߦ͞ΕΔ 2. v-if͕ධՁ͞ΕΔ

Slide 38

Slide 38 text

܁Γฦ͠Λ͍ͯ͠Δཁૉʹ௚઀ v-if Λ෇༩͢Δ ͜ͱͰɺཁૉࣗମͷඳըΛૢ࡞Ͱ͖Δɻ 1. v-for͕࣮ߦ͞ΕΔ 2. v-if͕ධՁ͞ΕΔ ஌Βͳ͔ͬͨ ( v-forͱv-ifͬͯಉ࣌ʹॻ͚ΔΜ΍ ) v-ifͱv-forͷ߹Θٕͤ

Slide 39

Slide 39 text

ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 03 ͦͷ

Slide 40

Slide 40 text

isͷ༻్

Slide 41

Slide 41 text

isͷ༻్ Ұ෦ͷHTMLͷཁૉ͸ɺ಺෦ʹ࣋ͯΔཁૉ͕ ੍ݶ͞Ε͍ͯΔɻ ྫ: , ΧελϜλάͷ ͸ɺ HTMLղੳ࣌ʹແޮͳίϯςϯπͱͯ͠ ࡟আ͞Εͯ͠·͏… ղܾࡦͱͯ͠ɺಛผͳଐੑ isΛ࢖༻ isଐੑ͸ɺ෇༩͞ΕͨཁૉΛ ίϯϙʔωϯτʹஔ͖׵͑ͯ͘ΕΔʂ

Slide 42

Slide 42 text

isͷ༻్ Ұ෦ͷHTMLͷཁૉ͸ɺ಺෦ʹ࣋ͯΔཁૉ͕ ੍ݶ͞Ε͍ͯΔɻ ྫ: , ΧελϜλάͷ ͸ɺ HTMLղੳ࣌ʹແޮͳίϯςϯπͱͯ͠ ࡟আ͞Εͯ͠·͏… ղܾࡦͱͯ͠ɺಛผͳଐੑ isΛ࢖༻ isଐੑ͸ɺ෇༩͞ΕͨཁૉΛ ίϯϙʔωϯτʹஔ͖׵͑ͯ͘ΕΔʂ ͦΜͳ࢓༷͋ͬͨͷ JTͷ໾ׂཧղʂ

Slide 43

Slide 43 text

ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 04 ͦͷ

Slide 44

Slide 44 text

είʔϓΛ·͙ͨελΠϧࢦఆ

Slide 45

Slide 45 text

࣮͸Մೳͩͬͨ… (;ƅшƅ) ŚŚŚŚŚŚ

Slide 46

Slide 46 text

είʔϓΛ·͙ͨελΠϧࢦఆ ਌ ࢠ

Slide 47

Slide 47 text

είʔϓΛ·͙ͨελΠϧࢦఆ /deep/ ΦϖϨʔλΛ͔·͢͜ͱͰɺࢠͷηϨ Ϋλ .MonsterItem__Heading ΛࢦఆͰ͖Δ ˞$44ͷ৔߹͸BC\^ͷΑ͏ʹॻ͘ ˞TDTTͷ৔߹ BEFFQC\^ͷΑ͏ʹॻ͘

Slide 48

Slide 48 text

είʔϓΛ·͙ͨελΠϧࢦఆ /deep/ ΦϖϨʔλΛ͔·͢͜ͱͰɺࢠͷηϨ Ϋλ .MonsterItem__Heading ΛࢦఆͰ͖Δ ˞$44ͷ৔߹͸BC\^ͷΑ͏ʹॻ͘ ˞TDTTͷ৔߹ BEFFQC\^ͷΑ͏ʹॻ͘ είʔϓͷҙຯͱ͸ ( ཚ༻͢ΔͱCSSઃܭతʹࢮ๢ϑϥά ) ஌ͬͯͯ΋࢖Θͳ͍͚ͲͶʂʂʂ

Slide 49

Slide 49 text

ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 05 ͦͷ

Slide 50

Slide 50 text

Vuexͷgettersʹ Ҿ਺ΛࢦఆͰ͖Δ

Slide 51

Slide 51 text

·͔͡ʂ

Slide 52

Slide 52 text

ͦͷ05. VuexͷgettersʹҾ਺ΛࢦఆͰ͖Δ Ҿ਺Λ࢖༻͢ΔͨΊ ؔ਺Λฦ͢ return id => { // } ˞ Ҿ਺෇͖ͷHFUUFST͸Ωϟογϡ͞Εͳ͍ ˞ Կ౓΋ΞΫηε͢ΔHFUUFST͸DPNQVUFEʹొ࿥͢Δͱྑ͍

Slide 53

Slide 53 text

ͦͷ05. VuexͷgettersʹҾ਺ΛࢦఆͰ͖Δ Ҿ਺Λ࢖༻͢ΔͨΊ Ξϩʔؔ਺Λฦ͢ return id => { // } ˞ DPNQVUFEͰ͸Ҿ਺͸࢖͑ͳ͍͕ɺHFUUFSTͰ͸Մೳ ˞ Ҿ਺෇͖ͷHFUUFST͸Ωϟογϡ͞Εͳ͍ ˞ Կ౓΋ΞΫηε͢ΔHFUUFST͸DPNQVUFEʹొ࿥͢Δͱྑ͍ ษڧʹͳΔʙ

Slide 54

Slide 54 text

·ͱΊ

Slide 55

Slide 55 text

·ͱΊ جૅ͔ΒֶͿVue.js͸εΰΠ Χόʔൣғ͕޿͍ / ௒෼͔Γ΍͍͢ / ϓϩμΫτʹ໾ཱͭ৘ใ͕ຬࡌ / Vue.jsͷυΩϡϝϯτʹࡌ͍ͬͯͳ͍৘ใ·Ͱॻ͔Ε͍ͯΔ / Ͷ͜ՄѪ͍ / αϯϓϧσʔλ๛෋ / ਤղ͕๛෋ / αΫαΫಡΊΔ / Vue.jsͷ࣮ྗΛ͞ΒʹҾ͖ग़͍ͨ͠ख़࿅ऀʹ΋Φεεϝ / ॻళͰݚम༻ʹങ͍઎Ίඞਢ / VuePressͰ࡞ΒΕͨαϙʔταΠτ༗Γ

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

͍͞͝ʹ Vue.js ษڧ͍͚ͨ͠Ͳ࠳ંͨ͠… ษڧํ๏͕෼͔Βͳ͍… ͱ͍ͬͨ ଟ͘ͷํͷ͖͔͚ͬʹͳΕ͹޾͍Ͱ͢ɻ  ຊ౰ʹ෼͔Γ΍͍͢ຊͳͷͰɺ ΦεεϝͰ͢(ɾωɾ)

Slide 58

Slide 58 text

͋ͷૉ੖Β͍͠ೣͷຊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠mm