Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20180831_宮崎_沖縄JSナイトvol2.pdf
Search
大塚真言
August 31, 2018
Technology
0
250
20180831_宮崎_沖縄JSナイトvol2.pdf
大塚真言
August 31, 2018
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
260
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
87
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
260
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
6.6k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
840
PHP8をざっくり解説してみる
shingen29
0
300
最近のプロジェクトを振り返ってみる
shingen29
0
360
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
800
Stripe CLIを触ってみた!
shingen29
1
220
Other Decks in Technology
See All in Technology
「頑張る」を「楽しむ」に変換する技術
tomoyakitaura
1
250
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
7
3.9k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
27
17k
手を動かしてレベルアップしよう!
maruto
0
260
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
困難を「一般解」で解く
fujiwara3
8
2.4k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
AIエージェント元年@日本生成AIユーザ会
shukob
1
260
事業を差別化する技術を生み出す技術
pyama86
2
550
CSPMとのつきあい方
nantokanare
0
100
データモデルYANGの処理系を再発明した話
tjmtrhs
0
370
【Forkwell】「正しく」失敗できるチームを作る──現場のリーダーのための恐怖と不安を乗り越える技術 - FL#83 / A team that can fail correctly by forkwell
i35_267
2
130
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Writing Fast Ruby
sferik
628
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing Experiences People Love
moore
140
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Speed Design
sergeychernyshev
28
820
Transcript
։ൃΛॿ͚Δ Vue.jsͷศརͳϥΠϒϥϦհ 2018/08/31 ٶ࡚×ԭೄ×ࢁܗ JSφΠτ ʂ ϑϦʔϥϯεWebΤϯδχΞ େ௩ਅݴ @mametra
<جຊใ> - େ௩ਅݴʢ໊͋ͩɿ͠Μ͛Μʣ - ϑϦʔϥϯεWebΤϯδχΞ - ౦ژੜ·Εҭͪɺ2017ΑΓٶ࡚ʹҠॅ - झຯΩϟϯϓͱϑΣεɺ࠷ۙαʔϑΟϯ͡Ί·ͨ͠ <ܦྺ>
- ৽ଔͰ࢜௨ʹೖࣾ͠3΄ͲγεςϜΤϯδχΞΛܦݧ - גࣜձࣾαʔνϑΟʔϧυ FAAVOࣄۀ෦ ʹస৬ - Ҭ×ΫϥυϑΝϯσΟϯά FAAVOͰWebΤϯδχΞͱͯ͠ࢀը ͠ɺPHPΛ৮Γ࢝ΊΔɻ - 3΄Ͳอकӡ༻Λܦݧ͠ɺ20183݄͔ΒϑϦʔϥϯεͱͯ͠׆ಈத <εΩϧ> - 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ʹΠϕϯτ͠·͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ