Tweet
Tweet

Slide 1

Slide 1 text

͋͑ͯPHPerʹ͢͢ΊΔ Vue.jsೖ໳ גࣜձࣾORATTA தౡ ⁜(Ռ෺Ϧϯ@FruitRiin) 2018/07/14 PHP Conferenceؔ੢ 2018

Slide 2

Slide 2 text

ࣗݾ঺հ - Ռ෺Ϧϯ@FruitRiin • גࣜձࣾORATTA • αʔόʔΞϓϦέʔγϣϯ୲౰
 ΃ͪ΃͍ͪͯ͠Δ • झຯJSer • Vue.js͸͍͍ͧʂ

Slide 3

Slide 3 text

גࣜձࣾORATTA • ઓࠃΞεΧZEROͱ͔࡞ͬͯ·͢ • ChromeͰ༡΂ΔPWA൛
 ʰઓࠃΞεΧZEROΫΠοΫʱΛ
 ઌ೔ϦϦʔε͠·ͨ͠ʂ(2018.6)

Slide 4

Slide 4 text

ઓࠃΞεΧZERO ͳͰͳͰ͢Δ΄Ͳڧ͘ͳΔRPG

Slide 5

Slide 5 text

Next Project is Laravel ͜ͷϩΰʹϐϯͱ͖ͨΒORATTAͰ͢ʁ with Game

Slide 6

Slide 6 text

We are Hiring ͜ͷϩΰʹϐϯͱ͖ͨΒORATTAͰ͢

Slide 7

Slide 7 text

͸͍

Slide 8

Slide 8 text

͋͑ͯPHPerʹ͢͢ΊΔ Vue.jsೖ໳

Slide 9

Slide 9 text

͓඼ॻ͖ • ͋ͳͨʹͱͬͯͷ࠷ॳͷPHPܦݧ͸ʁ • ͳͥʮVue.jsʯͳͷ͔ • Vueͷ࢝Ίํ Laravelฤ • Vue.js جຊͷSyntax঺հ

Slide 10

Slide 10 text

͋ͳͨʹͱͬͯ ࠷ॳͷPHP͸ʁ

Slide 11

Slide 11 text

ࢲͷ࠷ॳͷPHPͱͷग़ձ͍ • ໨తΛୡ੒͢Δͷʹͪΐ͏Ͳྑ͔ͬͨ • echo ""; • JS͸ยखؒʹॻ͘΋ͷ

Slide 12

Slide 12 text

զʑ΋UXΛఏڙ͍ͯͨ͠ʂ

Slide 13

Slide 13 text

few years later...

Slide 14

Slide 14 text

2018೥ʹ͓͚ΔPHP • ॏްͳϑϨʔϜϫʔΫʹ৐͔ͬΔͷ͕τϨϯυ • ओͳ࢓ࣄͦͷ̍ ʹ APIαʔόʔ • ajaxͰݺ͹ΕͯjsonΛฦ͢ • ओͳ࢓ࣄͦͷ̎ ʹ HTMLΛฦ͢ • Blade, Twig, Jade

Slide 15

Slide 15 text

2018೥ʹ͓͚ΔWeb

Slide 16

Slide 16 text

ͱΓ͋͑ͣಈ͘

Slide 17

Slide 17 text

ͪΐͬͱͨ͜͠ͱͰ ϖʔδભҠͱ͔͠ͳ͍෩ை

Slide 18

Slide 18 text

PHPͷΈͰ͸ ϖʔδભҠඞਢ

Slide 19

Slide 19 text

ΠϚυΩͷUX͸ JS͕ඞཁ

Slide 20

Slide 20 text

ϑϩϯτΤϯυ ΍͍͖ͬͯ

Slide 21

Slide 21 text

ͳͥʮVue.jsʯͳͷʁ

Slide 22

Slide 22 text

2018೥ Frontend Framework 3બ ܹಈͷ2015೥ʙ2017೥Λܦͯ ͜ͷ3ͭͰམͪண͍͖ͯͨ

Slide 23

Slide 23 text

ͲΕ͕͍͍ʁ LaravelઌੜVueਪ͠

Slide 24

Slide 24 text

GitHub Stars are Vue.js > React

Slide 25

Slide 25 text

Vue.jsͰ͠ΐʂ

Slide 26

Slide 26 text

ਅ໘໨ͳ࿩… Vue.jsͷ͍͍ͱ͜ • ViewʢTemplateʣͷίʔυ͕HTMLͬΆ͍ • σβΠφʔʹ΋ड͚ೖΕͯ΋Β͍΍͍͢ • ಋೖͱίʔσΟϯά͕ఔΑ͘ΏΔ;Θ • ෦෼తʹऔΓೖΕΒΕΔ

Slide 27

Slide 27 text

LaravelͰ࢝ΊΔ Vueͷ؀ڥߏங Vue.jsΛ࢝ΊΔ࠷୹Ϩγϐ

Slide 28

Slide 28 text

࠷୹ϨγϐμΠδΣετ • ʮLaravel͔ΒVue.jsΛ࢖͏࠷୹Ϩγϐʯ 
 Qiitaʹॻ͖·ͨ͠ • ৽نLaravel5.6ϓϩδΣΫτ͔Β
 3εςοϓͰOK • LaravelͷϓϩδΣΫτ͸࡞ͬͯ͋Δͱ͢Δ

Slide 29

Slide 29 text

npm install • Project΁Ҡಈ • laravelͷ package.json ʹैͬͯΠϯετʔϧ • composer.json Έ͍ͨͳ΍ͭ Vue.jsͷΠϯετʔϧ

Slide 30

Slide 30 text

BladeΛमਖ਼ • jsͱcssಡΈࠐΈ༻ͷλάΛ௥Ճ • CSRFτʔΫϯΛVue.js΁౉͢ίʔυΛ௥Ճ • ίʔυ͸ׂѪʂͦΕͧΕҰߦ௥ՃͰOK

Slide 31

Slide 31 text

php artisan serve & npm run hot • LaravelͱVueΛىಈ͢Δ • npm run hot ͸
 VueίϯϙʔωϯτͷίϯύΠϧɺαʔϒ༻ ։ൃ؀ڥͷىಈ

Slide 32

Slide 32 text

ίʔσΟϯάσϞ Vue.jsجຊͷγϯλοΫε঺հ

Slide 33

Slide 33 text

resources/assets/js/ ExampleComponent.vue • σϞͰ͸Exmaple.vueʹͳͬͯ·͢ • ΋ͱ΋ͱͷελΠϦϯά͸औͬ෷ͬͯ·͢ • ίϯϙʔωϯτͷݱࡏͷ஋ΛݟΔ
 dataViewerίϯϙʔωϯτΛೖΕͯ·͢

Slide 34

Slide 34 text

஫ऍ - σϞ༻ίϯϙʔωϯτ

Slide 35

Slide 35 text

஫ऍ - σϞ༻ίϯϙʔωϯτ

Slide 36

Slide 36 text

HotModuleReload • ίϯϙʔωϯτΛอଘ
 ˠ։ൃத͸ࣗಈͰಡΈࠐΈ௚͞ΕΔʂ • ஍ຯʹศརʂ • ಈը͡Όͳ͍ͱΘ͔ͳ͍ͷͰׂѪ

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Πϕϯτͱϝιουͱ දࣔඇදࣔ·ͱΊ • v-if : trueͷ͚࣌ͩදࣔ • v-else : લͷ৚͕݅falseͷ͚࣌ͩදࣔ • ཭Εͨ৔ॴ͸ v-if="!hoge" ͱ͔Ͱʂ • v-on:click="method" ͰΫϦοΫ࣌ʹʙ

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

഑ྻͱϧʔϓ ·ͱΊ • ഑ྻ͸ {{lists[0]}}, {{lists[1]}} Ͱදࣔ • ϧʔϓ͸ v-for="[ཁૉ] in [഑ྻ]" • Ωʔ΋औΓ͍ͨ࣌͸
 v-for="([ཁૉ], [key]) in [഑ྻ]"

Slide 47

Slide 47 text

Slide 48

Slide 48 text

ΦϒδΣΫτͱϧʔϓ • ΦϒδΣΫτ͸ 
 {{obj.hoge}}, {{obj.foo}} Ͱදࣔ • ϧʔϓ͸ v-for="[খཁૉ] in [਌ΦϒδΣΫτ]" • Ωʔ΋औΓ͍ͨ࣌͸഑ྻͱಉ༷

Slide 49

Slide 49 text

Vueͷ෦෼ར༻ • resources/view/welocome.blade.php Ͱ࢖͏ • blade্ͰVue༻ͷίʔυ͕࢖͑Δ • ͍͔ͭ͘஫ҙ఺͋Γ

Slide 50

Slide 50 text

resources/assets/js/app.js

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Vueͷ෦෼ར༻ • αʔόʔαΠυͰϨϯμϦϯά͢ΔHTMLͷ
 Vueͷίʔυˠల։͞ΕΔ • HTML΋ී௨ʹ࢖͑Δ • ίϯϙʔωϯτ΋ར༻Ͱ͖Δ • ࣗಈߋ৽͕ޮ͔ͳ͍

Slide 53

Slide 53 text

Vueͷ෦෼ར༻ - ஫ҙͦͷ̍ • bladeͷ{{}}ͱόοςΟϯά͢Δ • v-text, v-html ୅ΘΓʹ͔ͭ͏ • σϦϛλΛมߋ͢Δ • blade,VueͲͪΒ΋Մೳ

Slide 54

Slide 54 text

Vueͷ෦෼ར༻ - ஫ҙͦͷ̎ • ϢʔβʔೖྗͳͲͰ{{}}͕౉͞ΕΔͱ
 Vueʹల։͞Εͯඇৗʹةݥʂ • v-textͰ౉ͤ͹େৎ෉ • Τεέʔϓ͞ΕΔ

Slide 55

Slide 55 text

·ͱΊ • HTMLͷ֦ுͰςϯϓϨʔτ͕ॻ͚Δ • ೃછΈ΍͍͢ʂ • ϦΞϧλΠϜʹಈ͘Ϟϊ͕ʰ؆୯ʹʱ࡞ΕΔʂ • ࣮͸σβΠφʔʢίʔμʔʣ͞Μͱͷڠۀ΋
 (ൺֱత)؆୯

Slide 56

Slide 56 text

Vue.js͸͍͍ͧ Fin.

Slide 57

Slide 57 text

෇࿥ ͜Μͳهࣄॻ͍ͯ·͢ʢQiitaʹ͋Γ·͢ʂʣ

Slide 58

Slide 58 text

ॳΊͯVue.jsʹ৮Εͨࠒͷࢲ΁ ࠓͷࢲ͕఻͍͑ͨTips ϓϩδΣΫτ࡞੒ฤ • λΠτϧ͕௕͍ʂ • ϓϩδΣΫτΛখ͘͞࡞Εʂ • jQueryͱͬͨࣽ͝͸ ةݥʂ

Slide 59

Slide 59 text

ॳΊͯVue.jsʹ৮Εͨࠒͷࢲ΁ ࠓͷࢲ͕఻͍͑ͨTips ίϯϙʔωϯτ෼ׂ/ϥΠϒϥϦબ୒ฤ • λΠτϧ͕ߋʹ௕͍ʂ • ίϯϙʔωϯτ෼ׂ͢Δͷ͸Ұը໘࡞ͨ͋ͱ • ͜ΜͳϥΠϒϥϦ͋ΔΑʂ

Slide 60

Slide 60 text

ࢲ͕ϋϚͬͨVueγϣϘ͍ϛε • ୭΋ॻ͔ͳ͍ຌϛεΛ͋͑ͯॻ͘ • ʮMainʯίϯϙʔωϯτΛ࡞ͬͯ͸͍͚ͳ͍
 ͱ͔

Slide 61

Slide 61 text

Vue.js͸͍͍ͧʂ