20180831_宮崎_沖縄JSナイトvol2.pdf

Transcript

1. ։ൃΛॿ͚Δ Vue.jsͷศརͳϥΠϒϥϦ঺հ 2018/08/31 ٶ࡚×ԭೄ×ࢁܗ JSφΠτ ʂ ϑϦʔϥϯεWebΤϯδχΞ େ௩ਅݴ @mametra

2. <جຊ৘ใ> - େ௩ਅݴʢ໊͋ͩɿ͠Μ͛Μʣ - ϑϦʔϥϯεWebΤϯδχΞ - ౦ژੜ·Εҭͪɺ2017೥ΑΓٶ࡚ʹҠॅ - झຯ͸ΩϟϯϓͱϑΣεɺ࠷ۙαʔϑΟϯ͸͡Ί·ͨ͠ <ܦྺ>

   - ৽ଔͰ෋࢜௨ʹೖࣾ͠3೥΄ͲγεςϜΤϯδχΞΛܦݧ - גࣜձࣾαʔνϑΟʔϧυ FAAVOࣄۀ෦ ʹస৬ - ஍Ҭ×Ϋϥ΢υϑΝϯσΟϯά FAAVOͰWebΤϯδχΞͱͯ͠ࢀը ͠ɺPHPΛ৮Γ࢝ΊΔɻ - 3೥΄Ͳอकӡ༻Λܦݧ͠ɺ2018೥3݄͔ΒϑϦʔϥϯεͱͯ͠׆ಈத <εΩϧ> - PHP, Laravel, Vue.js, AWS ࣗݾ঺հ

3. ʻΞδΣϯμʼ Vue.jsͱ͸ʁ ։ൃΛָʹ͢ΔVue.jsͷجຊతͳϥΠϒϥϦΛ঺հ ʻର৅ऀʼ Vue.jsΛ৮ͬͯΈ͍ͨਓɺͪΐͬͱ৮ͬͯΈͨਓ ࠓ೔࿩͢͜ͱ

4. Vue.jsͱ͸ʁ

5. 1. ϓϩάϨογϒ(ਐาతɺલਐతʣͳJavaScriptϑϨʔϜ ϫʔΫ 2. ͍ͭ΋ͷJavaScriptͰ࢝ΊΒΕͯ਌͠Έ΍͘͢ɺֶशί ετ͕௿͍ɻ 3. ެࣜυΩϡϝϯτ͕೔ຊޠରԠ 4. αʔόαΠυ͕PHPͷ৔߹ɺLaravelͰඪ४౥ࡌͷͨΊ૬

   ੑ͕ྑ͍ Vue.jsʢϏϡʔυοτδΣΠΤεʣ ͱ͸ʁ

6. Vue.jsͷϥΠϒϥϦΛ঺հ

7. axiosʢΞΫγΦεʣ HTTP௨৴Λ؆୯ʹߦ͏͜ͱ͕Ͱ͖ΔJavascriptϥΠϒϥϦ Vue.jsͷϥΠϒϥϦͰ͸ͳ͍͕ɺVue.jsެࣜΨΠυʹ΋هࡌ͕͋Δ͘Β͍ελϯμʔυ ※ https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html HTTP௨৴ ʙϥΠϒϥϦ঺հᶃʙ

8. InterceptorsͰڞ௨ॲཧ ɾϦΫΤετͷAuthorizationϔομʔʹΞΫηετʔΫϯΛ෇༩͍ͨ͠ ɾΤϥʔൃੜ࣌ʹಛఆͷॲཧΛ͍ͨ͠ HTTP௨৴ ʙϥΠϒϥϦ঺հᶃʙ

9. Bootstrap-vue ɾhttps://bootstrap-vue.js.org/ ɾVue.jsͰBootstrapΛ࢖͍΍͘͢͢Δ΍ͭ ɾBootstrap4ʹରԠࡁΈ ɾΧελϜίϯϙʔωϯτΛݺͼग़ͯ͠࢖͏ CSS ʙϥΠϒϥϦ঺հᶄʙ

10. ͲΕ͘Β͍࢖͍΍͘͢ͳͬͨʁ ɾߦ਺͸1/3ఔ౓ʹݮΔ ɾͨͩ͠ɺΧελϜίϯϙʔωϯτ͕૿͑͗͢Δͱίʔυ͔ΒDOMߏ੒Λ ௥͍ʹ͘͘ͳΓɺ͋ͱ͔ΒσβΠϯΛมߋ͠ʹ͘͘ͳΔ ɾ࠷௿ݶͷݟӫ͑ͰαʔϏεΛ࡞Δ৔߹͸ੵۃతʹ࢖ͬͯྑ͍ CSS ʙϥΠϒϥϦ঺հᶄʙ Bootstrap-vueະ࢖༻

11. Vee-Validate ɾinputλάͷ v-validate σΟϨΫςΟϒʹόϦσʔγϣϯϧʔϧΛه ࡌ͢Δ͚ͩ ɾσϑΥϧτͷΤϥʔϝοηʔδ͸ӳޠ͕ͩɺ೔ຊޠԽ΋؆୯ όϦσʔγϣϯ ʙϥΠϒϥϦ঺հᶅʙ

12. ΧελϜόϦσʔγϣϯ ɾValidator Ϋϥεͷ extend() Ͱ௥ՃͰ͖Δ όϦσʔγϣϯ ʙϥΠϒϥϦ঺հᶅʙ

13. Vue.jsʹ͸։ൃΛָʹ͢ΔϥΠϒϥϦ͕਺ଟ͘ଘࡏ͢Δ ɾHTTP௨৴ʢaxiosʣ ɾCSSʢBootstrap-vueʣ ɾόϦσʔγϣϯʢvee-validateʣ ɹ˞ଞʹ΋ଟ਺͋Γ·͢ Vue.jsΛ࢖ͬͯεϐʔυײͷ͋Δ։ൃΛ͍͖ͯ͠·͠ΐ͏ʂʂ ͪͳΈʹͰ͕͢ɺɺɺ ࣍ճͷJSφΠτͷൃදऀ΋େืू͍ͯ͠·͢ʂʂʂ ·ͱΊ

14. 9݄10೔ʹΠϕϯτ͠·͢ʂ

15. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ