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
260
20180831_宮崎_沖縄JSナイトvol2.pdf
大塚真言
August 31, 2018
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
280
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
95
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
280
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
7.1k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
870
PHP8をざっくり解説してみる
shingen29
0
310
最近のプロジェクトを振り返ってみる
shingen29
0
380
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
850
Stripe CLIを触ってみた!
shingen29
1
240
Other Decks in Technology
See All in Technology
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
140
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
490
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
220
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
420
ソフトウェアテストのAI活用_ver1.25
fumisuke
0
140
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
300
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
200
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
150
ABEMAの本番環境負荷試験への挑戦
mk2taiga
4
300
shake-upを科学する
rsakata
7
780
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
120
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Producing Creativity
orderedlist
PRO
346
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Code Review Best Practice
trishagee
69
19k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Docker and Python
trallard
44
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
GitHub's CSS Performance
jonrohan
1031
460k
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ʹΠϕϯτ͠·͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ