あえてPHPerにすすめるVue.js入門

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

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

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

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

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

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

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

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

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

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

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

few years later...

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

2018೥ʹ͓͚ΔWeb

ͱΓ͋͑ͣಈ͘

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

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

ΠϚυΩͷUX͸ JS͕ඞཁ

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

ͳͥʮVue.jsʯͳͷʁ

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

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

GitHub Stars are Vue.js > React

Vue.jsͰ͠ΐʂ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

resources/assets/js/app.js

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

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

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

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

Vue.js͸͍͍ͧ Fin.

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

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

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

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

Vue.js͸͍͍ͧʂ

あえてPHPerにすすめるVue.js入門

あえてPHPerにすすめるVue.js入門

More Decks by 果物リン

Other Decks in Programming

Featured

Transcript