Pro Yearly is on sale from $80 to $50! »

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

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

Ca1357a6e793898d30cec23068c3cb36?s=128

大塚真言

August 31, 2018
Tweet

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ