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

<جຊ৘ใ> - େ௩ਅݴʢ໊͋ͩɿ͠Μ͛Μʣ - ϑϦʔϥϯεWebΤϯδχΞ - ౦ژੜ·Εҭͪɺ2017೥ΑΓٶ࡚ʹҠॅ - झຯ͸ΩϟϯϓͱϑΣεɺ࠷ۙαʔϑΟϯ͸͡Ί·ͨ͠ <ܦྺ> - ৽ଔͰ෋࢜௨ʹೖࣾ͠3೥΄ͲγεςϜΤϯδχΞΛܦݧ - גࣜձࣾαʔνϑΟʔϧυ FAAVOࣄۀ෦ ʹస৬ - ஍Ҭ×Ϋϥ΢υϑΝϯσΟϯά FAAVOͰWebΤϯδχΞͱͯ͠ࢀը ͠ɺPHPΛ৮Γ࢝ΊΔɻ - 3೥΄Ͳอकӡ༻Λܦݧ͠ɺ2018೥3݄͔ΒϑϦʔϥϯεͱͯ͠׆ಈத <εΩϧ> - PHP, Laravel, Vue.js, AWS ࣗݾ঺հ

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

Vue.jsͱ͸ʁ

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

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

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

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

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

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

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

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

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

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

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